تصميم وتطوير واجهة مستخدم (Frontend) لموقع مقهى "Arabica"

قمت بتطوير وبناء واجهة مستخدم تفاعلية لموقع ويب خاص بمقهى تحت اسم "Arabica". يهدف الموقع إلى توفير تجربة مستخدم (UX) سلسة وجذابة للعملاء تتيح لهم استعراض المنتجات والمشروبات، التعرف على المقهى، وإنشاء حسابات شخصية لتسجيل الدخول. تم التركيز في هذا المشروع على التصميم العصري وسهولة التصفح.

التقنيات المستخدمة:

HTML5: لبناء هيكل الصفحات المتعددة بأسلوب دلالي (Semantic).

CSS3: لتنسيق الموقع وتصميمه بشكل جذاب وألوان متناسقة تناسب هوية المقاهي.

JavaScript (Vanilla JS): لإضافة التفاعلية وبرمجة المنطق البرمجي (Logic) للموقع.

Font Awesome: لتضمين الأيقونات الجمالية في واجهة المستخدم.

أبرز خصائص ومميزات المشروع:

تطوير صفحات متعددة: تم تصميم صفحات متكاملة تشمل (الصفحة الرئيسية Home، قائمة المشروبات Menu، من نحن About، تسجيل الدخول Login، وإنشاء حساب Sign Up).

التحقق الفوري من صحة البيانات (Form Validation): قمت ببرمجة نماذج إنشاء الحساب وتسجيل الدخول باستخدام JavaScript للتحقق من صحة مدخلات المستخدم (مثل صيغة الإيميل، قوة كلمة المرور، وتطابق كلمتي المرور) وإظهار رسائل خطأ دقيقة ومباشرة.

شريط تقييمات العملاء الديناميكي (Reviews Slider): برمجة وتصميم قسم خاص بآراء العملاء يمكن التنقل فيه (Next & Prev) بسلاسة باستخدام JavaScript.

عرض مرئي جذاب للمنتجات: تصميم أقسام لعرض المشروبات الأكثر مبيعاً مع توضيح الأسعار وتقييمات المنتجات بالنجوم.

تضمين خرائط جوجل (Google Maps): دمج خريطة تفاعلية في قسم "تواصل معنا" لتسهيل وصول الزوار لموقع المقهى الفعلي.

تنظيم احترافي للكود: كتابة أكواد نظيفة (Clean Code) مع فصل ملفات التنسيق (CSS) والمنطق البرمجي (JS) عن هيكل الصفحة (HTML) لضمان سهولة التعديل والتطوير المستقبلي.