RoyalBurger

المشروع عبارة عن واجهة مستخدم أمامية (Landing Page) تفاعلية وجذابة لموقع مطعم وجبات سريعة متخصص في البرجر يحمل اسم "RoyalBurger". تم تصميم الصفحة بالكامل لتبدو بنظام "المظهر الداكن" (Dark Theme) الذي يعطي إحساساً بالفخامة والعصرية، مع التركيز على إبراز صور المنتجات بشكل ضخم ومثير للشهية لجذب الزوار ورفع معدل المبيعات.

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

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

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

<header> و <nav>: لبناء شريط التنقل العلوي بالكامل بشكل منظم يحتوي على الهوية البصرية، روابط الأقسام، وحقل البحث.

<main>: لاحتواء القسم الرئيسي وعرض الشرائح (Carousel).

<form> & <input>: لإنشاء شريط البحث الذكي (Search Bar) مع زر الإرسال المخصص.

<ul> & <li>: لترتيب روابط القائمة العلوية وأزرار التنقل السفلي للـ Carousel بشكل مرن.

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

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

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

تم استخدام الكلاسات .navbar و .navbar-dark مع خلفية داكنة .bg-dark المتناسقة مع مظهر الموقع.

توزيع شعار "RoyalBurger" في أقصى اليسار، يليه روابط التصفح (Home, Contact Us...)، مع استخدام كلاس القوائم المنسدلة .dropdown لتبويب الـ (Menu).

مكون عرض الشرائح (Bootstrap Carousel):

تم بناء قسم العرض الرئيسي بالكامل باستخدام المكوّن التفاعلي .carousel.slide.

وضع كارت معلومات الوجبة النصي في المنتصف كعنصر كابشن .carousel-caption مخصص بخلفية زجاجية شبه شفافة (Glassmorphism Effect).

استخدام الكلاسات المحسنة لتنسيق الأزرار وحوافها مثل زر البحث الأصفر المشرق وزر تسجيل الدخول Login ذو الحواف الشفافة والمحددة بـ .btn-outline-*.

العناصر العائمة (Floating Elements):

تنسيق شريط وسائل التواصل الاجتماعي الجانبي (فيس بوك، تويتر، واتساب...) في أقصى اليمين بشكل عامودي ثابت باستخدام خواص التموضع في الـ CSS والـ Utility classes لـ Bootstrap لتسهيل الوصول إليها.

3. التفاعلية والحركة باستخدام JavaScript:

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

التحكم في عرض الشرائح (Carousel Functionality): * تشغيل التنقل التلقائي بين صور الوجبات المختلفة كل بضع ثوانٍ.

تفعيل الأسهم الجانبية (Next & Previous) والمؤشرات الخطية في الأسفل (Indicators) لتمكين المستخدم من تصفح العروض يدوياً عند الضغط عليها.

القوائم المنسدلة (Dropdown Menu): استخدام جافا سكريبت لفتح وإغلاق قائمة الطعام (Menu) بسلاسة تامة بمجرد النقر عليها.

التحقق والتفاعل مع الأزرار: تهيئة زر الشراء "Buy" وزر البحث "Search" لاستقبال نقرات المستخدم وتوجيهه البرمجي للعمليات التالية (مثل إضافة المنتج للسلة أو الانتقال لصفحة الشراء).