Creación de sitios web: Estrategia digital y presencia online

12 parsamo1200

Abrir en el editor Publica tu código

Creación de sitios web: Estrategia digital y presencia online

Recomendado

28 February 2023

Animación de texto con efecto Glitch

30 August 2024

Presentación de diapositivas de paralaje

18 October 2025

Ejemplo básico de botón HTML

HTML

<!--<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pertinentia.fr - Le Site Web Complet (Final)</title>

<section class="h-screen flex items-center justify-center flex-col relative z-10 bg-transparent">
    <p class="text-gray-500 tracking-widest text-sm mb-4 uppercase">P E R T I N E N T I A</p>
    <h1 class="text-5xl md:text-7xl font-title text-primary-dark mb-8 text-center">La Stratégie Digitale<br>qui vous rend Incontournable.</h1>
    <a href="#pinned-story" class="inline-block bg-primary-dark text-white py-3 px-8 text-lg font-bold rounded-full hover:bg-gray-700 transition-all duration-300 mt-6">
        [Créer ma vitrine]
    </a>
    <a href="#" class="text-primary-dark text-sm mt-4 hover:text-gray-500 transition-colors duration-300">
        [Voir des exemples]
    </a>
</section>

<section id="pinned-story" class="h-screen w-full flex items-center justify-center relative overflow-hidden bg-transparent">
    <div id="data-viz-area" class="z-0">
        <div id="viz-content" class="text-3xl font-title text-gray-500">INIT</div>
    </div>
    <div class="absolute w-full flex justify-center pointer-events-none px-4 max-w-4xl mx-auto z-10">
        <h2 id="txt-1" class="impact-text text-4xl md:text-6xl text-primary-dark">Votre client idéal vous google en ce moment.<br>Que voit-il ?</h2>
        <h2 id="txt-2" class="impact-text text-4xl md:text-5xl text-alert-dark tracking-tight">Pas de site = pas sérieux.<br>C’est brutal, mais c’est la réalité de 2025.</h2>
        <p id="txt-3" class="impact-text text-xl md:text-3xl text-primary-dark font-body">✓ POUVOIR ÊTRE TROUVÉ & SEDUIRE DE NOUVEAUX CLIENTS</p>
        <p id="txt-4" class="impact-text text-xl md:text-3xl text-primary-dark font-body">✓ FAIRE DÉCOUVRIR SON SAVOIR-FAIRE & OPTIMISER SA COMMUNICATION</p>
        <p id="txt-5" class="impact-text text-xl md:text-3xl text-alert-dark font-body">✓ GONFLER SON CHIFFRE D’AFFAIRE & RETOUR SUR INVESTISSEMENT</p>
        <h2 id="txt-6" class="impact-text text-4xl md:text-6xl text-success-light">UNE VITRINE ACCESSIBLE 24H/24, 7J/7 !</h2>
    </div>
</section>

