| <!DOCTYPE html> |
| <html lang="fr"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>PC Config Pro - Experts en configuration PC</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-bg { |
| background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1593642632823-8f785ba67e45?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1632&q=80'); |
| background-size: cover; |
| background-position: center; |
| } |
| |
| .config-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); |
| } |
| |
| .part-card { |
| transition: all 0.3s ease; |
| } |
| |
| .part-card:hover { |
| transform: scale(1.03); |
| } |
| |
| @keyframes fadeIn { |
| from { opacity: 0; transform: translateY(20px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
| |
| .animate-fade-in { |
| animation: fadeIn 0.8s ease-out forwards; |
| } |
| </style> |
| </head> |
| <body class="font-sans bg-gray-50"> |
| |
| <nav class="bg-gray-900 text-white sticky top-0 z-50 shadow-lg"> |
| <div class="container mx-auto px-6 py-3 flex justify-between items-center"> |
| <div class="flex items-center space-x-2"> |
| <i class="fas fa-desktop text-blue-400 text-2xl"></i> |
| <span class="text-xl font-bold">PC Config Pro</span> |
| </div> |
| <div class="hidden md:flex space-x-8"> |
| <a href="#accueil" class="hover:text-blue-400 transition">Accueil</a> |
| <a href="#configurations" class="hover:text-blue-400 transition">Configurations</a> |
| <a href="#composants" class="hover:text-blue-400 transition">Composants</a> |
| <a href="#guides" class="hover:text-blue-400 transition">Guides</a> |
| <a href="#contact" class="hover:text-blue-400 transition">Contact</a> |
| </div> |
| <button class="md:hidden text-white focus:outline-none"> |
| <i class="fas fa-bars text-xl"></i> |
| </button> |
| </div> |
| </nav> |
|
|
| |
| <section id="accueil" class="hero-bg text-white py-32 px-6"> |
| <div class="container mx-auto text-center animate-fade-in"> |
| <h1 class="text-4xl md:text-6xl font-bold mb-6">Votre PC sur mesure</h1> |
| <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">Des configurations optimisées pour le gaming, le montage vidéo et le travail par des experts passionnés.</p> |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> |
| <a href="#configurations" class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-lg font-semibold transition duration-300 transform hover:scale-105">Voir nos configurations</a> |
| <a href="#contact" class="bg-gray-700 hover:bg-gray-600 text-white px-8 py-3 rounded-lg font-semibold transition duration-300 transform hover:scale-105">Contactez nos experts</a> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="configurations" class="py-16 bg-white"> |
| <div class="container mx-auto px-6"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Nos Configurations Phares</h2> |
| <p class="text-gray-600 max-w-2xl mx-auto">Des PC optimisés pour chaque usage et budget, assemblés avec soin par nos experts.</p> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| |
| <div class="bg-gray-50 rounded-xl overflow-hidden shadow-lg config-card transition duration-500"> |
| <div class="bg-gray-800 text-white p-6"> |
| <h3 class="text-2xl font-bold mb-2">Gaming Elite</h3> |
| <p class="text-blue-300">Ultra performances pour les joueurs exigeants</p> |
| </div> |
| <div class="p-6"> |
| <div class="flex justify-between items-center mb-4"> |
| <span class="text-3xl font-bold text-gray-900">€1,899</span> |
| <span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-medium">Top Vente</span> |
| </div> |
| <ul class="space-y-3 mb-6"> |
| <li class="flex items-center"> |
| <i class="fas fa-microchip text-blue-500 mr-2"></i> |
| <span>Intel Core i9-13900K</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-memory text-blue-500 mr-2"></i> |
| <span>NVIDIA RTX 4080 16GB</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-hdd text-blue-500 mr-2"></i> |
| <span>32GB DDR5 5600MHz</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-bolt text-blue-500 mr-2"></i> |
| <span>1TB NVMe SSD + 2TB HDD</span> |
| </li> |
| </ul> |
| <button class="w-full bg-blue-600 hover:bg-blue-700 text-white py-3 rounded-lg font-medium transition">Personnaliser cette config</button> |
| </div> |
| </div> |
| |
| |
| <div class="bg-gray-50 rounded-xl overflow-hidden shadow-lg config-card transition duration-500"> |
| <div class="bg-gray-800 text-white p-6"> |
| <h3 class="text-2xl font-bold mb-2">Création Pro</h3> |
| <p class="text-blue-300">Parfait pour le montage vidéo et 3D</p> |
| </div> |
| <div class="p-6"> |
| <div class="flex justify-between items-center mb-4"> |
| <span class="text-3xl font-bold text-gray-900">€2,499</span> |
| <span class="bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm font-medium">Nouveau</span> |
| </div> |
| <ul class="space-y-3 mb-6"> |
| <li class="flex items-center"> |
| <i class="fas fa-microchip text-blue-500 mr-2"></i> |
| <span>AMD Ryzen 9 7950X</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-memory text-blue-500 mr-2"></i> |
| <span>NVIDIA RTX 4090 24GB</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-hdd text-blue-500 mr-2"></i> |
| <span>64GB DDR5 5200MHz</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-bolt text-blue-500 mr-2"></i> |
| <span>2TB NVMe SSD + 4TB HDD</span> |
| </li> |
| </ul> |
| <button class="w-full bg-blue-600 hover:bg-blue-700 text-white py-3 rounded-lg font-medium transition">Personnaliser cette config</button> |
| </div> |
| </div> |
| |
| |
| <div class="bg-gray-50 rounded-xl overflow-hidden shadow-lg config-card transition duration-500"> |
| <div class="bg-gray-800 text-white p-6"> |
| <h3 class="text-2xl font-bold mb-2">Essentiel Gaming</h3> |
| <p class="text-blue-300">Entrée de gamme performante</p> |
| </div> |
| <div class="p-6"> |
| <div class="flex justify-between items-center mb-4"> |
| <span class="text-3xl font-bold text-gray-900">€999</span> |
| <span class="bg-yellow-100 text-yellow-800 px-3 py-1 rounded-full text-sm font-medium">Économique</span> |
| </div> |
| <ul class="space-y-3 mb-6"> |
| <li class="flex items-center"> |
| <i class="fas fa-microchip text-blue-500 mr-2"></i> |
| <span>AMD Ryzen 5 7600X</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-memory text-blue-500 mr-2"></i> |
| <span>NVIDIA RTX 3060 Ti 8GB</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-hdd text-blue-500 mr-2"></i> |
| <span>16GB DDR5 4800MHz</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-bolt text-blue-500 mr-2"></i> |
| <span>500GB NVMe SSD + 1TB HDD</span> |
| </li> |
| </ul> |
| <button class="w-full bg-blue-600 hover:bg-blue-700 text-white py-3 rounded-lg font-medium transition">Personnaliser cette config</button> |
| </div> |
| </div> |
| </div> |
| |
| <div class="text-center mt-12"> |
| <a href="#" class="inline-flex items-center text-blue-600 font-medium hover:text-blue-800"> |
| Voir toutes nos configurations |
| <i class="fas fa-arrow-right ml-2"></i> |
| </a> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="composants" class="py-16 bg-gray-50"> |
| <div class="container mx-auto px-6"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Composants de Qualité</h2> |
| <p class="text-gray-600 max-w-2xl mx-auto">Nous sélectionnons les meilleurs composants du marché pour vos configurations.</p> |
| </div> |
| |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6"> |
| |
| <div class="bg-white rounded-lg shadow-md p-6 part-card"> |
| <div class="text-blue-500 mb-4"> |
| <i class="fas fa-microchip text-4xl"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-2">Processeurs</h3> |
| <p class="text-gray-600 mb-4">Intel Core et AMD Ryzen de dernière génération pour des performances optimales.</p> |
| <a href="#" class="text-blue-600 font-medium hover:text-blue-800 flex items-center"> |
| En savoir plus |
| <i class="fas fa-chevron-right ml-1 text-sm"></i> |
| </a> |
| </div> |
| |
| |
| <div class="bg-white rounded-lg shadow-md p-6 part-card"> |
| <div class="text-purple-500 mb-4"> |
| <i class="fas fa-gamepad text-4xl"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-2">Cartes Graphiques</h3> |
| <p class="text-gray-600 mb-4">NVIDIA RTX et AMD Radeon pour le gaming et le rendu professionnel.</p> |
| <a href="#" class="text-blue-600 font-medium hover:text-blue-800 flex items-center"> |
| En savoir plus |
| <i class="fas fa-chevron-right ml-1 text-sm"></i> |
| </a> |
| </div> |
| |
| |
| <div class="bg-white rounded-lg shadow-md p-6 part-card"> |
| <div class="text-green-500 mb-4"> |
| <i class="fas fa-memory text-4xl"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-2">Mémoire RAM</h3> |
| <p class="text-gray-600 mb-4">DDR4 et DDR5 haute fréquence pour une fluidité exceptionnelle.</p> |
| <a href="#" class="text-blue-600 font-medium hover:text-blue-800 flex items-center"> |
| En savoir plus |
| <i class="fas fa-chevron-right ml-1 text-sm"></i> |
| </a> |
| </div> |
| |
| |
| <div class="bg-white rounded-lg shadow-md p-6 part-card"> |
| <div class="text-orange-500 mb-4"> |
| <i class="fas fa-hdd text-4xl"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-2">Stockage</h3> |
| <p class="text-gray-600 mb-4">SSD NVMe ultra-rapides et HDD haute capacité pour tous vos besoins.</p> |
| <a href="#" class="text-blue-600 font-medium hover:text-blue-800 flex items-center"> |
| En savoir plus |
| <i class="fas fa-chevron-right ml-1 text-sm"></i> |
| </a> |
| </div> |
| </div> |
| |
| <div class="mt-12 bg-blue-50 rounded-xl p-8"> |
| <div class="flex flex-col md:flex-row items-center"> |
| <div class="md:w-1/2 mb-6 md:mb-0"> |
| <h3 class="text-2xl font-bold text-gray-900 mb-3">Configurateur en ligne</h3> |
| <p class="text-gray-700">Créez votre PC sur mesure en choisissant chaque composant selon vos besoins et votre budget.</p> |
| </div> |
| <div class="md:w-1/2 text-center md:text-right"> |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-lg font-semibold transition transform hover:scale-105"> |
| Essayer le configurateur |
| <i class="fas fa-cogs ml-2"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="guides" class="py-16 bg-white"> |
| <div class="container mx-auto px-6"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Nos Guides Pratiques</h2> |
| <p class="text-gray-600 max-w-2xl mx-auto">Apprenez à choisir et optimiser votre configuration avec nos guides experts.</p> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
| |
| <div class="bg-gray-50 rounded-lg overflow-hidden shadow-md"> |
| <img src="https://images.unsplash.com/photo-1591488320449-011701bb6704?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Guide gaming" class="w-full h-48 object-cover"> |
| <div class="p-6"> |
| <div class="flex items-center text-sm text-gray-500 mb-2"> |
| <span>Gaming</span> |
| <span class="mx-2">•</span> |
| <span>15 min de lecture</span> |
| </div> |
| <h3 class="text-xl font-bold mb-3">Choisir sa config gaming en 2023</h3> |
| <p class="text-gray-600 mb-4">Tout ce qu'il faut savoir pour sélectionner les bons composants selon son budget et ses jeux favoris.</p> |
| <a href="#" class="text-blue-600 font-medium hover:text-blue-800 flex items-center"> |
| Lire le guide |
| <i class="fas fa-book-open ml-2"></i> |
| </a> |
| </div> |
| </div> |
| |
| |
| <div class="bg-gray-50 rounded-lg overflow-hidden shadow-md"> |
| <img src="https://images.unsplash.com/photo-1551033406-611a9b79f6b6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Guide montage" class="w-full h-48 object-cover"> |
| <div class="p-6"> |
| <div class="flex items-center text-sm text-gray-500 mb-2"> |
| <span>Montage</span> |
| <span class="mx-2">•</span> |
| <span>20 min de lecture</span> |
| </div> |
| <h3 class="text-xl font-bold mb-3">PC pour le montage vidéo : nos conseils</h3> |
| <p class="text-gray-600 mb-4">Optimisez votre workflow avec une configuration adaptée à Premiere Pro, DaVinci Resolve et After Effects.</p> |
| <a href="#" class="text-blue-600 font-medium hover:text-blue-800 flex items-center"> |
| Lire le guide |
| <i class="fas fa-book-open ml-2"></i> |
| </a> |
| </div> |
| </div> |
| |
| |
| <div class="bg-gray-50 rounded-lg overflow-hidden shadow-md"> |
| <img src="https://images.unsplash.com/photo-1626785774573-4b799315345d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80" alt="Guide refroidissement" class="w-full h-48 object-cover"> |
| <div class="p-6"> |
| <div class="flex items-center text-sm text-gray-500 mb-2"> |
| <span>Optimisation</span> |
| <span class="mx-2">•</span> |
| <span>12 min de lecture</span> |
| </div> |
| <h3 class="text-xl font-bold mb-3">Refroidissement : air ou watercooling ?</h3> |
| <p class="text-gray-600 mb-4">Comparatif complet des solutions de refroidissement pour votre processeur.</p> |
| <a href="#" class="text-blue-600 font-medium hover:text-blue-800 flex items-center"> |
| Lire le guide |
| <i class="fas fa-book-open ml-2"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="contact" class="py-16 bg-gray-900 text-white"> |
| <div class="container mx-auto px-6"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Contactez nos experts</h2> |
| <p class="text-gray-300 max-w-2xl mx-auto">Une question sur une configuration ? Besoin de conseils personnalisés ? Notre équipe est là pour vous aider.</p> |
| </div> |
| |
| <div class="flex flex-col lg:flex-row gap-12"> |
| <div class="lg:w-1/2"> |
| <form class="space-y-6"> |
| <div> |
| <label for="name" class="block text-sm font-medium mb-1">Nom complet</label> |
| <input type="text" id="name" class="w-full px-4 py-3 rounded-lg bg-gray-800 border border-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| </div> |
| |
| <div> |
| <label for="email" class="block text-sm font-medium mb-1">Email</label> |
| <input type="email" id="email" class="w-full px-4 py-3 rounded-lg bg-gray-800 border border-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| </div> |
| |
| <div> |
| <label for="subject" class="block text-sm font-medium mb-1">Sujet</label> |
| <select id="subject" class="w-full px-4 py-3 rounded-lg bg-gray-800 border border-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| <option>Demande de conseil</option> |
| <option>Question sur une configuration</option> |
| <option>Problème technique</option> |
| <option>Autre demande</option> |
| </select> |
| </div> |
| |
| <div> |
| <label for="message" class="block text-sm font-medium mb-1">Message</label> |
| <textarea id="message" rows="5" class="w-full px-4 py-3 rounded-lg bg-gray-800 border border-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea> |
| </div> |
| |
| <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-3 rounded-lg font-medium transition transform hover:scale-[1.02]"> |
| Envoyer le message |
| <i class="fas fa-paper-plane ml-2"></i> |
| </button> |
| </form> |
| </div> |
| |
| <div class="lg:w-1/2"> |
| <div class="bg-gray-800 rounded-xl p-8 h-full"> |
| <h3 class="text-xl font-bold mb-6">Nos coordonnées</h3> |
| |
| <div class="space-y-6"> |
| <div class="flex items-start"> |
| <div class="text-blue-400 mt-1 mr-4"> |
| <i class="fas fa-map-marker-alt text-xl"></i> |
| </div> |
| <div> |
| <h4 class="font-medium mb-1">Adresse</h4> |
| <p class="text-gray-300">123 Rue de l'Informatique, 75000 Paris</p> |
| </div> |
| </div> |
| |
| <div class="flex items-start"> |
| <div class="text-blue-400 mt-1 mr-4"> |
| <i class="fas fa-phone-alt text-xl"></i> |
| </div> |
| <div> |
| <h4 class="font-medium mb-1">Téléphone</h4> |
| <p class="text-gray-300">01 23 45 67 89</p> |
| <p class="text-gray-300">Lundi au vendredi, 9h-18h</p> |
| </div> |
| </div> |
| |
| <div class="flex items-start"> |
| <div class="text-blue-400 mt-1 mr-4"> |
| <i class="fas fa-envelope text-xl"></i> |
| </div> |
| <div> |
| <h4 class="font-medium mb-1">Email</h4> |
| <p class="text-gray-300">contact@pcconfigpro.fr</p> |
| </div> |
| </div> |
| |
| <div class="flex items-start"> |
| <div class="text-blue-400 mt-1 mr-4"> |
| <i class="fas fa-share-alt text-xl"></i> |
| </div> |
| <div> |
| <h4 class="font-medium mb-3">Réseaux sociaux</h4> |
| <div class="flex space-x-4"> |
| <a href="#" class="text-gray-300 hover:text-blue-400 transition"> |
| <i class="fab fa-facebook-f text-xl"></i> |
| </a> |
| <a href="#" class="text-gray-300 hover:text-blue-400 transition"> |
| <i class="fab fa-twitter text-xl"></i> |
| </a> |
| <a href="#" class="text-gray-300 hover:text-blue-400 transition"> |
| <i class="fab fa-instagram text-xl"></i> |
| </a> |
| <a href="#" class="text-gray-300 hover:text-blue-400 transition"> |
| <i class="fab fa-youtube text-xl"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="bg-gray-950 text-gray-400 py-12"> |
| <div class="container mx-auto px-6"> |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
| <div> |
| <div class="flex items-center space-x-2 mb-4"> |
| <i class="fas fa-desktop text-blue-400 text-2xl"></i> |
| <span class="text-xl font-bold text-white">PC Config Pro</span> |
| </div> |
| <p class="mb-4">Experts en configuration PC depuis 2010. Nous vous accompagnons dans le choix et l'assemblage de votre ordinateur sur mesure.</p> |
| <div class="flex space-x-4"> |
| <a href="#" class="text-gray-400 hover:text-white transition"> |
| <i class="fab fa-facebook-f"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white transition"> |
| <i class="fab fa-twitter"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white transition"> |
| <i class="fab fa-instagram"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white transition"> |
| <i class="fab fa-youtube"></i> |
| </a> |
| </div> |
| </div> |
| |
| <div> |
| <h4 class="text-white font-semibold mb-4 text-lg">Configurations</h4> |
| <ul class="space-y-2"> |
| <li><a href="#" class="hover:text-white transition">PC Gaming</a></li> |
| <li><a href="#" class="hover:text-white transition">PC Montage Vidéo</a></li> |
| <li><a href="#" class="hover:text-white transition">PC Bureautique</a></li> |
| <li><a href="#" class="hover:text-white transition">PC Streaming</a></li> |
| <li><a href="#" class="hover:text-white transition">Toutes nos configs</a></li> |
| </ul> |
| </div> |
| |
| <div> |
| <h4 class="text-white font-semibold mb-4 text-lg">Informations</h4> |
| <ul class="space-y-2"> |
| <li><a href="#" class="hover:text-white transition">Livraison & Retours</a></li> |
| <li><a href="#" class="hover:text-white transition">Paiement sécurisé</a></li> |
| <li><a href="#" class="hover:text-white transition">Garanties</a></li> |
| <li><a href="#" class="hover:text-white transition">FAQ</a></li> |
| <li><a href="#" class="hover:text-white transition">Blog</a></li> |
| </ul> |
| </div> |
| |
| <div> |
| <h4 class="text-white font-semibold mb-4 text-lg">Newsletter</h4> |
| <p class="mb-4">Abonnez-vous pour recevoir nos offres et conseils.</p> |
| <form class="flex"> |
| <input type="email" placeholder="Votre email" class="px-4 py-2 rounded-l-lg bg-gray-800 text-white focus:outline-none w-full"> |
| <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-r-lg transition"> |
| <i class="fas fa-paper-plane"></i> |
| </button> |
| </form> |
| </div> |
| </div> |
| |
| <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> |
| <p>© 2023 PC Config Pro. Tous droits réservés.</p> |
| <div class="flex space-x-6 mt-4 md:mt-0"> |
| <a href="#" class="hover:text-white transition">Mentions légales</a> |
| <a href="#" class="hover:text-white transition">CGV</a> |
| <a href="#" class="hover:text-white transition">Politique de confidentialité</a> |
| </div> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
| anchor.addEventListener('click', function (e) { |
| e.preventDefault(); |
| |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ |
| behavior: 'smooth' |
| }); |
| }); |
| }); |
| |
| |
| const mobileMenuButton = document.querySelector('.md\\:hidden'); |
| mobileMenuButton.addEventListener('click', function() { |
| |
| alert("Dans une implémentation WordPress, ceci ouvrirait le menu mobile"); |
| }); |
| |
| |
| const observerOptions = { |
| threshold: 0.1 |
| }; |
| |
| const observer = new IntersectionObserver((entries) => { |
| entries.forEach(entry => { |
| if (entry.isIntersecting) { |
| entry.target.classList.add('animate-fade-in'); |
| observer.unobserve(entry.target); |
| } |
| }); |
| }, observerOptions); |
| |
| document.querySelectorAll('section').forEach(section => { |
| observer.observe(section); |
| }); |
| </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=iShares/pc" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
