Bootstrap
Bootstrap5
Loading
Product
Html
Css
Template de chargement de produit Bootstrap 5 avec design élégant et moderne.
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="copyright" content="MEZGANI Said" />
<meta name="author" content="AngularForAll" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Website Bijoux Bootstrap 5 | AngularForAll</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Montserrat:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<!-- AOS Animation -->
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<style>
body { font-family: 'Montserrat', sans-serif; }
h1, h2, h3, h4, .font-serif { font-family: 'Cormorant Garamond', serif; }
@keyframes sparkle {
0%, 100% { opacity: 0.3; transform: scale(1); }
50% { opacity: 1; transform: scale(1.1); }
}
.sparkle { animation: sparkle 2s ease-in-out infinite; }
@keyframes fadeUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fadeUp 0.6s ease-out forwards; }
.hover-lift {
transition: all 0.3s ease;
}
.hover-lift:hover {
transform: translateY(-6px);
box-shadow: 0 20px 30px -8px rgba(0,0,0,0.1);
}
.gold-gradient {
background: linear-gradient(135deg, #fbbf24 0%, #d97706 50%, #fbbf24 100%);
}
.gold-border {
border: 1px solid rgba(217, 119, 6, 0.3);
}
</style>
</head>
<body class="bg-stone-50">
<!-- ==================== NAVBAR ==================== -->
<nav class="bg-white/95 backdrop-blur-sm sticky top-0 z-50 border-b border-amber-100">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center h-20">
<!-- Mobile menu button -->
<button class="lg:hidden p-2 text-stone-600 hover:text-amber-600">
<i class="fas fa-bars text-xl"></i>
</button>
<!-- Logo -->
<div class="flex items-center gap-2">
<i class="fas fa-gem text-3xl text-amber-500 sparkle"></i>
<span class="text-2xl font-serif font-bold text-stone-800">Éclat<span class="text-amber-600">Précieux</span></span>
</div>
<!-- Navigation desktop -->
<div class="hidden lg:flex items-center gap-8">
<a href="#" class="text-stone-700 hover:text-amber-600 font-medium transition">Accueil</a>
<a href="#" class="text-stone-700 hover:text-amber-600 font-medium transition">Collections</a>
<a href="#" class="text-stone-700 hover:text-amber-600 font-medium transition">Bagues</a>
<a href="#" class="text-stone-700 hover:text-amber-600 font-medium transition">Colliers</a>
<a href="#" class="text-stone-700 hover:text-amber-600 font-medium transition">Bracelets</a>
<a href="#" class="text-stone-700 hover:text-amber-600 font-medium transition">Boucles</a>
</div>
<!-- Actions -->
<div class="flex items-center gap-4">
<button class="relative p-2 text-stone-600 hover:text-amber-600 transition">
<i class="far fa-heart text-xl"></i>
<span class="absolute -top-1 -right-1 w-4 h-4 bg-amber-500 text-white text-xs rounded-full flex items-center justify-center">3</span>
</button>
<button class="relative p-2 text-stone-600 hover:text-amber-600 transition">
<i class="fas fa-shopping-bag text-xl"></i>
<span class="absolute -top-1 -right-1 w-4 h-4 bg-amber-500 text-white text-xs rounded-full flex items-center justify-center">2</span>
</button>
<button class="hidden sm:block bg-amber-500 hover:bg-amber-600 text-white px-5 py-2 rounded-full font-medium transition">
<i class="far fa-user mr-2"></i>Connexion
</button>
</div>
</div>
</div>
</nav>
<!-- ==================== HERO SECTION ==================== -->
<section class="relative bg-gradient-to-br from-stone-100 via-amber-50 to-stone-100 overflow-hidden">
<div class="absolute inset-0 opacity-10">
<div class="absolute top-10 left-10 w-40 h-40 bg-amber-300 rounded-full blur-3xl"></div>
<div class="absolute bottom-10 right-10 w-60 h-60 bg-amber-200 rounded-full blur-3xl"></div>
</div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 lg:py-24 relative">
<div class="grid lg:grid-cols-2 gap-12 items-center">
<!-- Texte -->
<div class="fade-up">
<span class="inline-block bg-amber-100 text-amber-800 text-sm font-semibold px-4 py-1 rounded-full mb-4">
<i class="fas fa-crown mr-2"></i>Joaillerie d'exception
</span>
<h1 class="font-serif text-5xl lg:text-6xl font-bold text-stone-800 leading-tight mb-6">
L'éclat qui <br>
<span class="text-amber-600">vous révèle</span>
</h1>
<p class="text-stone-600 text-lg mb-8 leading-relaxed">
Découvrez notre collection de bijoux artisanaux,
conçus avec passion et des pierres précieuses d'exception.
</p>
<div class="flex flex-wrap gap-4">
<a href="#" class="gold-gradient text-white px-8 py-4 rounded-full font-semibold hover:shadow-lg hover:shadow-amber-200 transition flex items-center gap-2">
<i class="fas fa-gem"></i> Découvrir les collections
</a>
<a href="#" class="border-2 border-amber-500 text-amber-700 px-8 py-4 rounded-full font-semibold hover:bg-amber-50 transition flex items-center gap-2">
<i class="fas fa-calendar-alt"></i> Prendre rendez-vous
</a>
</div>
<!-- Stats -->
<div class="flex gap-8 mt-10">
<div>
<div class="text-3xl font-serif font-bold text-amber-600">15k+</div>
<div class="text-sm text-stone-500">Clients satisfaits</div>
</div>
<div>
<div class="text-3xl font-serif font-bold text-amber-600">500+</div>
<div class="text-sm text-stone-500">Pièces uniques</div>
</div>
<div>
<div class="text-3xl font-serif font-bold text-amber-600">25</div>
<div class="text-sm text-stone-500">Ans d'expertise</div>
</div>
</div>
</div>
<!-- Image -->
<div class="relative fade-up" style="animation-delay: 0.2s;">
<div class="relative z-10">
<img src="https://images.pexels.com/photos/1453008/pexels-photo-1453008.jpeg?auto=compress&cs=tinysrgb&w=600"
alt="Bijoux de luxe"
class="rounded-3xl shadow-2xl w-full h-[500px] object-cover"
onerror="this.src='https://placehold.co/600x700/fbbf24/ffffff?text=Éclat+Précieux'">
</div>
<div class="absolute -bottom-6 -left-6 bg-white rounded-2xl shadow-xl p-4 z-20">
<div class="flex items-center gap-3">
<div class="w-12 h-12 bg-amber-100 rounded-full flex items-center justify-center">
<i class="fas fa-shield-alt text-amber-600 text-xl"></i>
</div>
<div>
<div class="font-semibold text-stone-800">Certifié authentique</div>
<div class="text-xs text-stone-500">Pierres certifiées GIA</div>
</div>
</div>
</div>
<div class="absolute -top-6 -right-6 w-24 h-24 bg-amber-200 rounded-full opacity-20"></div>
</div>
</div>
</div>
</section>
<!-- ==================== CATÉGORIES ==================== -->
<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" data-aos="fade-up">
<span class="text-amber-600 font-semibold text-sm uppercase tracking-wider">Nos collections</span>
<h2 class="font-serif text-4xl font-bold text-stone-800 mt-2">Explorez par catégorie</h2>
<div class="w-20 h-0.5 bg-amber-400 mx-auto mt-4"></div>
</div>
<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
<div class="text-center group cursor-pointer" data-aos="fade-up" data-aos-delay="0">
<div class="relative mb-4 overflow-hidden rounded-2xl">
<img src="https://images.pexels.com/photos/1124585/pexels-photo-1124585.jpeg?auto=compress&cs=tinysrgb&w=300"
alt="Bagues"
class="w-full h-56 object-cover group-hover:scale-110 transition duration-500"
onerror="this.src='https://placehold.co/300/fbbf24/ffffff?text=Bagues'">
<div class="absolute inset-0 bg-gradient-to-t from-stone-900/50 to-transparent"></div>
<span class="absolute bottom-4 left-4 text-white font-serif text-xl font-bold">Bagues</span>
</div>
</div>
<div class="text-center group cursor-pointer" data-aos="fade-up" data-aos-delay="100">
<div class="relative mb-4 overflow-hidden rounded-2xl">
<img src="https://images.pexels.com/photos/9398476/pexels-photo-9398476.jpeg?auto=compress&cs=tinysrgb&w=300"
alt="Colliers"
class="w-full h-56 object-cover group-hover:scale-110 transition duration-500"
onerror="this.src='https://placehold.co/300/d97706/ffffff?text=Colliers'">
<div class="absolute inset-0 bg-gradient-to-t from-stone-900/50 to-transparent"></div>
<span class="absolute bottom-4 left-4 text-white font-serif text-xl font-bold">Colliers</span>
</div>
</div>
<div class="text-center group cursor-pointer" data-aos="fade-up" data-aos-delay="200">
<div class="relative mb-4 overflow-hidden rounded-2xl">
<img src="https://images.pexels.com/photos/11706728/pexels-photo-11706728.jpeg?auto=compress&cs=tinysrgb&w=300"
alt="Bracelets"
class="w-full h-56 object-cover group-hover:scale-110 transition duration-500"
onerror="this.src='https://placehold.co/300/f59e0b/ffffff?text=Bracelets'">
<div class="absolute inset-0 bg-gradient-to-t from-stone-900/50 to-transparent"></div>
<span class="absolute bottom-4 left-4 text-white font-serif text-xl font-bold">Bracelets</span>
</div>
</div>
<div class="text-center group cursor-pointer" data-aos="fade-up" data-aos-delay="300">
<div class="relative mb-4 overflow-hidden rounded-2xl">
<img src="https://images.pexels.com/photos/2308873/pexels-photo-2308873.jpeg?auto=compress&cs=tinysrgb&w=300"
alt="Boucles d'oreilles"
class="w-full h-56 object-cover group-hover:scale-110 transition duration-500"
onerror="this.src='https://placehold.co/300/b45309/ffffff?text=Boucles'">
<div class="absolute inset-0 bg-gradient-to-t from-stone-900/50 to-transparent"></div>
<span class="absolute bottom-4 left-4 text-white font-serif text-xl font-bold">Boucles</span>
</div>
</div>
</div>
</div>
</section>
<!-- ==================== PRODUITS EN VEDETTE ==================== -->
<section class="py-16 bg-stone-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-end mb-10" data-aos="fade-up">
<div>
<span class="text-amber-600 font-semibold text-sm uppercase tracking-wider">Nos créations</span>
<h2 class="font-serif text-4xl font-bold text-stone-800 mt-2">Pièces en vedette</h2>
<div class="w-20 h-0.5 bg-amber-400 mt-3"></div>
</div>
<a href="#" class="text-amber-600 hover:text-amber-700 font-medium flex items-center gap-1">
Voir tout <i class="fas fa-arrow-right text-sm"></i>
</a>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
<!-- Produit 1 -->
<div class="bg-white rounded-2xl overflow-hidden shadow-sm hover-lift border border-amber-100" data-aos="fade-up" data-aos-delay="0">
<div class="relative">
<span class="absolute top-3 left-3 bg-red-500 text-white text-xs font-bold px-2 py-1 rounded-full z-10">-20%</span>
<button class="absolute top-3 right-3 w-8 h-8 bg-white/90 backdrop-blur-sm rounded-full flex items-center justify-center text-stone-400 hover:text-red-500 transition z-10">
<i class="far fa-heart"></i>
</button>
<img src="https://images.pexels.com/photos/12716544/pexels-photo-12716544.jpeg?auto=compress&cs=tinysrgb&w=400"
alt="Bague Solitaire"
class="w-full h-64 object-cover"
onerror="this.src='https://placehold.co/400/fbbf24/ffffff?text=Bague+Diamant'">
</div>
<div class="p-5">
<div class="flex items-center gap-1 mb-2">
<i class="fas fa-star text-amber-400 text-xs"></i>
<i class="fas fa-star text-amber-400 text-xs"></i>
<i class="fas fa-star text-amber-400 text-xs"></i>
<i class="fas fa-star text-amber-400 text-xs"></i>
<i class="fas fa-star-half-alt text-amber-400 text-xs"></i>
<span class="text-xs text-stone-400 ml-1">(128)</span>
</div>
<h3 class="font-serif text-lg font-bold text-stone-800 mb-1">Bague Solitaire Diamant</h3>
<p class="text-sm text-stone-500 mb-3">Or blanc 18 carats · 0.50 ct</p>
<div class="flex items-center gap-2 mb-4">
<span class="text-xl font-bold text-stone-800">1 290€</span>
<span class="text-sm text-stone-400 line-through">1 590€</span>
</div>
<button class="w-full bg-stone-800 hover:bg-amber-600 text-white font-medium py-2.5 rounded-full transition flex items-center justify-center gap-2">
<i class="fas fa-shopping-bag"></i> Ajouter au panier
</button>
</div>
</div>
<!-- Produit 2 -->
<div class="bg-white rounded-2xl overflow-hidden shadow-sm hover-lift border border-amber-100" data-aos="fade-up" data-aos-delay="100">
<div class="relative">
<span class="absolute top-3 left-3 bg-green-500 text-white text-xs font-bold px-2 py-1 rounded-full z-10">Nouveau</span>
<button class="absolute top-3 right-3 w-8 h-8 bg-white/90 backdrop-blur-sm rounded-full flex items-center justify-center text-stone-400 hover:text-red-500 transition z-10">
<i class="far fa-heart"></i>
</button>
<img src="https://images.pexels.com/photos/10616755/pexels-photo-10616755.jpeg?auto=compress&cs=tinysrgb&w=400"
alt="Collier Perles"
class="w-full h-64 object-cover"
onerror="this.src='https://placehold.co/400/eab308/ffffff?text=Collier+Perles'">
</div>
<div class="p-5">
<div class="flex items-center gap-1 mb-2">
<i class="fas fa-star text-amber-400 text-xs"></i>
<i class="fas fa-star text-amber-400 text-xs"></i>
<i class="fas fa-star text-amber-400 text-xs"></i>
<i class="fas fa-star text-amber-400 text-xs"></i>
<i class="fas fa-star text-amber-400 text-xs"></i>
<span class="text-xs text-stone-400 ml-1">(87)</span>
</div>
<h3 class="font-serif text-lg font-bold text-stone-800 mb-1">Collier de Perles d'Akoya</h3>
<p class="text-sm text-stone-500 mb-3">Perles de culture · Fermoir or rose</p>
<div class="flex items-center gap-2 mb-4">
<span class="text-xl font-bold text-stone-800">890€</span>
</div>
<button class="w-full bg-stone-800 hover:bg-amber-600 text-white font-medium py-2.5 rounded-full transition flex items-center justify-center gap-2">
<i class="fas fa-shopping-bag"></i> Ajouter au panier
</button>
</div>
</div>
<!-- Produit 3 -->
<div class="bg-white rounded-2xl overflow-hidden shadow-sm hover-lift border border-amber-100" data-aos="fade-up" data-aos-delay="200">
<div class="relative">
<button class="absolute top-3 right-3 w-8 h-8 bg-white/90 backdrop-blur-sm rounded-full flex items-center justify-center text-stone-400 hover:text-red-500 transition z-10">
<i class="far fa-heart"></i>
</button>
<img src="https://images.pexels.com/photos/12126931/pexels-photo-12126931.jpeg?auto=compress&cs=tinysrgb&w=400"
alt="Bracelet Tennis"
class="w-full h-64 object-cover"
onerror="this.src='https://placehold.co/400/d97706/ffffff?text=Bracelet+Tennis'">
</div>
<div class="p-5">
<div class="flex items-center gap-1 mb-2">
<i class="fas fa-star text-amber-400 text-xs"></i>
<i class="fas fa-star text-amber-400 text-xs"></i>
<i class="fas fa-star text-amber-400 text-xs"></i>
<i class="fas fa-star text-amber-400 text-xs"></i>
<i class="fas fa-star text-amber-400 text-xs"></i>
<span class="text-xs text-stone-400 ml-1">(56)</span>
</div>
<h3 class="font-serif text-lg font-bold text-stone-800 mb-1">Bracelet Tennis Diamants</h3>
<p class="text-sm text-stone-500 mb-3">Or jaune 18k · 2.5 ct total</p>
<div class="flex items-center gap-2 mb-4">
<span class="text-xl font-bold text-stone-800">3 490€</span>
</div>
<button class="w-full bg-stone-800 hover:bg-amber-600 text-white font-medium py-2.5 rounded-full transition flex items-center justify-center gap-2">
<i class="fas fa-shopping-bag"></i> Ajouter au panier
</button>
</div>
</div>
<!-- Produit 4 -->
<div class="bg-white rounded-2xl overflow-hidden shadow-sm hover-lift border border-amber-100" data-aos="fade-up" data-aos-delay="300">
<div class="relative">
<span class="absolute top-3 left-3 bg-amber-500 text-white text-xs font-bold px-2 py-1 rounded-full z-10">Best-seller</span>
<button class="absolute top-3 right-3 w-8 h-8 bg-white/90 backdrop-blur-sm rounded-full flex items-center justify-center text-red-500 transition z-10">
<i class="fas fa-heart"></i>
</button>
<img src="https://images.pexels.com/photos/1124466/pexels-photo-1124466.jpeg?auto=compress&cs=tinysrgb&w=400"
alt="Boucles Créoles"
class="w-full h-64 object-cover"
onerror="this.src='https://placehold.co/400/b45309/ffffff?text=Boucles+Créoles'">
</div>
<div class="p-5">
<div class="flex items-center gap-1 mb-2">
<i class="fas fa-star text-amber-400 text-xs"></i>
<i class="fas fa-star text-amber-400 text-xs"></i>
<i class="fas fa-star text-amber-400 text-xs"></i>
<i class="fas fa-star text-amber-400 text-xs"></i>
<i class="fas fa-star text-amber-400 text-xs"></i>
<span class="text-xs text-stone-400 ml-1">(203)</span>
</div>
<h3 class="font-serif text-lg font-bold text-stone-800 mb-1">Boucles Créoles Or Massif</h3>
<p class="text-sm text-stone-500 mb-3">Or jaune 18 carats · 25mm</p>
<div class="flex items-center gap-2 mb-4">
<span class="text-xl font-bold text-stone-800">590€</span>
</div>
<button class="w-full bg-stone-800 hover:bg-amber-600 text-white font-medium py-2.5 rounded-full transition flex items-center justify-center gap-2">
<i class="fas fa-shopping-bag"></i> Ajouter au panier
</button>
</div>
</div>
</div>
</div>
</section>
<!-- ==================== BANNIÈRE PROMOTION ==================== -->
<section class="py-12" data-aos="fade-up">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="gold-gradient rounded-3xl p-10 md:p-16 relative overflow-hidden">
<div class="absolute inset-0 opacity-10">
<i class="fas fa-gem text-9xl text-white absolute -top-10 -right-10"></i>
<i class="fas fa-gem text-7xl text-white absolute -bottom-8 -left-8"></i>
</div>
<div class="relative z-10 flex flex-col md:flex-row items-center justify-between">
<div class="text-white mb-6 md:mb-0">
<h3 class="font-serif text-3xl md:text-4xl font-bold mb-3">Offre exclusive de lancement</h3>
<p class="text-white/90 text-lg">-15% sur votre première commande avec le code</p>
<div class="bg-white/20 backdrop-blur-sm rounded-full px-6 py-3 inline-block mt-4">
<span class="text-2xl font-bold tracking-wider text-white">BIJOUX15</span>
</div>
</div>
<a href="#" class="bg-white text-amber-700 px-8 py-4 rounded-full font-bold hover:shadow-xl transition flex items-center gap-2">
<i class="fas fa-gift"></i> En profiter maintenant
</a>
</div>
</div>
</div>
</section>
<!-- ==================== SERVICES ==================== -->
<section class="py-16 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-4 gap-6">
<div class="text-center p-6" data-aos="fade-up" data-aos-delay="0">
<div class="w-16 h-16 bg-amber-100 rounded-2xl flex items-center justify-center mx-auto mb-4">
<i class="fas fa-truck text-2xl text-amber-600"></i>
</div>
<h4 class="font-serif text-xl font-bold text-stone-800 mb-2">Livraison offerte</h4>
<p class="text-sm text-stone-500">Dès 150€ d'achat en France métropolitaine</p>
</div>
<div class="text-center p-6" data-aos="fade-up" data-aos-delay="100">
<div class="w-16 h-16 bg-amber-100 rounded-2xl flex items-center justify-center mx-auto mb-4">
<i class="fas fa-shield-alt text-2xl text-amber-600"></i>
</div>
<h4 class="font-serif text-xl font-bold text-stone-800 mb-2">Paiement sécurisé</h4>
<p class="text-sm text-stone-500">Transactions cryptées et protégées</p>
</div>
<div class="text-center p-6" data-aos="fade-up" data-aos-delay="200">
<div class="w-16 h-16 bg-amber-100 rounded-2xl flex items-center justify-center mx-auto mb-4">
<i class="fas fa-undo-alt text-2xl text-amber-600"></i>
</div>
<h4 class="font-serif text-xl font-bold text-stone-800 mb-2">Retours gratuits</h4>
<p class="text-sm text-stone-500">Sous 30 jours, échange ou remboursement</p>
</div>
<div class="text-center p-6" data-aos="fade-up" data-aos-delay="300">
<div class="w-16 h-16 bg-amber-100 rounded-2xl flex items-center justify-center mx-auto mb-4">
<i class="fas fa-headset text-2xl text-amber-600"></i>
</div>
<h4 class="font-serif text-xl font-bold text-stone-800 mb-2">Service client 24/7</h4>
<p class="text-sm text-stone-500">Une équipe d'experts à votre écoute</p>
</div>
</div>
</div>
</section>
<!-- ==================== TÉMOIGNAGES ==================== -->
<section class="py-16 bg-stone-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-12" data-aos="fade-up">
<span class="text-amber-600 font-semibold text-sm uppercase tracking-wider">Avis clients</span>
<h2 class="font-serif text-4xl font-bold text-stone-800 mt-2">Ce qu'ils disent de nous</h2>
<div class="w-20 h-0.5 bg-amber-400 mx-auto mt-4"></div>
</div>
<div class="grid md:grid-cols-3 gap-6">
<div class="bg-white rounded-2xl p-6 shadow-sm border border-amber-50" data-aos="fade-up" data-aos-delay="0">
<div class="flex items-center gap-1 mb-4">
<i class="fas fa-star text-amber-400"></i>
<i class="fas fa-star text-amber-400"></i>
<i class="fas fa-star text-amber-400"></i>
<i class="fas fa-star text-amber-400"></i>
<i class="fas fa-star text-amber-400"></i>
</div>
<p class="text-stone-600 italic mb-6">"Une bague de fiançailles absolument magnifique. Le service a été impeccable du début à la fin. Je recommande vivement !"</p>
<div class="flex items-center gap-3">
<div class="w-12 h-12 bg-amber-200 rounded-full flex items-center justify-center">
<span class="font-serif font-bold text-amber-800">SB</span>
</div>
<div>
<h5 class="font-bold text-stone-800">Sophie Bernard</h5>
<span class="text-xs text-stone-500">Paris</span>
</div>
</div>
</div>
<div class="bg-white rounded-2xl p-6 shadow-sm border border-amber-50" data-aos="fade-up" data-aos-delay="100">
<div class="flex items-center gap-1 mb-4">
<i class="fas fa-star text-amber-400"></i>
<i class="fas fa-star text-amber-400"></i>
<i class="fas fa-star text-amber-400"></i>
<i class="fas fa-star text-amber-400"></i>
<i class="fas fa-star text-amber-400"></i>
</div>
<p class="text-stone-600 italic mb-6">"Des bijoux d'une qualité exceptionnelle. Le collier de perles que j'ai offert a fait sensation. Livraison rapide et soignée."</p>
<div class="flex items-center gap-3">
<div class="w-12 h-12 bg-amber-200 rounded-full flex items-center justify-center">
<span class="font-serif font-bold text-amber-800">MD</span>
</div>
<div>
<h5 class="font-bold text-stone-800">Marc Dubois</h5>
<span class="text-xs text-stone-500">Lyon</span>
</div>
</div>
</div>
<div class="bg-white rounded-2xl p-6 shadow-sm border border-amber-50" data-aos="fade-up" data-aos-delay="200">
<div class="flex items-center gap-1 mb-4">
<i class="fas fa-star text-amber-400"></i>
<i class="fas fa-star text-amber-400"></i>
<i class="fas fa-star text-amber-400"></i>
<i class="fas fa-star text-amber-400"></i>
<i class="fas fa-star-half-alt text-amber-400"></i>
</div>
<p class="text-stone-600 italic mb-6">"Très belle expérience d'achat. Les boucles d'oreilles sont encore plus belles en vrai. Je reviendrai sans hésiter."</p>
<div class="flex items-center gap-3">
<div class="w-12 h-12 bg-amber-200 rounded-full flex items-center justify-center">
<span class="font-serif font-bold text-amber-800">CL</span>
</div>
<div>
<h5 class="font-bold text-stone-800">Camille Leroy</h5>
<span class="text-xs text-stone-500">Bordeaux</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ==================== NEWSLETTER ==================== -->
<section class="py-16 bg-white">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<div data-aos="fade-up">
<i class="fas fa-envelope-open-text text-4xl text-amber-500 mb-4"></i>
<h3 class="font-serif text-3xl font-bold text-stone-800 mb-3">Restez informé</h3>
<p class="text-stone-500 mb-8">Inscrivez-vous à notre newsletter et recevez nos offres exclusives en avant-première.</p>
<form class="flex flex-col sm:flex-row gap-3 max-w-lg mx-auto">
<input type="email" placeholder="Votre adresse email"
class="flex-1 px-5 py-4 rounded-full border border-stone-200 focus:border-amber-400 focus:ring-2 focus:ring-amber-200 outline-none transition">
<button class="gold-gradient text-white px-8 py-4 rounded-full font-semibold hover:shadow-lg transition">
S'inscrire
</button>
</form>
<p class="text-xs text-stone-400 mt-4">En vous inscrivant, vous acceptez notre politique de confidentialité.</p>
</div>
</div>
</section>
<!-- ==================== FOOTER ==================== -->
<footer class="bg-stone-900 text-stone-300 pt-16 pb-8">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-8 mb-12">
<div class="lg:col-span-2">
<div class="flex items-center gap-2 mb-4">
<i class="fas fa-gem text-2xl text-amber-500"></i>
<span class="text-2xl font-serif font-bold text-white">Éclat<span class="text-amber-500">Précieux</span></span>
</div>
<p class="text-stone-400 text-sm mb-4">Bijouterie de luxe · Créations artisanales depuis 1998. Chaque pièce est unique et façonnée avec passion.</p>
<div class="flex gap-4">
<a href="#" class="w-10 h-10 bg-stone-800 rounded-full flex items-center justify-center text-stone-400 hover:bg-amber-500 hover:text-white transition">
<i class="fab fa-instagram"></i>
</a>
<a href="#" class="w-10 h-10 bg-stone-800 rounded-full flex items-center justify-center text-stone-400 hover:bg-amber-500 hover:text-white transition">
<i class="fab fa-facebook-f"></i>
</a>
<a href="#" class="w-10 h-10 bg-stone-800 rounded-full flex items-center justify-center text-stone-400 hover:bg-amber-500 hover:text-white transition">
<i class="fab fa-pinterest-p"></i>
</a>
</div>
</div>
<div>
<h5 class="text-white font-bold mb-4">Boutique</h5>
<ul class="space-y-2 text-sm">
<li><a href="#" class="text-stone-400 hover:text-amber-400 transition">Collections</a></li>
<li><a href="#" class="text-stone-400 hover:text-amber-400 transition">Bagues</a></li>
<li><a href="#" class="text-stone-400 hover:text-amber-400 transition">Colliers</a></li>
<li><a href="#" class="text-stone-400 hover:text-amber-400 transition">Bracelets</a></li>
<li><a href="#" class="text-stone-400 hover:text-amber-400 transition">Boucles d'oreilles</a></li>
</ul>
</div>
<div>
<h5 class="text-white font-bold mb-4">Service client</h5>
<ul class="space-y-2 text-sm">
<li><a href="#" class="text-stone-400 hover:text-amber-400 transition">Contact</a></li>
<li><a href="#" class="text-stone-400 hover:text-amber-400 transition">Livraison</a></li>
<li><a href="#" class="text-stone-400 hover:text-amber-400 transition">Retours</a></li>
<li><a href="#" class="text-stone-400 hover:text-amber-400 transition">FAQ</a></li>
<li><a href="#" class="text-stone-400 hover:text-amber-400 transition">Garantie</a></li>
</ul>
</div>
<div>
<h5 class="text-white font-bold mb-4">Contact</h5>
<ul class="space-y-3 text-sm">
<li class="flex items-start gap-3">
<i class="fas fa-map-marker-alt text-amber-500 mt-1"></i>
<span class="text-stone-400">15 rue de la Paix, 75002 Paris</span>
</li>
<li class="flex items-center gap-3">
<i class="fas fa-phone text-amber-500"></i>
<span class="text-stone-400">+33 1 42 68 53 00</span>
</li>
<li class="flex items-center gap-3">
<i class="fas fa-envelope text-amber-500"></i>
<span class="text-stone-400">contact@eclatprecieux.fr</span>
</li>
</ul>
</div>
</div>
<hr class="border-stone-800 mb-6">
<div class="flex flex-wrap justify-between items-center text-xs text-stone-500">
<span>© 2026 Éclat Précieux. Tous droits réservés.</span>
<div class="flex gap-4">
<a href="#" class="hover:text-amber-400 transition">Mentions légales</a>
<a href="#" class="hover:text-amber-400 transition">Confidentialité</a>
<a href="#" class="hover:text-amber-400 transition">CGV</a>
</div>
</div>
</div>
</footer>
<!-- Scripts -->
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
AOS.init({ duration: 800, once: true });
</script>
</body>
</html>