Spaces:

Bilquar
/

bilquar

Running

App Files Files Community

Bilquar commited on 13 days ago

Commit

50a3e1b

verified ·

1 Parent(s): 9f1a3cd

Add 2 files

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +601 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Bilquar
-emoji: 🦀
-colorFrom: purple
-colorTo: yellow
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: bilquar
+emoji: 🐳
+colorFrom: gray
+colorTo: pink
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,601 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Artisanat Marocain | Trésors du Maroc</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Poppins:wght@300;400;600&display=swap');
+        body {
+            font-family: 'Poppins', sans-serif;
+            background-color: #f8f5f2;
+        }
+        .title-font {
+            font-family: 'Playfair Display', serif;
+        }
+        .hero-pattern {
+            background-image: url('https://images.unsplash.com/photo-1552733407-5d5c46c0bb2b?ixlib=rb-4.0.3');
+            background-size: cover;
+            background-position: center;
+            background-blend-mode: overlay;
+        }
+        .product-card:hover .product-overlay {
+            opacity: 1;
+        }
+        .product-overlay {
+            transition: all 0.3s ease;
+            opacity: 0;
+        }
+        .cart-item {
+            transition: all 0.3s ease;
+        }
+        .cart-item:hover {
+            transform: translateY(-3px);
+        }
+        /* Animation for cart notification */
+        @keyframes pulse {
+            0% { transform: scale(1); }
+            50% { transform: scale(1.1); }
+            100% { transform: scale(1); }
+        }
+        .pulse {
+            animation: pulse 1s infinite;
+        }
+    </style>
+</head>
+<body>
+    <!-- Header -->
+    <header class="bg-white shadow-md">
+        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
+            <div class="flex items-center">
+                <div class="w-12 h-12 bg-amber-600 rounded-full flex items-center justify-center mr-3">
+                    <i class="fas fa-hands text-white text-xl"></i>
+                </div>
+                <h1 class="title-font text-2xl font-bold text-amber-800">Trésors du Maroc</h1>
+            </div>
+            <nav class="hidden md:flex space-x-8">
+                <a href="#" class="text-amber-900 hover:text-amber-600 font-medium">Accueil</a>
+                <a href="#" class="text-amber-900 hover:text-amber-600 font-medium">Produits</a>
+                <a href="#" class="text-amber-900 hover:text-amber-600 font-medium">Artisans</a>
+                <a href="#" class="text-amber-900 hover:text-amber-600 font-medium">Histoire</a>
+                <a href="#" class="text-amber-900 hover:text-amber-600 font-medium">Contact</a>
+            </nav>
+            <div class="flex items-center space-x-4">
+                <div class="relative">
+                    <button id="cart-btn" class="text-amber-900 hover:text-amber-600">
+                        <i class="fas fa-shopping-cart text-xl"></i>
+                        <span id="cart-count" class="absolute -top-2 -right-2 bg-amber-600 text-white text-xs font-bold rounded-full h-5 w-5 flex items-center justify-center hidden">0</span>
+                    </button>
+                    <!-- Cart Dropdown -->
+                    <div id="cart-dropdown" class="hidden absolute right-0 mt-2 w-72 bg-white rounded-md shadow-lg z-50 py-2">
+                        <div class="px-4 py-2 border-b">
+                            <h3 class="font-bold text-amber-900">Votre Panier</h3>
+                        </div>
+                        <div id="cart-items" class="max-h-60 overflow-y-auto px-2">
+                            <!-- Cart items will be added here dynamically -->
+                            <p class="text-gray-500 text-center py-4">Votre panier est vide</p>
+                        </div>
+                        <div class="px-4 py-2 border-t">
+                            <div class="flex justify-between mb-2">
+                                <span class="font-medium">Total:</span>
+                                <span id="cart-total" class="font-bold">0 MAD</span>
+                            </div>
+                            <button class="w-full bg-amber-600 hover:bg-amber-700 text-white py-2 rounded-md font-medium transition">
+                                Commander
+                            </button>
+                        </div>
+                    </div>
+                </div>
+                <button class="md:hidden text-amber-900" id="mobile-menu-btn">
+                    <i class="fas fa-bars text-xl"></i>
+                </button>
+            </div>
+        </div>
+        <!-- Mobile Menu -->
+        <div id="mobile-menu" class="hidden md:hidden bg-white border-t">
+            <div class="container mx-auto px-4 py-3 flex flex-col space-y-3">
+                <a href="#" class="text-amber-900 hover:text-amber-600 font-medium py-1">Accueil</a>
+                <a href="#" class="text-amber-900 hover:text-amber-600 font-medium py-1">Produits</a>
+                <a href="#" class="text-amber-900 hover:text-amber-600 font-medium py-1">Artisans</a>
+                <a href="#" class="text-amber-900 hover:text-amber-600 font-medium py-1">Histoire</a>
+                <a href="#" class="text-amber-900 hover:text-amber-600 font-medium py-1">Contact</a>
+            </div>
+        </div>
+    </header>
+    <!-- Hero Section -->
+    <section class="hero-pattern bg-amber-800 bg-opacity-90 text-white py-16 md:py-24">
+        <div class="container mx-auto px-4 text-center">
+            <h2 class="title-font text-4xl md:text-5xl font-bold mb-4">L'Artisanat Marocain Authentique</h2>
+            <p class="text-xl md:text-2xl mb-8 max-w-2xl mx-auto">Découvrez des pièces uniques façonnées à la main par nos maîtres artisans</p>
+            <button class="bg-white text-amber-800 hover:bg-amber-100 font-bold py-3 px-8 rounded-full transition duration-300 transform hover:scale-105">
+                Explorer la Collection
+            </button>
+        </div>
+    </section>
+    <!-- Categories -->
+    <section class="py-12 bg-white">
+        <div class="container mx-auto px-4">
+            <h2 class="title-font text-3xl text-center text-amber-900 mb-12">Nos Catégories</h2>
+            <div class="grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-8">
+                <div class="category-card bg-amber-50 rounded-lg overflow-hidden shadow-md hover:shadow-lg transition">
+                    <div class="h-40 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1598300042247-d088f8ab3c91?ixlib=rb-4.0.3');"></div>
+                    <div class="p-4">
+                        <h3 class="font-bold text-amber-900">Céramique & Poterie</h3>
+                        <p class="text-sm text-gray-600 mt-1">Zellige et tajines artisanaux</p>
+                    </div>
+                </div>
+                <div class="category-card bg-amber-50 rounded-lg overflow-hidden shadow-md hover:shadow-lg transition">
+                    <div class="h-40 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1618221195710-dd6b41faaea6?ixlib=rb-4.0.3');"></div>
+                    <div class="p-4">
+                        <h3 class="font-bold text-amber-900">Textiles & Tapis</h3>
+                        <p class="text-sm text-gray-600 mt-1">Tapis berbères et caftans</p>
+                    </div>
+                </div>
+                <div class="category-card bg-amber-50 rounded-lg overflow-hidden shadow-md hover:shadow-lg transition">
+                    <div class="h-40 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1584735429098-c17bf4c1c37f?ixlib=rb-4.0.3');"></div>
+                    <div class="p-4">
+                        <h3 class="font-bold text-amber-900">Bois Sculpté</h3>
+                        <p class="text-sm text-gray-600 mt-1">Meubles et objets décoratifs</p>
+                    </div>
+                </div>
+                <div class="category-card bg-amber-50 rounded-lg overflow-hidden shadow-md hover:shadow-lg transition">
+                    <div class="h-40 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1605000797499-95a51c5269ae?ixlib=rb-4.0.3');"></div>
+                    <div class="p-4">
+                        <h3 class="font-bold text-amber-900">Cuivre & Métal</h3>
+                        <p class="text-sm text-gray-600 mt-1">Luminaires et ustensiles</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Featured Products -->
+    <section class="py-16 bg-amber-50">
+        <div class="container mx-auto px-4">
+            <div class="flex justify-between items-center mb-12">
+                <h2 class="title-font text-3xl text-amber-900">Produits Phares</h2>
+                <a href="#" class="text-amber-700 hover:text-amber-900 font-medium flex items-center">
+                    Voir tout <i class="fas fa-arrow-right ml-2"></i>
+                </a>
+            </div>
+            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+                <!-- Product 1 -->
+                <div class="product-card bg-white rounded-lg overflow-hidden shadow-md relative">
+                    <div class="h-64 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1605000797499-95a51c5269ae?ixlib=rb-4.0.3');"></div>
+                    <div class="p-4">
+                        <div class="flex justify-between items-start">
+                            <div>
+                                <h3 class="font-bold text-amber-900">Lampe en Cuivre</h3>
+                                <p class="text-gray-600 text-sm">Fès</p>
+                            </div>
+                            <span class="bg-amber-100 text-amber-800 text-xs font-bold px-2 py-1 rounded">Nouveau</span>
+                        </div>
+                        <div class="mt-3 flex justify-between items-center">
+                            <span class="font-bold text-amber-800">450 MAD</span>
+                            <button class="add-to-cart text-amber-700 hover:text-amber-900" data-id="1" data-name="Lampe en Cuivre" data-price="450" data-image="https://images.unsplash.com/photo-1605000797499-95a51c5269ae?ixlib=rb-4.0.3">
+                                <i class="fas fa-plus-circle text-xl"></i>
+                            </button>
+                        </div>
+                    </div>
+                    <div class="product-overlay absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center">
+                        <button class="bg-white text-amber-800 font-bold py-2 px-6 rounded-full hover:bg-amber-100 transition">
+                            Voir Détails
+                        </button>
+                    </div>
+                </div>
+                <!-- Product 2 -->
+                <div class="product-card bg-white rounded-lg overflow-hidden shadow-md relative">
+                    <div class="h-64 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1618221195710-dd6b41faaea6?ixlib=rb-4.0.3');"></div>
+                    <div class="p-4">
+                        <div class="flex justify-between items-start">
+                            <div>
+                                <h3 class="font-bold text-amber-900">Tapis Berbère</h3>
+                                <p class="text-gray-600 text-sm">Atlas</p>
+                            </div>
+                            <span class="bg-amber-100 text-amber-800 text-xs font-bold px-2 py-1 rounded">Populaire</span>
+                        </div>
+                        <div class="mt-3 flex justify-between items-center">
+                            <span class="font-bold text-amber-800">1,200 MAD</span>
+                            <button class="add-to-cart text-amber-700 hover:text-amber-900" data-id="2" data-name="Tapis Berbère" data-price="1200" data-image="https://images.unsplash.com/photo-1618221195710-dd6b41faaea6?ixlib=rb-4.0.3">
+                                <i class="fas fa-plus-circle text-xl"></i>
+                            </button>
+                        </div>
+                    </div>
+                    <div class="product-overlay absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center">
+                        <button class="bg-white text-amber-800 font-bold py-2 px-6 rounded-full hover:bg-amber-100 transition">
+                            Voir Détails
+                        </button>
+                    </div>
+                </div>
+                <!-- Product 3 -->
+                <div class="product-card bg-white rounded-lg overflow-hidden shadow-md relative">
+                    <div class="h-64 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1598300042247-d088f8ab3c91?ixlib=rb-4.0.3');"></div>
+                    <div class="p-4">
+                        <div class="flex justify-between items-start">
+                            <div>
+                                <h3 class="font-bold text-amber-900">Assiette Zellige</h3>
+                                <p class="text-gray-600 text-sm">Marrakech</p>
+                            </div>
+                        </div>
+                        <div class="mt-3 flex justify-between items-center">
+                            <span class="font-bold text-amber-800">280 MAD</span>
+                            <button class="add-to-cart text-amber-700 hover:text-amber-900" data-id="3" data-name="Assiette Zellige" data-price="280" data-image="https://images.unsplash.com/photo-1598300042247-d088f8ab3c91?ixlib=rb-4.0.3">
+                                <i class="fas fa-plus-circle text-xl"></i>
+                            </button>
+                        </div>
+                    </div>
+                    <div class="product-overlay absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center">
+                        <button class="bg-white text-amber-800 font-bold py-2 px-6 rounded-full hover:bg-amber-100 transition">
+                            Voir Détails
+                        </button>
+                    </div>
+                </div>
+                <!-- Product 4 -->
+                <div class="product-card bg-white rounded-lg overflow-hidden shadow-md relative">
+                    <div class="h-64 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1584735429098-c17bf4c1c37f?ixlib=rb-4.0.3');"></div>
+                    <div class="p-4">
+                        <div class="flex justify-between items-start">
+                            <div>
+                                <h3 class="font-bold text-amber-900">Boîte en Bois</h3>
+                                <p class="text-gray-600 text-sm">Essaouira</p>
+                            </div>
+                            <span class="bg-amber-100 text-amber-800 text-xs font-bold px-2 py-1 rounded">Édition limitée</span>
+                        </div>
+                        <div class="mt-3 flex justify-between items-center">
+                            <span class="font-bold text-amber-800">350 MAD</span>
+                            <button class="add-to-cart text-amber-700 hover:text-amber-900" data-id="4" data-name="Boîte en Bois" data-price="350" data-image="https://images.unsplash.com/photo-1584735429098-c17bf4c1c37f?ixlib=rb-4.0.3">
+                                <i class="fas fa-plus-circle text-xl"></i>
+                            </button>
+                        </div>
+                    </div>
+                    <div class="product-overlay absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center">
+                        <button class="bg-white text-amber-800 font-bold py-2 px-6 rounded-full hover:bg-amber-100 transition">
+                            Voir Détails
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Artisans Section -->
+    <section class="py-16 bg-white">
+        <div class="container mx-auto px-4">
+            <h2 class="title-font text-3xl text-center text-amber-900 mb-12">Rencontrez Nos Artisans</h2>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <div class="bg-amber-50 rounded-lg overflow-hidden shadow-md">
+                    <div class="h-64 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1589156280159-27698a70f0de?ixlib=rb-4.0.3');"></div>
+                    <div class="p-6">
+                        <h3 class="font-bold text-xl text-amber-900 mb-2">Mohamed El Fassi</h3>
+                        <p class="text-amber-700 font-medium mb-3">Maître Céramiste</p>
+                        <p class="text-gray-600">Mohamed perpétue la tradition familiale de la céramique de Fès depuis plus de 30 ans. Ses pièces sont reconnues pour leurs motifs géométriques complexes.</p>
+                    </div>
+                </div>
+                <div class="bg-amber-50 rounded-lg overflow-hidden shadow-md">
+                    <div class="h-64 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1562787186-13a35b5d2393?ixlib=rb-4.0.3');"></div>
+                    <div class="p-6">
+                        <h3 class="font-bold text-xl text-amber-900 mb-2">Amina Taznakht</h3>
+                        <p class="text-amber-700 font-medium mb-3">Tisserande Berbère</p>
+                        <p class="text-gray-600">Amina crée des tapis berbères selon des techniques ancestrales transmises de mère en fille. Chaque tapis raconte une histoire à travers ses motifs symboliques.</p>
+                    </div>
+                </div>
+                <div class="bg-amber-50 rounded-lg overflow-hidden shadow-md">
+                    <div class="h-64 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3');"></div>
+                    <div class="p-6">
+                        <h3 class="font-bold text-xl text-amber-900 mb-2">Youssef Marraki</h3>
+                        <p class="text-amber-700 font-medium mb-3">Maâlem du Cuivre</p>
+                        <p class="text-gray-600">Youssef, maâlem (maître artisan) de la médina de Marrakech, transforme le cuivre en objets d'art depuis 40 ans avec un savoir-faire exceptionnel.</p>
+                    </div>
+                </div>
+            </div>
+            <div class="text-center mt-12">
+                <button class="bg-amber-600 hover:bg-amber-700 text-white font-bold py-3 px-8 rounded-full transition">
+                    Découvrir Tous Nos Artisans
+                </button>
+            </div>
+        </div>
+    </section>
+    <!-- Testimonials -->
+    <section class="py-16 bg-amber-100">
+        <div class="container mx-auto px-4">
+            <h2 class="title-font text-3xl text-center text-amber-900 mb-12">Témoignages</h2>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <div class="bg-white p-6 rounded-lg shadow-md">
+                    <div class="flex items-center mb-4">
+                        <div class="w-12 h-12 bg-amber-200 rounded-full flex items-center justify-center mr-4">
+                            <i class="fas fa-user text-amber-700"></i>
+                        </div>
+                        <div>
+                            <h4 class="font-bold text-amber-900">Sophie Martin</h4>
+                            <div class="flex text-amber-500">
+                                <i class="fas fa-star"></i>
+                                <i class="fas fa-star"></i>
+                                <i class="fas fa-star"></i>
+                                <i class="fas fa-star"></i>
+                                <i class="fas fa-star"></i>
+                            </div>
+                        </div>
+                    </div>
+                    <p class="text-gray-600">"La lampe en cuivre que j'ai achetée est magnifique. La qualité du travail est exceptionnelle et elle apporte une touche magique à mon salon."</p>
+                </div>
+                <div class="bg-white p-6 rounded-lg shadow-md">
+                    <div class="flex items-center mb-4">
+                        <div class="w-12 h-12 bg-amber-200 rounded-full flex items-center justify-center mr-4">
+                            <i class="fas fa-user text-amber-700"></i>
+                        </div>
+                        <div>
+                            <h4 class="font-bold text-amber-900">Jean Dupont</h4>
+                            <div class="flex text-amber-500">
+                                <i class="fas fa-star"></i>
+                                <i class="fas fa-star"></i>
+                                <i class="fas fa-star"></i>
+                                <i class="fas fa-star"></i>
+                                <i class="fas fa-star"></i>
+                            </div>
+                        </div>
+                    </div>
+                    <p class="text-gray-600">"Le tapis berbère est encore plus beau en vrai que sur les photos. Livraison rapide et emballage soigné. Je recommande vivement!"</p>
+                </div>
+                <div class="bg-white p-6 rounded-lg shadow-md">
+                    <div class="flex items-center mb-4">
+                        <div class="w-12 h-12 bg-amber-200 rounded-full flex items-center justify-center mr-4">
+                            <i class="fas fa-user text-amber-700"></i>
+                        </div>
+                        <div>
+                            <h4 class="font-bold text-amber-900">Amélie Leroy</h4>
+                            <div class="flex text-amber-500">
+                                <i class="fas fa-star"></i>
+                                <i class="fas fa-star"></i>
+                                <i class="fas fa-star"></i>
+                                <i class="fas fa-star"></i>
+                                <i class="fas fa-star-half-alt"></i>
+                            </div>
+                        </div>
+                    </div>
+                    <p class="text-gray-600">"J'ai offert la boîte en bois à ma mère qui collectionne les objets artisanaux. Elle a adoré! Le travail de marqueterie est d'une finesse incroyable."</p>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Newsletter -->
+    <section class="py-16 bg-amber-800 text-white">
+        <div class="container mx-auto px-4 text-center">
+            <h2 class="title-font text-3xl mb-4">Restez Connectés</h2>
+            <p class="max-w-2xl mx-auto mb-8">Abonnez-vous à notre newsletter pour recevoir nos nouveautés, offres spéciales et histoires d'artisans.</p>
+            <form class="max-w-md mx-auto flex">
+                <input type="email" placeholder="Votre email" class="flex-grow px-4 py-3 rounded-l-md focus:outline-none text-gray-800">
+                <button type="submit" class="bg-amber-600 hover:bg-amber-700 px-6 py-3 rounded-r-md font-medium transition">
+                    S'abonner
+                </button>
+            </form>
+        </div>
+    </section>
+    <!-- Footer -->
+    <footer class="bg-amber-900 text-white pt-12 pb-6">
+        <div class="container mx-auto px-4">
+            <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
+                <div>
+                    <h3 class="title-font text-xl font-bold mb-4">Trésors du Maroc</h3>
+                    <p class="text-amber-100">Depuis 2010, nous mettons en valeur l'artisanat marocain authentique et soutenons les artisans locaux dans leur travail.</p>
+                    <div class="flex space-x-4 mt-4">
+                        <a href="#" class="text-amber-200 hover:text-white"><i class="fab fa-facebook-f"></i></a>
+                        <a href="#" class="text-amber-200 hover:text-white"><i class="fab fa-instagram"></i></a>
+                        <a href="#" class="text-amber-200 hover:text-white"><i class="fab fa-pinterest-p"></i></a>
+                    </div>
+                </div>
+                <div>
+                    <h4 class="font-bold mb-4">Navigation</h4>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="text-amber-200 hover:text-white">Accueil</a></li>
+                        <li><a href="#" class="text-amber-200 hover:text-white">Boutique</a></li>
+                        <li><a href="#" class="text-amber-200 hover:text-white">Artisans</a></li>
+                        <li><a href="#" class="text-amber-200 hover:text-white">Blog</a></li>
+                        <li><a href="#" class="text-amber-200 hover:text-white">Contact</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="font-bold mb-4">Service Client</h4>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="text-amber-200 hover:text-white">Livraison & Retours</a></li>
+                        <li><a href="#" class="text-amber-200 hover:text-white">Paiement Sécurisé</a></li>
+                        <li><a href="#" class="text-amber-200 hover:text-white">FAQ</a></li>
+                        <li><a href="#" class="text-amber-200 hover:text-white">Conditions Générales</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="font-bold mb-4">Contact</h4>
+                    <ul class="space-y-2">
+                        <li class="flex items-center">
+                            <i class="fas fa-map-marker-alt mr-2 text-amber-300"></i>
+                            <span>123 Rue de l'Artisanat, Marrakech</span>
+                        </li>
+                        <li class="flex items-center">
+                            <i class="fas fa-phone-alt mr-2 text-amber-300"></i>
+                            <span>+212 6 12 34 56 78</span>
+                        </li>
+                        <li class="flex items-center">
+                            <i class="fas fa-envelope mr-2 text-amber-300"></i>
+                            <span>[email protected]</span>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div class="border-t border-amber-800 pt-6 flex flex-col md:flex-row justify-between items-center">
+                <p class="text-amber-200 text-sm mb-4 md:mb-0">© 2023 Trésors du Maroc. Tous droits réservés.</p>
+                <div class="flex space-x-6">
+                    <img src="https://via.placeholder.com/40x25" alt="Payment Method" class="h-6">
+                    <img src="https://via.placeholder.com/40x25" alt="Payment Method" class="h-6">
+                    <img src="https://via.placeholder.com/40x25" alt="Payment Method" class="h-6">
+                </div>
+            </div>
+        </div>
+    </footer>
+    <script>
+        // Mobile Menu Toggle
+        const mobileMenuBtn = document.getElementById('mobile-menu-btn');
+        const mobileMenu = document.getElementById('mobile-menu');
+        mobileMenuBtn.addEventListener('click', () => {
+            mobileMenu.classList.toggle('hidden');
+        });
+        // Cart Functionality
+        const cartBtn = document.getElementById('cart-btn');
+        const cartDropdown = document.getElementById('cart-dropdown');
+        const cartCount = document.getElementById('cart-count');
+        const cartItems = document.getElementById('cart-items');
+        const cartTotal = document.getElementById('cart-total');
+        let cart = [];
+        // Toggle cart dropdown
+        cartBtn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            cartDropdown.classList.toggle('hidden');
+        });
+        // Close cart when clicking outside
+        document.addEventListener('click', (e) => {
+            if (!cartDropdown.contains(e.target) && e.target !== cartBtn) {
+                cartDropdown.classList.add('hidden');
+            }
+        });
+        // Add to cart functionality
+        const addToCartButtons = document.querySelectorAll('.add-to-cart');
+        addToCartButtons.forEach(button => {
+            button.addEventListener('click', (e) => {
+                e.stopPropagation();
+                const id = button.getAttribute('data-id');
+                const name = button.getAttribute('data-name');
+                const price = parseFloat(button.getAttribute('data-price'));
+                const image = button.getAttribute('data-image');
+                // Check if item already in cart
+                const existingItem = cart.find(item => item.id === id);
+                if (existingItem) {
+                    existingItem.quantity += 1;
+                } else {
+                    cart.push({
+                        id,
+                        name,
+                        price,
+                        image,
+                        quantity: 1
+                    });
+                }
+                updateCart();
+                // Show notification
+                cartCount.classList.remove('hidden');
+                cartCount.classList.add('pulse');
+                setTimeout(() => {
+                    cartCount.classList.remove('pulse');
+                }, 1000);
+            });
+        });
+        // Update cart UI
+        function updateCart() {
+            // Update count
+            const totalItems = cart.reduce((sum, item) => sum + item.quantity, 0);
+            cartCount.textContent = totalItems;
+            // Update items list
+            cartItems.innerHTML = '';
+            if (cart.length === 0) {
+                cartItems.innerHTML = '<p class="text-gray-500 text-center py-4">Votre panier est vide</p>';
+                cartTotal.textContent = '0 MAD';
+                return;
+            }
+            let total = 0;
+            cart.forEach(item => {
+                total += item.price * item.quantity;
+                const itemElement = document.createElement('div');
+                itemElement.className = 'cart-item mb-3 p-2 bg-amber-50 rounded-md flex items-center';
+                itemElement.innerHTML = `
+                    <div class="w-12 h-12 bg-cover bg-center mr-3 rounded-md" style="background-image: url('${item.image}')"></div>
+                    <div class="flex-grow">
+                        <h4 class="font-medium text-amber-900">${item.name}</h4>
+                        <div class="flex justify-between items-center">
+                            <span class="text-sm text-amber-700">${item.price} MAD x ${item.quantity}</span>
+                            <span class="font-bold text-amber-900">${(item.price * item.quantity).toFixed(2)} MAD</span>
+                        </div>
+                    </div>
+                    <button class="remove-item ml-3 text-amber-700 hover:text-amber-900" data-id="${item.id}">
+                        <i class="fas fa-times"></i>
+                    </button>
+                `;
+                cartItems.appendChild(itemElement);
+            });
+            // Update total
+            cartTotal.textContent = `${total.toFixed(2)} MAD`;
+            // Add event listeners to remove buttons
+            document.querySelectorAll('.remove-item').forEach(button => {
+                button.addEventListener('click', (e) => {
+                    e.stopPropagation();
+                    const id = button.getAttribute('data-id');
+                    cart = cart.filter(item => item.id !== id);
+                    updateCart();
+                });
+            });
+        }
+        // Initialize cart
+        updateCart();
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Bilquar/bilquar" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>