Spaces:

Mohamed1756
/

store

Running

App Files Files Community

Mohamed1756 commited on Apr 17, 2025

Commit

cc4f0d0

verified ·

1 Parent(s): 72a0067

Add 2 files

Browse files

Files changed (2) hide show

index.html +274 -480
prompts.txt +2 -1

index.html CHANGED Viewed

@@ -6,12 +6,39 @@
     <title>مودا ستور - متجر الملابس الأنيقة</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=Tajawal:wght@400;500;700;900&display=swap');
         body {
             font-family: 'Tajawal', sans-serif;
             background-color: #f9f9f9;
         }
         .dropdown:hover .dropdown-menu {
@@ -23,6 +50,20 @@
             box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
         }
         .language-switcher {
             transition: all 0.3s ease;
         }
@@ -96,106 +137,176 @@
             background-color: #f8f8f8;
         }
         .payment-method input:checked + label {
             border-color: #ef4444;
             box-shadow: 0 0 0 1px #ef4444;
         }
     </style>
 </head>
 <body class="bg-gray-50">
     <!-- Header -->
-    <header class="bg-white shadow-md sticky top-0 z-50">
         <div class="container mx-auto px-4 py-3">
             <div class="flex items-center justify-between">
                 <!-- Logo -->
                 <div class="flex items-center">
-                    <a href="#" class="text-2xl font-bold text-red-600">مودا ستور</a>
                 </div>
                 <!-- Desktop Navigation -->
                 <nav class="hidden md:flex items-center space-x-8">
                     <div class="dropdown relative">
-                        <button class="flex items-center space-x-1 text-gray-700 hover:text-red-600">
                             <span>الرئيسية</span>
-                        </button>
                     </div>
                     <div class="dropdown relative">
-                        <button class="flex items-center space-x-1 text-gray-700 hover:text-red-600">
                             <span>الرجال</span>
                             <i class="fas fa-chevron-down text-xs"></i>
                         </button>
-                        <div class="dropdown-menu absolute hidden mt-2 w-48 bg-white shadow-lg rounded-md z-50">
-                            <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-red-50 hover:text-red-600">ملابس</a>
-                            <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-red-50 hover:text-red-600">أحذية</a>
-                            <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-red-50 hover:text-red-600">إكسسوارات</a>
                         </div>
                     </div>
                     <div class="dropdown relative">
-                        <button class="flex items-center space-x-1 text-gray-700 hover:text-red-600">
                             <span>النساء</span>
                             <i class="fas fa-chevron-down text-xs"></i>
                         </button>
-                        <div class="dropdown-menu absolute hidden mt-2 w-48 bg-white shadow-lg rounded-md z-50">
-                            <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-red-50 hover:text-red-600">ملابس</a>
-                            <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-red-50 hover:text-red-600">أحذية</a>
-                            <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-red-50 hover:text-red-600">إكسسوارات</a>
                         </div>
                     </div>
                     <div class="dropdown relative">
-                        <button class="flex items-center space-x-1 text-gray-700 hover:text-red-600">
                             <span>الأطفال</span>
                             <i class="fas fa-chevron-down text-xs"></i>
                         </button>
-                        <div class="dropdown-menu absolute hidden mt-2 w-48 bg-white shadow-lg rounded-md z-50">
-                            <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-red-50 hover:text-red-600">ملابس</a>
-                            <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-red-50 hover:text-red-600">أحذية</a>
-                            <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-red-50 hover:text-red-600">إكسسوارات</a>
                         </div>
                     </div>
                     <div class="dropdown relative">
-                        <button class="flex items-center space-x-1 text-gray-700 hover:text-red-600">
                             <span>العروض</span>
-                        </button>
                     </div>
                 </nav>
                 <!-- Icons -->
                 <div class="flex items-center space-x-6">
-                    <div class="hidden md:flex items-center space-x-2">
                         <div class="language-switcher cursor-pointer">
-                            <span class="text-gray-700">العربية</span>
                         </div>
                     </div>
                     <div class="relative">
-                        <button id="search-btn" class="text-gray-700 hover:text-red-600">
                             <i class="fas fa-search text-xl"></i>
                         </button>
                     </div>
                     <div class="relative">
-                        <button id="user-btn" class="text-gray-700 hover:text-red-600">
                             <i class="fas fa-user text-xl"></i>
                         </button>
-                        <div id="user-dropdown" class="hidden absolute right-0 mt-2 w-48 bg-white shadow-lg rounded-md z-50">
-                            <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-red-50 hover:text-red-600">تسجيل الدخول</a>
-                            <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-red-50 hover:text-red-600">إنشاء حساب</a>
-                            <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-red-50 hover:text-red-600">طلباتي</a>
                         </div>
                     </div>
                     <div class="relative">
-                        <button id="cart-btn" class="text-gray-700 hover:text-red-600">
                             <i class="fas fa-shopping-cart text-xl"></i>
                             <span class="cart-badge absolute bg-red-600 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">3</span>
                         </button>
                     </div>
-                    <button id="mobile-menu-btn" class="md:hidden text-gray-700">
                         <i class="fas fa-bars text-xl"></i>
                     </button>
                 </div>
@@ -203,9 +314,9 @@
         </div>
         <!-- Mobile Search Bar -->
-        <div id="mobile-search" class="hidden md:hidden bg-white py-2 px-4">
             <div class="flex items-center">
-                <input type="text" placeholder="ابحث عن منتج..." class="w-full px-4 py-2 border border-gray-300 rounded-r-md focus:outline-none focus:ring-2 focus:ring-red-500">
                 <button class="bg-red-600 text-white px-4 py-2 rounded-l-md">
                     <i class="fas fa-search"></i>
                 </button>
@@ -214,70 +325,76 @@
     </header>
     <!-- Mobile Menu -->
-    <div id="mobile-menu" class="mobile-menu fixed inset-y-0 right-0 w-64 bg-white shadow-lg z-50 overflow-y-auto">
-        <div class="flex justify-between items-center p-4 border-b">
             <span class="text-xl font-bold text-red-600">مودا ستور</span>
-            <button id="close-mobile-menu" class="text-gray-700">
                 <i class="fas fa-times"></i>
             </button>
         </div>
         <div class="p-4">
             <div class="mb-4">
-                <input type="text" placeholder="ابحث عن منتج..." class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-500">
             </div>
             <div class="space-y-2">
-                <a href="#" class="block py-2 px-4 text-gray-700 hover:bg-red-50 hover:text-red-600 rounded-md">الرئيسية</a>
                 <div class="accordion">
-                    <button class="accordion-btn flex justify-between items-center w-full py-2 px-4 text-gray-700 hover:bg-red-50 hover:text-red-600 rounded-md">
                         <span>الرجال</span>
                         <i class="fas fa-chevron-down text-xs"></i>
                     </button>
                     <div class="accordion-content hidden pl-4">
-                        <a href="#" class="block py-2 px-4 text-gray-700 hover:bg-red-50 hover:text-red-600 rounded-md">ملابس</a>
-                        <a href="#" class="block py-2 px-4 text-gray-700 hover:bg-red-50 hover:text-red-600 rounded-md">أحذية</a>
-                        <a href="#" class="block py-2 px-4 text-gray-700 hover:bg-red-50 hover:text-red-600 rounded-md">إكسسوارات</a>
                     </div>
                 </div>
                 <div class="accordion">
-                    <button class="accordion-btn flex justify-between items-center w-full py-2 px-4 text-gray-700 hover:bg-red-50 hover:text-red-600 rounded-md">
                         <span>النساء</span>
                         <i class="fas fa-chevron-down text-xs"></i>
                     </button>
                     <div class="accordion-content hidden pl-4">
-                        <a href="#" class="block py-2 px-4 text-gray-700 hover:bg-red-50 hover:text-red-600 rounded-md">ملابس</a>
-                        <a href="#" class="block py-2 px-4 text-gray-700 hover:bg-red-50 hover:text-red-600 rounded-md">أحذية</a>
-                        <a href="#" class="block py-2 px-4 text-gray-700 hover:bg-red-50 hover:text-red-600 rounded-md">إكسسوارات</a>
                     </div>
                 </div>
                 <div class="accordion">
-                    <button class="accordion-btn flex justify-between items-center w-full py-2 px-4 text-gray-700 hover:bg-red-50 hover:text-red-600 rounded-md">
                         <span>الأطفال</span>
                         <i class="fas fa-chevron-down text-xs"></i>
                     </button>
                     <div class="accordion-content hidden pl-4">
-                        <a href="#" class="block py-2 px-4 text-gray-700 hover:bg-red-50 hover:text-red-600 rounded-md">ملابس</a>
-                        <a href="#" class="block py-2 px-4 text-gray-700 hover:bg-red-50 hover:text-red-600 rounded-md">أحذية</a>
-                        <a href="#" class="block py-2 px-4 text-gray-700 hover:bg-red-50 hover:text-red-600 rounded-md">إكسسوارات</a>
                     </div>
                 </div>
-                <a href="#" class="block py-2 px-4 text-gray-700 hover:bg-red-50 hover:text-red-600 rounded-md">العروض</a>
-                <div class="pt-4 border-t mt-4">
-                    <a href="#" class="block py-2 px-4 text-gray-700 hover:bg-red-50 hover:text-red-600 rounded-md">تسجيل الدخول</a>
-                    <a href="#" class="block py-2 px-4 text-gray-700 hover:bg-red-50 hover:text-red-600 rounded-md">إنشاء حساب</a>
-                    <a href="#" class="block py-2 px-4 text-gray-700 hover:bg-red-50 hover:text-red-600 rounded-md">طلباتي</a>
                 </div>
-                <div class="flex space-x-4 pt-4 border-t mt-4">
-                    <button class="language-switcher text-gray-700 hover:text-red-600">العربية</button>
-                    <button class="language-switcher text-gray-700 hover:text-red-600">English</button>
-                    <button class="language-switcher text-gray-700 hover:text-red-600">Français</button>
                 </div>
             </div>
         </div>
@@ -288,47 +405,47 @@
         <div class="container mx-auto px-4 text-center">
             <h1 class="text-4xl md:text-6xl font-bold mb-4">أحدث صيحات الموضة لعام 2023</h1>
             <p class="text-xl md:text-2xl mb-8">اكتشف مجموعتنا الجديدة واستمتع بخصم 30% على أول طلب لك</p>