<section id="pourquoi-site-section" class="min-h-[100vh] py-20 relative z-10 bg-soft-bg mt-[100vh]">
    <div class="max-w-7xl mx-auto px-4">
        <h2 class="text-center text-5xl font-title text-primary-dark mb-16">Votre site travaille quand vous dormez.</h2>
        <div id="data-reveal-grid" class="grid md:grid-cols-2 gap-12">
            <div class="data-card p-8 rounded-lg shadow-sm">
                <div class="flex justify-between items-center mb-4"><i class="fas fa-clock text-4xl text-success-light"></i><div class="text-4xl font-title text-primary-dark">24/7</div></div>
                <h3 class="text-3xl font-title text-primary-dark mb-2">Trouvable 24/7</h3>
                <p class="text-xl text-gray-600">Google ne dort jamais. Votre vitrine vous apporte de la visibilité même en vacances.</p>
                <div class="mt-4 h-2 bg-success-light/30 rounded-full overflow-hidden"><div id="bar-247" class="h-full bg-success-light" style="width: 0;"></div></div>
            </div>
            <div class="data-card p-8 rounded-lg shadow-sm">
                <div class="flex justify-between items-center mb-4"><i class="fas fa-certificate text-4xl text-success-light"></i><div class="text-4xl font-title text-primary-dark" id="credibility-score">0%</div></div>
                <h3 class="text-3xl font-title text-primary-dark mb-2">Crédibilité instantanée</h3>
                <p class="text-xl text-gray-600">Amateur ou pro ? Ça se voit en 5 secondes. Un site professionnel valide votre expertise.</p>
            </div>
            <div class="data-card p-8 rounded-lg shadow-sm">
                <div class="flex justify-center mb-4"><i class="fas fa-robot text-4xl text-success-light"></i></div>
                <h3 class="text-3xl font-title text-primary-dark mb-2">Automatisation intelligente</h3>
                <p class="text-xl text-gray-600">L’IA répond aux questions simples et qualifie les prospects avant de vous les transférer.</p>
                <div class="flex justify-center mt-4 h-16 items-end">
                    <div class="growth-bar h-1/4" id="bar-auto-1"></div><div class="growth-bar h-2/4" id="bar-auto-2"></div><div class="growth-bar h-3/4" id="bar-auto-3"></div><div class="growth-bar h-full" id="bar-auto-4"></div>
                </div>
            </div>
            <div class="data-card p-8 rounded-lg shadow-sm">
                <div class="flex justify-between items-center mb-4"><i class="fas fa-chart-line text-4xl text-success-light"></i><div class="text-4xl font-title text-primary-dark" id="roi-value">0%</div></div>
                <h3 class="text-3xl font-title text-primary-dark mb-2">ROI mesurable</h3>
                <p class="text-xl text-gray-600">Investissement 3 000 €, premier client gagné 15 000 €. Une machine à profit mesurable.</p>
            </div>
        </div>
    </div>
</section>

<section id="regles-changed-section" class="min-h-[400vh] relative bg-white">
    <div id="regles-pin-container" class="sticky top-0 h-screen overflow-hidden bg-transparent flex items-center justify-center">
        <h3 class="absolute top-10 text-center w-full text-5xl font-title text-primary-dark z-20">2025 : Les règles ont changé.</h3>
        <div class="relative w-full max-w-4xl h-4/5 flex items-center justify-center p-8">
            <div id="rule-1" class="rule-card p-12 shadow-md absolute flex flex-col justify-center">
                <i class="fas fa-chart-bar text-6xl text-success-light mb-6"></i>
                <h4 class="text-3xl font-title text-primary-dark mb-4">Data & Performance</h4>
                <p class="text-xl text-gray-600">Savoir, c’est pouvoir. Sans données, l’optimisation est aveugle. (curiosité / empowerment)</p>
            </div>
            <div id="rule-2" class="rule-card p-12 shadow-md absolute flex flex-col justify-center">
                <i class="fas fa-mobile-alt text-6xl text-alert-dark mb-6"></i>
                <h4 class="text-3xl font-title text-primary-dark mb-4">Mobile-first</h4>
                <p class="text-xl text-gray-600">Site pas responsive = client perdu. C’est la règle de base aujourd'hui. (peur / tension)</p>
            </div>
            <div id="rule-3" class="rule-card p-12 shadow-md absolute flex flex-col justify-center">
                <i class="fas fa-bolt text-6xl text-alert-dark mb-6"></i>
                <h4 class="text-3xl font-title text-primary-dark mb-4">Vitesse</h4>
                <p class="text-xl text-gray-600">2 secondes pour convaincre. Le temps de chargement est une question de crédibilité. (peur / urgence)</p>
            </div>
            <div id="rule-4" class="rule-card p-12 shadow-md absolute flex flex-col justify-center">
                <i class="fas fa-heart text-6xl text-success-light mb-6"></i>
                <h4 class="text-3xl font-title text-primary-dark mb-4">Authenticité</h4>
                <p class="text-xl text-gray-600">Les clients veulent du vrai. Votre personnalité doit transparaître dans le design. (solution / aspiration)</p>
            </div>
        </div>
    </div>
</section>

