{{ template "headers.html" . }}


    <header class="bg-white shadow-sm">
        <div class="container flex justify-between items-center px-6 py-4 mx-auto">
            <a href="#" class="text-2xl font-bold text-blue-600">CARD.PM</a>
            <nav>
                <a href="#features" class="mx-3 text-gray-600 hover:text-blue-600">Fonctionnalités</a>
                <a href="#testimonials" class="mx-3 text-gray-600 hover:text-blue-600">Témoignages</a>
                <a href="#pricing" class="mx-3 text-gray-600 hover:text-blue-600">Prix</a>
                <a href="#faq" class="mx-3 text-gray-600 hover:text-blue-600">FAQ</a>
                <a href="#contact" class="mx-3 text-gray-600 hover:text-blue-600">Contact</a>
            </nav>
            <a href="#signup" class="px-4 py-2 text-white bg-blue-600 rounded shadow hover:bg-blue-700">Commencez votre essai gratuit</a>
        </div>
    </header>

    <!-- Hero Section -->
    <section class="h-screen bg-center bg-cover" style="background-image: url('background.jpg');">
        <div class="container px-6 py-32 mx-auto text-center">
            <h1 class="mb-4 text-4xl font-bold text-white">Dites Adieu aux Cartes de Visite Papier et Bonjour à l'Innovation !</h1>
            <p class="mb-8 text-xl text-white">Découvrez comment CARD.PM transforme votre réseau professionnel en un clic.</p>
            <a href="#signup" class="px-6 py-3 text-white bg-blue-600 rounded shadow hover:bg-blue-700">Commencez votre essai gratuit</a>
        </div>
    </section>

    <!-- Section Problème -->
    <section class="py-20 bg-gray-100">
        <div class="container px-6 mx-auto">
            <h2 class="mb-12 text-3xl font-bold text-center">Les Inconvénients des Cartes de Visite Papier</h2>
            <div class="space-y-6">
                <p class="text-xl">- Ruptures de stock</p>
                <p class="text-xl">- Informations obsolètes</p>
                <p class="text-xl">- Coûts élevés et gaspillage</p>
                <p class="text-xl">80 % des cartes de visite papier sont jetées ou perdues en moins d’une semaine. Passez au digital avec CARD.PM pour une solution plus durable et efficace.</p>
            </div>
        </div>
    </section>

    <!-- Section Solution -->
    <section class="py-20 bg-white">
        <div class="container px-6 mx-auto">
            <h2 class="mb-12 text-3xl font-bold text-center">La Révolution de la Carte de Visite Digitale</h2>
            <p class="mb-12 text-xl text-center">CARD.PM est une carte de visite interactive, partageable via SMS, email, QR code, NFC et bien plus encore. Toujours à jour et accessible de n’importe où.</p>
            <div class="flex justify-center">
                <img src="demo-video-thumbnail.jpg" alt="Démonstration de CARD.PM" class="rounded shadow-lg">
            </div>
        </div>
    </section>

    <!-- Section Fonctionnalités et Avantages -->
    <section class="py-20 bg-gray-100" id="features">
        <div class="container px-6 mx-auto">
            <h2 class="mb-12 text-3xl font-bold text-center">Pourquoi Choisir CARD.PM ?</h2>
            <div class="space-y-6">
                <div class="flex items-start text-xl">
                    <span class="mr-2 text-blue-600">✔</span> Partage Illimité et Facile : Diffusez vos coordonnées par SMS, email, QR code, NFC, et plus encore.
                </div>
                <div class="flex items-start text-xl">
                    <span class="mr-2 text-blue-600">✔</span> Gestion et Mise à Jour en Temps Réel : Modifiez vos informations à tout moment, de n’importe où.
                </div>
                <div class="flex items-start text-xl">
                    <span class="mr-2 text-blue-600">✔</span> Impact Écologique Réduit : Adoptez une solution verte en réduisant le gaspillage de papier.
                </div>
                <div class="flex items-start text-xl">
                    <span class="mr-2 text-blue-600">✔</span> Intégration avec Vos Outils de Communication : Utilisez vos cartes dans vos signatures d'email, campagnes de marketing, et réseaux sociaux.
                </div>
            </div>
        </div>
    </section>

    <!-- Section Témoignages et Études de Cas -->
    <section class="py-20 bg-white" id="testimonials">
        <div class="container px-6 mx-auto">
            <h2 class="mb-12 text-3xl font-bold text-center">Ce Que Disent Nos Utilisateurs</h2>
            <div class="space-y-12">
                <blockquote class="text-xl italic text-center">
                    <p>“Grâce à CARD.PM, nos cartes sont toujours à jour et nous économisons sur les coûts d’impression.”</p>
                    <footer class="mt-4">- Agence XYZ</footer>
                </blockquote>
                <blockquote class="text-xl italic text-center">
                    <p>“Une solution écologique et innovante qui impressionne nos clients à chaque échange.”</p>
                    <footer class="mt-4">- Entreprise ABC</footer>
                </blockquote>
            </div>
        </div>
    </section>

    <!-- Section Comparaison Avant/Après -->
    <section class="py-20 bg-gray-100">
        <div class="container px-6 mx-auto">
            <h2 class="mb-12 text-3xl font-bold text-center">Avant et Après CARD.PM</h2>
            <div class="flex flex-col justify-center items-center space-y-6 md:flex-row md:space-y-0 md:space-x-12">
                <div class="text-center">
                    <h3 class="mb-4 text-2xl font-bold">Avant</h3>
                    <p class="text-xl">Cartes papier coûteuses, difficiles à gérer, souvent obsolètes.</p>
                </div>
                <div class="text-center">
                    <h3 class="mb-4 text-2xl font-bold">Après</h3>
                    <p class="text-xl">Cartes digitales toujours à jour, partage instantané, gestion simplifiée.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Section Offre et Appel à l'Action -->
    <section class="py-20 bg-white" id="signup">
        <div class="container px-6 mx-auto">
            <h2 class="mb-12 text-3xl font-bold text-center">Passez à CARD.PM Aujourd'hui !</h2>
            <p class="mb-12 text-xl text-center">Profitez d’une période d’essai gratuite de 30 jours. Inscrivez-vous maintenant et transformez votre réseau professionnel.</p>
            <div class="text-center">
                <a href="#" class="px-6 py-3 text-white bg-blue-600 rounded shadow hover:bg-blue-700">Commencez votre essai gratuit</a>
            </div>
            <p class="mt-4 text-center text-gray-600">Garantie satisfait ou remboursé pendant 30 jours.</p>
        </div>
    </section>

    <!-- Section FAQ et Contact -->
    <section class="py-20 bg-gray-100" id="faq">
        <div class="container px-6 mx-auto">
            <h2 class="mb-12 text-3xl font-bold text-center">Questions Fréquentes</h2>
            <div class="space-y-6">
                <div class="p-6 bg-white rounded shadow">
                    <h3 class="mb-2 text-xl font-bold">Comment fonctionne la période d'essai ?</h3>
                    <p>Vous avez 30 jours pour essayer CARD.PM gratuitement. Si vous n'êtes pas satisfait, vous pouvez annuler sans frais.</p>
                </div>
                <div class="p-6 bg-white rounded shadow">
                    <h3 class="mb-2 text-xl font-bold">Puis-je personnaliser ma carte de visite digitale ?</h3>
                    <p>Oui, vous pouvez personnaliser votre carte avec votre logo, vos couleurs et toutes les informations que vous souhaitez.</p>
                </div>
            </div>
        </div>
    </section>

    <section class="py-20 bg-white" id="contact">
        <div class="container px-6 mx-auto">
            <h2 class="mb-12 text-3xl font-bold text-center">Contactez-nous</h2>
            <p class="mb-6 text-xl text-center">Consultez notre <a href="https://help.card.pm" class="text-blue-600 hover:underline">FAQ</a> pour plus d’informations ou contactez notre support pour toute question supplémentaire.</p>
            <div class="text-center">
                <a href="mailto:contact@card.pm" class="px-6 py-3 text-white bg-blue-600 rounded shadow hover:bg-blue-700">Envoyez-nous un email</a>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="py-6 bg-gray-800">
        <div class="container px-6 mx-auto text-center text-gray-400">
            &copy; 2024 CARD.PM. Tous droits réservés.
        </div>
    </footer>


{{ template "footer.html" . }}