product Aura

المشروع عبارة عن واجهة مستخدم أمامية (Landing Page / Products Page) لمتجر إلكتروني عصري ومتكامل متخصص في بيع منتجات العناية بالبشرة والتجميل يحمل اسم "AURA". تم تصميم الصفحة بأسلوب هادئ وأنيق يعتمد على الألوان الترابية الناعمة (Nude & Earthy tones) التي تعكس طبيعة وهوية منتجات العناية بالبشرة، مع التركيز على تنظيم عرض المنتجات بشكل شبكي مريح يسهل على العميل التصفح والشراء.

التقنيات المستخدمة وكيفية تطبيقها:

1. الهيكلة الدلالية باستخدام HTML5:

تم تأسيس الصفحة بالاعتماد على كود HTML5 نظيف ودلالي لتعزيز بنية الموقع ومساعدته في الأرشفة (SEO):

<header> و <nav>: لبناء الجزء العلوي الذي يحتوي على شعار العلامة التجارية "AURA" وأزرار التحكم بالحساب.

<section>: لتقسيم الصفحة إلى أجزاء رئيسية؛ قسم مخصص لأدوات البحث والتصفية (Search & Filter Section)، وقسم آخر مخصص لشبكة عرض المنتجات (Products Grid).

<form> و <input> و <select>: لإنشاء شريط البحث المتقدم الذي يتيح البحث المباشر بالنص أو الاختيار من قائمة الفئات المنسدلة (Search by Product Name).

<img>: لعرض صور المنتجات عالية الجودة والخلفيات المميزة لها داخل بطاقات العرض.

2. التنسيق والتجاوب المرن باستخدام Bootstrap:

تم استغلال ميزات إطار العمل Bootstrap لتوزيع العناصر بدقة وضمان مرونة الواجهة مع مختلف الشاشات:

نظام الشبكة (Bootstrap Grid System):

تم استخدام الكلاس .row مع .col-md-4 لتوزيع بطاقات المنتجات (Products Cards) بشكل متساوٍ؛ حيث يظهر 3 منتجات في الصف الواحد على الشاشات الكبيرة والمتوسطة، وتتحول تلقائياً لشاشات الهواتف.

البطاقات (Bootstrap Cards):

بناء كروت المنتجات باستخدام المكوّن .card وتنسيق محتواه الداخلي مثل .card-img-top للصورة، و .card-body للنصوص كاسم المنتج، السعر، والفئة (Category).

شريط البحث وأدوات التحكم:

محاذاة عناصر البحث أفقياً باستخدام كلاسات الفليكس بوكس مثل .d-flex و .align-items-center.

تنسيق حقول الإدخال والقوائم المنسدلة باستخدام .form-control و .form-select لتبدو بشكل موحد واحترافي.

الأزرار والألوان (Bootstrap Buttons):

تنسيق أزرار تسجيل الدخول Login و Register في الأعلى باستخدام كلاسات الأزرار المحددة بحواف دائرية.

تنسيق زر البحث وزر إضافة المنتج للسلة "Add to Cart" بلون بني دافئ متناسق تماماً مع الهوية البصرية للموقع.

3. التفاعلية والمنطق البرمجي باستخدام JavaScript:

تم دمج لغة جافا سكريبت لإعطاء حيوية للمتجر وإتاحة التحكم بالبيانات:

منظومة البحث والتصفية (Search & Filter Functionality): * ربط حقل الإدخال وقائمة الفئات بكود جافا سكريبت لعمل تصفية فورية (Dynamic Filtering)؛ بحيث يتم عرض المنتجات التي تطابق الاسم أو الفئة المختارة فقط وإخفاء الباقي.

سلة المشتريات (Add to Cart Logic):

تفعيل أزرار "Add to Cart" لاستقبال نقرات المستخدم، وتشغيل دالة تقوم بحفظ المنتج المختار وتحديث السلة (إما بإظهار رسالة تأكيد أو تحديث عداد السلة).

قائمة المفضلة (Wishlist Toggle):

استخدام جافا سكريبت لتبديل حالة أيقونة القلب (الأعجاب) عند النقر عليها، لتتغير مثلاً من مفرغة إلى ممتلئة باللون الأحمر عند إضافة المنتج للمفضلة.