<section id="benefices-concrets-section" class="py-20 bg-soft-bg relative z-10">
    <div class="max-w-4xl mx-auto px-4">
        <h2 class="text-center text-5xl font-title text-primary-dark mb-16">Ce qu’un site bien pensé vous apporte vraiment.</h2>
        <ul id="benefices-list" class="space-y-4">
            <li class="benefit-item text-xl font-body text-primary-dark"><i class="fas fa-check-circle text-success-light mr-4"></i> Plus de clients qualifiés = moins de prospection à froid</li>
            <li class="benefit-item text-xl font-body text-primary-dark"><i class="fas fa-check-circle text-success-light mr-4"></i> Arrêtez de répéter les mêmes infos 50 fois par semaine</li>
            <li class="benefit-item text-xl font-body text-primary-dark"><i class="fas fa-check-circle text-success-light mr-4"></i> Vos réalisations parlent plus fort que n’importe quel discours</li>
            <li class="benefit-item text-xl font-body text-primary-dark"><i class="fas fa-check-circle text-success-light mr-4"></i> Optimisez ce qui marche. Tuez ce qui ne marche pas</li>
            <li class="benefit-item text-xl font-body text-primary-dark"><i class="fas fa-check-circle text-success-light mr-4"></i> Chaque clic est un euro potentiel</li>
        </ul>
    </div>
</section>

<section id="mythes-section" class="min-h-[300vh] py-20 relative z-10 bg-white">
    <h2 class="text-center text-5xl font-title text-alert-dark mb-20">Stop aux excuses. Place aux résultats.</h2>
    <div class="max-w-6xl mx-auto px-4 grid md:grid-cols-3 gap-8 flip-container">
        <div id="myth-1" class="flip-card mx-auto">
            <div class="flip-face flip-front"><i class="fas fa-comments text-6xl text-alert-dark mb-6"></i><h3 class="text-2xl font-title text-primary-dark mb-2">« Le bouche-à-oreille suffit »</h3><p class="text-lg text-gray-600 mt-4">Internet vous dépasse si vous restez passif.</p></div>
            <div class="flip-face flip-back"><i class="fas fa-rocket text-6xl text-success-light mb-6"></i><h3 class="text-2xl font-title text-success-light mb-2">Vérité : Un site bien pensé vous place DEVANT.</h3><p class="text-lg text-primary-dark mt-4">Le digital démultiplie l'effet bouche-à-oreille, il ne le remplace pas.</p></div>
        </div>
        <div id="myth-2" class="flip-card mx-auto">
            <div class="flip-face flip-front"><i class="fas fa-dollar-sign text-6xl text-alert-dark mb-6"></i><h3 class="text-2xl font-title text-primary-dark mb-2">« C’est trop cher »</h3><p class="text-lg text-gray-600 mt-4">C’est une dépense si ça ne vous rapporte rien. C'est un investissement si vous vendez.</p></div>
            <div class="flip-face flip-back"><i class="fas fa-piggy-bank text-6xl text-success-light mb-6"></i><h3 class="text-2xl font-title text-success-light mb-2">Vérité : Le ROI est mesurable.</h3><p class="text-lg text-primary-dark mt-4">Le Retour sur Investissement est tangible. Comptez le nombre de prospects qualifiés.</p></div>
        </div>
        <div id="myth-3" class="flip-card mx-auto">
            <div class="flip-face flip-front"><i class="fas fa-hourglass-half text-6xl text-alert-dark mb-6"></i><h3 class="text-2xl font-title text-primary-dark mb-2">« Je n’ai pas le temps »</h3><p class="text-lg text-gray-600 mt-4">Pendant que vous hésitez, vos concurrents avancent. L'inaction coûte cher.</p></div>
            <div class="flip-face flip-back"><i class="fas fa-concierge-bell text-6xl text-success-light mb-6"></i><h3 class="text-2xl font-title text-success-light mb-2">Vérité : Nous gérons pour vous.</h3><p class="text-lg text-primary-dark mt-4">Vous vous concentrez sur votre métier, nous gérons votre visibilité de A à Z.</p></div>
        </div>
    </div>
</section>