-            <button class="bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-8 rounded-full text-lg transition duration-300">
                 تسوق الآن
-            </button>
         </div>
     </section>
     <!-- Categories Section -->
-    <section class="py-12 bg-white">
         <div class="container mx-auto px-4">
-            <h2 class="text-3xl font-bold text-center mb-12">تصفح حسب الفئة</h2>
             <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
-                <a href="#" class="category-card block bg-gray-100 rounded-lg overflow-hidden shadow-md hover:shadow-lg">
                     <img src="https://images.unsplash.com/photo-1591047139829-d91aecb6caea?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=736&q=80" alt="ملابس رجالية" class="w-full h-48 object-cover">
                     <div class="p-4 text-center">
-                        <h3 class="text-xl font-semibold text-gray-800">الرجال</h3>
-                        <p class="text-gray-600 mt-1">اكتشف أحدث الصيحات</p>
                     </div>
                 </a>
-                <a href="#" class="category-card block bg-gray-100 rounded-lg overflow-hidden shadow-md hover:shadow-lg">
                     <img src="https://images.unsplash.com/photo-1525507119028-ed4c629a60a3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=735&q=80" alt="ملابس نسائية" class="w-full h-48 object-cover">
                     <div class="p-4 text-center">
-                        <h3 class="text-xl font-semibold text-gray-800">النساء</h3>
-                        <p class="text-gray-600 mt-1">أناقة لا تنتهي</p>
                     </div>
                 </a>
-                <a href="#" class="category-card block bg-gray-100 rounded-lg overflow-hidden shadow-md hover:shadow-lg">
                     <img src="https://images.unsplash.com/photo-1591955507966-1a1ac18c155e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="ملابس أطفال" class="w-full h-48 object-cover">
                     <div class="p-4 text-center">
-                        <h3 class="text-xl font-semibold text-gray-800">الأطفال</h3>
-                        <p class="text-gray-600 mt-1">راحة وجمال لصغارك</p>
                     </div>
                 </a>
-                <a href="#" class="category-card block bg-gray-100 rounded-lg overflow-hidden shadow-md hover:shadow-lg">
                     <img src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="أحذية" class="w-full h-48 object-cover">
                     <div class="p-4 text-center">
-                        <h3 class="text-xl font-semibold text-gray-800">الأحذية</h3>
-                        <p class="text-gray-600 mt-1">خطوات أنيقة</p>
                     </div>
                 </a>
             </div>
@@ -336,24 +453,24 @@
     </section>
     <!-- Featured Products -->
-    <section class="py-12 bg-gray-50">
         <div class="container mx-auto px-4">
             <div class="flex justify-between items-center mb-8">
-                <h2 class="text-3xl font-bold">منتجات مميزة</h2>
-                <a href="#" class="text-red-600 hover:text-red-800 font-medium">عرض الكل</a>
             </div>
             <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
                 <!-- Product 1 -->
-                <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300">
                     <div class="relative">
                         <img src="https://images.unsplash.com/photo-1529374255404-311a2a4f1fd9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1469&q=80" alt="قميص رجالي" class="w-full h-64 object-cover">
                         <div class="absolute top-2 right-2 bg-red-600 text-white text-xs font-bold px-2 py-1 rounded-full">جديد</div>
                         <div class="absolute top-2 left-2 flex flex-col space-y-2">
-                            <button class="w-8 h-8 bg-white rounded-full flex items-center justify-center text-gray-700 hover:text-red-600">
                                 <i class="far fa-heart"></i>
                             </button>
-                            <button class="w-8 h-8 bg-white rounded-full flex items-center justify-center text-gray-700 hover:text-red-600">
                                 <i class="fas fa-eye"></i>
                             </button>
                         </div>
@@ -367,15 +484,15 @@
                                 <i class="fas fa-star"></i>
                                 <i class="fas fa-star-half-alt"></i>
                             </div>
-                            <span class="text-gray-600 text-sm mr-1">(24)</span>
                         </div>
-                        <h3 class="text-lg font-semibold text-gray-800 mb-1">قميص رجالي أنيق</h3>
                         <div class="flex items-center justify-between">
                             <div>
-                                <span class="text-red-600 font-bold text-lg">149.99 ر.س</span>
-                                <span class="text-gray-500 line-through text-sm mr-2">199.99 ر.س</span>
                             </div>
-                            <button class="add-to-cart bg-gray-200 hover:bg-red-600 text-gray-700 hover:text-white w-8 h-8 rounded-full flex items-center justify-center">
                                 <i class="fas fa-shopping-cart"></i>
                             </button>
                         </div>
@@ -383,10 +500,18 @@
                 </div>
                 <!-- Product 2 -->
-                <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300">
                     <div class="relative">
                         <img src="https://images.unsplash.com/photo-1581044777550-4cfa60707c03?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=686&q=80" alt="فستان نسائي" class="w-full h-64 object-cover">
                         <div class="absolute top-2 right-2 bg-green-600 text-white text-xs font-bold px-2 py-1 rounded-full">25%</div>
                     </div>
                     <div class="p-4">
                         <div class="flex items-center mb-1">
@@ -397,15 +522,15 @@
                                 <i class="fas fa-star"></i>
                                 <i class="far fa-star"></i>
                             </div>
-                            <span class="text-gray-600 text-sm mr-1">(36)</span>
                         </div>
-                        <h3 class="text-lg font-semibold text-gray-800 mb-1">فستان أنيق باللون الأسود</h3>
                         <div class="flex items-center justify-between">
                             <div>
-                                <span class="text-red-600 font-bold text-lg">229.99 ر.س</span>
-                                <span class="text-gray-500 line-through text-sm mr-2">299.99 ر.س</span>
                             </div>
-                            <button class="add-to-cart bg-gray-200 hover:bg-red-600 text-gray-700 hover:text-white w-8 h-8 rounded-full flex items-center justify-center">
                                 <i class="fas fa-shopping-cart"></i>
                             </button>
                         </div>
@@ -413,9 +538,17 @@
                 </div>
                 <!-- Product 3 -->
-                <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300">
                     <div class="relative">
                         <img src="https://images.unsplash.com/photo-1595950653106-6c9ebd3d7a7a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="حذاء رياضي" class="w-full h-64 object-cover">
                     </div>
                     <div class="p-4">
                         <div class="flex items-center mb-1">
@@ -426,14 +559,14 @@
                                 <i class="fas fa-star"></i>
                                 <i class="fas fa-star"></i>
                             </div>
-                            <span class="text-gray-600 text-sm mr-1">(42)</span>
                         </div>
-                        <h3 class="text-lg font-semibold text-gray-800 mb-1">حذاء رياضي مريح</h3>
                         <div class="flex items-center justify-between">
                             <div>
-                                <span class="text-red-600 font-bold text-lg">179.99 ر.س</span>
                             </div>
-                            <button class="add-to-cart bg-gray-200 hover:bg-red-600 text-gray-700 hover:text-white w-8 h-8 rounded-full flex items-center justify-center">
                                 <i class="fas fa-shopping-cart"></i>
                             </button>
                         </div>
@@ -441,10 +574,18 @@
                 </div>
                 <!-- Product 4 -->
-                <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300">
                     <div class="relative">
                         <img src="https://images.unsplash.com/photo-1595341595379-cf2df1f27b1b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="حقيبة يد" class="w-full h-64 object-cover">
                         <div class="absolute top-2 right-2 bg-blue-600 text-white text-xs font-bold px-2 py-1 rounded-full">الأكثر مبيعاً</div>
                     </div>
                     <div class="p-4">
                         <div class="flex items-center mb-1">
@@ -455,14 +596,14 @@
                                 <i class="fas fa-star"></i>
                                 <i class="fas fa-star"></i>
                             </div>
-                            <span class="text-gray-600 text-sm mr-1">(58)</span>
                         </div>
-                        <h3 class="text-lg font-semibold text-gray-800 mb-1">حقيبة يد جلدية أنيقة</h3>
                         <div class="flex items-center justify-between">
                             <div>
-                                <span class="text-red-600 font-bold text-lg">349.99 ر.س</span>
                             </div>
-                            <button class="add-to-cart bg-gray-200 hover:bg-red-600 text-gray-700 hover:text-white w-8 h-8 rounded-full flex items-center justify-center">
                                 <i class="fas fa-shopping-cart"></i>
                             </button>
                         </div>
@@ -479,9 +620,9 @@
                 <div class="md:w-1/2 mb-8 md:mb-0">
                     <h2 class="text-3xl font-bold mb-4">خصم 30% على مجموعة الصيف</h2>
                     <p class="text-lg mb-6">استمتع بأجمل صيحات الصيف بخصم خاص لفترة محدودة. العرض ساري حتى نفاذ الكمية.</p>
-                    <button class="bg-white hover:bg-gray-100 text-red-600 font-bold py-3 px-8 rounded-full text-lg transition duration-300">
                         تسوق الآن
-                    </button>
                 </div>
                 <div class="md:w-1/2 flex justify-center">
                     <img src="https://images.unsplash.com/photo-1551232864-3f0890e580d9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="عرض خاص" class="rounded-lg shadow-xl max-w-full h-auto md:h-80">
@@ -491,30 +632,38 @@
     </section>
     <!-- New Arrivals -->
-    <section class="py-12 bg-white">
         <div class="container mx-auto px-4">
             <div class="flex justify-between items-center mb-8">
-                <h2 class="text-3xl font-bold">وصل حديثاً</h2>
                 <div class="flex space-x-2">
                     <button class="tab-btn active px-4 py-2 bg-red-600 text-white rounded-md" data-tab="men">رجالي</button>
-                    <button class="tab-btn px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300" data-tab="women">نسائي</button>
-                    <button class="tab-btn px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300" data-tab="kids">أطفال</button>
                 </div>
             </div>
             <div class="tab-content active" id="men-tab">
                 <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
                     <!-- Product 1 -->
-                    <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300">
                         <div class="relative">
                             <img src="https://images.unsplash.com/photo-1527719327859-c6ce80353573?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=764&q=80" alt="قميص رجالي" class="w-full h-64 object-cover">
                             <div class="absolute top-2 right-2 bg-red-600 text-white text-xs font-bold px-2 py-1 rounded-full">جديد</div>
                         </div>
                         <div class="p-4">
-                            <h3 class="text-lg font-semibold text-gray-800 mb-1">قميص رجالي قطني</h3>
                             <div class="flex items-center justify-between">
