Roast & Co.

الصفحة الرئيسية (Home Page):

قسم استقبال (Hero Section) جذاب يحتوي على صورة دائرية مميزة وأزرار اتخاذ إجراء مزدوجة (Dual CTA).

زر تبديل الوضع الداكن (Dark Mode Toggle) لتوفير تجربة تصفح مريحة للعين حسب رغبة الزائر.

قائمة المشروبات والمنتجات (Interactive Menu):

عرض مقسّم بوضوح بين المشروبات الساخنة والباردة (Hot Origins / Cold Drinks).

إظهار تفاصيل كل منتج من خلال بطاقات تحوي تاجات النكهات (Flavor Notes)، مصدر الحبوب (Origin)، وشارة الأكثر مبيعاً (Popular Badge).

قصة البراند (Our Story):

قسم تعريفي يعرض رؤية وقيم المحمصة.

بطاقات إحصائيات متفاعلة (Stats Cards) تبرز سنوات الخبرة، عدد الفروع، ورضا العملاء.

المتجر الإلكتروني (E-Commerce & Shop):

صفحة متجر متكاملة لبيع حبوب البن المجهزة مع إمكانية الإضافة للسلة (Add to Cart).

قسم اشتراكات القهوة الشهرية (Coffee Subscriptions) يعرض 3 باقات بأسعار ومميزات مختلفة.

قسم كروت الهدايا (Gift Cards) بقيم مالية متعددة للشراء والتسليم الرقمي.

الفروع والمواقع (Locations):

عرض كروت تفاعلية لجميع الفروع تحتوي على: العنوان التفصيلي، أرقام التواصل، مواعيد العمل، والمميزات الخاصة بكل فرع (WiFi، جلسات خارجية، إلخ).

آراء العملاء (Testimonials):

سكشن مخصص لتقييمات وآراء الزوار بأسلوب النجوم التفاعلي لتعزيز الثقة في البراند.

النشرة البريدية والـ Footer:

نموذج اشتراك في النشرة البريدية (Newsletter Form) للحصول على العروض والخصومات.

تذييل صفحة متكامل (Full Footer) يحتوي على روابط الوصول السريع، ساعات العمل، ومعلومات التواصل.

التصميم وتجربة المستخدم (UI/UX):

هوية بصرية دافئة: تناسق ألوان كلاسيكي بين درجات البني والكريمي يعكس ثقافة القهوة المختصة.

تجاوب تام: بناء الواجهة لتكون متجاوبة 100% مع كافة مقاسات الشاشات (الهواتف، التابلت، وأجهزة الشاشة العريضة).

التقنيات المستخدمة (Tech Stack):

HTML5 & CSS3: لبناء الهيكل وتنسيق الألوان والخطوط بدقة عالية.

Bootstrap: لضمان سلاسة التجاوب (Responsive Grid System).

JavaScript (ES6+): لتفعيل التفاعليات مثل الـ Dark Mode، فلترة المنيو، والسلة.