libro

المشروع عبارة عن واجهة مستخدم أمامية (Landing Page) لمتجر إلكتروني حديث لبيع الكتب والروايات يحمل اسم "Libro". تم تصميم الصفحة بأسلوب مريح بصريًا، مائل للبساطة والهدوء (Minimalistic Design)، باستخدام ألوان ترابية دافئة ترتبط بالقراءة والكتب، لتوفر تجربة تصفح سلسة وجذابة تدفع المستخدم لاستكشاف المتجر.

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

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

تم بناء الصفحة باستخدام عناصر HTML5 الدلالية لضمان كود نظيف ومتوافق مع محركات البحث (SEO):

<nav>: لإنشاء شريط التنقل العلوي (Navbar) بالكامل الذي يحتوي على شعار المتجر، الروابط الأساسية، وأزرار تسجيل الدخول.

<main> أو <section>: لتغليف قسم العرض الرئيسي (Hero Section) الذي يقدم الرسالة التسويقية والكتب المميزة بشكل مستقل.

<h1> & <p>: لترتيب النصوص هرميًا؛ حيث تم استخدام العنوان الرئيسي <h1> للعبارة الجاذبة "Your best story starts here" لتمييزها بصريًا وتقنيًا.

<a> & <img>: لتضمين أيقونات البحث والسلة وصور أغلفة الكتب المعروضة بدقة عالية.

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

تم الاعتماد بشكل أساسي على كلاسات Bootstrap الجاهزة والمخصصة لبناء الواجهة بسرعة واحترافية:

نظام الشبكة والتوزيع (Bootstrap Grid System):

استخدام الكلاس .container أو .container-fluid لاحتواء عناصر الصفحة وضمان وجود هوامش جانبية متناسقة.

تقسيم قسم الـ Hero باستخدام صف .row يحتوي على عمودين مائلين .col-md-6؛ العمود الأيسر مخصص لعرض صور الكتب المائلة بجاذبية، والعمود الأيمن مخصص للنصوص الترحيبية وزر التوجيه.

تنسيق شريط التنقل (Navbar):

استخدام كلاسات مثل .navbar, .navbar-expand-lg, و .nav-link لتوزيع اللوجو في اليسار، روابط الأقسام (New arrivals, Shop...) في المنتصف، وأزرار التحكم في اليمين بسلاسة.

أزرار تفاعلية (Bootstrap Buttons):

تصميم أزرار "Login" و "Register" وأيضاً زر "Go to the shop" باستخدام كلاسات الأزرار مع تخصيص الألوان مسبقاً (عبر المتغيرات أو كلاس مخصص) ليظهر باللون الأخضر الغامق المميز للهوية البصرية للموقع .btn-success أو كلاس مخصص، مع إضافة حواف دائرية كاملة باستخدام الكلاس .rounded-pill.

المحاذاة والمساحات (Flexbox & Spacing):

استخدام كلاسات التباعد مثل me-*, ms-*, mb-* لضبط المسافات الدقيقة بين الروابط والأيقونات.

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