هيكل الصفحات (HTML Structure)
Navbar يحتوي على:
شعار الموقع.
روابط للتنقل (Home – Products – Categories).
أيقونة سلة (Cart).
أيقونة مستخدم (مع روابط Sign Up / Sign In).
Dropdown لاختيار الفئات (All Categories + باقي التصنيفات).
قسم عرض المنتجات (Products Section): مكان فارغ يتم ملؤه ديناميكياً بالـ JavaScript.
Footer يحتوي على:
شعار الموقع مرة أخرى.
روابط تنقل.
روابط للسوشيال ميديا (LinkedIn – Twitter).
تنسيقات الواجهة (CSS Styling)
تنسيق الـ Navbar والـ Footer بشكل متناسق وبسيط.
تصميم بطاقات المنتجات (Product Cards):
كل كارت يحتوي صورة + اسم + سعر + أزرار للتحكم.
تأثيرات Hover (تكبير الصورة – تلوين الاسم – دوران زر الإضافة – ظهور shadow).
Dropdown و Search Input منسقين بخلفية فاتحة وحواف ناعمة.
الألوان الأساسية: أخضر داكن للأسعار والأزرار المهمة، أزرق للأزرار الثانوية، رمادي فاتح للخلفيات.
وظائف ديناميكية (JavaScript Functionality)
تحميل البيانات:
جلب المنتجات من ملف JSON.
تخزين المنتجات في LocalStorage لسرعة التصفح.
فلترة المنتجات:
عند اختيار فئة من القائمة تظهر المنتجات الخاصة بها فقط.
عند اختيار "All" تظهر كل المنتجات.
عرض المنتجات ديناميكياً:
إنشاء HTML Cards من البيانات وعرضها داخل الصفحة.
الأزرار داخل الكارت:
عرض تفاصيل المنتج (handleProductDetails).
إضافة المنتج إلى السلة (addToCard).
