| | <!DOCTYPE html> |
| | <html lang="fr"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>Contact - SILA-Group</title> |
| | <script src="https://cdn.tailwindcss.com"></script> |
| | <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| | </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-gray-600 hover:text-red-600">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-red-600 font-medium">Contact</a> |
| | </div> |
| | <button class="md:hidden focus:outline-none"> |
| | <i data-feather="menu"></i> |
| | </button> |
| | </div> |
| | </nav> |
| |
|
| | |
| | <section class="bg-red-600 text-white py-20"> |
| | <div class="container mx-auto px-6 text-center"> |
| | <h1 class="text-4xl md:text-5xl font-bold mb-6">Contactez-nous</h1> |
| | <p class="text-xl max-w-2xl mx-auto">Nous sommes à votre écoute pour toute question ou commande</p> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section class="py-16"> |
| | <div class="container mx-auto px-6"> |
| | <div class="flex flex-col lg:flex-row gap-12"> |
| | <div class="lg:w-1/2"> |
| | <h2 class="text-2xl font-bold mb-6 text-gray-800">Envoyez-nous un message</h2> |
| | <form class="space-y-6"> |
| | <div> |
| | <label for="name" class="block text-gray-700 mb-2">Nom complet</label> |
| | <input type="text" id="name" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500"> |
| | </div> |
| | <div> |
| | <label for="email" class="block text-gray-700 mb-2">Email</label> |
| | <input type="email" id="email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500"> |
| | </div> |
| | <div> |
| | <label for="phone" class="block text-gray-700 mb-2">Téléphone</label> |
| | <input type="tel" id="phone" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500"> |
| | </div> |
| | <div> |
| | <label for="subject" class="block text-gray-700 mb-2">Sujet</label> |
| | <select id="subject" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500"> |
| | <option value="">Sélectionnez un sujet</option> |
| | <option value="commande">Commande de produits</option> |
| | <option value="info">Demande d'information</option> |
| | <option value="partenariat">Proposition de partenariat</option> |
| | <option value="autre">Autre demande</option> |
| | </select> |
| | </div> |
| | <div> |
| | <label for="message" class="block text-gray-700 mb-2">Message</label> |
| | <textarea id="message" rows="5" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500"></textarea> |
| | </div> |
| | <button type="submit" class="bg-red-600 hover:bg-red-700 text-white px-6 py-3 rounded-lg font-medium transition duration-300 w-full"> |
| | Envoyer le message |
| | </button> |
| | </form> |
| | </div> |
| | |
| | <div class="lg:w-1/2"> |
| | <h2 class="text-2xl font-bold mb-6 text-gray-800">Nos Coordonnées</h2> |
| | <div class="bg-white rounded-lg shadow-md p-8"> |
| | <div class="space-y-6"> |
| | <div class="flex items-start"> |
| | <div class="text-red-500 mr-4"> |
| | <i data-feather="map-pin" class="w-6 h-6"></i> |
| | </div> |
| | <div> |
| | <h3 class="text-lg font-bold mb-1 text-gray-800">Adresse</h3> |
| | <p class="text-gray-600">Djidjolé, Rue 101 AFG<br>Lomé - Togo</p> |
| | </div> |
| | </div> |
| | <div class="flex items-start"> |
| | <div class="text-red-500 mr-4"> |
| | <i data-feather="mail" class="w-6 h-6"></i> |
| | </div> |
| | <div> |
| | <h3 class="text-lg font-bold mb-1 text-gray-800">Email</h3> |
| | <p class="text-gray-600">silagrouptogo.com</p> |
| | </div> |
| | </div> |
| | <div class="flex items-start"> |
| | <div class="text-red-500 mr-4"> |
| | <i data-feather="phone" class="w-6 h-6"></i> |
| | </div> |
| | <div> |
| | <h3 class="text-lg font-bold mb-1 text-gray-800">Téléphone</h3> |
| | <p class="text-gray-600">+228 90 20 25 73<br>+228 99 90 45 75</p> |
| | </div> |
| | </div> |
| | <div class="flex items-start"> |
| | <div class="text-red-500 mr-4"> |
| | <i data-feather="clock" class="w-6 h-6"></i> |
| | </div> |
| | <div> |
| | <h3 class="text-lg font-bold mb-1 text-gray-800">Heures d'ouverture</h3> |
| | <p class="text-gray-600">Lundi - Vendredi: 8h00 - 18h00<br>Samedi: 9h00 - 13h00</p> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <div class="mt-8"> |
| | <h3 class="text-lg font-bold mb-4 text-gray-800">Paiement Mobile</h3> |
| | <div class="grid grid-cols-2 gap-4"> |
| | <div class="bg-gray-100 p-4 rounded-lg"> |
| | <div class="flex items-center mb-2"> |
| | <i data-feather="smartphone" class="text-red-500 mr-2"></i> |
| | <span class="font-medium">T-money</span> |
| | </div> |
| | <p class="text-gray-600">90 20 25 73</p> |
| | </div> |
| | <div class="bg-gray-100 p-4 rounded-lg"> |
| | <div class="flex items-center mb-2"> |
| | <i data-feather="smartphone" class="text-red-500 mr-2"></i> |
| | <span class="font-medium">Flooz</span> |
| | </div> |
| | <p class="text-gray-600">99 90 45 75</p> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section class="pb-16"> |
| | <div class="container mx-auto px-6"> |
| | <div class="bg-white rounded-lg shadow-md overflow-hidden"> |
| | <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3966.521260322283!2d1.221500815294304!3d6.2016222954930375!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zNsKwMTInMDUuOSJOIDHCsDEzJzE3LjQiRQ!5e0!3m2!1sen!2stg!4v1620000000000!5m2!1sen!2stg" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <footer class="bg-gray-800 text-white py-12"> |
| | <div class="container mx-auto px-6"> |
| | <div class="grid md:grid-cols-3 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">Liens Utiles</h3> |
| | <ul class="space-y-2"> |
| | <li><a href="index.html" class="text-gray-400 hover:text-white">Accueil</a></li> |
| | <li><a href="produits.html" class="text-gray-400 hover:text-white">Nos Produits</a></li> |
| | <li><a href="apropos.html" class="text-gray-400 hover:text-white">À Propos</a></li> |
| | <li><a href="contact.html" class="text-gray-400 hover:text-white">Contact</a></li> |
| | </ul> |
| | </div> |
| | <div> |
| | <h3 class="text-lg font-bold mb-4">Réseaux Sociaux</h3> |
| | <div class="flex space-x-4"> |
| | <a href="#" class="text-gray-400 hover:text-white"> |
| | <i data-feather="facebook" class="w-6 h-6"></i> |
| | </a> |
| | <a href="#" class="text-gray-400 hover:text-white"> |
| | <i data-feather="instagram" class="w-6 h-6"></i> |
| | </a> |
| | <a href="#" class="text-gray-400 hover:text-white"> |
| | <i data-feather="twitter" class="w-6 h-6"></i> |
| | </a> |
| | <a href="#" class="text-gray-400 hover:text-white"> |
| | <i data-feather="linkedin" class="w-6 h-6"></i> |
| | </a> |
| | </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> |
| | feather.replace(); |
| | </script> |
| | </body> |
| | </html> |
| |
|