<section id="urgence-section" class="py-20 relative z-10 bg-soft-bg">
    <div class="max-w-4xl mx-auto text-center px-4">
        <h2 class="text-5xl font-title text-alert-dark mb-8">Marché saturé = celui qui se démarque gagne tout.</h2>
        <p class="text-2xl font-body text-primary-dark mb-4">Votre concurrent a déjà un site qui claque.</p>
        <p class="text-2xl font-body text-primary-dark mb-4">Votre CA stagne ? Votre visibilité aussi.</p>
        <p class="text-3xl font-body text-alert-dark mb-12">2025 : soit vous existez en ligne, soit vous n’existez pas.</p>
        
        <a href="#" id="cta-urgence" class="inline-block bg-primary-dark text-white py-4 px-12 text-xl font-bold rounded-full hover:bg-gray-700 transition-all duration-300">
            Je veux être trouvable
        </a>
    </div>
</section>

<section id="preuve-sociale-section" class="py-20 relative z-10 bg-white">
    <h2 class="text-center text-5xl font-title text-primary-dark mb-16">Ils ont franchi le pas. Ça change tout.</h2>
    <div id="testimonial-container" class="max-w-6xl mx-auto px-4 grid md:grid-cols-3 gap-8">
        <div class="testimonial-card p-6 rounded-lg shadow-sm">
            <p class="text-3xl font-title text-primary-dark mb-4">« Trois nouveaux clients en un mois. »</p>
            <p class="text-lg text-gray-600">— Marc D.</p>
        </div>
        <div class="testimonial-card p-6 rounded-lg shadow-sm">
            <p class="text-3xl font-title text-primary-dark mb-4">« Mon site travaille plus que moi. »</p>
            <p class="text-lg text-gray-600">— Sophie L.</p>
        </div>
        <div class="testimonial-card p-6 rounded-lg shadow-sm">
            <p class="text-3xl font-title text-primary-dark mb-4">« Enfin pris au sérieux par les grands comptes. »</p>
            <p class="text-lg text-gray-600">— Thomas B.</p>
        </div>
    </div>
</section>

<section id="comment-ca-marche-section" class="py-20 relative z-10 bg-soft-bg">
    <div class="max-w-6xl mx-auto px-4">
        <h2 class="text-center text-5xl font-title text-primary-dark mb-16">Simple. Efficace. Sans prise de tête.</h2>
        <div id="etapes-wrapper" class="grid md:grid-cols-3 gap-8">
            <div id="etape-1" class="text-center p-8 bg-white rounded-xl shadow-lg border border-gray-100">
                <i class="fas fa-comments text-5xl text-success-light mb-4"></i>
                <h3 class="text-2xl font-title text-primary-dark mb-2">1. On Discute</h3>
                <p class="text-gray-600">Clarifions vos objectifs et votre public cible (clarté / confort).</p>
            </div>
            <div id="etape-2" class="text-center p-8 bg-white rounded-xl shadow-lg border border-gray-100">
                <i class="fas fa-code text-5xl text-success-light mb-4"></i>
                <h3 class="text-2xl font-title text-primary-dark mb-2">2. On Construit</h3>
                <p class="text-gray-600">Développement du site premium avec GSAP et intégration du contenu (anticipation / contrôle).</p>
            </div>
            <div id="etape-3" class="text-center p-8 bg-white rounded-xl shadow-lg border-gray-100">
                <i class="fas fa-rocket text-5xl text-success-light mb-4"></i>
                <h3 class="text-2xl font-title text-primary-dark mb-2">3. Vous Décrochez</h3>
                <p class="text-gray-600">Le site est en ligne et commence immédiatement à générer des leads (désir / réussite).</p>
            </div>
        </div>
    </div>
</section>

