sucupira
a6f359559b
- IntroLoader : cérémonie d'entrée (flag-bar, monogramme, titrage), 1re visite, skippable - Lenis au layout (ticker GSAP, imports dynamiques) + ancres interceptées - Hero : titrage oversized en masques, filets drapeau en parallaxe, sortie scrubée (scroll-driven CSS) - Reveal syncopé gwoka (use:reveal) sur 83 éléments, flag chips, icônes pop - Marquee kréyòl (tagline + valeurs), pause au survol - Hover craft : boutons à balayage or, nav soulignée + section active, pochettes DJANGOKAM en wipe clip-path + tilt 3D (use:tilt) avec reflet or - Gate unique prefers-reduced-motion partout ; contenu complet sans JS - Lighthouse mobile 91/100/100/100 — JS initial 69 Ko gzip (budget 170 Ko)
46 lines
1.1 KiB
Svelte
46 lines
1.1 KiB
Svelte
<script lang="ts">
|
|
import FlagChip from '$lib/components/motion/FlagChip.svelte';
|
|
import KineticText from '$lib/components/motion/KineticText.svelte';
|
|
import type { Bundle, Locale } from '$lib/i18n';
|
|
import HostingVillage from './HostingVillage.svelte';
|
|
|
|
let { t, locale }: { t: Bundle; locale: Locale } = $props();
|
|
</script>
|
|
|
|
<section id="services-libres" class="section">
|
|
<div class="container">
|
|
<FlagChip />
|
|
<h2 class="section-title">
|
|
<KineticText as="span" text={t.services.section_title} /> 
|
|
<span class="accent-text"
|
|
><KineticText as="span" text={t.services.section_title_accent} /></span
|
|
>
|
|
</h2>
|
|
<p class="section-subtitle">{t.services.section_subtitle}</p>
|
|
|
|
<!-- Scène « village créole » : remplace la grille de cards du legacy
|
|
(composant autonome, fallback grille accessible inclus). -->
|
|
<HostingVillage {t} {locale} />
|
|
</div>
|
|
</section>
|
|
|
|
<style>
|
|
section {
|
|
background: var(--noir-profond);
|
|
}
|
|
|
|
.section-title {
|
|
text-align: center;
|
|
}
|
|
|
|
.accent-text {
|
|
color: var(--or-oki);
|
|
}
|
|
|
|
.section-subtitle {
|
|
text-align: center;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
</style>
|