-                                <span class="text-red-600 font-bold text-lg">129.99 ر.س</span>
-                                <button class="add-to-cart bg-gray-200 hover:bg-red-600 text-gray-700 hover:text-white w-8 h-8 rounded-full flex items-center justify-center">
                                     <i class="fas fa-shopping-cart"></i>
                                 </button>
                             </div>
@@ -522,387 +671,32 @@
                     </div>
                     <!-- Product 2 -->
-                    <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300">
                         <div class="relative">
                             <img src="https://images.unsplash.com/photo-1598033129183-c4f50c736f10?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1025&q=80" alt="بنطال رجالي" class="w-full h-64 object-cover">
                             <div class="absolute top-2 right-2 bg-red-600 text-white text-xs font-bold px-2 py-1 rounded-full">جديد</div>
-                        </div>
-                        <div class="p-4">
-                            <h3 class="text-lg font-semibold text-gray-800 mb-1">بنطال جينز رجالي</h3>
-                            <div class="flex items-center justify-between">
-                                <span class="text-red-600 font-bold text-lg">199.99 ر.س</span>
-                                <button class="add-to-cart bg-gray-200 hover:bg-red-600 text-gray-700 hover:text-white w-8 h-8 rounded-full flex items-center justify-center">
-                                    <i class="fas fa-shopping-cart"></i>
                                 </button>
-                            </div>
-                        </div>
-                    </div>
-                    <!-- Product 3 -->
-                    <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300">
-                        <div class="relative">
-                            <img src="https://images.unsplash.com/photo-1620799140408-edc6dcb6d633?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1072&q=80" alt="جاكيت رجالي" class="w-full h-64 object-cover">
-                            <div class="absolute top-2 right-2 bg-red-600 text-white text-xs font-bold px-2 py-1 rounded-full">جديد</div>
-                        </div>
-                        <div class="p-4">
-                            <h3 class="text-lg font-semibold text-gray-800 mb-1">جاكيت رجالي شتوي</h3>
-                            <div class="flex items-center justify-between">
-                                <span class="text-red-600 font-bold text-lg">349.99 ر.س</span>
-                                <button class="add-to-cart bg-gray-200 hover:bg-red-600 text-gray-700 hover:text-white w-8 h-8 rounded-full flex items-center justify-center">
-                                    <i class="fas fa-shopping-cart"></i>
                                 </button>
                             </div>
                         </div>
-                    </div>
-                    <!-- Product 4 -->
-                    <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300">
-                        <div class="relative">
-                            <img src="https://images.unsplash.com/photo-1603252109303-2751441dd157?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="حذاء رجالي" class="w-full h-64 object-cover">
-                            <div class="absolute top-2 right-2 bg-red-600 text-white text-xs font-bold px-2 py-1 rounded-full">جديد</div>
-                        </div>
                         <div class="p-4">
-                            <h3 class="text-lg font-semibold text-gray-800 mb-1">حذاء رجالي رسمي</h3>
                             <div class="flex items-center justify-between">
-                                <span class="text-red-600 font-bold text-lg">279.99 ر.س</span>
-                                <button class="add-to-cart bg-gray-200 hover:bg-red-600 text-gray-700 hover:text-white w-8 h-8 rounded-full flex items-center justify-center">
                                     <i class="fas fa-shopping-cart"></i>
                                 </button>
                             </div>
                         </div>
                     </div>
