jerome / produits.html
ZIGUY's picture
undefined - Initial Deployment
2b3fcb7 verified
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nos Produits - SILA-Group</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<style>
.product-card:hover {
transform: scale(1.03);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body class="font-sans bg-gray-50">
<!-- Navigation -->
<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-red-600 font-medium">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>
<!-- Products Section -->
<section class="py-16">
<div class="container mx-auto px-6">
<h1 class="text-3xl font-bold text-center mb-12 text-gray-800">Nos Produits</h1>
<div class="grid md:grid-cols-2 gap-8 mb-16">
<div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300">
<img src="http://static.photos/food/640x360/10" alt="Purée de piment rouge" class="w-full h-64 object-cover">
<div class="p-6">
<h2 class="text-2xl font-bold mb-2 text-gray-800">Purée de Piment Rouge</h2>
<p class="text-gray-600 mb-4">Notre produit phare, fabriqué à partir des meilleurs piments rouges du Togo. Idéal pour rehausser vos sauces et plats traditionnels.</p>
<div class="flex justify-between items-center">
<div>
<span class="text-red-600 font-bold text-xl">1,500 FCFA</span>
<span class="text-gray-500 text-sm ml-2">(500g)</span>
</div>
<a href="contact.html" class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition duration-300">
Commander
</a>
</div>
</div>
</div>
<div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300">
<img src="http://static.photos/food/640x360/11" alt="Purée de piment vert" class="w-full h-64 object-cover">
<div class="p-6">
<h2 class="text-2xl font-bold mb-2 text-gray-800">Purée de Piment Vert</h2>
<p class="text-gray-600 mb-4">Une alternative moins piquante mais tout aussi savoureuse, parfaite pour ceux qui préfèrent une touche épicée plus douce.</p>
<div class="flex justify-between items-center">
<div>
<span class="text-red-600 font-bold text-xl">1,500 FCFA</span>
<span class="text-gray-500 text-sm ml-2">(500g)</span>
</div>
<a href="contact.html" class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition duration-300">
Commander
</a>
</div>
</div>
</div>
</div>
<div class="bg-white rounded-lg shadow-md p-8">
<h2 class="text-2xl font-bold mb-4 text-gray-800">Conditionnements Disponibles</h2>
<div class="overflow-x-auto">
<table class="min-w-full bg-white">
<thead>
<tr class="bg-gray-100">
<th class="py-3 px-4 text-left text-gray-700">Produit</th>
<th class="py-3 px-4 text-left text-gray-700">Conditionnement</th>
<th class="py-3 px-4 text-left text-gray-700">Prix Unitaire</th>
<th class="py-3 px-4 text-left text-gray-700">Prix Carton (40 unités)</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-gray-200">
<td class="py-3 px-4">Purée Rouge</td>
<td class="py-3 px-4">500g</td>
<td class="py-3 px-4">1,500 FCFA</td>
<td class="py-3 px-4">50,000 FCFA</td>
</tr>
<tr class="border-b border-gray-200">
<td class="py-3 px-4">Purée Rouge</td>
<td class="py-3 px-4">250g</td>
<td class="py-3 px-4">800 FCFA</td>
<td class="py-3 px-4">-</td>
</tr>
<tr class="border-b border-gray-200">
<td class="py-3 px-4">Purée Verte</td>
<td class="py-3 px-4">500g</td>
<td class="py-3 px-4">1,500 FCFA</td>
<td class="py-3 px-4">50,000 FCFA</td>
</tr>
<tr>
<td class="py-3 px-4">Purée Verte</td>
<td class="py-3 px-4">250g</td>
<td class="py-3 px-4">800 FCFA</td>
<td class="py-3 px-4">-</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
<!-- CTA 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">Intéressé par nos produits ?</h2>
<p class="text-xl mb-8 max-w-2xl mx-auto">Contactez-nous pour passer commande ou obtenir plus d'informations</p>
<a href="contact.html" class="inline-block bg-white hover:bg-gray-100 text-red-600 px-8 py-3 rounded-lg font-medium transition duration-300">
Nous Contacter
</a>
</div>
</section>
<!-- Footer -->
<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">Contact Rapide</h3>
<ul class="space-y-2">
<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>
<li class="flex items-center space-x-2 text-gray-400">
<i data-feather="phone" class="w-4 h-4"></i>
<span>+228 99 90 45 75</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: 90202573</span>
<span class="bg-white text-gray-800 px-3 py-1 rounded text-sm font-medium">Flooz: 99904575</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>
feather.replace();
</script>
</body>
</html>