"تصميم وتطوير واجهة متجر إلكتروني (E-commerce Website Frontend)"

هيكل الصفحات (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).