-                </div>
-            </div>
-            <div class="tab-content hidden" id="women-tab">
-                <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
-                    <!-- Women's products would go here -->
-                </div>
-            </div>
-            <div class="tab-content hidden" id="kids-tab">
-                <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
-                    <!-- Kids products would go here -->
-                </div>
-            </div>
-        </div>
-    </section>
-    <!-- Testimonials -->
-    <section class="py-12 bg-gray-50">
-        <div class="container mx-auto px-4">
-            <h2 class="text-3xl font-bold text-center mb-12">آراء عملائنا</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="flex text-yellow-400">
-                            <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>
-                    <p class="text-gray-700 mb-4">"تجربة تسوق رائعة، المنتجات ذات جودة عالية والتوصيل سريع جداً. سأكون عميلاً دائماً!"</p>
-                    <div class="flex items-center">
-                        <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="سارة محمد" class="w-10 h-10 rounded-full mr-3">
-                        <div>
-                            <h4 class="font-semibold text-gray-800">سارة محمد</h4>
-                            <p class="text-sm text-gray-600">جدة</p>
-                        </div>
-                    </div>
-                </div>
-                <div class="bg-white p-6 rounded-lg shadow-md">
-                    <div class="flex items-center mb-4">
-                        <div class="flex text-yellow-400">
-                            <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>
-                    <p class="text-gray-700 mb-4">"أحب التنوع في المنتجات والأسعار المعقولة. خدمة العملاء ممتازة وساعدوني في اختيار المقاس المناسب."</p>
-                    <div class="flex items-center">
-                        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="أحمد خالد" class="w-10 h-10 rounded-full mr-3">
-                        <div>
-                            <h4 class="font-semibold text-gray-800">أحمد خالد</h4>
-                            <p class="text-sm text-gray-600">الرياض</p>
-                        </div>
-                    </div>
-                </div>
-                <div class="bg-white p-6 rounded-lg shadow-md">
-                    <div class="flex items-center mb-4">
-                        <div class="flex text-yellow-400">
-                            <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>
-                    <p class="text-gray-700 mb-4">"طلبت عدة مرات وكل مرة كانت تجربة أفضل من السابقة. شكراً لكم على الجودة والاهتمام بالتفاصيل."</p>
-                    <div class="flex items-center">
-                        <img src="https://randomuser.me/api/portraits/women/63.jpg" alt="نورا عبدالله" class="w-10 h-10 rounded-full mr-3">
-                        <div>
-                            <h4 class="font-semibold text-gray-800">نورا عبدالله</h4>
-                            <p class="text-sm text-gray-600">الدمام</p>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </section>
-    <!-- Newsletter -->
-    <section class="py-12 bg-red-600 text-white">
-        <div class="container mx-auto px-4 text-center">
-            <h2 class="text-3xl font-bold mb-4">اشترك في نشرتنا البريدية</h2>
-            <p class="text-xl mb-6">احصل على آخر العروض والتخفيضات مباشرة إلى بريدك الإلكتروني</p>
-            <div class="max-w-md mx-auto flex">
-                <input type="email" placeholder="بريدك الإلكتروني" class="w-full px-4 py-3 rounded-r-md focus:outline-none text-gray-800">
-                <button class="bg-black hover:bg-gray-800 px-6 py-3 rounded-l-md font-medium">اشتراك</button>
-            </div>
-        </div>
-    </section>
-    <!-- Footer -->
-    <footer class="bg-gray-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="text-xl font-bold mb-4">مودا ستور</h3>
-                    <p class="text-gray-400">متجرنا يقدم أحدث صيحات الموضة بجودة عالية وأسعار تنافسية. نسعى دائماً لرضا عملائنا.</p>
-                    <div class="flex space-x-4 mt-4">
-                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a>
-                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a>
-                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a>
-                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-snapchat-ghost"></i></a>
-                    </div>
-                </div>
-                <div>
-                    <h3 class="text-lg font-semibold mb-4">روابط سريعة</h3>
-                    <ul class="space-y-2">
-                        <li><a href="#" class="text-gray-400 hover:text-white">الرئيسية</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white">من نحن</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white">المتجر</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white">المدونة</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white">اتصل بنا</a></li>
-                    </ul>
-                </div>
-                <div>
-                    <h3 class="text-lg font-semibold mb-4">خدمة العملاء</h3>
-                    <ul class="space-y-2">
-                        <li><a href="#" class="text-gray-400 hover:text-white">حسابي</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white">تتبع الطلب</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white">سياسة الإرجاع</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white">الأسئلة الشائعة</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white">دليل المقاسات</a></li>
-                    </ul>
-                </div>
-                <div>
-                    <h3 class="text-lg font-semibold mb-4">اتصل بنا</h3>
-                    <ul class="space-y-2">
-                        <li class="flex items-start">
-                            <i class="fas fa-map-marker-alt mt-1 mr-2 text-gray-400"></i>
-                            <span class="text-gray-400">الرياض، المملكة العربية السعودية</span>
-                        </li>
-                        <li class="flex items-center">
-                            <i class="fas fa-phone-alt mr-2 text-gray-400"></i>
-                            <span class="text-gray-400">+966 12 345 6789</span>
-                        </li>
-                        <li class="flex items-center">
-                            <i class="fas fa-envelope mr-2 text-gray-400"></i>
-                            <span class="text-gray-400">info@modastore.com</span>
-                        </li>
-                    </ul>
-                </div>
-            </div>
-            <div class="border-t border-gray-800 pt-6 flex flex-col md:flex-row justify-between items-center">
-                <p class="text-gray-400 text-sm mb-4 md:mb-0">© 2023 مودا ستور. جميع الحقوق محفوظة.</p>
-                <div class="flex space-x-6">
-                    <img src="https://via.placeholder.com/40x25" alt="Visa" class="h-6">
-                    <img src="https://via.placeholder.com/40x25" alt="Mastercard" class="h-6">
-                    <img src="https://via.placeholder.com/40x25" alt="Mada" class="h-6">
-                    <img src="https://via.placeholder.com/40x25" alt="Apple Pay" class="h-6">
-                </div>
-            </div>
-        </div>
-    </footer>
-    <!-- Product Quick View Modal -->
-    <div id="quick-view-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center p-4">
-        <div class="bg-white rounded-lg max-w-4xl w-full max-h-screen overflow-y-auto">
-            <div class="flex justify-between items-center border-b p-4">
-                <h3 class="text-xl font-bold">معاينة سريعة</h3>
-                <button id="close-quick-view" class="text-gray-500 hover:text-gray-700">
-                    <i class="fas fa-times"></i>
-                </button>
-            </div>
-            <div class="p-6">
-                <div class="flex flex-col md:flex-row gap-8">
-                    <div class="md:w-1/2">
-                        <div class="mb-4">
-                            <img id="quick-view-image" src="https://images.unsplash.com/photo-1529374255404-311a2a4f1fd9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1469&q=80" alt="Product" class="w-full rounded-lg">
-                        </div>
-                        <div class="grid grid-cols-4 gap-2">
-                            <img src="https://images.unsplash.com/photo-1529374255404-311a2a4f1fd9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1469&q=80" alt="Thumbnail" class="cursor-pointer border rounded hover:border-red-500 h-20 object-cover">
-                            <img src="https://images.unsplash.com/photo-1529374255404-311a2a4f1fd9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1469&q=80" alt="Thumbnail" class="cursor-pointer border rounded hover:border-red-500 h-20 object-cover">
-                            <img src="https://images.unsplash.com/photo-1529374255404-311a2a4f1fd9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1469&q=80" alt="Thumbnail" class="cursor-pointer border rounded hover:border-red-500 h-20 object-cover">
-                            <img src="https://images.unsplash.com/photo-1529374255404-311a2a4f1fd9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1469&q=80" alt="Thumbnail" class="cursor-pointer border rounded hover:border-red-500 h-20 object-cover">
-                        </div>
-                    </div>
-                    <div class="md:w-1/2">
-                        <h2 id="quick-view-title" class="text-2xl font-bold mb-2">قميص رجالي أنيق</h2>
-                        <div class="flex items-center mb-4">
-                            <div class="flex text-yellow-400 mr-2">
-                                <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>
-                            <span class="text-gray-600">(24 تقييم)</span>
-                        </div>
-                        <div class="mb-4">
-                            <span id="quick-view-price" class="text-red-600 font-bold text-2xl">149.99 ر.س</span>
-                            <span class="text-gray-500 line-through text-lg mr-2">199.99 ر.س</span>
-                            <span class="bg-red-100 text-red-800 text-sm font-medium px-2 py-1 rounded">25% خصم</span>
-                        </div>
-                        <p id="quick-view-description" class="text-gray-700 mb-6">
-                            قميص رجالي أنيق من القطن عالي الجودة، مناسب للارتداء اليومي أو المناسبات الرسمية. يتميز بجودة الخياطة والتصميم العصري.
-                        </p>
-                        <div class="mb-6">
-                            <h4 class="font-semibold mb-2">المقاس:</h4>
-                            <div class="size-selector flex space-x-2">
-                                <input type="radio" name="size" id="size-s" class="hidden" checked>
-                                <label for="size-s" class="inline-flex items-center justify-center w-10 h-10 border border-gray-300 rounded-md cursor-pointer">S</label>
-                                <input type="radio" name="size" id="size-m" class="hidden">
-                                <label for="size-m" class="inline-flex items-center justify-center w-10 h-10 border border-gray-300 rounded-md cursor-pointer">M</label>
-                                <input type="radio" name="size" id="size-l" class="hidden">
-                                <label for="size-l" class="inline-flex items-center justify-center w-10 h-10 border border-gray-300 rounded-md cursor-pointer">L</label>
-                                <input type="radio" name="size" id="size-xl" class="hidden">
-                                <label for="size-xl" class="inline-flex items-center justify-center w-10 h-10 border border-gray-300 rounded-md cursor-pointer">XL</label>
-                            </div>
-                        </div>
-                        <div class="mb-6">
-                            <h4 class="font-semibold mb-2">اللون:</h4>
-                            <div class="color-selector flex space-x-2">
-                                <input type="radio" name="color" id="color-red" class="hidden" checked>
-                                <label for="color-red" class="inline-block w-8 h-8 rounded-full bg-red-600 cursor-pointer"></label>
-                                <input type="radio" name="color" id="color-blue" class="hidden">
-                                <label for="color-blue" class="inline-block w-8 h-8 rounded-full bg-blue-600 cursor-pointer"></label>
-                                <input type="radio" name="color" id="color-black" class="hidden">
-                                <label for="color-black" class="inline-block w-8 h-8 rounded-full bg-black cursor-pointer"></label>
-                                <input type="radio" name="color" id="color-white" class="hidden">
-                                <label for="color-white" class="inline-block w-8 h-8 rounded-full bg-white border border-gray-300 cursor-pointer"></label>
-                            </div>
-                        </div>
-                        <div class="flex items-center mb-6">
-                            <div class="flex items-center border border-gray-300 rounded-md mr-4">
-                                <button class="px-3 py-1 text-gray-600 hover:bg-gray-100">-</button>
-                                <span class="px-4">1</span>
-                                <button class="px-3 py-1 text-gray-600 hover:bg-gray-100">+</button>
-                            </div>
-                            <span class="text-green-600 font-medium"><i class="fas fa-check-circle mr-1"></i> متوفر في المخزن</span>
-                        </div>
-                        <div class="flex space-x-4">
-                            <button class="flex-1 bg-red-600 hover:bg-red-700 text-white py-3 px-6 rounded-md font-medium">
-                                <i class="fas fa-shopping-cart mr-2"></i> أضف إلى السلة
-                            </button>
-                            <button class="w-12 h-12 flex items-center justify-center border border-gray-300 rounded-md text-gray-700 hover:bg-gray-100">
-                                <i class="far fa-heart text-xl"></i>
-                            </button>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-    <!-- Shopping Cart Sidebar -->
-    <div id="cart-sidebar" class="fixed inset-y-0 right-0 w-full md:w-96 bg-white shadow-lg z-50 transform translate-x-full transition-transform duration-300 ease-in-out overflow-y-auto">
-        <div class="flex justify-between items-center p-4 border-b">
-            <h3 class="text-xl font-bold">سلة التسوق (3)</h3>
-            <button id="close-cart" class="text-gray-500 hover:text-gray-700">
-                <i class="fas fa-times"></i>
-            </button>
-        </div>
-        <div class="p-4">
-            <div class="space-y-4">
-                <!-- Cart Item 1 -->
-                <div class="cart-item flex border-b pb-4 transition duration-200">
-                    <div class="w-24 h-24 flex-shrink-0">
-                        <img src="https://images.unsplash.com/photo-1529374255404-311a2a4f1fd9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1469&q=80" alt="Product" class="w-full h-full object-cover rounded">
-                    </div>
-                    <div class="flex-grow mr-3">
-                        <div class="flex justify-between">
-                            <h4 class="font-medium text-gray-800">قميص رجالي أنيق</h4>
-                            <button class="text-gray-400 hover:text-red-600">
-                                <i class="fas fa-times"></i>
-                            </button>
-                        </div>
-                        <p class="text-sm text-gray-600">المقاس: M</p>
-                        <p class="text-sm text-gray-600">اللون: أحمر</p>
-                        <div class="flex justify-between items-center mt-2">
-                            <div class="flex items-center border border-gray-300 rounded-md">
-                                <button class="px-2 py-1 text-gray-600 hover:bg-gray-100">-</button>
-                                <span class="px-2">1</span>
-                                <button class="px-2 py-1 text-gray-600 hover:bg-gray-100">+</button>
-                            </div>
-                            <span class="font-medium text-red-600">149.99 ر.س</span>
-                        </div>
-                    </div>
-                </div>
-                <!-- Cart Item 2 -->
-                <div class="cart-item flex border-b pb-4 transition duration-200">
-                    <div class="w-24 h-24 flex-shrink-0">
-                        <img src="https://images.unsplash.com/photo-1581044777550-4cfa60707c03?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=686&q=80" alt="Product" class="w-full h-full object-cover rounded">
-                    </div>
-                    <div class="flex-grow mr-3">
-                        <div class="flex justify-between">
-                            <h4 class="font-medium text-gray-800">فستان أنيق باللون الأسود</h4>
-                            <button class="text-gray-400 hover:text-red-600">
-                                <i class="fas fa-times"></i>
-                            </button>
-                        </div>
-                        <p class="text-sm text-gray-600">المقاس: L</p>
-                        <p class="text-sm text-gray-600">اللون: أسود</p>
-                        <div class="flex justify-between items-center mt-2">
-                            <div class="flex items-center border border-gray-300 rounded-md">
-                                <button class="px-2 py-1 text-gray-600 hover:bg-gray-100">-</button>
-                                <span class="px-2">1</span>
-                                <button class="px-2 py-1 text-gray-600 hover:bg-gray-100">+</button>
-                            </div>
-                            <span class="font-medium text-red-600">229.99 ر.س</span>
-                        </div>
-                    </div>
-                </div>
-                <!-- Cart Item 3 -->
-                <div class="cart-item flex border-b pb-4 transition duration-200">
-                    <div class="w-
 </html>

     <title>مودا ستور - متجر الملابس الأنيقة</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">
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    colors: {
+                        primary: {
+                            DEFAULT: '#ef4444',
+                            dark: '#dc2626'
+                        },
+                        dark: {
+                            900: '#111827',
+                            800: '#1f2937',
+                            700: '#374151',
+                            600: '#4b5563'
+                        }
+                    }
+                }
+            }
+        }
+    </script>
     <style>
         @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;900&display=swap');
         body {
             font-family: 'Tajawal', sans-serif;
             background-color: #f9f9f9;
+            transition: background-color 0.3s ease;
+        }
+        body.dark {
+            background-color: #111827;
+            color: #f3f4f6;
         }
         .dropdown:hover .dropdown-menu {
             box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
         }
+        .dark .product-card {
+            background-color: #1f2937;
+            color: #f3f4f6;
+        }
+        .dark .product-card h3,
+        .dark .product-card .text-gray-800 {
+            color: #f3f4f6;
+        }
+        .dark .product-card .text-gray-600 {
+            color: #d1d5db;
+        }
         .language-switcher {
             transition: all 0.3s ease;
         }
             background-color: #f8f8f8;
         }
+        .dark .cart-item:hover {
+            background-color: #1f2937;
+        }
         .payment-method input:checked + label {
             border-color: #ef4444;
             box-shadow: 0 0 0 1px #ef4444;
         }
+        .dark-mode-toggle {
+            position: relative;
+            width: 60px;
+            height: 30px;
+            border-radius: 15px;
+            background-color: #e5e7eb;
+            cursor: pointer;
+            transition: background-color 0.3s;
+        }
+        .dark-mode-toggle.dark {
+            background-color: #4b5563;
+        }
+        .dark-mode-toggle span {
+            position: absolute;
+            top: 3px;
+            left: 3px;
+            width: 24px;
+            height: 24px;
+            border-radius: 50%;
+            background-color: #f59e0b;
+            transition: transform 0.3s;
+        }
+        .dark-mode-toggle.dark span {
+            transform: translateX(30px);
+            background-color: #f3f4f6;
+        }
+        .dark .bg-white {
+            background-color: #1f2937 !important;
+        }
+        .dark .bg-gray-50 {
+            background-color: #111827 !important;
+        }
+        .dark .text-gray-800 {
+            color: #f3f4f6 !important;
+        }
+        .dark .text-gray-700 {
+            color: #d1d5db !important;
+        }
+        .dark .text-gray-600 {
+            color: #9ca3af !important;
+        }
+        .dark .bg-gray-100 {
+            background-color: #374151 !important;
+        }
+        .dark .border-gray-300 {
+            border-color: #4b5563 !important;
+        }
+        .dark .shadow-md {
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2) !important;
+        }
     </style>
 </head>
 <body class="bg-gray-50">
     <!-- Header -->
