صفحة منتج لمتجر إلكتروني (E-commerce Product Page)

قمت بتطوير صفحة عرض منتج لمتجر إلكتروني كجزء من تحديات Frontend Mentor بهدف تحسين مهاراتي في تطوير واجهات المستخدم وبناء صفحات تفاعلية.

تتيح الصفحة للمستخدم عرض تفاصيل المنتج وصوره، مع إمكانية التنقل بين الصور المختلفة باستخدام الصور المصغرة (Thumbnails). كما تحتوي على معرض صور تفاعلي (Lightbox Gallery) يمكن فتحه عند الضغط على صورة المنتج.

توفر الصفحة أيضًا إمكانية إضافة المنتج إلى سلة التسوق (Cart) وعرض محتويات السلة مع القدرة على حذف العناصر منها. تم تصميم الصفحة لتكون متجاوبة مع مختلف أحجام الشاشات لضمان تجربة مستخدم جيدة على الهواتف والأجهزة اللوحية وأجهزة الكمبيوتر.

التقنيات المستخدمة

HTML5

CSS3

react.js

JavaScript

مميزات المشروع

تصميم متجاوب مع جميع الأجهزة

معرض صور تفاعلي للمنتج (Lightbox)

إمكانية تغيير صورة المنتج باستخدام الصور المصغرة