Bootstrap 5
E Commerce
Home
Bootstrap 5 Design
Template
Html
Integration List
Page Web
E-commerce Home Bootstrap 5 optimisées pour la visualisation et l'interaction. Composants modernes et responsive.
<!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.0" />
<title>Template Ecommerce Home Bootstrap 5 2026 23040041 | AngularForAll</title>
<!-- Bootstrap 5 + Icônes -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<!-- AOS Animation -->
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<!-- Swiper Carousel -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<style>
* { font-family: 'Inter', sans-serif; }
body {
background: linear-gradient(135deg, #f8fafc 0%, #eef2f6 100%);
padding-bottom: 2rem;
}
/* Header / Navigation */
.navbar-custom {
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
box-shadow: 0 4px 20px rgba(0,0,0,0.03);
padding: 1rem 0;
border-bottom: 1px solid rgba(255,255,255,0.5);
}
.navbar-brand {
font-weight: 800;
font-size: 1.8rem;
background: linear-gradient(135deg, #1e293b, #3b82f6);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.search-bar {
background: white;
border-radius: 60px;
padding: 0.5rem 0.5rem 0.5rem 1.5rem;
box-shadow: 0 4px 16px rgba(0,0,0,0.04);
border: 1px solid #e2e8f0;
}
.search-bar input {
border: none;
background: transparent;
padding: 0.5rem 0;
}
.search-bar input:focus {
box-shadow: none;
outline: none;
}
.search-bar button {
border-radius: 60px;
padding: 0.5rem 1.5rem;
}
/* Catégories */
.category-card {
background: white;
border-radius: 28px;
padding: 2rem 1rem;
text-align: center;
transition: all 0.3s ease;
border: 1px solid #f1f5f9;
cursor: pointer;
text-decoration: none;
display: block;
}
.category-card:hover {
transform: translateY(-8px);
box-shadow: 0 25px 35px -12px rgba(0,0,0,0.1);
border-color: #cbd5e0;
}
.category-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #eff6ff, #dbeafe);
border-radius: 28px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.2rem;
}
.category-icon i {
font-size: 2.5rem;
color: #2563eb;
}
.category-card h5 {
font-weight: 700;
color: #1e293b;
margin-bottom: 0.3rem;
}
.category-card p {
color: #64748b;
font-size: 0.9rem;
margin: 0;
}
/* Bannières promotionnelles */
.promo-banner {
background: linear-gradient(135deg, #1e293b, #0f172a);
border-radius: 32px;
padding: 3rem 2.5rem;
position: relative;
overflow: hidden;
color: white;
}
.promo-banner::before {
content: '';
position: absolute;
top: -50%;
right: -10%;
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(59,130,246,0.3) 0%, transparent 70%);
border-radius: 50%;
}
.promo-banner-2 {
background: linear-gradient(135deg, #7c3aed, #6d28d9);
border-radius: 32px;
padding: 3rem 2.5rem;
position: relative;
overflow: hidden;
color: white;
}
.promo-banner-2::before {
content: '';
position: absolute;
bottom: -30%;
left: -10%;
width: 350px;
height: 350px;
background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
border-radius: 50%;
}
.promo-badge {
background: rgba(255,255,255,0.2);
backdrop-filter: blur(10px);
padding: 0.35rem 1.2rem;
border-radius: 40px;
font-weight: 600;
font-size: 0.8rem;
display: inline-block;
margin-bottom: 1rem;
border: 1px solid rgba(255,255,255,0.1);
}
.btn-promo {
background: white;
color: #1e293b;
border: none;
padding: 0.8rem 2rem;
border-radius: 60px;
font-weight: 700;
transition: all 0.3s;
}
.btn-promo:hover {
background: #f8fafc;
transform: translateY(-3px);
box-shadow: 0 15px 25px -8px rgba(0,0,0,0.2);
}
.btn-promo-outline {
background: transparent;
color: white;
border: 1.5px solid rgba(255,255,255,0.5);
padding: 0.8rem 2rem;
border-radius: 60px;
font-weight: 600;
transition: all 0.3s;
}
.btn-promo-outline:hover {
background: rgba(255,255,255,0.1);
border-color: white;
color: white;
}
/* Cartes produits */
.product-card {
background: white;
border-radius: 24px;
padding: 1.5rem;
transition: all 0.3s ease;
border: 1px solid #f1f5f9;
position: relative;
}
.product-card:hover {
transform: translateY(-6px);
box-shadow: 0 25px 35px -12px rgba(0,0,0,0.1);
border-color: #cbd5e0;
}
.product-badge {
position: absolute;
top: 1rem;
left: 1rem;
z-index: 2;
}
.wishlist-btn {
position: absolute;
top: 1rem;
right: 1rem;
width: 36px;
height: 36px;
background: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
transition: all 0.2s;
z-index: 2;
border: 1px solid #f1f5f9;
color: #ef4444;
}
.wishlist-btn:hover {
background: #fef2f2;
transform: scale(1.1);
}
.product-image {
height: 200px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1rem;
border-radius: 20px;
background: #fafcff;
}
.rating-stars {
color: #fbbf24;
letter-spacing: 2px;
}
.btn-add {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 40px;
padding: 0.5rem 1rem;
font-weight: 600;
font-size: 0.9rem;
transition: all 0.2s;
color: #1e293b;
}
.btn-add:hover {
background: #1e293b;
color: white;
border-color: #1e293b;
}
/* Bannière centrale */
.hero-banner {
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
border-radius: 40px;
padding: 3rem;
margin: 2rem 0;
border: 1px solid rgba(255,255,255,0.8);
box-shadow: 0 30px 50px -20px rgba(0,0,0,0.1);
}
/* Section marques */
.brand-logo {
background: white;
border-radius: 24px;
padding: 1.5rem 1rem;
text-align: center;
border: 1px solid #f1f5f9;
transition: all 0.2s;
}
.brand-logo:hover {
box-shadow: 0 10px 25px -8px rgba(0,0,0,0.08);
border-color: #cbd5e0;
}
/* Newsletter */
.newsletter-section {
background: linear-gradient(135deg, #1e293b, #0f172a);
border-radius: 40px;
padding: 3.5rem 3rem;
color: white;
}
.newsletter-input {
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.2);
border-radius: 60px;
padding: 0.9rem 1.5rem;
color: white;
}
.newsletter-input::placeholder {
color: rgba(255,255,255,0.6);
}
.newsletter-input:focus {
background: rgba(255,255,255,0.15);
border-color: rgba(255,255,255,0.5);
color: white;
box-shadow: none;
}
.btn-newsletter {
background: white;
color: #1e293b;
border-radius: 60px;
padding: 0.9rem 2rem;
font-weight: 700;
border: none;
}
.btn-newsletter:hover {
background: #f8fafc;
transform: translateY(-2px);
}
/* Footer */
.footer-section {
background: white;
border-radius: 40px 40px 0 0;
padding: 3rem 0 1.5rem;
margin-top: 3rem;
box-shadow: 0 -10px 30px -10px rgba(0,0,0,0.03);
}
/* Swiper personnalisation */
.swiper {
padding: 1rem 0.5rem;
}
.swiper-button-next, .swiper-button-prev {
width: 44px;
height: 44px;
background: white;
border-radius: 50%;
box-shadow: 0 8px 20px rgba(0,0,0,0.1);
color: #1e293b;
}
.swiper-button-next:after, .swiper-button-prev:after {
font-size: 1.2rem;
font-weight: bold;
}
/* Responsive */
@media (max-width: 768px) {
.hero-banner { padding: 2rem 1.5rem; }
.promo-banner, .promo-banner-2 { padding: 2rem 1.5rem; }
.navbar-brand { font-size: 1.4rem; }
}
</style>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-custom sticky-top">
<div class="container">
<a class="navbar-brand" href="#">
<i class="bi bi-headphones me-2"></i>AudioTech
</a>
<!-- Barre de recherche desktop -->
<div class="d-none d-lg-flex search-bar mx-4 flex-grow-1" style="max-width: 500px;">
<input type="text" class="form-control" placeholder="Rechercher un produit...">
<button class="btn btn-primary"><i class="bi bi-search"></i></button>
</div>
<button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mx-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link fw-semibold px-3 active" href="#">Accueil</a></li>
<li class="nav-item"><a class="nav-link fw-semibold px-3" href="#">Boutique</a></li>
<li class="nav-item"><a class="nav-link fw-semibold px-3" href="#">Casques</a></li>
<li class="nav-item"><a class="nav-link fw-semibold px-3" href="#">Écouteurs</a></li>
<li class="nav-item"><a class="nav-link fw-semibold px-3" href="#">Promos</a></li>
</ul>
<div class="d-flex gap-3 align-items-center">
<button class="btn btn-light rounded-circle p-2 position-relative">
<i class="bi bi-heart"></i>
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">3</span>
</button>
<button class="btn btn-primary rounded-pill px-4 fw-semibold">
<i class="bi bi-cart3 me-2"></i>Panier
<span class="badge bg-white text-dark ms-2">2</span>
</button>
</div>
</div>
</div>
</nav>
<!-- Barre de recherche mobile -->
<div class="container d-lg-none mt-3">
<div class="search-bar">
<input type="text" class="form-control" placeholder="Rechercher...">
<button class="btn btn-primary"><i class="bi bi-search"></i></button>
</div>
</div>
<!-- Hero Banner principal -->
<div class="container mt-4">
<div class="hero-banner" data-aos="fade-up">
<div class="row align-items-center">
<div class="col-lg-6">
<span class="promo-badge bg-primary bg-opacity-10 text-primary border-0 mb-3">
<i class="bi bi-stars me-1"></i>Nouvelle collection 2026
</span>
<h1 class="display-4 fw-bold mb-3" style="line-height: 1.2;">
L'excellence <br>
<span class="text-primary">audio à portée</span> <br>
d'oreille
</h1>
<p class="text-secondary mb-4 fs-5">Découvrez notre gamme premium de casques et écouteurs sans fil.</p>
<div class="d-flex gap-3">
<button class="btn btn-dark rounded-pill px-4 py-2 fw-semibold">
<i class="bi bi-bag me-2"></i>Acheter maintenant
</button>
<button class="btn btn-outline-secondary rounded-pill px-4 py-2 fw-semibold">
En savoir plus <i class="bi bi-arrow-right ms-2"></i>
</button>
</div>
<div class="d-flex gap-4 mt-4">
<div><i class="bi bi-truck text-primary me-1"></i> Livraison gratuite</div>
<div><i class="bi bi-shield-check text-primary me-1"></i> Garantie 2 ans</div>
<div><i class="bi bi-arrow-return-left text-primary me-1"></i> Retours 30j</div>
</div>
</div>
<div class="col-lg-6 text-center">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='450' height='350' viewBox='0 0 300 200'%3E%3Crect width='300' height='200' fill='%23f1f5f9' rx='20'/%3E%3Ccircle cx='150' cy='80' r='40' fill='%233b82f6' opacity='0.7'/%3E%3Crect x='110' y='110' width='80' height='50' rx='10' fill='%231e293b'/%3E%3Ccircle cx='125' cy='135' r='10' fill='%23f59e0b'/%3E%3Ccircle cx='175' cy='135' r='10' fill='%23f59e0b'/%3E%3C/svg%3E"
alt="Hero Product" class="img-fluid" style="max-width: 100%;">
</div>
</div>
</div>
</div>
<!-- Catégories -->
<div class="container mt-5 pt-3">
<div class="d-flex justify-content-between align-items-center mb-4">
<h2 class="fw-bold mb-0">Catégories populaires</h2>
<a href="#" class="text-decoration-none fw-semibold">Voir tout <i class="bi bi-arrow-right"></i></a>
</div>
<div class="row g-4">
<div class="col-6 col-md-3" data-aos="fade-up" data-aos-delay="100">
<a href="#" class="category-card">
<div class="category-icon"><i class="bi bi-headphones"></i></div>
<h5>Casques</h5>
<p>24 produits</p>
</a>
</div>
<div class="col-6 col-md-3" data-aos="fade-up" data-aos-delay="200">
<a href="#" class="category-card">
<div class="category-icon"><i class="bi bi-earbuds"></i></div>
<h5>Écouteurs</h5>
<p>36 produits</p>
</a>
</div>
<div class="col-6 col-md-3" data-aos="fade-up" data-aos-delay="300">
<a href="#" class="category-card">
<div class="category-icon"><i class="bi bi-speaker"></i></div>
<h5>Enceintes</h5>
<p>18 produits</p>
</a>
</div>
<div class="col-6 col-md-3" data-aos="fade-up" data-aos-delay="400">
<a href="#" class="category-card">
<div class="category-icon"><i class="bi bi-usb-c"></i></div>
<h5>Accessoires</h5>
<p>42 produits</p>
</a>
</div>
</div>
</div>
<!-- Promo Banner 1 -->
<div class="container mt-5">
<div class="row g-4">
<div class="col-md-6" data-aos="fade-right">
<div class="promo-banner">
<span class="promo-badge"><i class="bi bi-lightning-charge-fill me-1"></i>Offre flash</span>
<h2 class="display-6 fw-bold mb-3">Jusqu'à -40%</h2>
<p class="mb-4 opacity-75">Sur notre sélection de casques sans fil premium</p>
<button class="btn-promo">
En profiter <i class="bi bi-arrow-right ms-2"></i>
</button>
</div>
</div>
<div class="col-md-6" data-aos="fade-left">
<div class="promo-banner-2">
<span class="promo-badge" style="background: rgba(255,255,255,0.15);"><i class="bi bi-gift me-1"></i>Nouveau client</span>
<h2 class="display-6 fw-bold mb-3">-15% offerts</h2>
<p class="mb-4 opacity-75">Sur votre première commande avec le code WELCOME15</p>
<button class="btn-promo-outline">
Créer un compte <i class="bi bi-person-plus ms-2"></i>
</button>
</div>
</div>
</div>
</div>
<!-- Produits tendance - Carousel -->
<div class="container mt-5 pt-3">
<div class="d-flex justify-content-between align-items-center mb-4">
<h2 class="fw-bold mb-0"><i class="bi bi-fire text-warning me-2"></i>Tendances actuelles</h2>
<a href="#" class="text-decoration-none fw-semibold">Voir tout <i class="bi bi-arrow-right"></i></a>
</div>
<div class="swiper swiper-trending">
<div class="swiper-wrapper">
<!-- Slide 1 -->
<div class="swiper-slide">
<div class="product-card">
<span class="product-badge"><span class="badge bg-danger">-25%</span></span>
<button class="wishlist-btn"><i class="bi bi-heart"></i></button>
<div class="product-image">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Ccircle cx='80' cy='80' r='50' fill='%233b82f6' opacity='0.8'/%3E%3C/svg%3E" alt="Produit">
</div>
<div class="rating-stars mb-1">
<i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-half"></i>
<span class="text-secondary ms-1 small">(128)</span>
</div>
<h6 class="fw-bold">AudioTech Pro X1</h6>
<p class="small text-secondary mb-2">Casque sans fil ANC</p>
<div class="d-flex align-items-center justify-content-between">
<div>
<span class="fw-bold fs-5">249,99 €</span>
<span class="text-secondary text-decoration-line-through ms-2 small">349,99 €</span>
</div>
<button class="btn-add"><i class="bi bi-plus-lg"></i></button>
</div>
</div>
</div>
<!-- Slide 2 -->
<div class="swiper-slide">
<div class="product-card">
<span class="product-badge"><span class="badge bg-success">Nouveau</span></span>
<button class="wishlist-btn"><i class="bi bi-heart"></i></button>
<div class="product-image">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Ccircle cx='80' cy='80' r='50' fill='%2310b981' opacity='0.8'/%3E%3C/svg%3E" alt="Produit">
</div>
<div class="rating-stars mb-1">
<i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i>
<span class="text-secondary ms-1 small">(56)</span>
</div>
<h6 class="fw-bold">AudioTech Air 3</h6>
<p class="small text-secondary mb-2">Écouteurs True Wireless</p>
<div class="d-flex align-items-center justify-content-between">
<div>
<span class="fw-bold fs-5">179,99 €</span>
</div>
<button class="btn-add"><i class="bi bi-plus-lg"></i></button>
</div>
</div>
</div>
<!-- Slide 3 -->
<div class="swiper-slide">
<div class="product-card">
<span class="product-badge"><span class="badge bg-warning text-dark">Best-seller</span></span>
<button class="wishlist-btn"><i class="bi bi-heart-fill text-danger"></i></button>
<div class="product-image">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Ccircle cx='80' cy='80' r='50' fill='%238b5cf6' opacity='0.8'/%3E%3C/svg%3E" alt="Produit">
</div>
<div class="rating-stars mb-1">
<i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star"></i>
<span class="text-secondary ms-1 small">(342)</span>
</div>
<h6 class="fw-bold">AudioTech Studio Pro</h6>
<p class="small text-secondary mb-2">Casque monitoring</p>
<div class="d-flex align-items-center justify-content-between">
<div>
<span class="fw-bold fs-5">329,99 €</span>
<span class="text-secondary text-decoration-line-through ms-2 small">399,99 €</span>
</div>
<button class="btn-add"><i class="bi bi-plus-lg"></i></button>
</div>
</div>
</div>
<!-- Slide 4 -->
<div class="swiper-slide">
<div class="product-card">
<button class="wishlist-btn"><i class="bi bi-heart"></i></button>
<div class="product-image">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Ccircle cx='80' cy='80' r='50' fill='%23ef4444' opacity='0.8'/%3E%3C/svg%3E" alt="Produit">
</div>
<div class="rating-stars mb-1">
<i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i>
<span class="text-secondary ms-1 small">(89)</span>
</div>
<h6 class="fw-bold">AudioTech Sport</h6>
<p class="small text-secondary mb-2">Écouteurs sport IP68</p>
<div class="d-flex align-items-center justify-content-between">
<div>
<span class="fw-bold fs-5">149,99 €</span>
</div>
<button class="btn-add"><i class="bi bi-plus-lg"></i></button>
</div>
</div>
</div>
<!-- Slide 5 -->
<div class="swiper-slide">
<div class="product-card">
<span class="product-badge"><span class="badge bg-info">Éco</span></span>
<button class="wishlist-btn"><i class="bi bi-heart"></i></button>
<div class="product-image">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Ccircle cx='80' cy='80' r='50' fill='%2306b6d4' opacity='0.8'/%3E%3C/svg%3E" alt="Produit">
</div>
<div class="rating-stars mb-1">
<i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-half"></i>
<span class="text-secondary ms-1 small">(67)</span>
</div>
<h6 class="fw-bold">AudioTech Earth</h6>
<p class="small text-secondary mb-2">Matériaux recyclés</p>
<div class="d-flex align-items-center justify-content-between">
<div>
<span class="fw-bold fs-5">199,99 €</span>
</div>
<button class="btn-add"><i class="bi bi-plus-lg"></i></button>
</div>
</div>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
</div>
<!-- Promo centrale -->
<div class="container mt-5">
<div class="row align-items-center g-4" data-aos="fade-up">
<div class="col-lg-6">
<h2 class="display-5 fw-bold mb-3">Audio spatial <span class="text-primary">immersif</span></h2>
<p class="fs-5 text-secondary mb-4">Découvrez une nouvelle dimension sonore avec notre technologie exclusive 3D Audio.</p>
<ul class="list-unstyled">
<li class="mb-3"><i class="bi bi-check-circle-fill text-success me-2"></i>Son surround dynamique</li>
<li class="mb-3"><i class="bi bi-check-circle-fill text-success me-2"></i>Suivi des mouvements de tête</li>
<li class="mb-3"><i class="bi bi-check-circle-fill text-success me-2"></i>Compatible Dolby Atmos</li>
</ul>
<button class="btn btn-dark rounded-pill px-4 py-2 fw-semibold mt-3">
<i class="bi bi-headphones me-2"></i>Explorer la gamme
</button>
</div>
<div class="col-lg-6 text-center">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='250' viewBox='0 0 300 180'%3E%3Crect width='300' height='180' fill='%23f1f5f9' rx='20'/%3E%3Ccircle cx='100' cy='90' r='45' fill='%233b82f6' opacity='0.6'/%3E%3Ccircle cx='200' cy='90' r='45' fill='%238b5cf6' opacity='0.6'/%3E%3C/svg%3E" alt="Spatial Audio" class="img-fluid">
</div>
</div>
</div>
<!-- Nouveautés -->
<div class="container mt-5 pt-3">
<div class="d-flex justify-content-between align-items-center mb-4">
<h2 class="fw-bold mb-0"><i class="bi bi-stars text-primary me-2"></i>Nouveautés</h2>
<a href="#" class="text-decoration-none fw-semibold">Voir tout <i class="bi bi-arrow-right"></i></a>
</div>
<div class="row g-4">
<div class="col-md-3" data-aos="fade-up" data-aos-delay="100">
<div class="product-card">
<span class="product-badge"><span class="badge bg-primary">Nouveau</span></span>
<div class="product-image">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Ccircle cx='70' cy='70' r='45' fill='%23f59e0b' opacity='0.8'/%3E%3C/svg%3E" alt="Produit">
</div>
<h6 class="fw-bold">AudioTech Buds Pro</h6>
<p class="small text-secondary">Écouteurs ANC adaptatif</p>
<span class="fw-bold">219,99 €</span>
</div>
</div>
<div class="col-md-3" data-aos="fade-up" data-aos-delay="200">
<div class="product-card">
<span class="product-badge"><span class="badge bg-primary">Nouveau</span></span>
<div class="product-image">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Ccircle cx='70' cy='70' r='45' fill='%23ec4899' opacity='0.8'/%3E%3C/svg%3E" alt="Produit">
</div>
<h6 class="fw-bold">AudioTech Mini</h6>
<p class="small text-secondary">Ultra-compact 4g</p>
<span class="fw-bold">129,99 €</span>
</div>
</div>
<div class="col-md-3" data-aos="fade-up" data-aos-delay="300">
<div class="product-card">
<span class="product-badge"><span class="badge bg-primary">Nouveau</span></span>
<div class="product-image">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Ccircle cx='70' cy='70' r='45' fill='%2306b6d4' opacity='0.8'/%3E%3C/svg%3E" alt="Produit">
</div>
<h6 class="fw-bold">AudioTech Open</h6>
<p class="small text-secondary">Conduction osseuse</p>
<span class="fw-bold">159,99 €</span>
</div>
</div>
<div class="col-md-3" data-aos="fade-up" data-aos-delay="400">
<div class="product-card">
<span class="product-badge"><span class="badge bg-primary">Nouveau</span></span>
<div class="product-image">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Ccircle cx='70' cy='70' r='45' fill='%2322c55e' opacity='0.8'/%3E%3C/svg%3E" alt="Produit">
</div>
<h6 class="fw-bold">AudioTech Charge</h6>
<p class="small text-secondary">Étui de charge solaire</p>
<span class="fw-bold">89,99 €</span>
</div>
</div>
</div>
</div>
<!-- Marques partenaires -->
<div class="container mt-5 pt-3">
<h2 class="fw-bold mb-4 text-center">Ils nous font confiance</h2>
<div class="row g-3">
<div class="col-6 col-md-2"><div class="brand-logo"><i class="bi bi-spotify fs-1" style="color: #1DB954;"></i><p class="mb-0 small fw-semibold mt-2">Spotify</p></div></div>
<div class="col-6 col-md-2"><div class="brand-logo"><i class="bi bi-apple fs-1"></i><p class="mb-0 small fw-semibold mt-2">Apple</p></div></div>
<div class="col-6 col-md-2"><div class="brand-logo"><i class="bi bi-google fs-1" style="color: #4285F4;"></i><p class="mb-0 small fw-semibold mt-2">Google</p></div></div>
<div class="col-6 col-md-2"><div class="brand-logo"><i class="bi bi-soundwave fs-1" style="color: #8b5cf6;"></i><p class="mb-0 small fw-semibold mt-2">Dolby</p></div></div>
<div class="col-6 col-md-2"><div class="brand-logo"><i class="bi bi-amazon fs-1" style="color: #FF9900;"></i><p class="mb-0 small fw-semibold mt-2">Amazon</p></div></div>
<div class="col-6 col-md-2"><div class="brand-logo"><i class="bi bi-microsoft fs-1" style="color: #00A4EF;"></i><p class="mb-0 small fw-semibold mt-2">Microsoft</p></div></div>
</div>
</div>
<!-- Newsletter -->
<div class="container mt-5">
<div class="newsletter-section" data-aos="fade-up">
<div class="row align-items-center">
<div class="col-lg-6 mb-3 mb-lg-0">
<h2 class="fw-bold mb-2">Restez à l'écoute</h2>
<p class="opacity-75 mb-0">Inscrivez-vous pour recevoir nos offres exclusives et nouveautés.</p>
</div>
<div class="col-lg-6">
<div class="d-flex gap-2">
<input type="email" class="form-control newsletter-input" placeholder="Votre adresse email">
<button class="btn btn-newsletter">S'abonner</button>
</div>
<p class="small opacity-50 mt-2 mb-0"><i class="bi bi-shield-check me-1"></i>Nous respectons votre vie privée</p>
</div>
</div>
</div>
</div>
<!-- Avis clients -->
<div class="container mt-5 pt-3">
<h2 class="fw-bold mb-4 text-center">Ce que disent nos clients</h2>
<div class="row g-4">
<div class="col-md-4" data-aos="fade-up" data-aos-delay="100">
<div class="bg-white rounded-4 p-4 shadow-sm border">
<div class="rating-stars mb-2"><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i></div>
<p class="mb-3">"Qualité sonore incroyable et livraison ultra rapide. Je recommande vivement !"</p>
<div class="d-flex align-items-center gap-3">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='20' fill='%23e2e8f0'/%3E%3C/svg%3E" alt="Avatar" class="rounded-circle" width="40">
<div><h6 class="fw-bold mb-0">Marie L.</h6><span class="verified-badge bg-success bg-opacity-10 text-success px-2 py-1 rounded-pill small">Vérifié</span></div>
</div>
</div>
</div>
<div class="col-md-4" data-aos="fade-up" data-aos-delay="200">
<div class="bg-white rounded-4 p-4 shadow-sm border">
<div class="rating-stars mb-2"><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i></div>
<p class="mb-3">"Service client au top ! J'ai eu un petit souci et ils ont réglé le problème en 24h."</p>
<div class="d-flex align-items-center gap-3">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='20' fill='%23f1f5f9'/%3E%3C/svg%3E" alt="Avatar" class="rounded-circle" width="40">
<div><h6 class="fw-bold mb-0">Thomas R.</h6><span class="verified-badge bg-success bg-opacity-10 text-success px-2 py-1 rounded-pill small">Vérifié</span></div>
</div>
</div>
</div>
<div class="col-md-4" data-aos="fade-up" data-aos-delay="300">
<div class="bg-white rounded-4 p-4 shadow-sm border">
<div class="rating-stars mb-2"><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-half"></i></div>
<p class="mb-3">"Les meilleurs écouteurs que j'ai jamais eus. L'autonomie est bluffante !"</p>
<div class="d-flex align-items-center gap-3">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='20' fill='%23fce7f3'/%3E%3C/svg%3E" alt="Avatar" class="rounded-circle" width="40">
<div><h6 class="fw-bold mb-0">Sophie D.</h6><span class="verified-badge bg-success bg-opacity-10 text-success px-2 py-1 rounded-pill small">Vérifié</span></div>
</div>
</div>
</div>
</div>
<div class="text-center mt-4">
<div class="d-flex align-items-center justify-content-center gap-2">
<span class="fw-bold">4.8</span>
<span class="rating-stars"><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-half"></i></span>
<span class="text-secondary">Basé sur 2,847 avis</span>
<i class="bi bi-chevron-right"></i>
</div>
</div>
</div>
<!-- Footer -->
<footer class="footer-section">
<div class="container">
<div class="row g-4">
<div class="col-md-5">
<h4 class="fw-bold mb-3"><i class="bi bi-headphones me-2"></i>AudioTech</h4>
<p class="text-secondary">L'excellence audio à portée d'oreille. Découvrez notre gamme complète d'équipements audio premium.</p>
<div class="d-flex gap-3 mt-3">
<a href="#" class="text-secondary fs-5"><i class="bi bi-facebook"></i></a>
<a href="#" class="text-secondary fs-5"><i class="bi bi-instagram"></i></a>
<a href="#" class="text-secondary fs-5"><i class="bi bi-twitter-x"></i></a>
<a href="#" class="text-secondary fs-5"><i class="bi bi-youtube"></i></a>
<a href="#" class="text-secondary fs-5"><i class="bi bi-tiktok"></i></a>
</div>
</div>
<div class="col-md-2">
<h6 class="fw-bold">Boutique</h6>
<ul class="list-unstyled">
<li class="mb-2"><a href="#" class="text-secondary text-decoration-none small">Casques</a></li>
<li class="mb-2"><a href="#" class="text-secondary text-decoration-none small">Écouteurs</a></li>
<li class="mb-2"><a href="#" class="text-secondary text-decoration-none small">Enceintes</a></li>
<li class="mb-2"><a href="#" class="text-secondary text-decoration-none small">Promotions</a></li>
<li class="mb-2"><a href="#" class="text-secondary text-decoration-none small">Nouveautés</a></li>
</ul>
</div>
<div class="col-md-2">
<h6 class="fw-bold">Aide</h6>
<ul class="list-unstyled">
<li class="mb-2"><a href="#" class="text-secondary text-decoration-none small">Centre d'aide</a></li>
<li class="mb-2"><a href="#" class="text-secondary text-decoration-none small">Suivi de commande</a></li>
<li class="mb-2"><a href="#" class="text-secondary text-decoration-none small">Livraison</a></li>
<li class="mb-2"><a href="#" class="text-secondary text-decoration-none small">Retours</a></li>
<li class="mb-2"><a href="#" class="text-secondary text-decoration-none small">Contact</a></li>
</ul>
</div>
<div class="col-md-3">
<h6 class="fw-bold">Contact</h6>
<ul class="list-unstyled">
<li class="mb-2 text-secondary small"><i class="bi bi-envelope me-2"></i>contact@audiotech.com</li>
<li class="mb-2 text-secondary small"><i class="bi bi-telephone me-2"></i>+33 1 23 45 67 89</li>
<li class="mb-2 text-secondary small"><i class="bi bi-geo-alt me-2"></i>123 Avenue de l'Audio, Paris</li>
<li class="mb-2 text-secondary small"><i class="bi bi-clock me-2"></i>Lun-Ven 9h-19h</li>
</ul>
</div>
</div>
<hr class="my-4">
<div class="row">
<div class="col-md-6 text-secondary small">
© 2026 AudioTech. Tous droits réservés.
</div>
<div class="col-md-6 text-md-end">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='30' viewBox='0 0 200 30'%3E%3Crect width='200' height='30' fill='%23f1f5f9' rx='6'/%3E%3Ctext x='10' y='20' font-size='10' fill='%2364748b'%3EVisa Mastercard PayPal Apple Pay%3C/text%3E%3C/svg%3E" alt="Paiements" style="height: 30px;">
</div>
</div>
</div>
</footer>
<!-- Scripts -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script>
AOS.init({ duration: 800, once: true });
const swiper = new Swiper('.swiper-trending', {
slidesPerView: 1.2,
spaceBetween: 16,
navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' },
pagination: { el: '.swiper-pagination', clickable: true },
breakpoints: {
576: { slidesPerView: 2 },
992: { slidesPerView: 3 },
1200: { slidesPerView: 4 }
}
});
</script>
</body>
</html>Ouvrir cet aperçu dans un nouvel onglet du navigateur
🔗 Ouvrir dans le navigateur