+    <header class="bg-white shadow-md sticky top-0 z-50 dark:bg-dark-800">
         <div class="container mx-auto px-4 py-3">
             <div class="flex items-center justify-between">
                 <!-- Logo -->
                 <div class="flex items-center">
+                    <a href="index.html" class="text-2xl font-bold text-red-600">مودا ستور</a>
                 </div>
                 <!-- Desktop Navigation -->
                 <nav class="hidden md:flex items-center space-x-8">
                     <div class="dropdown relative">
+                        <a href="index.html" class="flex items-center space-x-1 text-gray-700 hover:text-red-600 dark:text-gray-300 dark:hover:text-red-400">
                             <span>الرئيسية</span>
+                        </a>
                     </div>
                     <div class="dropdown relative">
+                        <button class="flex items-center space-x-1 text-gray-700 hover:text-red-600 dark:text-gray-300 dark:hover:text-red-400">
                             <span>الرجال</span>
                             <i class="fas fa-chevron-down text-xs"></i>
                         </button>
+                        <div class="dropdown-menu absolute hidden mt-2 w-48 bg-white shadow-lg rounded-md z-50 dark:bg-dark-700">
+                            <a href="men-clothing.html" class="block px-4 py-2 text-gray-700 hover:bg-red-50 hover:text-red-600 dark:text-gray-300 dark:hover:bg-dark-600 dark:hover:text-red-400">ملابس</a>
+                            <a href="men-shoes.html" class="block px-4 py-2 text-gray-700 hover:bg-red-50 hover:text-red-600 dark:text-gray-300 dark:hover:bg-dark-600 dark:hover:text-red-400">أحذية</a>
+                            <a href="men-accessories.html" class="block px-4 py-2 text-gray-700 hover:bg-red-50 hover:text-red-600 dark:text-gray-300 dark:hover:bg-dark-600 dark:hover:text-red-400">إكسسوارات</a>
                         </div>
                     </div>
                     <div class="dropdown relative">
+                        <button class="flex items-center space-x-1 text-gray-700 hover:text-red-600 dark:text-gray-300 dark:hover:text-red-400">
                             <span>النساء</span>
                             <i class="fas fa-chevron-down text-xs"></i>
                         </button>
+                        <div class="dropdown-menu absolute hidden mt-2 w-48 bg-white shadow-lg rounded-md z-50 dark:bg-dark-700">
+                            <a href="women-clothing.html" class="block px-4 py-2 text-gray-700 hover:bg-red-50 hover:text-red-600 dark:text-gray-300 dark:hover:bg-dark-600 dark:hover:text-red-400">ملابس</a>
+                            <a href="women-shoes.html" class="block px-4 py-2 text-gray-700 hover:bg-red-50 hover:text-red-600 dark:text-gray-300 dark:hover:bg-dark-600 dark:hover:text-red-400">أحذية</a>
+                            <a href="women-accessories.html" class="block px-4 py-2 text-gray-700 hover:bg-red-50 hover:text-red-600 dark:text-gray-300 dark:hover:bg-dark-600 dark:hover:text-red-400">إكسسوارات</a>
                         </div>
                     </div>
                     <div class="dropdown relative">
+                        <button class="flex items-center space-x-1 text-gray-700 hover:text-red-600 dark:text-gray-300 dark:hover:text-red-400">
                             <span>الأطفال</span>
                             <i class="fas fa-chevron-down text-xs"></i>
                         </button>
+                        <div class="dropdown-menu absolute hidden mt-2 w-48 bg-white shadow-lg rounded-md z-50 dark:bg-dark-700">
+                            <a href="kids-clothing.html" class="block px-4 py-2 text-gray-700 hover:bg-red-50 hover:text-red-600 dark:text-gray-300 dark:hover:bg-dark-600 dark:hover:text-red-400">ملابس</a>
+                            <a href="kids-shoes.html" class="block px-4 py-2 text-gray-700 hover:bg-red-50 hover:text-red-600 dark:text-gray-300 dark:hover:bg-dark-600 dark:hover:text-red-400">أحذية</a>
+                            <a href="kids-accessories.html" class="block px-4 py-2 text-gray-700 hover:bg-red-50 hover:text-red-600 dark:text-gray-300 dark:hover:bg-dark-600 dark:hover:text-red-400">إكسسوارات</a>
                         </div>
                     </div>
                     <div class="dropdown relative">
+                        <a href="offers.html" class="flex items-center space-x-1 text-gray-700 hover:text-red-600 dark:text-gray-300 dark:hover:text-red-400">
                             <span>العروض</span>
+                        </a>
                     </div>
                 </nav>
                 <!-- Icons -->
                 <div class="flex items-center space-x-6">
+                    <div class="hidden md:flex items-center space-x-4">
                         <div class="language-switcher cursor-pointer">
+                            <span class="text-gray-700 dark:text-gray-300">العربية</span>
+                        </div>
+                        <div class="dark-mode-toggle flex items-center" id="darkModeToggle">
+                            <span></span>
                         </div>
                     </div>
                     <div class="relative">
+                        <button id="search-btn" class="text-gray-700 hover:text-red-600 dark:text-gray-300 dark:hover:text-red-400">
                             <i class="fas fa-search text-xl"></i>
                         </button>
                     </div>
                     <div class="relative">
+                        <button id="user-btn" class="text-gray-700 hover:text-red-600 dark:text-gray-300 dark:hover:text-red-400">
                             <i class="fas fa-user text-xl"></i>
                         </button>
+                        <div id="user-dropdown" class="hidden absolute right-0 mt-2 w-48 bg-white shadow-lg rounded-md z-50 dark:bg-dark-700">
+                            <a href="login.html" class="block px-4 py-2 text-gray-700 hover:bg-red-50 hover:text-red-600 dark:text-gray-300 dark:hover:bg-dark-600 dark:hover:text-red-400">تسجيل الدخول</a>
+                            <a href="register.html" class="block px-4 py-2 text-gray-700 hover:bg-red-50 hover:text-red-600 dark:text-gray-300 dark:hover:bg-dark-600 dark:hover:text-red-400">إنشاء حساب</a>
+                            <a href="orders.html" class="block px-4 py-2 text-gray-700 hover:bg-red-50 hover:text-red-600 dark:text-gray-300 dark:hover:bg-dark-600 dark:hover:text-red-400">طلباتي</a>
                         </div>
                     </div>
                     <div class="relative">
+                        <button id="cart-btn" class="text-gray-700 hover:text-red-600 dark:text-gray-300 dark:hover:text-red-400">
                             <i class="fas fa-shopping-cart text-xl"></i>
                             <span class="cart-badge absolute bg-red-600 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">3</span>
                         </button>
                     </div>
+                    <button id="mobile-menu-btn" class="md:hidden text-gray-700 dark:text-gray-300">
                         <i class="fas fa-bars text-xl"></i>
                     </button>
                 </div>
         </div>
         <!-- Mobile Search Bar -->
+        <div id="mobile-search" class="hidden md:hidden bg-white py-2 px-4 dark:bg-dark-800">
             <div class="flex items-center">
+                <input type="text" placeholder="ابحث عن منتج..." class="w-full px-4 py-2 border border-gray-300 rounded-r-md focus:outline-none focus:ring-2 focus:ring-red-500 dark:bg-dark-700 dark:border-dark-600 dark:text-white">
                 <button class="bg-red-600 text-white px-4 py-2 rounded-l-md">
                     <i class="fas fa-search"></i>
                 </button>
     </header>
     <!-- Mobile Menu -->
+    <div id="mobile-menu" class="mobile-menu fixed inset-y-0 right-0 w-64 bg-white shadow-lg z-50 overflow-y-auto dark:bg-dark-800">
+        <div class="flex justify-between items-center p-4 border-b dark:border-dark-600">
             <span class="text-xl font-bold text-red-600">مودا ستور</span>
+            <button id="close-mobile-menu" class="text-gray-700 dark:text-gray-300">
                 <i class="fas fa-times"></i>
             </button>
         </div>
         <div class="p-4">
             <div class="mb-4">
+                <input type="text" placeholder="ابحث عن منتج..." class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-500 dark:bg-dark-700 dark:border-dark-600 dark:text-white">
+            </div>
+            <div class="flex justify-center mb-4">
+                <div class="dark-mode-toggle flex items-center" id="mobileDarkModeToggle">
+                    <span></span>
+                </div>
             </div>
             <div class="space-y-2">
+                <a href="index.html" class="block py-2 px-4 text-gray-700 hover:bg-red-50 hover:text-red-600 rounded-md dark:text-gray-300 dark:hover:bg-dark-700 dark:hover:text-red-400">الرئيسية</a>
                 <div class="accordion">
+                    <button class="accordion-btn flex justify-between items-center w-full py-2 px-4 text-gray-700 hover:bg-red-50 hover:text-red-600 rounded-md dark:text-gray-300 dark:hover:bg-dark-700 dark:hover:text-red-400">
                         <span>الرجال</span>
                         <i class="fas fa-chevron-down text-xs"></i>
                     </button>
                     <div class="accordion-content hidden pl-4">
+                        <a href="men-clothing.html" class="block py-2 px-4 text-gray-700 hover:bg-red-50 hover:text-red-600 rounded-md dark:text-gray-300 dark:hover:bg-dark-700 dark:hover:text-red-400">ملابس</a>
+                        <a href="men-shoes.html" class="block py-2 px-4 text-gray-700 hover:bg-red-50 hover:text-red-600 rounded-md dark:text-gray-300 dark:hover:bg-dark-700 dark:hover:text-red-400">أحذية</a>
+                        <a href="men-accessories.html" class="block py-2 px-4 text-gray-700 hover:bg-red-50 hover:text-red-600 rounded-md dark:text-gray-300 dark:hover:bg-dark-700 dark:hover:text-red-400">إكسسوارات</a>
                     </div>
                 </div>
                 <div class="accordion">
