صفحة عرض منتجات

القسم العلوي (Header):

يحتوي على شريط تنقل (Navbar) بسيط يحتوي على عنوان المتجر وروابط (Home, Products, Cart) لإرشاد الزوار.

يتم تنسيق النصوص بشكل منظم باستخدام flexbox.

عرض المنتجات (Product Section):

يوجد عنوان رئيسي يعرض "Our Products" لتهيئة المستخدمين.

المنتجات يتم عرضها باستخدام grid layout (شبكة) بحيث تكون المنتجات مرتبة في أعمدة تتناسب مع حجم الشاشة.

كل منتج يتم عرضه في بطاقة تحتوي على:

صورة المنتج.

اسم المنتج.

السعر.

زر إضافة إلى السلة (Add to Cart).

التصميم:

تم استخدام الظل لإعطاء البطاقات تأثير ثلاثي الأبعاد عند مرور الفأرة فوقها.

عند الضغط على زر "إضافة إلى السلة"، يظهر تأثير hover لتغيير اللون وتحفيز التفاعل.

التفاعل مع الزوار:

التصميم يستهدف تجربة مستخدم بسيطة، حيث يستطيع الزوار التصفح بسهولة واختيار المنتجات بسرعة.

تم إضافة تأثيرات hover على المنتجات والأزرار لتحفيز المستخدمين على التفاعل.