Qahwa Cafe
تفاصيل العمل
نظرة عامة موقع فرونت إند كامل لمحمصة وكافيه، مصمم بهوية بصرية دافئة وفاخرة (بني ليلي + نحاسي) تنقل إحساس القهوة المحمّصة الطازة. الموقع مبني بـ5 صفحات متكاملة ومترابطة، وكل صفحة ليها وظيفة واضحة في رحلة العميل من أول ما يدخل الموقع لحد ما يحجز طاولة أو يسجّل دخوله. الصفحات والمحتوى الرئيسية (index.html): هيرو بعنوان قوي وحركة بخار متحركة فوق الكوب، وقسم "رحلة الحبة" بتايملاين يوضح 4 مراحل التحميص (من اختيار الحبوب لحد التقديم) — ده عنصر تصميمي مميز بيحول معلومة حقيقية عن المنتج لتجربة بصرية. المنيو (menu.html): عرض كامل للمشروبات والحلويات، مقسّم بفلاتر تفاعلية (سخنة / بارده / حلويات) بتتغير بدون إعادة تحميل الصفحة. قصتنا (about.html): قسم نصي عن نشأة المكان + عرض لفريق العمل (3 كروت بأفاتار وأسماء ووظائف). تواصل (contact.html): بيانات التواصل والعنوان + نموذج حجز/استفسار (اسم، تليفون، عدد أفراد، رسالة) مع رسالة تأكيد بعد الإرسال. تسجيل الدخول (login.html): صفحة دخول بتصميم متسق مع باقي الموقع، فيها خيار "تذكرني" واستعادة كلمة المرور، وأزرار دخول سريع (Google / Apple). المميزات التقنية HTML5 + CSS3 مخصص بالكامل (بدون فريمورك جاهز) — تحكم كامل في كل تفصيلة بصرية JavaScript للتفاعلات (فلاتر المنيو، نموذج التواصل، قائمة الموبايل) مكتبة GSAP للأنيميشن: حركة البخار المستمرة، ظهور تدريجي للعناصر عند السكرول (scroll reveal)، حركة التايملاين خطوط مخصصة (Fraunces للعناوين + Cairo للنصوص العربية) تصميم متجاوب بالكامل (Mobile / Tablet / Desktop) ملفات CSS و JS مشتركة بين كل الصفحات لسهولة الصيانة والتعديل مناسب لـ كافيهات، محمصات قهوة، مطاعم صغيرة، أي بزنس محلي محتاج موقع تعريفي بهوية بصرية قوية وحجز/تواصل مباشر
مهارات العمل
بطاقة العمل
طلب عمل مماثل