+                    <button class="accordion-btn flex justify-between items-center w-full py-2 px-4 text-gray-700 hover:bg-red-50 hover:text-red-600 rounded-md dark:text-gray-300 dark:hover:bg-dark-700 dark:hover:text-red-400">
                         <span>النساء</span>
                         <i class="fas fa-chevron-down text-xs"></i>
                     </button>
                     <div class="accordion-content hidden pl-4">
+                        <a href="women-clothing.html" class="block py-2 px-4 text-gray-700 hover:bg-red-50 hover:text-red-600 rounded-md dark:text-gray-300 dark:hover:bg-dark-700 dark:hover:text-red-400">ملابس</a>
+                        <a href="women-shoes.html" class="block py-2 px-4 text-gray-700 hover:bg-red-50 hover:text-red-600 rounded-md dark:text-gray-300 dark:hover:bg-dark-700 dark:hover:text-red-400">أحذية</a>
+                        <a href="women-accessories.html" class="block py-2 px-4 text-gray-700 hover:bg-red-50 hover:text-red-600 rounded-md dark:text-gray-300 dark:hover:bg-dark-700 dark:hover:text-red-400">إكسسوارات</a>
                     </div>
                 </div>
                 <div class="accordion">
+                    <button class="accordion-btn flex justify-between items-center w-full py-2 px-4 text-gray-700 hover:bg-red-50 hover:text-red-600 rounded-md dark:text-gray-300 dark:hover:bg-dark-700 dark:hover:text-red-400">
                         <span>الأطفال</span>
                         <i class="fas fa-chevron-down text-xs"></i>
                     </button>
                     <div class="accordion-content hidden pl-4">
+                        <a href="kids-clothing.html" class="block py-2 px-4 text-gray-700 hover:bg-red-50 hover:text-red-600 rounded-md dark:text-gray-300 dark:hover:bg-dark-700 dark:hover:text-red-400">ملابس</a>
+                        <a href="kids-shoes.html" class="block py-2 px-4 text-gray-700 hover:bg-red-50 hover:text-red-600 rounded-md dark:text-gray-300 dark:hover:bg-dark-700 dark:hover:text-red-400">أحذية</a>
+                        <a href="kids-accessories.html" class="block py-2 px-4 text-gray-700 hover:bg-red-50 hover:text-red-600 rounded-md dark:text-gray-300 dark:hover:bg-dark-700 dark:hover:text-red-400">إكسسوارات</a>
                     </div>
                 </div>
+                <a href="offers.html" class="block py-2 px-4 text-gray-700 hover:bg-red-50 hover:text-red-600 rounded-md dark:text-gray-300 dark:hover:bg-dark-700 dark:hover:text-red-400">العروض</a>
+                <div class="pt-4 border-t mt-4 dark:border-dark-600">
+                    <a href="login.html" class="block py-2 px-4 text-gray-700 hover:bg-red-50 hover:text-red-600 rounded-md dark:text-gray-300 dark:hover:bg-dark-700 dark:hover:text-red-400">تسجيل الدخول</a>
+                    <a href="register.html" class="block py-2 px-4 text-gray-700 hover:bg-red-50 hover:text-red-600 rounded-md dark:text-gray-300 dark:hover:bg-dark-700 dark:hover:text-red-400">إنشاء حساب</a>
+                    <a href="orders.html" class="block py-2 px-4 text-gray-700 hover:bg-red-50 hover:text-red-600 rounded-md dark:text-gray-300 dark:hover:bg-dark-700 dark:hover:text-red-400">طلباتي</a>
                 </div>
+                <div class="flex space-x-4 pt-4 border-t mt-4 dark:border-dark-600">
+                    <button class="language-switcher text-gray-700 hover:text-red-600 dark:text-gray-300 dark:hover:text-red-400">العربية</button>
+                    <button class="language-switcher text-gray-700 hover:text-red-600 dark:text-gray-300 dark:hover:text-red-400">English</button>
+                    <button class="language-switcher text-gray-700 hover:text-red-600 dark:text-gray-300 dark:hover:text-red-400">Français</button>
                 </div>
             </div>
         </div>
         <div class="container mx-auto px-4 text-center">
             <h1 class="text-4xl md:text-6xl font-bold mb-4">أحدث صيحات الموضة لعام 2023</h1>
             <p class="text-xl md:text-2xl mb-8">اكتشف مجموعتنا الجديدة واستمتع بخصم 30% على أول طلب لك</p>
+            <a href="shop.html" class="inline-block bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-8 rounded-full text-lg transition duration-300">
                 تسوق الآن
+            </a>
         </div>
     </section>
     <!-- Categories Section -->
+    <section class="py-12 bg-white dark:bg-dark-800">
         <div class="container mx-auto px-4">
+            <h2 class="text-3xl font-bold text-center mb-12 dark:text-white">تصفح حسب الفئة</h2>
             <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
+                <a href="men-clothing.html" class="category-card block bg-gray-100 rounded-lg overflow-hidden shadow-md hover:shadow-lg dark:bg-dark-700">
                     <img src="https://images.unsplash.com/photo-1591047139829-d91aecb6caea?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=736&q=80" alt="ملابس رجالية" class="w-full h-48 object-cover">
                     <div class="p-4 text-center">
+                        <h3 class="text-xl font-semibold text-gray-800 dark:text-white">الرجال</h3>
+                        <p class="text-gray-600 mt-1 dark:text-gray-400">اكتشف أحدث الصيحات</p>
                     </div>
                 </a>
+                <a href="women-clothing.html" class="category-card block bg-gray-100 rounded-lg overflow-hidden shadow-md hover:shadow-lg dark:bg-dark-700">
                     <img src="https://images.unsplash.com/photo-1525507119028-ed4c629a60a3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=735&q=80" alt="ملابس نسائية" class="w-full h-48 object-cover">
                     <div class="p-4 text-center">
+                        <h3 class="text-xl font-semibold text-gray-800 dark:text-white">النساء</h3>
+                        <p class="text-gray-600 mt-1 dark:text-gray-400">أناقة لا تنتهي</p>
                     </div>
                 </a>
+                <a href="kids-clothing.html" class="category-card block bg-gray-100 rounded-lg overflow-hidden shadow-md hover:shadow-lg dark:bg-dark-700">
                     <img src="https://images.unsplash.com/photo-1591955507966-1a1ac18c155e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="ملابس أطفال" class="w-full h-48 object-cover">
                     <div class="p-4 text-center">
+                        <h3 class="text-xl font-semibold text-gray-800 dark:text-white">الأطفال</h3>
+                        <p class="text-gray-600 mt-1 dark:text-gray-400">راحة وجمال لصغارك</p>
                     </div>
                 </a>
+                <a href="shoes.html" class="category-card block bg-gray-100 rounded-lg overflow-hidden shadow-md hover:shadow-lg dark:bg-dark-700">
                     <img src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="أحذية" class="w-full h-48 object-cover">
                     <div class="p-4 text-center">
+                        <h3 class="text-xl font-semibold text-gray-800 dark:text-white">الأحذية</h3>
+                        <p class="text-gray-600 mt-1 dark:text-gray-400">خطوات أنيقة</p>
                     </div>
                 </a>
             </div>
     </section>
     <!-- Featured Products -->
+    <section class="py-12 bg-gray-50 dark:bg-dark-900">
         <div class="container mx-auto px-4">
             <div class="flex justify-between items-center mb-8">
+                <h2 class="text-3xl font-bold dark:text-white">منتجات مميزة</h2>
+                <a href="shop.html" class="text-red-600 hover:text-red-800 font-medium dark:text-red-400 dark:hover:text-red-500">عرض الكل</a>
             </div>
             <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
                 <!-- Product 1 -->
+                <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300 dark:bg-dark-700">
                     <div class="relative">
                         <img src="https://images.unsplash.com/photo-1529374255404-311a2a4f1fd9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1469&q=80" alt="قميص رجالي" class="w-full h-64 object-cover">
                         <div class="absolute top-2 right-2 bg-red-600 text-white text-xs font-bold px-2 py-1 rounded-full">جديد</div>
                         <div class="absolute top-2 left-2 flex flex-col space-y-2">
+                            <button class="w-8 h-8 bg-white rounded-full flex items-center justify-center text-gray-700 hover:text-red-600 dark:bg-dark-600 dark:text-gray-300 dark:hover:text-red-400">
                                 <i class="far fa-heart"></i>
                             </button>
+                            <button class="quick-view-btn w-8 h-8 bg-white rounded-full flex items-center justify-center text-gray-700 hover:text-red-600 dark:bg-dark-600 dark:text-gray-300 dark:hover:text-red-400" data-id="1">
                                 <i class="fas fa-eye"></i>
                             </button>
                         </div>
                                 <i class="fas fa-star"></i>
                                 <i class="fas fa-star-half-alt"></i>
                             </div>
+                            <span class="text-gray-600 text-sm mr-1 dark:text-gray-400">(24)</span>
                         </div>
+                        <h3 class="text-lg font-semibold text-gray-800 mb-1 dark:text-white">قميص رجالي أنيق</h3>
                         <div class="flex items-center justify-between">
                             <div>
+                                <span class="text-red-600 font-bold text-lg dark:text-red-400">149.99 ر.س</span>
+                                <span class="text-gray-500 line-through text-sm mr-2 dark:text-gray-500">199.99 ر.س</span>
                             </div>
+                            <button class="add-to-cart bg-gray-200 hover:bg-red-600 text-gray-700 hover:text-white w-8 h-8 rounded-full flex items-center justify-center dark:bg-dark-600 dark:text-gray-300 dark:hover:bg-red-600">
                                 <i class="fas fa-shopping-cart"></i>
                             </button>
                         </div>
                 </div>
                 <!-- Product 2 -->
+                <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300 dark:bg-dark-700">
                     <div class="relative">
                         <img src="https://images.unsplash.com/photo-1581044777550-4cfa60707c03?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=686&q=80" alt="فستان نسائي" class="w-full h-64 object-cover">
                         <div class="absolute top-2 right-2 bg-green-600 text-white text-xs font-bold px-2 py-1 rounded-full">25%</div>