<section id="faq-section" class="py-20 relative z-10 bg-white">
    <div class="max-w-4xl mx-auto px-4">
        <h2 class="text-center text-5xl font-title text-primary-dark mb-16">Les vraies questions.</h2>
        <dl id="faq-list" class="space-y-6">
            <div class="faq-item p-4 border-l-4 border-success-light bg-soft-bg rounded-r-md">
                <dt class="text-xl font-title text-primary-dark">Combien de temps ?</dt>
                <dd class="text-gray-600 mt-1">2 à 4 semaines. (confiance)</dd>
            </div>
            <div class="faq-item p-4 border-l-4 border-success-light bg-soft-bg rounded-r-md">
                <dt class="text-xl font-title text-primary-dark">Quel budget ?</dt>
                <dd class="text-gray-600 mt-1">À partir de 2 500 €. (transparence / soulagement)</dd>
            </div>
            <div class="faq-item p-4 border-l-4 border-success-light bg-soft-bg rounded-r-md">
                <dt class="text-xl font-title text-primary-dark">Je dois gérer le site après ?</dt>
                <dd class="text-gray-600 mt-1">Seulement si vous voulez. (confort)</dd>
            </div>
            <div class="faq-item p-4 border-l-4 border-success-light bg-soft-bg rounded-r-md">
                <dt class="text-xl font-title text-primary-dark">SEO intégré ?</dt>
                <dd class="text-gray-600 mt-1">Évidemment. (assurance)</dd>
            </div>
        </dl>
    </div>
</section>

<section id="closing-section" class="py-20 relative z-10 bg-primary-dark text-white">
    <div class="max-w-4xl mx-auto text-center px-4">
        <h2 class="text-6xl font-title mb-8 text-success-light">Votre prochaine opportunité vous cherche. Soyez trouvable.</h2>
        <p class="text-3xl font-body mb-4">Stop planifier. Start exister.</p>
        <p class="text-xl font-body mb-12 text-alert-dark">Chaque jour sans vitrine est un jour où vos concurrents prennent de l’avance.</p>
        
        <a href="#" id="cta-final" class="inline-block bg-success-light text-primary-dark py-4 px-12 text-2xl font-bold rounded-full hover:bg-white transition-all duration-300">
            Créer ma présence en ligne maintenant
        </a>
    </div>
</section>

</body>
</html> Replace with your HTML Code 
  (Leave empty if not needed) -->

CSS

/*
* Feuille de style personnalisée pour Pertinentia.fr
* Contient les styles non-Tailwind et les helper classes
*/

/* Styles du Moteur Scroll-Story (Adapté) */
.morphing-shape {
    border: 1px solid #94A3B8;
}

/* Fond de grille pour SECTION 1 (Ajout de densité visuelle) */
#pinned-story::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
    background-size: 50px 50px;
    opacity: 0.5;
    z-index: 0;
}

/* Styles pour SECTION 3 (Pinning Séquencé) */
.rule-card {
    background-color: #F8FAFC;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s;
}
.rule-card:nth-child(even) {
    background-color: #FAFAFC; /* Légère variation pour l'effet d'empilement */
}

/* Styles des cartes Mythe/Témoignage */
.flip-card {
    height: 320px;
}
.flip-face {
    border: 1px solid rgba(0, 0, 0, 0.1);
}
.flip-back {
    background-color: #DBEAFE; /* Bleu clair pour la solution */
    color: #1E293B;
}

/* Helper pour GSAP */
.gsap-active-border {
    border-color: #38BDF8 !important;
    box-shadow: 0 0 20px rgba(56, 189, 248, 0.5);
}/* Replace with your CSS Code 
  (Leave empty if not needed) */

JS

// --- FICHIER D'APPLICATION JAVASCRIPT (app.js) ---

gsap.registerPlugin(ScrollTrigger);

