| | <!DOCTYPE html> |
| | <html lang="fr"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>SILA-Group - Leader en purée de piment au Togo</title> |
| | <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
| | <script src="https://cdn.tailwindcss.com"></script> |
| | <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> |
| | <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> |
| | <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| | <script src="https://unpkg.com/feather-icons"></script> |
| | <style> |
| | .hero-bg { |
| | background-image: url('http://static.photos/food/1200x630/42'); |
| | background-size: cover; |
| | background-position: center; |
| | } |
| | .feature-card:hover { |
| | transform: translateY(-5px); |
| | box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); |
| | } |
| | </style> |
| | </head> |
| | <body class="font-sans bg-gray-50"> |
| | |
| | <nav class="bg-white shadow-md sticky top-0 z-50"> |
| | <div class="container mx-auto px-6 py-3 flex justify-between items-center"> |
| | <div class="flex items-center space-x-2"> |
| | <img src="logo.png" alt="SILA-Group Logo" class="h-12"> |
| | <span class="text-xl font-bold text-red-600">SILA-GROUP</span> |
| | </div> |
| | <div class="hidden md:flex space-x-8"> |
| | <a href="index.html" class="text-red-600 font-medium">Accueil</a> |
| | <a href="produits.html" class="text-gray-600 hover:text-red-600">Nos Produits</a> |
| | <a href="apropos.html" class="text-gray-600 hover:text-red-600">À Propos</a> |
| | <a href="contact.html" class="text-gray-600 hover:text-red-600">Contact</a> |
| | </div> |
| | <button class="md:hidden focus:outline-none"> |
| | <i data-feather="menu"></i> |
| | </button> |
| | </div> |
| | </nav> |
| |
|
| | |
| | <section class="hero-bg text-white py-20"> |
| | <div class="container mx-auto px-6 text-center"> |
| | <h1 class="text-4xl md:text-6xl font-bold mb-6" data-aos="fade-down">Purée de Piment 100% Naturelle</h1> |
| | <p class="text-xl md:text-2xl mb-8 max-w-2xl mx-auto" data-aos="fade-up" data-aos-delay="200"> |
| | Découvrez la première purée de piment made in Togo, préparée avec soin pour rehausser vos plats |
| | </p> |
| | <div class="flex flex-col sm:flex-row justify-center gap-4" data-aos="fade-up" data-aos-delay="400"> |
| | <a href="contact.html" class="bg-red-600 hover:bg-red-700 text-white px-8 py-3 rounded-lg font-medium transition duration-300"> |
| | Commander Maintenant |
| | </a> |
| | <a href="#features" class="bg-white hover:bg-gray-100 text-red-600 px-8 py-3 rounded-lg font-medium transition duration-300"> |
| | En savoir plus |
| | </a> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section id="features" class="py-16 bg-white"> |
| | <div class="container mx-auto px-6"> |
| | <h2 class="text-3xl font-bold text-center mb-16 text-gray-800">Pourquoi choisir nos produits ?</h2> |
| | <div class="grid md:grid-cols-3 gap-8"> |
| | <div class="feature-card bg-white p-8 rounded-lg shadow-md transition duration-300" data-aos="fade-up"> |
| | <div class="text-red-500 mb-4"> |
| | <i data-feather="award" class="w-10 h-10"></i> |
| | </div> |
| | <h3 class="text-xl font-bold mb-3 text-gray-800">Qualité Premium</h3> |
| | <p class="text-gray-600">Piments sélectionnés avec soin et transformés dans des conditions d'hygiène optimales.</p> |
| | </div> |
| | <div class="feature-card bg-white p-8 rounded-lg shadow-md transition duration-300" data-aos="fade-up" data-aos-delay="200"> |
| | <div class="text-red-500 mb-4"> |
| | <i data-feather="leaf" class="w-10 h-10"></i> |
| | </div> |
| | <h3 class="text-xl font-bold mb-3 text-gray-800">100% Naturel</h3> |
| | <p class="text-gray-600">Aucun conservateur artificiel, juste le goût authentique du piment togolais.</p> |
| | </div> |
| | <div class="feature-card bg-white p-8 rounded-lg shadow-md transition duration-300" data-aos="fade-up" data-aos-delay="400"> |
| | <div class="text-red-500 mb-4"> |
| | <i data-feather="clock" class="w-10 h-10"></i> |
| | </div> |
| | <h3 class="text-xl font-bold mb-3 text-gray-800">Pratique</h3> |
| | <p class="text-gray-600">Gagnez du temps en cuisine avec notre purée prête à l'emploi.</p> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section class="py-16 bg-red-600 text-white"> |
| | <div class="container mx-auto px-6 text-center"> |
| | <h2 class="text-3xl font-bold mb-6">Prêt à épicer votre vie ?</h2> |
| | <p class="text-xl mb-8 max-w-2xl mx-auto">Inscrivez-vous pour recevoir nos offres spéciales et actualités</p> |
| | <form class="max-w-md mx-auto flex flex-col sm:flex-row gap-2"> |
| | <input type="email" placeholder="Votre email" class="flex-grow px-4 py-3 rounded-lg focus:outline-none text-gray-800"> |
| | <button type="submit" class="bg-white hover:bg-gray-100 text-red-600 px-6 py-3 rounded-lg font-medium transition duration-300"> |
| | S'inscrire |
| | </button> |
| | </form> |
| | </div> |
| | </section> |
| |
|
| | |
| | <footer class="bg-gray-800 text-white py-12"> |
| | <div class="container mx-auto px-6"> |
| | <div class="grid md:grid-cols-4 gap-8"> |
| | <div> |
| | <div class="flex items-center space-x-2 mb-4"> |
| | <img src="logo.png" alt="SILA-Group Logo" class="h-10"> |
| | <span class="text-xl font-bold">SILA-GROUP</span> |
| | </div> |
| | <p class="text-gray-400">Leader en transformation de piment au Togo depuis 2017.</p> |
| | </div> |
| | <div> |
| | <h3 class="text-lg font-bold mb-4">Produits</h3> |
| | <ul class="space-y-2"> |
| | <li><a href="#" class="text-gray-400 hover:text-white">Purée de piment vert</a></li> |
| | <li><a href="#" class="text-gray-400 hover:text-white">Purée de piment rouge</a></li> |
| | <li><a href="#" class="text-gray-400 hover:text-white">Conditionnements</a></li> |
| | </ul> |
| | </div> |
| | <div> |
| | <h3 class="text-lg font-bold mb-4">Contact</h3> |
| | <ul class="space-y-2"> |
| | <li class="flex items-center space-x-2 text-gray-400"> |
| | <i data-feather="map-pin" class="w-4 h-4"></i> |
| | <span>Djidjolé, Rue 101 AFG, Lomé</span> |
| | </li> |
| | <li class="flex items-center space-x-2 text-gray-400"> |
| | <i data-feather="mail" class="w-4 h-4"></i> |
| | <span>silagrouptogo.com</span> |
| | </li> |
| | <li class="flex items-center space-x-2 text-gray-400"> |
| | <i data-feather="phone" class="w-4 h-4"></i> |
| | <span>+228 90 20 25 73</span> |
| | </li> |
| | </ul> |
| | </div> |
| | <div> |
| | <h3 class="text-lg font-bold mb-4">Paiement</h3> |
| | <p class="text-gray-400 mb-2">Nous acceptons:</p> |
| | <div class="flex space-x-4"> |
| | <span class="bg-white text-gray-800 px-3 py-1 rounded text-sm font-medium">T-money</span> |
| | <span class="bg-white text-gray-800 px-3 py-1 rounded text-sm font-medium">Flooz</span> |
| | </div> |
| | </div> |
| | </div> |
| | <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400"> |
| | <p>© 2023 SILA-Group. Tous droits réservés.</p> |
| | </div> |
| | </div> |
| | </footer> |
| |
|
| | <script> |
| | AOS.init({ |
| | duration: 800, |
| | easing: 'ease-in-out' |
| | }); |
| | feather.replace(); |
| | </script> |
| | </body> |
| | </html> |
| |
|