+                        <div class="absolute top-2 left-2 flex flex-col space-y-2">
+                            <button class="w-8 h-8 bg-white rounded-full flex items-center justify-center text-gray-700 hover:text-red-600 dark:bg-dark-600 dark:text-gray-300 dark:hover:text-red-400">
+                                <i class="far fa-heart"></i>
+                            </button>
+                            <button class="quick-view-btn w-8 h-8 bg-white rounded-full flex items-center justify-center text-gray-700 hover:text-red-600 dark:bg-dark-600 dark:text-gray-300 dark:hover:text-red-400" data-id="2">
+                                <i class="fas fa-eye"></i>
+                            </button>
+                        </div>
                     </div>
                     <div class="p-4">
                         <div class="flex items-center mb-1">
                                 <i class="fas fa-star"></i>
                                 <i class="far fa-star"></i>
                             </div>
+                            <span class="text-gray-600 text-sm mr-1 dark:text-gray-400">(36)</span>
                         </div>
+                        <h3 class="text-lg font-semibold text-gray-800 mb-1 dark:text-white">فستان أنيق باللون الأسود</h3>
                         <div class="flex items-center justify-between">
                             <div>
+                                <span class="text-red-600 font-bold text-lg dark:text-red-400">229.99 ر.س</span>
+                                <span class="text-gray-500 line-through text-sm mr-2 dark:text-gray-500">299.99 ر.س</span>
                             </div>
+                            <button class="add-to-cart bg-gray-200 hover:bg-red-600 text-gray-700 hover:text-white w-8 h-8 rounded-full flex items-center justify-center dark:bg-dark-600 dark:text-gray-300 dark:hover:bg-red-600">
                                 <i class="fas fa-shopping-cart"></i>
                             </button>
                         </div>
                 </div>
                 <!-- Product 3 -->
+                <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300 dark:bg-dark-700">
                     <div class="relative">
                         <img src="https://images.unsplash.com/photo-1595950653106-6c9ebd3d7a7a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="حذاء رياضي" class="w-full h-64 object-cover">
+                        <div class="absolute top-2 left-2 flex flex-col space-y-2">
+                            <button class="w-8 h-8 bg-white rounded-full flex items-center justify-center text-gray-700 hover:text-red-600 dark:bg-dark-600 dark:text-gray-300 dark:hover:text-red-400">
+                                <i class="far fa-heart"></i>
+                            </button>
+                            <button class="quick-view-btn w-8 h-8 bg-white rounded-full flex items-center justify-center text-gray-700 hover:text-red-600 dark:bg-dark-600 dark:text-gray-300 dark:hover:text-red-400" data-id="3">
+                                <i class="fas fa-eye"></i>
+                            </button>
+                        </div>
                     </div>
                     <div class="p-4">
                         <div class="flex items-center mb-1">
                                 <i class="fas fa-star"></i>
                                 <i class="fas fa-star"></i>
                             </div>
+                            <span class="text-gray-600 text-sm mr-1 dark:text-gray-400">(42)</span>
                         </div>
+                        <h3 class="text-lg font-semibold text-gray-800 mb-1 dark:text-white">حذاء رياضي مريح</h3>
                         <div class="flex items-center justify-between">
                             <div>
+                                <span class="text-red-600 font-bold text-lg dark:text-red-400">179.99 ر.س</span>
                             </div>
+                            <button class="add-to-cart bg-gray-200 hover:bg-red-600 text-gray-700 hover:text-white w-8 h-8 rounded-full flex items-center justify-center dark:bg-dark-600 dark:text-gray-300 dark:hover:bg-red-600">
                                 <i class="fas fa-shopping-cart"></i>
                             </button>
                         </div>
                 </div>
                 <!-- Product 4 -->
+                <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300 dark:bg-dark-700">
                     <div class="relative">
                         <img src="https://images.unsplash.com/photo-1595341595379-cf2df1f27b1b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="حقيبة يد" class="w-full h-64 object-cover">
                         <div class="absolute top-2 right-2 bg-blue-600 text-white text-xs font-bold px-2 py-1 rounded-full">الأكثر مبيعاً</div>
+                        <div class="absolute top-2 left-2 flex flex-col space-y-2">
+                            <button class="w-8 h-8 bg-white rounded-full flex items-center justify-center text-gray-700 hover:text-red-600 dark:bg-dark-600 dark:text-gray-300 dark:hover:text-red-400">
+                                <i class="far fa-heart"></i>
+                            </button>
+                            <button class="quick-view-btn w-8 h-8 bg-white rounded-full flex items-center justify-center text-gray-700 hover:text-red-600 dark:bg-dark-600 dark:text-gray-300 dark:hover:text-red-400" data-id="4">
+                                <i class="fas fa-eye"></i>
+                            </button>
+                        </div>
                     </div>
                     <div class="p-4">
                         <div class="flex items-center mb-1">
                                 <i class="fas fa-star"></i>
                                 <i class="fas fa-star"></i>
                             </div>
+                            <span class="text-gray-600 text-sm mr-1 dark:text-gray-400">(58)</span>
                         </div>
+                        <h3 class="text-lg font-semibold text-gray-800 mb-1 dark:text-white">حقيبة يد جلدية أنيقة</h3>
                         <div class="flex items-center justify-between">
                             <div>
+                                <span class="text-red-600 font-bold text-lg dark:text-red-400">349.99 ر.س</span>
                             </div>
+                            <button class="add-to-cart bg-gray-200 hover:bg-red-600 text-gray-700 hover:text-white w-8 h-8 rounded-full flex items-center justify-center dark:bg-dark-600 dark:text-gray-300 dark:hover:bg-red-600">
                                 <i class="fas fa-shopping-cart"></i>
                             </button>
                         </div>
                 <div class="md:w-1/2 mb-8 md:mb-0">
                     <h2 class="text-3xl font-bold mb-4">خصم 30% على مجموعة الصيف</h2>
                     <p class="text-lg mb-6">استمتع بأجمل صيحات الصيف بخصم خاص لفترة محدودة. العرض ساري حتى نفاذ الكمية.</p>
+                    <a href="offers.html" class="inline-block bg-white hover:bg-gray-100 text-red-600 font-bold py-3 px-8 rounded-full text-lg transition duration-300">
                         تسوق الآن
+                    </a>
                 </div>
                 <div class="md:w-1/2 flex justify-center">
                     <img src="https://images.unsplash.com/photo-1551232864-3f0890e580d9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="عرض خاص" class="rounded-lg shadow-xl max-w-full h-auto md:h-80">
     </section>
     <!-- New Arrivals -->
+    <section class="py-12 bg-white dark:bg-dark-800">
         <div class="container mx-auto px-4">
             <div class="flex justify-between items-center mb-8">
+                <h2 class="text-3xl font-bold dark:text-white">وصل حديثاً</h2>
                 <div class="flex space-x-2">
                     <button class="tab-btn active px-4 py-2 bg-red-600 text-white rounded-md" data-tab="men">رجالي</button>
+                    <button class="tab-btn px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 dark:bg-dark-700 dark:text-gray-300 dark:hover:bg-dark-600" data-tab="women">نسائي</button>
+                    <button class="tab-btn px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 dark:bg-dark-700 dark:text-gray-300 dark:hover:bg-dark-600" data-tab="kids">أطفال</button>
                 </div>
             </div>
             <div class="tab-content active" id="men-tab">
                 <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
                     <!-- Product 1 -->
+                    <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300 dark:bg-dark-700">
                         <div class="relative">
                             <img src="https://images.unsplash.com/photo-1527719327859-c6ce80353573?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=764&q=80" alt="قميص رجالي" class="w-full h-64 object-cover">
                             <div class="absolute top-2 right-2 bg-red-600 text-white text-xs font-bold px-2 py-1 rounded-full">جديد</div>
+                            <div class="absolute top-2 left-2 flex flex-col space-y-2">
+                                <button class="w-8 h-8 bg-white rounded-full flex items-center justify-center text-gray-700 hover:text-red-600 dark:bg-dark-600 dark:text-gray-300 dark:hover:text-red-400">
+                                    <i class="far fa-heart"></i>
+                                </button>
+                                <button class="quick-view-btn w-8 h-8 bg-white rounded-full flex items-center justify-center text-gray-700 hover:text-red-600 dark:bg-dark-600 dark:text-gray-300 dark:hover:text-red-400" data-id="5">
+                                    <i class="fas fa-eye"></i>
+                                </button>
+                            </div>
                         </div>
                         <div class="p-4">
+                            <h3 class="text-lg font-semibold text-gray-800 mb-1 dark:text-white">قميص رجالي قطني</h3>
                             <div class="flex items-center justify-between">
+                                <span class="text-red-600 font-bold text-lg dark:text-red-400">129.99 ر.س</span>
+                                <button class="add-to-cart bg-gray-200 hover:bg-red-600 text-gray-700 hover:text-white w-8 h-8 rounded-full flex items-center justify-center dark:bg-dark-600 dark:text-gray-300 dark:hover:bg-red-600">
                                     <i class="fas fa-shopping-cart"></i>
                                 </button>
                             </div>
                     </div>
                     <!-- Product 2 -->
+                    <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300 dark:bg-dark-700">
                         <div class="relative">
                             <img src="https://images.unsplash.com/photo-1598033129183-c4f50c736f10?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1025&q=80" alt="بنطال رجالي" class="w-full h-64 object-cover">
                             <div class="absolute top-2 right-2 bg-red-600 text-white text-xs font-bold px-2 py-1 rounded-full">جديد</div>
+                            <div class="absolute top-2 left-2 flex flex-col space-y-2">
+                                <button class="w-8 h-8 bg-white rounded-full flex items-center justify-center text-gray-700 hover:text-red-600 dark:bg-dark-600 dark:text-gray-300 dark:hover:text-red-400">
+                                    <i class="far fa-heart"></i>
                                 </button>
+                                <button class="quick-view-btn w-8 h-8 bg-white rounded-full flex items-center justify-center text-gray-700 hover:text-red-600 dark:bg-dark-600 dark:text-gray-300 dark:hover:text-red-400" data-id="6">
+                                    <i class="fas fa-eye"></i>
                                 </button>
                             </div>
                         </div>
                         <div class="p-4">
+                            <h3 class="text-lg font-semibold text-gray-800 mb-1 dark:text-white">بنطال جينز رجالي</h3>
                             <div class="flex items-center justify-between">
