Copie le prompt.

Prompt pour recréer cette landing page :

Construis une landing page portfolio dark mode en une seule page avec
React + Vite + Tailwind CSS + TypeScript + GSAP + Framer Motion + hls.js.

## 01. OBJECTIF
Recréer la landing page des templates HYLIOX avec un rendu premium,
cinématographique et des interactions fluides.

## 02. STACK TECHNIQUE
- React 18 + Vite + TypeScript
- Tailwind CSS (configuration personnalisée)
- GSAP (ScrollTrigger + animations)
- Framer Motion (micro-interactions)
- hls.js (pour la vidéo d'arrière-plan si nécessaire)

## 03. DESIGN SYSTEM
- Arrière-plan : #0A0A0A (Obsidian)
- Couleur principale : #D4FF4F (Acid Lime)
- Texte principal : #FAFAFA (blanc chaud)
- Texte secondaire : rgba(250,250,250,0.64)
- Bordure : rgba(255,255,255,0.06)
- Surface : rgba(255,255,255,0.03)
- Police sans-serif : Geist (ou Inter en fallback)
- Police display : Instrument Serif (italique)
- Police mono : Geist Mono (ou JetBrains Mono)
- Rayon : 16px
- Verre : backdrop-blur-xl sur rgba(255,255,255,0.04)

### Échelle typographique
Display (Serif Italique) : clamp(48px, 7vw, 88px)
H1 : clamp(36px, 5vw, 64px)
H2 : clamp(24px, 3vw, 32px)
H3 : clamp(20px, 2.5vw, 28px)
Corps : 16px / 1.6
Mono : 13px / 1.7
Tracking eyebrow : 0.4em

### Mise en page
Largeur maximale du contenu : 1280px
Padding vertical des sections : clamp(80px, 10vw, 160px)
Padding du conteneur : 24px
Grille : 12 colonnes, gap 24px

## 04. STRUCTURE DE LA PAGE
1. Écran de chargement (monogramme shimmer 3s, disparition ease-out)
2. Hero (vidéo HLS plein écran en fond, titre centré)
3. Showcase des templates (bento asymétrique de 8 cartes)
4. Comment ça marche (3 étapes, alignement alterné)
5. Preuve sociale + mur de témoignages
6. Tarifs (3 offres, accent lime au centre)
7. FAQ accordéon (8 questions, transition de hauteur fluide)
8. CTA final (marquee + bouton lime)
9. Footer (3 colonnes + symbole de marque)

## 05. HERO
- Eyebrow : "TEMPLATES · 2026" (mono, lime, uppercase, tracking 0.4em)
- Titre mélangeant sans-serif + serif italique :
  "Publie un site qui
  ne donne pas l'impression d'avoir été fait par une IA."
- Sous-titre : "8 templates premium. Prêts pour Cursor / v0 / Lovable."
- CTA principal : "Voir les templates →" (fond lime)
- CTA secondaire : "Voir la méthode" (contour ghost)
- Arrière-plan : vidéo hls.js avec overlay noir à 50 %
- Couche subtile de particules de poussière au-dessus
- Le hero occupe 100svh, contenu centré

## 06. GRILLE BENTO
- 8 cartes dans une grille asymétrique
- Base 12 colonnes, cartes sur 4/6/8 colonnes selon la rangée
- Chaque carte : rayon 16px, surface glass, élévation de 6px au hover
- Contenu : miniature (16:10), titre, sous-titre sur une ligne
- Accent lime sur la première carte (mise en avant)

## 07. COMMENT ÇA MARCHE
- 3 étapes numérotées 01 / 02 / 03 en mono lime
- Chaque étape : grand H2 sans-serif, paragraphe, image de support
- Alterner texte-image / image-texte entre les rangées
- Variante sticky-pinned au scroll sur desktop

## 08. TARIFS
- 3 offres : Express (297 €), Standard (597 €), Custom (1 499 €)
- Carte centrale mise en avant (bordure lime + glow doux)
- Chaque carte : eyebrow, nom, prix, liste de fonctionnalités, CTA
- Toutes les coches en lime, toutes les croix atténuées
- Note de bas de section : "Tous les prix sont uniques, sans abonnement"

## 09. FAQ
- Accordéon de 8 questions
- Question en sans medium 18px
- Réponse couleur body 16px / 1.6
- État ouvert : bordure gauche lime de 2px
- Transition fluide hauteur + opacité (300ms ease-out)

## 10. CTA FINAL
- Eyebrow + titre display :
  "Prêt à publier ?
  Ou tu scrolles encore des références ?"
- Un seul bouton lime : "Voir les templates →"
- Bande marquee dessous : "CRÉÉ AVEC L'IA · PAS PAR L'IA · " (boucle infinie)
- Arrière-plan : glow radial lime subtil centré en bas

## 11. INTERACTIONS
- Chargement : monogramme 3s puis disparition ease-out
- Scroll : GSAP ScrollTrigger pour révéler les sections
- Hover : élévation des cartes, léger scale des boutons (1.02)
- Marquee : scroll CSS infini, pause au hover
- Mobile : désactiver la parallaxe, simplifier les états hover

## 12. ACCESSIBILITÉ
- Tous les éléments interactifs sont accessibles au clavier
- Focus rings : 2px lime avec offset
- Contraste : niveau AA pour tous les textes body
- prefers-reduced-motion : désactiver les animations déclenchées au scroll
- aria-label sur tous les boutons composés uniquement d'une icône

## 13. PERFORMANCE
- Lazy-load toutes les images sous la ligne de flottaison
- Utiliser des formats nouvelle génération (AVIF / WebP)
- Inline du CSS critique above-the-fold
- Différer le JavaScript non critique
- Budget Lighthouse : LCP < 2.5s, CLS < 0.05