// --- Logique GSAP SECTION 1 (Scroll Story) ---
const initGsapScrollStory = () => { 
    let tl = gsap.timeline({
        scrollTrigger: {
            trigger: "#pinned-story",
            start: "top top",
            end: "+=4500", 
            pin: true,
            scrub: 1,
            anticipatePin: 1
        }
    });

const viz = document.getElementById('data-viz-area');
    const vizContent = document.getElementById('viz-content');

// SÉQUENCE 1 : Question (Neutre)
    tl.to(viz, { rotation: 0, scale: 1, duration: 0.5 })
      .to(vizContent, { innerHTML: "93%", duration: 0.5, color: "#1e293b" }, "<")
      .to("#txt-1", { opacity: 1, y: 0, duration: 0.5 }, "<") 
      .to({}, { duration: 0.8 }) 
      .to("#txt-1", { opacity: 0, y: -50, filter: "blur(5px)", duration: 0.5 })
      .to(viz, { scale: 0.5, duration: 0.5 }, "<");

// SÉQUENCE 2 : Choc (Pas de site = pas sérieux)
    tl.to(viz, { 
        rotation: 180, borderColor: "#B91C1C", backgroundColor: "rgba(185, 28, 28, 0.1)", boxShadow: "0 0 50px rgba(185, 28, 28, 0.3)", duration: 0.5 
      })
      .to(vizContent, { innerHTML: "FAILURE", color: "#B91C1C", rotation: 360, duration: 0.5 }, "<")
      .to("#txt-2", { opacity: 1, y: 0, scale: 1, duration: 0.5 }, "<0.2")
      .to({}, { duration: 1.0 }) 
      .to("#txt-2", { opacity: 0, scale: 1.2, duration: 0.5 });

// SÉQUENCE 3 : Solution 1 (Trouvable)
    tl.to(viz, { rotation: 0, scale: 1.5, borderColor: "#38BDF8", duration: 0.5 })
      .to(vizContent, { innerHTML: "GROWTH", color: "#38BDF8", rotation: 0, duration: 0.5 }, "<")
      .to("#txt-3", { opacity: 1, y: 0, duration: 0.5 }, "<")
      .to({}, { duration: 0.8 })
      .to("#txt-3", { opacity: 0, y: -50, duration: 0.5 });

// SÉQUENCE 4 : Solution 2 (Chiffre d'Affaire)
    tl.to(viz, { scale: 1, rotation: 720, duration: 0.5 })
      .to(vizContent, { innerHTML: "+500%", color: "#38BDF8", duration: 0.5 }, "<")
      .to("#txt-4", { opacity: 1, y: 0, duration: 0.5 }, "<")
      .to({}, { duration: 0.8 })
      .to("#txt-4", { opacity: 0, y: -50, duration: 0.5 });
    
    // SÉQUENCE 5 : Le CTA Final (Résolution)
    tl.to(viz, { 
        scale: 2.5, rotation: 0, borderColor: "#38BDF8", boxShadow: "0 0 20px #38BDF8", duration: 1 
      })
      .to("#txt-5", { opacity: 1, y: 0, duration: 0.5 }, "<")
      .to({}, { duration: 0.8 })
      .to("#txt-5", { opacity: 0, y: -50, duration: 0.5 });

// SÉQUENCE 6 : Le Résultat Final
    tl.to(viz, { scale: 0, duration: 0.5 })
      .to("#txt-6", { opacity: 1, y: 0, duration: 1 }, "-=0.2")
      .to({}, { duration: 1.0 });
};

// --- Logique GSAP SECTION 2 (Data Reveal) ---
const initGsapSection2 = () => { 
    const cards = gsap.utils.toArray("#pourquoi-site-section .data-card");
    
    gsap.timeline({
        scrollTrigger: {
            trigger: "#pourquoi-site-section",
            start: "top 70%",
            toggleActions: "play none none none",
        }
    })
    .from(cards, {
        opacity: 0, y: 50, scale: 0.95, duration: 1, stagger: 0.3, ease: "power3.out"
    })
    .then(() => {
        gsap.to("#bar-247", { width: "100%", duration: 1.5, ease: "power2.out" });
        gsap.to("#credibility-score", { innerHTML: "100%", duration: 1.5, snap: "innerHTML", ease: "none" });
        gsap.to(".growth-bar", { scaleY: 1, stagger: 0.1, duration: 1, ease: "power1.out" });
        gsap.to("#roi-value", { innerHTML: "500%", duration: 2, snap: "innerHTML", ease: "none" });
    });
};