+                                <span class="text-red-600 font-bold text-lg dark:text-red-400">199.99 ر.س</span>
+                                <button class="add-to-cart bg-gray-200 hover:bg-red-600 text-gray-700 hover:text-white w-8 h-8 rounded-full flex items-center justify-center dark:bg-dark-600 dark:text-gray-300 dark:hover:bg-red-600">
                                     <i class="fas fa-shopping-cart"></i>
                                 </button>
                             </div>
                         </div>
                     </div>
+                    <!-- Product 3 -->
+                    <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300 dark:bg-dark-700">
+                        <div class="relative">
+                            <img src="https://images.unsplash.com/photo-1620799140408-edc6dcb6d633?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format
 </html>

prompts.txt CHANGED Viewed

	@@ -1 +1,2 @@
1	- مرحباً، أود منك إنشاء متجر إلكتروني احترافي، متكامل، وواسع النطاق، مخصص لبيع الملابس (رجالي، نسائي، أطفال). أريد أن يحتوي المتجر على الخصائص التالية: ✅ المميزات المطلوبة: 🔐 نظام حسابات متكامل: إنشاء حساب جديد، تسجيل الدخول، تعديل البيانات الشخصية. عرض وتتبمرحباً، أود منك إنشاء متجر إلكتروني احترافي، متكامل، وواسع النطاق، مخصص لبيع الملابس (رجالي، نسائي، أطفال). أريد أن يحتوي المتجر على الخصائص التالية: ✅ المميزات المطلوبة: 🔐 نظام حسابات متكامل: إنشاء حساب جديد، تسجيل الدخول، تعديل البيانات الشخصية. عرض وتتبع الطلبات السابقة. بنفس أسلوب موقع ULTRAPC من حيث سهولة الاستخدام والواجهة الاحترافية. 💳 نظام دفع احترافي وآمن: دعم الدفع الإلكتروني بواسطة: البطاقات البنكية (Visa/Mastercard)، الدفع عند الاستلام، وخيارات دفع محلية ودولية. نفس تجربة الدفع الموجودة في موقع ULTRAPC من حيث التصميم، الترتيب، والمرونة. 🗂️ نظام تصنيفات (Categories) ذكي مثل Amazon: تصنيفات دقيقة حسب الفئة: رجالي، نسائي، أطفال، أحذية، أكسسوارات، عروض... تصنيف إضافي حسب: النوع، المقاس، اللون، الماركة، السعر، إلخ. سهولة التصفّح والتنقل بين الأقسام. 🔗 روابط مستقلة لكل صفحة أو قسم: كل عنصر في الواجهة (مثل قسم أو تصنيف) يفتح صفحة مستقلة داخل الموقع تحتوي على المنتجات الخاصة به. كل صفحة لها رابط URL خاص بها ويمكن مشاركته. 🛒 سلة مشتريات كاملة: إمكانية التعديل على الكمية، حذف منتج، عرض تفاصيل الطلب، حساب المجموع تلقائياً قبل الدفع. 📦 صفحات منتجات احترافية: صور عالية الجودة متعددة لكل منتج. وصف تفصيلي للمنتج. السعر، التقييمات، مدى توفر المنتج، خيارات المقاس واللون. 🧑‍💼 لوحة تحكم متقدمة للإدارة: إضافة وتعديل المنتجات، الأسعار، المخزون، العروض، الصور، الكوبونات. 📱 تصميم متجاوب وعصري: يعمل بسلاسة على جميع الأجهزة (جوال، تابلت، كمبيوتر). واجهة مستخدم مخصصة لمتجر ملابس، جذابة وبسيطة وسهلة التصفح. 📧 نظام إشعارات بريد إلكتروني: إرسال رسائل تأكيد الطلب، تحديثات الشحن، وعروض خاصة إلى العملاء. 🔍 تهيئة SEO لمحركات البحث: تحسين المحتوى والروابط الداخلية لظهور المتجر في نتائج Google و Bing. 🎨 ملاحظة خاصة بواجهة التصميم: أود أن تكون الألوان المستخدمة في التصميم جذابة وعصرية، تعكس هوية متجر ملابس حديث. يفضل استخدام ألوان مثل الأحمر، الأبيض، والأسود مع تدرجات لونية أنيقة خاصة بمجال الموضة، تشجع الزائر على الاستكشاف والشراء. 💡 ملاحظات تقنية: يُفضل استخدام تقنيات حديثة مثل: React + Node.js أو Laravel + Vue.js أو أي إطار عمل قوي مناسب لإنشاء متجر بهذا الحجم والاحترافية. في انتظار البدء بتنفيذ المشروع، على أن يكون قابلًا للتوسّع مستقبلاً من حيث المميزات والتصميم. شكرًا جزيلاً لك 🌟 الغات المتوفرة العربية الانجليزية و الفرنسية


1	+ مرحباً، أود منك إنشاء متجر إلكتروني احترافي، متكامل، وواسع النطاق، مخصص لبيع الملابس (رجالي، نسائي، أطفال). أريد أن يحتوي المتجر على الخصائص التالية: ✅ المميزات المطلوبة: 🔐 نظام حسابات متكامل: إنشاء حساب جديد، تسجيل الدخول، تعديل البيانات الشخصية. عرض وتتبمرحباً، أود منك إنشاء متجر إلكتروني احترافي، متكامل، وواسع النطاق، مخصص لبيع الملابس (رجالي، نسائي، أطفال). أريد أن يحتوي المتجر على الخصائص التالية: �� المميزات المطلوبة: 🔐 نظام حسابات متكامل: إنشاء حساب جديد، تسجيل الدخول، تعديل البيانات الشخصية. عرض وتتبع الطلبات السابقة. بنفس أسلوب موقع ULTRAPC من حيث سهولة الاستخدام والواجهة الاحترافية. 💳 نظام دفع احترافي وآمن: دعم الدفع الإلكتروني بواسطة: البطاقات البنكية (Visa/Mastercard)، الدفع عند الاستلام، وخيارات دفع محلية ودولية. نفس تجربة الدفع الموجودة في موقع ULTRAPC من حيث التصميم، الترتيب، والمرونة. 🗂️ نظام تصنيفات (Categories) ذكي مثل Amazon: تصنيفات دقيقة حسب الفئة: رجالي، نسائي، أطفال، أحذية، أكسسوارات، عروض... تصنيف إضافي حسب: النوع، المقاس، اللون، الماركة، السعر، إلخ. سهولة التصفّح والتنقل بين الأقسام. 🔗 روابط مستقلة لكل صفحة أو قسم: كل عنصر في الواجهة (مثل قسم أو تصنيف) يفتح صفحة مستقلة داخل الموقع تحتوي على المنتجات الخاصة به. كل صفحة لها رابط URL خاص بها ويمكن مشاركته. 🛒 سلة مشتريات كاملة: إمكانية التعديل على الكمية، حذف منتج، عرض تفاصيل الطلب، حساب المجموع تلقائياً قبل الدفع. 📦 صفحات منتجات احترافية: صور عالية الجودة متعددة لكل منتج. وصف تفصيلي للمنتج. السعر، التقييمات، مدى توفر المنتج، خيارات المقاس واللون. 🧑‍💼 لوحة تحكم متقدمة للإدارة: إضافة وتعديل المنتجات، الأسعار، المخزون، العروض، الصور، الكوبونات. 📱 تصميم متجاوب وعصري: يعمل بسلاسة على جميع الأجهزة (جوال، تابلت، كمبيوتر). واجهة مستخدم مخصصة لمتجر ملابس، جذابة وبسيطة وسهلة التصفح. 📧 نظام إشعارات بريد إلكتروني: إرسال رسائل تأكيد الطلب، تحديثات الشحن، وعروض خاصة إلى العملاء. 🔍 تهيئة SEO لمحركات البحث: تحسين المحتوى والروابط الداخلية لظهور المتجر في نتائج Google و Bing. 🎨 ملاحظة خاصة بواجهة التصميم: أود أن تكون الألوان المستخدمة في التصميم جذابة وعصرية، تعكس هوية متجر ملابس حديث. يفضل استخدام ألوان مثل الأحمر، الأبيض، والأسود مع تدرجات لونية أنيقة خاصة بمجال الموضة، تشجع الزائر على الاستكشاف والشراء. 💡 ملاحظات تقنية: يُفضل استخدام تقنيات حديثة مثل: React + Node.js أو Laravel + Vue.js أو أي إطار عمل قوي مناسب لإنشاء متجر بهذا الحجم والاحترافية. في انتظار البدء بتنفيذ المشروع، على أن يكون قابلًا للتوسّع مستقبلاً من حيث المميزات والتصميم. شكرًا جزيلاً لك 🌟 الغات المتوفرة العربية الانجليزية و الفرنسية
2	+ مرحبًا، شكرًا على العمل الذي تم حتى الآن في تصميم الموقع، لكن لدي بعض الملاحظات المهمة التي أحتاج تنفيذها قبل اعتباره جاهزًا للنشر: 🔧 1. الأزرار غير شغالة حالياً: عند الضغط على أي زر أو عنصر في الواجهة، لا يحدث أي تفاعل أو لا يتم التوجيه إلى صفحة أخرى. أحتاج كل زر أو رابط في الموقع أن يكون له صفحة خاصة تعمل بشكل فعلي (حتى لو كانت مبدئية الآن). لا أريد أن يكون الموقع عبارة فقط عن واجهة ثابتة، بل يجب أن يكون تفاعليًا وقابلًا للاستخدام بنسبة 99%. 🌓 2. إضافة خاصية الوضع الداكن والمضيء: أرجو إضافة خيار للمستخدم لتغيير المظهر بين الوضع الداكن (Dark Mode) والوضع المضيء (Light Mode)، مع حفظ تفضيله عند العودة للموقع. ✅ 3. الموقع يجب أن يكون شبه مكتمل (99%): أحتاج أن يكون الموقع عملياً وليس مجرد تصميم. كل قسم، زر، رابط أو عنصر يجب أن يكون له وظيفة واضحة أو صفحة مخصصة حتى لو كانت بسيطة كبداية. الموقع يجب أن يكون قابلًا للتوسع لاحقًا، لكن الآن أريده شغالًا من حيث البنية، التوجيه، والتفاعل بنسبة لا تقل عن 99%. أتمنى تنفيذ هذه التعديلات بشكل احترافي ومرن، وشكرًا لك مرة أخرى على جهودك.