Playful Emoticon

**PROMPT : LE DESIGN "PLAYFUL KINETIC" (Framework & Style)**

**Rôle :** Expert UI/UX Designer et Développeur React Creative.
**Style visuel :** "Playful Minimalist", "Clean Brutalism", "Notion-style but colorful".
**Stack :** React (Next.js), CSS natif (pour les animations précises).

**Objectif :** Générer une Landing Page complète basée sur une structure visuelle très spécifique décrite ci-dessous. Le contenu (texte/emojis) doit être adapté dynamiquement selon mes réponses.

**PROTOCOLE D'INITIALISATION :**
Ne génère rien maintenant. Pose-moi d'abord ces 4 questions :
1.  **Nom du projet**
2.  **Type de projet** (SaaS, Portfolio, App, etc.)
3.  **Sujet** (De quoi ça parle ?)
4.  **Langue**

---

**UNE FOIS LES RÉPONSES REÇUES, GÉNÈRE LE CODE (index.tsx + styles.css) EN SUIVANT CE CAHIER DES CHARGES VISUEL STRICT :**

### 1. Palette & Design System
*   **Couleurs Clés :**
    *   Jaune Acide (Accents/Boutons) : `#E3F53C`
    *   Rouge Vif (Carte Feature) : `#FF5A5A`
    *   Jaune Moutarde (Carte Feature) : `#FFC02D`
    *   Fond Gris Clair (Section Visuelle) : `#F2F4F8`
    *   Noir Profond : `#000000`
*   **Formes :** Tout est très arrondi. Boutons en "pillule" (`border-radius: 100px`). Cartes et sections avec `border-radius: 2rem` ou plus.
*   **Typographie :** Sans-serif, gras (Bold/ExtraBold pour les titres), propre (Inter ou System UI).

### 2. Structure de la Page (Section par Section)

**A. Navbar (Sticky & Glassmorphism)**
*   Position: `sticky top: 0`, fond blanc semi-transparent (`backdrop-filter: blur`).
*   Logo à gauche : Une icône ronde jaune acide (`#E3F53C`) avec une flèche ou un symbole simple, suivie du Nom du projet en gras.
*   Menu au centre : Liens simples.
*   Actions à droite : Bouton "Log in" (transparent, texte noir) + Bouton "Sign up" (Noir, texte blanc, forme pillule).
*   *Animation :* Apparition du haut vers le bas (`fadeInDown`).

**B. Hero Section (Typographie Interactive)**
*   **Titre H1 :** Très gros. Le texte doit contenir des éléments visuels intégrés **inline** (au milieu des phrases) :
    *   Un "Avatar Group" : 3 cercles/emojis qui se chevauchent.
    *   Des icônes flottantes : Emojis colorés qui remplacent des mots, avec une animation `pulse` ou `float`.
*   **CTA :** Deux boutons en dessous.
    *   1. Jaune Acide (`#E3F53C`), texte noir.
    *   2. Noir (`#000`), texte blanc.
*   *Animation :* Les éléments du titre apparaissent progressivement (`fadeInUp` avec délais).

**C. Section Visuelle (Le "Wow" Effect)**
*   Conteneur : Fond gris clair (`#F2F4F8`), coins très arrondis, padding généreux.
*   **Contenu : 3 Mockups de téléphones (Dessinés en CSS, pas d'images)**.
    *   Ce sont des `div` blanches, format portrait, `border-radius: 20px`, ombre portée légère.
    *   **Téléphone Gauche :** En retrait, un emoji "Salutation/Intro". *Animation :* Arrive depuis la gauche (`translateX(-100px)` vers `0`).
    *   **Téléphone Centre :** Mis en avant, **Bordure épaisse Jaune Acide** (`#E3F53C`). Contient une illustration abstraite CSS. *Animation :* "Pop-in" (Scale 0.5 vers 1) avec un léger rebond.
    *   **Téléphone Droite :** En retrait, un emoji "Fête/Succès". *Animation :* Arrive depuis la droite (`translateX(100px)` vers `0`).
    *   *Détail :* Ajoute des flèches ou lignes simples en arrière-plan pour relier les téléphones.

**D. Features Grid (Bento Style Coloré)**
*   Grille de 3 colonnes.
*   **Carte 1 :** Fond Blanc, Bordure grise fine. Pastille "1". Illustration CSS : Un "Switch ON" (bouton toggle).
*   **Carte 2 :** Fond **Rouge Vif** (`#FF5A5A`), Texte Blanc. Pastille "2". Illustration CSS : Une flèche ondulée ou courbe.
*   **Carte 3 :** Fond **Jaune Moutarde** (`#FFC02D`), Texte Noir. Pastille "3". Illustration CSS : Des blocs/briques empilés.
*   *Animation :* Apparition en cascade (`fadeInUp` avec délais progressifs).

**E. Footer (Conversation)**
*   Fond Noir complet. Texte Blanc.
*   **Gauche :** Interface de Chat simulée. 3 bulles de messages qui apparaissent une par une (`slideIn`).
    *   Bulle 1 (Utilisateur 1) : "C'est génial !"
    *   Bulle 2 (Toi) : "Merci !" (Aligné à droite)
    *   Bulle 3 (Utilisateur 2) : "Je veux tester."
*   **Droite :** Titre "Join the early birds" + Bouton CTA Jaune Acide.
*   *Décoration :* Une forme floue ("blob") colorée très subtile en arrière-plan.

### 3. Directives Techniques
*   Utilise `keyframe animations` en CSS pour tout :
    *   `float` (flottement haut/bas continu).
    *   `pulse` (léger zoom in/out continu).
    *   `popIn` (pour le téléphone central).
    *   `fadeInUp` / `fadeInDown`.
*   Soigne les délais (`animation-delay`) pour créer une chorégraphie fluide au chargement.
*   Code propre : `export default function...` pour React et un bloc CSS complet.

**Action :** Pose les 4 questions.