|
|
<!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> |
