Nous sommes une entreprise qui propose une solution d'eau filtrée en plaçant un filtre sur votre robinet. J 'ai besoin d'un site web en français pour promouvoir la publicité. Je veux que tu mettes dans le site le nom du filtre : TAPFILTER , son slogan : Tapfilter – La quintessence des sommets chez vous Nos différents abonnements : • Abonnement annuel (30 € / filtre / an). • Option tous les 2 mois (6 filtres / an) : 6 × 5 € = 30 €. • Formules longue durée : o 1 an : 5 €/mois o 5 ans : 4 €/mois o À vie : 3 €/mois Je veux que tu rajoutes une section de paiement avec carte bancaire , paypal etc et un message de confirmation après la commande et le paiement avec des photos de famille qui boit de l'eau - Initial Deployment
40a19d5 verified | <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>TAPFILTER - L'eau pure directement à votre robinet</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .hero-section { | |
| background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1551095622-a5ea5a4d1b91?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80'); | |
| background-size: cover; | |
| background-position: center; | |
| height: 80vh; | |
| } | |
| .payment-card { | |
| transition: all 0.3s ease; | |
| } | |
| .payment-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .confirmation-section { | |
| display: none; | |
| } | |
| #paymentForm { | |
| transition: all 0.5s ease; | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans bg-gray-50"> | |
| <!-- Navigation --> | |
| <nav class="bg-blue-800 text-white shadow-lg"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-20 items-center"> | |
| <div class="flex items-center"> | |
| <div class="font-bold text-2xl">TAPFILTER</div> | |
| </div> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="#produit" class="hover:text-blue-200 transition">Produit</a> | |
| <a href="#abonnements" class="hover:text-blue-200 transition">Abonnements</a> | |
| <a href="#avantages" class="hover:text-blue-200 transition">Avantages</a> | |
| <a href="#contact" class="hover:text-blue-200 transition">Contact</a> | |
| </div> | |
| <div class="md:hidden"> | |
| <button class="mobile-menu-button"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div class="mobile-menu hidden md:hidden bg-blue-900"> | |
| <a href="#produit" class="block py-2 px-4 hover:bg-blue-800">Produit</a> | |
| <a href="#abonnements" class="block py-2 px-4 hover:bg-blue-800">Abonnements</a> | |
| <a href="#avantages" class="block py-2 px-4 hover:bg-blue-800">Avantages</a> | |
| <a href="#contact" class="block py-2 px-4 hover:bg-blue-800">Contact</a> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="hero-section flex items-center justify-center text-white"> | |
| <div class="text-center px-4"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-4 animate-fade-in">TAPFILTER</h1> | |
| <p class="text-xl md:text-2xl mb-8">La quintessence des sommets chez vous</p> | |
| <a href="#abonnements" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-full text-lg transition duration-300 transform hover:scale-105 inline-block">S'abonner maintenant</a> | |
| </div> | |
| </section> | |
| <!-- Product Section --> | |
| <section id="produit" class="py-16 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl"> | |
| Une eau pure directement à votre robinet | |
| </h2> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto"> | |
| Découvrez notre filtre révolutionnaire qui transforme l'eau du robinet en une eau cristalline. | |
| </p> | |
| </div> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-8 md:mb-0"> | |
| <img src="https://images.unsplash.com/photo-1603569283847-aa6c113a1286?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="TAPFILTER sur un robinet" class="rounded-lg shadow-xl w-full max-w-md mx-auto"> | |
| </div> | |
| <div class="md:w-1/2 md:pl-12"> | |
| <h3 class="text-2xl font-bold text-gray-900 mb-4">Comment ça marche ?</h3> | |
| <p class="text-gray-600 mb-6"> | |
| Notre filtre breveté s'installe en quelques secondes sur votre robinet et filtre les impuretés, le chlore et les métaux lourds pour vous offrir une eau pure et savoureuse. | |
| </p> | |
| <ul class="space-y-4"> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 text-blue-600"> | |
| <i class="fas fa-check-circle text-xl"></i> | |
| </div> | |
| <p class="ml-3 text-base text-gray-700">Installation en 30 secondes sans outils</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 text-blue-600"> | |
| <i class="fas fa-check-circle text-xl"></i> | |
| </div> | |
| <p class="ml-3 text-base text-gray-700">Filtration avancée à 99,9% des impuretés</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 text-blue-600"> | |
| <i class="fas fa-check-circle text-xl"></i> | |
| </div> | |
| <p class="ml-3 text-base text-gray-700">Maintien des minéraux essentiels</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 text-blue-600"> | |
| <i class="fas fa-check-circle text-xl"></i> | |
| </div> | |
| <p class="ml-3 text-base text-gray-700">Design élégant et compact</p> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Subscription Section --> | |
| <section id="abonnements" class="py-16 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl"> | |
| Choisissez votre abonnement | |
| </h2> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto"> | |
| Tous nos abonnements incluent le filtre et son remplacement régulier. | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Subscription 1 --> | |
| <div class="payment-card bg-white p-6 rounded-lg shadow-md border border-gray-200"> | |
| <h3 class="text-xl font-bold text-center text-blue-800 mb-4">Abonnement annuel</h3> | |
| <div class="text-center mb-6"> | |
| <span class="text-4xl font-bold">30€</span> | |
| <span class="text-gray-500">/ filtre / an</span> | |
| </div> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>1 filtre remplacé chaque année</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Économies immédiates</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Sans engagement</span> | |
| </li> | |
| </ul> | |
| <button onclick="showPaymentForm('Abonnement annuel', 30, 'annuel')" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded transition duration-300"> | |
| Choisir cette option | |
| </button> | |
| </div> | |
| <!-- Subscription 2 --> | |
| <div class="payment-card bg-white p-6 rounded-lg shadow-md border border-gray-200 transform scale-105 relative"> | |
| <div class="absolute top-0 right-0 bg-blue-600 text-white px-3 py-1 text-sm font-bold rounded-bl-lg">POPULAIRE</div> | |
| <h3 class="text-xl font-bold text-center text-blue-800 mb-4">Option tous les 2 mois</h3> | |
| <div class="text-center mb-6"> | |
| <span class="text-4xl font-bold">5€</span> | |
| <span class="text-gray-500">/ mois</span><br> | |
| <span class="text-gray-500 text-sm">(6 filtres/an = 30€ total)</span> | |
| </div> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Filtre remplacé tous les 2 mois</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Performance optimale</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Sans engagement</span> | |
| </li> | |
| </ul> | |
| <button onclick="showPaymentForm('Option tous les 2 mois', 5, 'mensuel')" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded transition duration-300"> | |
| Choisir cette option | |
| </button> | |
| </div> | |
| <!-- Subscription 3 --> | |
| <div class="payment-card bg-white p-6 rounded-lg shadow-md border border-gray-200"> | |
| <h3 class="text-xl font-bold text-center text-blue-800 mb-4">Formules longue durée</h3> | |
| <div class="text-center mb-6 space-y-4"> | |
| <div> | |
| <span class="text-2xl font-bold">1 an</span>: <span class="text-xl">5€/mois</span> | |
| </div> | |
| <div> | |
| <span class="text-2xl font-bold">5 ans</span>: <span class="text-xl">4€/mois</span> | |
| </div> | |
| <div> | |
| <span class="text-2xl font-bold">À vie</span>: <span class="text-xl">3€/mois</span> | |
| </div> | |
| </div> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Économies importantes</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Paiement mensuel</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Engagement à durée choisie</span> | |
| </li> | |
| </ul> | |
| <button onclick="showPaymentForm('Formule longue durée', 3, 'longue-duree')" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded transition duration-300"> | |
| Choisir cette option | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Payment Form (Hidden by default) --> | |
| <div id="paymentSection" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50 hidden"> | |
| <div class="bg-white rounded-lg shadow-xl max-w-md w-full p-6 overflow-auto max-h-screen"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-xl font-bold text-gray-900">Finaliser votre commande</h3> | |
| <button onclick="hidePaymentForm()" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div id="paymentForm" class="space-y-6"> | |
| <div> | |
| <p class="font-medium">Abonnement sélectionné:</p> | |
| <p id="selectedPlan" class="text-lg font-bold text-blue-600"></p> | |
| <p id="selectedPrice" class="text-gray-600"></p> | |
| </div> | |
| <div> | |
| <label for="name" class="block text-sm font-medium text-gray-700">Nom complet</label> | |
| <input type="text" id="name" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-sm font-medium text-gray-700">Email</label> | |
| <input type="email" id="email" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| <div> | |
| <label for="address" class="block text-sm font-medium text-gray-700">Adresse</label> | |
| <input type="text" id="address" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700">Mode de paiement</label> | |
| <div class="mt-1 grid grid-cols-3 gap-3"> | |
| <button onclick="selectPayment('card')" class="payment-method bg-gray-100 hover:bg-gray-200 rounded-md p-3 flex items-center justify-center"> | |
| <i class="far fa-credit-card text-2xl mr-2"></i> | |
| <span>Carte</span> | |
| </button> | |
| <button onclick="selectPayment('paypal')" class="payment-method bg-gray-100 hover:bg-gray-200 rounded-md p-3 flex items-center justify-center"> | |
| <i class="fab fa-cc-paypal text-2xl mr-2"></i> | |
| <span>PayPal</span> | |
| </button> | |
| <button onclick="selectPayment('bank')" class="payment-method bg-gray-100 hover:bg-gray-200 rounded-md p-3 flex items-center justify-center"> | |
| <i class="fas fa-university text-2xl mr-2"></i> | |
| <span>Virement</span> | |
| </button> | |
| </div> | |
| </div> | |
| <div id="cardDetails" class="hidden space-y-4"> | |
| <div> | |
| <label for="cardNumber" class="block text-sm font-medium text-gray-700">Numéro de carte</label> | |
| <input type="text" id="cardNumber" placeholder="1234 5678 9012 3456" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div> | |
| <label for="expiry" class="block text-sm font-medium text-gray-700">Expiration</label> | |
| <input type="text" id="expiry" placeholder="MM/AA" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| <div> | |
| <label for="cvv" class="block text-sm font-medium text-gray-700">CVV</label> | |
| <input type="text" id="cvv" placeholder="123" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="pt-4 border-t border-gray-200"> | |
| <button onclick="processPayment()" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded transition duration-300"> | |
| Payer maintenant | |
| </button> | |
| </div> | |
| </div> | |
| <div id="confirmationSection" class="hidden text-center py-8"> | |
| <i class="fas fa-check-circle text-green-500 text-6xl mb-4"></i> | |
| <h3 class="text-2xl font-bold text-gray-900 mb-2">Merci pour votre commande !</h3> | |
| <p class="text-gray-600 mb-6">Votre abonnement TAPFILTER a bien été enregistré. Vous recevrez un email de confirmation sous peu.</p> | |
| <div class="mb-6"> | |
| <img src="https://images.unsplash.com/photo-1616594039964-ae9021a400a0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1480&q=80" alt="Famille heureuse buvant de l'eau" class="rounded-lg w-full"> | |
| </div> | |
| <button onclick="hidePaymentForm()" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-6 rounded transition duration-300"> | |
| Retour à l'accueil | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Benefits Section --> | |
| <section id="avantages" class="py-16 bg-blue-800 text-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-extrabold sm:text-4xl"> | |
| Pourquoi choisir TAPFILTER ? | |
| </h2> | |
| <p class="mt-4 max-w-2xl text-xl text-blue-200 mx-auto"> | |
| Une solution simple, économique et écologique pour une eau parfaite | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="text-center p-6"> | |
| <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-blue-700 text-white mb-4"> | |
| <i class="fas fa-euro-sign text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Économique</h3> | |
| <p class="text-blue-200"> | |
| Jusqu'à 100 fois moins cher que l'eau en bouteille. Plus besoin d'acheter et stocker des packs d'eau. | |
| </p> | |
| </div> | |
| <div class="text-center p-6"> | |
| <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-blue-700 text-white mb-4"> | |
| <i class="fas fa-leaf text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Écologique</h3> | |
| <p class="text-blue-200"> | |
| Zéro plastique, zéro déchet. Notre filtre est recyclable et vous permet de réduire votre empreinte environnementale. | |
| </p> | |
| </div> | |
| <div class="text-center p-6"> | |
| <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-blue-700 text-white mb-4"> | |
| <i class="fas fa-heart text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Santé</h3> | |
| <p class="text-blue-200"> | |
| Une eau pure et savoureuse qui préserve les minéraux essentiels tout en éliminant les impuretés nocives. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section class="py-16 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl"> | |
| Ce que nos clients en disent | |
| </h2> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <div class="bg-gray-50 p-6 rounded-lg shadow-sm"> | |
| <div class="flex items-center mb-4"> | |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt=""> | |
| <div class="ml-3"> | |
| <p class="font-medium">Marie D.</p> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-600"> | |
| "Installation ultra facile et résultat impressionnant ! L'eau a vraiment meilleur goût. Plus besoin d'aller à la cave chercher des bouteilles." | |
| </p> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-lg shadow-sm"> | |
| <div class="flex items-center mb-4"> | |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/54.jpg" alt=""> | |
| <div class="ml-3"> | |
| <p class="font-medium">Jean P.</p> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-600"> | |
| "Formule longue durée très avantageuse. Service client réactif quand j'ai eu une question. Je recommande à 100%." | |
| </p> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-lg shadow-sm"> | |
| <div class="flex items-center mb-4"> | |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/63.jpg" alt=""> | |
| <div class="ml-3"> | |
| <p class="font-medium">Sophie L.</p> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-600"> | |
| "Mes enfants adorent boire au robinet maintenant ! Fini les disputes pour les bouteilles d'eau. Et je fais un geste pour la planète." | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Family Drinking Water --> | |
| <div class="bg-blue-100"> | |
| <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-8 md:mb-0"> | |
| <img src="https://images.unsplash.com/photo-1616594039964-ae9021a400a0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1480&q=80" alt="Famille heureuse buvant de l'eau" class="rounded-lg shadow-xl w-full"> | |
| </div> | |
| <div class="md:w-1/2 md:pl-12"> | |
| <h3 class="text-2xl font-bold text-gray-900 mb-4">Une eau saine pour toute la famille</h3> | |
| <p class="text-gray-600 mb-6"> | |
| Offrez à vos proches une eau pure et savoureuse directement au robinet. Plus besoin de bouteilles encombrantes ou de carafes filtrantes à remplir. | |
| </p> | |
| <ul class="space-y-4"> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 text-blue-600"> | |
| <i class="fas fa-check-circle text-xl"></i> | |
| </div> | |
| <p class="ml-3 text-base text-gray-700">Sécurité pour les bébés et enfants</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 text-blue-600"> | |
| <i class="fas fa-check-circle text-xl"></i> | |
| </div> | |
| <p class="ml-3 text-base text-gray-700">Goût amélioré pour toute la famille</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 text-blue-600"> | |
| <i class="fas fa-check-circle text-xl"></i> | |
| </div> | |
| <p class="ml-3 text-base text-gray-700">Solution pratique au quotidien</p> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-16 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:grid lg:grid-cols-2 lg:gap-8"> | |
| <div class="mb-12 lg:mb-0"> | |
| <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl mb-4"> | |
| Des questions ? Contactez-nous | |
| </h2> | |
| <p class="text-gray-500 text-lg"> | |
| Notre équipe est disponible pour répondre à toutes vos interrogations sur notre produit et nos abonnements. | |
| </p> | |
| <div class="mt-8"> | |
| <div class="flex items-start mb-6"> | |
| <div class="flex-shrink-0 text-blue-600"> | |
| <i class="fas fa-envelope text-2xl"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Email</h3> | |
| <p class="text-gray-500">contact@tapfilter.fr</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start mb-6"> | |
| <div class="flex-shrink-0 text-blue-600"> | |
| <i class="fas fa-phone-alt text-2xl"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Téléphone</hh3> | |
| <p class="text-gray-500">01 23 45 67 89</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 text-blue-600"> | |
| <i class="fas fa-clock text-2xl"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Horaires</h3> | |
| <p class="text-gray-500">Lundi-Vendredi: 9h-18h</p> | |
| <p class="text-gray-500">Samedi: 10h-15h</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-lg"> | |
| <form class="space-y-6"> | |
| <div> | |
| <label for="contact-name" class="block text-sm font-medium text-gray-700">Nom</label> | |
| <input type="text" id="contact-name" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| <div> | |
| <label for="contact-email" class="block text-sm font-medium text-gray-700">Email</label> | |
| <input type="email" id="contact-email" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| <div> | |
| <label for="contact-message" class="block text-sm font-medium text-gray-700">Message</label> | |
| <textarea id="contact-message" rows="4" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500"></textarea> | |
| </div> | |
| <div> | |
| <button type="button" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded transition duration-300"> | |
| Envoyer le message | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- FAQ Section --> | |
| <section class="py-16 bg-gray-50"> | |
| <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl"> | |
| Questions fréquentes | |
| </h2> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="border border-gray-200 rounded-lg overflow-hidden"> | |
| <button class="faq-question w-full flex justify-between items-center p-4 text-left bg-white hover:bg-gray-50"> | |
| <span class="font-medium text-gray-900">Comment installer le filtre TAPFILTER ?</span> | |
| <i class="fas fa-plus text-blue-600"></i> | |
| </button> | |
| <div class="faq-answer hidden p-4 bg-gray-50 text-gray-600"> | |
| <p>L'installation est très simple et ne prend que 30 secondes sans aucun outil. On visse simplement le filtre sur le robinet standard. Nous fournissons des adaptateurs pour les différents types de robinets.</p> | |
| </div> | |
| </div> | |
| <div class="border border-gray-200 rounded-lg overflow-hidden"> | |
| <button class="faq-question w-full flex justify-between items-center p-4 text-left bg-white hover:bg-gray-50"> | |
| <span class="font-medium text-gray-900">Combien de temps dure un filtre ?</span> | |
| <i class="fas fa-plus text-blue-600"></i> | |
| </button> | |
| <div class="faq-answer hidden p-4 bg-gray-50 text-gray-600"> | |
| <p>La durée de vie dépend de votre consommation et de la qualité de l'eau initiale. En moyenne, nous recommandons de changer le filtre tous les 2 mois ou 1000 litres pour une efficacité optimale. C'est pourquoi nous proposons des abonnements avec remplacement régulier.</p> | |
| </div> | |
| </div> | |
| <div class="border border-gray-200 rounded-lg overflow-hidden"> | |
| <button class="faq-question w-full flex justify-between items-center p-4 text-left bg-white hover:bg-gray-50"> | |
| <span class="font-medium text-gray-900">Le filtre fonctionne-t-il avec tous les robinets ?</span> | |
| <i class="fas fa-plus text-blue-600"></i> | |
| </button> | |
| <div class="faq-answer hidden p-4 bg-gray-50 text-gray-600"> | |
| <p>Oui, notre filtre s'adapte à la plupart des robinets standards grâce à nos adaptateurs inclus. Si vous avez un robinet particulier, contactez-nous et nous trouverons une solution.</p> | |
| </div> | |
| </div> | |
| <div class="border border-gray-200 rounded-lg overflow-hidden"> | |
| <button class="faq-question w-full flex justify-between items-center p-4 text-left bg-white hover:bg-gray-50"> | |
| <span class="font-medium text-gray-900">Puis-je annuler mon abonnement à tout moment ?</span> | |
| <i class="fas fa-plus text-blue-600"></i> | |
| </button> | |
| <div class="faq-answer hidden p-4 bg-gray-50 text-gray-600"> | |
| <p>Oui, pour les abonnements sans engagement (annuel ou tous les 2 mois), vous pouvez annuler à tout moment. Pour les formules longue durée, un engagement est requis mais vous bénéficiez de tarifs avantageux.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white pt-12 pb-8"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">TAPFILTER</h3> | |
| <p class="text-gray-400"> | |
| La quintessence des sommets chez vous. Une eau pure et savoureuse directement à votre robinet. | |
| </p> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">Produit</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#produit" class="text-gray-400 hover:text-white">Comment ça marche</a></li> | |
| <li><a href="#avantages" class="text-gray-400 hover:text-white">Avantages</a></li> | |
| <li><a href="#abonnements" class="text-gray-400 hover:text-white">Abonnements</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">Entreprise</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">À propos</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li> | |
| <li><a href="#contact" class="text-gray-400 hover:text-white">Contact</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">Légal</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">CGV</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Mentions légales</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Politique de confidentialité</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="mt-12 pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-400 text-sm"> | |
| © 2023 TAPFILTER. Tous droits réservés. | |
| </p> | |
| <div class="mt-4 md:mt-0 flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| const mobileMenuButton = document.querySelector('.mobile-menu-button'); | |
| const mobileMenu = document.querySelector('.mobile-menu'); | |
| mobileMenuButton.addEventListener('click', () => { | |
| mobileMenu.classList.toggle('hidden'); | |
| }); | |
| // FAQ accordion | |
| const faqQuestions = document.querySelectorAll('.faq-question'); | |
| faqQuestions.forEach(question => { | |
| question.addEventListener('click', () => { | |
| const answer = question.nextElementSibling; | |
| const icon = question.querySelector('i'); | |
| // Toggle answer visibility | |
| answer.classList.toggle('hidden'); | |
| // Toggle icon between plus and minus | |
| if (answer.classList.contains('hidden')) { | |
| icon.classList.remove('fa-minus'); | |
| icon.classList.add('fa-plus'); | |
| } else { | |
| icon.classList.remove('fa-plus'); | |
| icon.classList.add('fa-minus'); | |
| } | |
| }); | |
| }); | |
| // Payment form functions | |
| let selectedPlan = ''; | |
| let selectedPrice = 0; | |
| let selectedType = ''; | |
| function showPaymentForm(plan, price, type) { | |
| selectedPlan = plan; | |
| selectedPrice = price; | |
| selectedType = type; | |
| document.getElementById('selectedPlan').textContent = plan; | |
| document.getElementById('selectedPrice').textContent = type === 'annuel' ? `Prix: ${price}€/an` : `Prix: ${price}€/mois`; | |
| document.getElementById('paymentSection').classList.remove('hidden'); | |
| document.getElementById('paymentForm').classList.remove('hidden'); | |
| document.getElementById('confirmationSection').classList.add('hidden'); | |
| } | |
| function hidePaymentForm() { | |
| document.getElementById('paymentSection').classList.add('hidden'); | |
| } | |
| function selectPayment(method) { | |
| const paymentMethods = document.querySelectorAll('.payment-method'); | |
| paymentMethods.forEach(m => m.classList.remove('bg-blue-100', 'border-blue-400')); | |
| const selectedMethod = event.currentTarget; | |
| selectedMethod.classList.add('bg-blue-100', 'border', 'border-blue-400'); | |
| // Show card details only if card is selected | |
| if (method === 'card') { | |
| document.getElementById('cardDetails').classList.remove('hidden'); | |
| } else { | |
| document.getElementById('cardDetails').classList.add('hidden'); | |
| } | |
| } | |
| function processPayment() { | |
| // In a real app, you would process the payment here | |
| // For demo purposes, we just show the confirmation | |
| document.getElementById('paymentForm').classList.add('hidden'); | |
| document.getElementById('confirmationSection').classList.remove('hidden'); | |
| } | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=penda20/projet" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |