code

<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Boutique Minimale | Refonte E-commerce</title> <script src="https://cdn.tailwindcss.com"></script> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap" rel="stylesheet"> <style> body { font-family: 'Inter', sans-serif; background-color: #f9f8f4; } </style> </head> <body class="bg-gray-50 text-gray-900"> <div class="bg-gray-100 py-2.5 text-center text-[10px] tracking-widest uppercase border-b border-gray-200"> Livraison Express Gratuite dès 80€ | Achat Sécurisé </div> <nav class="flex flex-col md:flex-row items-center justify-between px-10 py-6 bg-white shadow-sm sticky top-0 z-50"> <div class="flex space-x-6 text-sm font-light uppercase tracking-tight"> <a href="#" class="hover:underline">Home</a> <a href="#" class="hover:underline">New Arrivals</a> <a href="#" class="hover:underline">Men</a> <a href="#" class="hover:underline text-red-600 font-medium">Sale</a> </div> <div class="my-4 md:my-0"> <h1 class="text-3xl font-extrabold tracking-tighter uppercase text-center">Boutique<br>Minimale</h1> </div> <div class="flex items-center space-x-6"> <div class="hidden md:block relative"> <input type="text" placeholder="Search" class="bg-gray-50 border border-gray-200 rounded-full px-4 py-1.5 text-sm outline-none focus:border-gray-400"> </div> <a href="#" class="text-xl">👤</a> <a href="#" class="text-xl relative">🛒<span class="absolute -top-2 -right-2 bg-yellow-600 text-white text-[10px] rounded-full px-1.5 py-0.5">2</span></a> </div> </nav> <header class="relative h-[85vh] bg-gray-300 overflow-hidden"> <img src="https://images.unsplash.com/photo-1591047139829-d91aecb6caea?auto=format&fit=crop&q=80&w=1920" alt="Hero Image" class="w-full h-full object-cover opacity-90"> <div class="absolute inset-0 flex flex-col items-center justify-center text-center bg-black/15"> <h2 class="text-white text-5xl md:text-7xl font-bold tracking-tight px-6 max-w-5xl drop-shadow-lg"> REFONTE E-COMMERCE : <br> MODERNISER L'EXPÉRIENCE CLIENT </h2> <button class="mt-10 bg-white text-black px-10 py-5 text-sm font-bold uppercase hover:bg-gray-100 transition-all rounded-sm"> Découvrir la Collection </button> </div> </header> <section class="grid grid-cols-1 md:grid-cols-3 gap-8 text-center py-16 border-b border-gray-200 bg-white px-6"> <div class="flex flex-col items-center space-y-3"> <span class="text-3xl">🔒</span> <span class="text-xs font-bold uppercase tracking-widest text-gray-700">Achat Sécurisé</span> </div> <div class="flex flex-col items-center space-y-3"> <span class="text-3xl">🚚</span> <span class="text-xs font-bold uppercase tracking-widest text-gray-700">Livraison Express</span> </div> <div class="flex flex-col items-center space-y-3"> <span class="text-3xl">🔄</span> <span class="text-xs font-bold uppercase tracking-widest text-gray-700">Retours Faciles</span> </div> </section> <main class="max-w-7xl mx-auto px-6 py-20"> <h3 class="text-2xl font-bold uppercase mb-12 tracking-tight">Nos Nouveautés</h3> <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-12"> <div class="group cursor-pointer"> <div class="aspect-[3/4] bg-gray-100 overflow-hidden mb-5"> <img src="https://images.unsplash.com/photo-1551028719-00167b16eac5?auto=format&fit=crop&q=80&w=600" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"> </div> <h3 class="text-sm font-semibold">Veste Bomber Minimale</h3> <p class="text-gray-500 text-xs py-1">Minimale</p> <p class="font-bold text-lg">€120</p> <div class="text-yellow-500 text-xs mt-1.5">★★★★★</div> </div> <div class="group cursor-pointer"> <div class="aspect-[3/4] bg-gray-100 overflow-hidden mb-5"> <img src="https://images.unsplash.com/photo-1556821840-3a63f95609a7?auto=format&fit=crop&q=80&w=600" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"> </div> <h3 class="text-sm font-semibold">Pull en Maille Premium</h3> <p class="text-gray-500 text-xs py-1">Minimale</p> <p class="font-bold text-lg">€85</p> <div class="text-yellow-500 text-xs mt-1.5">★★★★☆</div> </div> <div class="group curso