// --- Logique GSAP SECTION 3 (Vertical Pinning Séquencé) ---
const initGsapSection3 = () => {
    const rulesContainer = document.getElementById('regles-changed-section');
    const rulesCards = gsap.utils.toArray('#regles-changed-section .rule-card');
    
    let tl = gsap.timeline({
        scrollTrigger: {
            trigger: rulesContainer,
            pin: true,
            scrub: 1,
            start: "top top",
            end: `+=${rulesCards.length * 1500}px`, 
        }
    });

rulesCards.forEach((card, index) => {
        // Entrée : Vient de la gauche, glisse vers le centre
        tl.fromTo(card, 
            { opacity: 0, x: -100, scale: 0.95 },
            { opacity: 1, x: 0, scale: 1, duration: 1.5, ease: "power2.out" }
        );
        // Maintien
        tl.to(card, { duration: 1 });
        // Sortie : Glisse vers la droite
        tl.to(card, {
            opacity: 0,
            x: 100,
            scale: 0.95,
            duration: 0.5,
            ease: "power1.in",
        });
    });
};

// --- Logique GSAP SECTION 4 (Bénéfices) ---
const initGsapSection4 = () => {
    const benefices = gsap.utils.toArray('.benefit-item');
    
    gsap.from(benefices, {
        y: 30, opacity: 0, duration: 0.8, stagger: 0.3, ease: "power2.out",
        scrollTrigger: {
            trigger: "#benefices-concrets-section",
            start: "top 70%",
            toggleActions: "play none none none"
        }
    });
};

// --- Logique GSAP Section 5 (3D Flip) ---
const initGsapSection5 = () => {
    const mythCards = gsap.utils.toArray('#mythes-section .flip-card');
    
    mythCards.forEach((card) => {
        gsap.to(card, {
            rotationY: 180, 
            duration: 2.5, 
            ease: "power2.inOut",
            scrollTrigger: {
                trigger: card,
                start: "top 80%", 
                end: "top 20%", 
                scrub: 1, 
                toggleActions: "play none none reverse",
            }
        });
    });
};

// --- Logique GSAP SECTION 7 (Témoignages) ---
const initGsapSection7 = () => {
    const cards = gsap.utils.toArray('.testimonial-card');

gsap.from(cards, {
        y: 50, opacity: 0, duration: 1, stagger: 0.3, ease: "power3.out",
        scrollTrigger: {
            trigger: "#testimonial-container",
            start: "top 70%",
            toggleActions: "play none none none"
        }
    });
};

// --- Logique GSAP SECTION 8 (Comment Ça Marche) ---
const initGsapSection8 = () => {
    const etapes = gsap.utils.toArray('#etapes-wrapper > div');

gsap.from(etapes, {
        y: 50, opacity: 0, duration: 1, stagger: 0.3, ease: "power3.out",
        scrollTrigger: {
            trigger: "#comment-ca-marche-section",
            start: "top 70%",
            toggleActions: "play none none none"
        }
    });
};

// --- Logique GSAP SECTION 9 (FAQ) ---
const initGsapSection9 = () => {
    const faqs = gsap.utils.toArray('.faq-item');

gsap.from(faqs, {
        x: -50, opacity: 0, duration: 0.8, stagger: 0.2, ease: "power2.out",
        scrollTrigger: {
            trigger: "#faq-section",
            start: "top 80%",
            toggleActions: "play none none none"
        }
    });
};

// --- LANCEMENT DE TOUTES LES ANIMATIONS ---
window.addEventListener('load', () => {
    gsap.registerPlugin(ScrollTrigger);
    
    // Le Pinning doit se faire en premier (avant le reste du flow)
    initGsapScrollStory(); 
    initGsapSection3();

// Les animations de révélation de contenu (Data Viz, Staggered Reveals)
    initGsapSection2();
    initGsapSection4();
    initGsapSection5(); 
    initGsapSection7(); 
    initGsapSection8(); 
    initGsapSection9();
});/* Replace with your JS Code 
  (Leave empty if not needed) */

Recomendado

Animación de texto con efecto Glitch

Presentación de diapositivas de paralaje

Ejemplo básico de botón HTML

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS