212 Chicken — Crunch in Motion

المشروع

212 Chicken هو موقع مطعم تم تصميمه حول مفهوم إبداعي يحمل اسم “Crunch in Motion”.

كان الهدف هو نقل طاقة وشخصية العلامة التجارية إلى تجربة رقمية واضحة ومميزة.

بدلاً من بناء موقع مطعم تقليدي، يعتمد المشروع على صور منتجات قوية، وTypography كبيرة، وحركات تفاعلية مرتبطة بتصفح المستخدم.

التحدي

كان التحدي الأساسي هو الحفاظ على قوة الهوية البصرية دون جعل الموقع معقداً.

كان من الضروري أن يتمكن الزائر من:

• اكتشاف العلامة التجارية؛
• تصفح القائمة؛
• البحث عن المنتجات؛
• استخدام فلاتر الفئات؛
• مشاهدة تفاصيل المنتج؛
• البحث عن المطاعم؛
• الوصول إلى الشبكات الاجتماعية؛
• الوصول إلى خدمة الطلب عند توفر رابط موثوق.

كما كان من المهم المحافظة على الأداء وسهولة الاستخدام على الهاتف.

الاتجاه البصري

تعتمد الواجهة على أسلوب بصري جريء يركز على هوية 212 Chicken.

تتضمن الصفحة الرئيسية:

• Burger عائماً؛
• رقم 212 بحجم كبير؛
• شريطاً برتقالياً يعكس الهوية؛
• صور منتجات بطبقات متعددة؛
• حركات مرتبطة بالتمرير.

تم تصميم الـ Hero كجزء أساسي من تجربة العلامة التجارية وليس مجرد Banner تقليدي.

Crunch in Motion

تترجم الحركة الرئيسية في الـ Hero مفهوم “Crunch in Motion” إلى تفاعل مباشر.

على شاشات الكمبيوتر، يؤدي التمرير إلى فتح طبقات البرغر تدريجياً.

يمكن للجزء السفلي من الخبز والصلصة والفتات التحرك بشكل مستقل عن الطبقات العلوية.

كما تتحرك طبقة “212” بتأخير بسيط لإضافة إحساس بالعمق.

قائمة المنتجات

تحتوي صفحة القائمة على 25 منتجاً ضمن Grid موحد.

يمكن للمستخدم تصفية المنتجات عبر 9 فئات.

بدلاً من استخدام Scroll أفقي إجباري، تنتقل الفلاتر إلى سطر جديد عند الحاجة.

وعلى الشاشات الكبيرة يمكن أن تبقى الفئات ظاهرة أثناء تصفح القائمة.

البحث

يتضمن الموقع نظام بحث يساعد المستخدم على الوصول إلى المنتج بسرعة.

البحث غير حساس لاختلافات الـ accents، مما يجعل الكتابة أكثر مرونة.

كما يمكن فتح فئة محددة مباشرة باستخدام الرابط ومعامل ?categorie=.

تفاصيل المنتجات

يمكن فتح تفاصيل المنتجات من خلال Dialog قابل للوصول.

يسمح ذلك بعرض معلومات إضافية مع الحفاظ على المستخدم داخل تجربة القائمة.

البحث عن المطاعم

يحتوي الموقع على صفحة مخصصة للعثور على مطاعم 212 Chicken.

عندما لا تتوفر عناوين مؤكدة، لا يعرض الموقع معلومات غير موثوقة.

بدلاً من ذلك يتم استخدام بحث Google Maps كخيار آمن ومفيد.

الطلب

أزرار الطلب مرتبطة بالبيانات.

لا يظهر زر الطلب إلا عند إضافة رابط HTTPS موثوق لخدمة الطلب.

بهذه الطريقة لا يعرض الموقع مسار طلب غير موجود فعلياً.

التجاوب

تم تصميم الموقع للعمل بشكل جيد على الكمبيوتر والتابلت والهاتف.

تم الاهتمام خصوصاً بـ:

• Hero؛
• فلاتر الفئات؛
• Dialog المنتجات؛
• التنقل؛
• أزرار CTA؛
• منع التمرير الأفقي غير الضروري.

الهدف هو الحفاظ على قوة التصميم دون التضحية بسهولة الاستخدام.

إمكانية الوصول

تم دمج اختبارات إمكانية الوصول ضمن عملية التحقق من جودة المشروع.

تستخدم اختبارات Playwright أيضاً axe لفحص بعض جوانب Accessibility.

كما يتم اختبار حالات الحركة المختلفة بشكل مستقل.

تحسين محركات البحث

تم تضمين الأساس التقني لـ SEO منذ بنية المشروع.

يشمل ذلك:

• Metadata؛
• Sitemap؛
• Robots؛
• Social card؛
• Icons؛
• JSON-LD؛
• روابط مباشرة لفئات القائمة.

يمكن كذلك التحكم في Indexing حسب بيئة النشر.

بيئات المعاينة تبقى noindex بشكل افتراضي حتى لا يتم فهرستها بالخطأ.

التحقق البصري

يتضمن المشروع أدوات مخصصة لمراجعة الشكل النهائي.

يمكن إنشاء Screenshots كاملة للموقع على عدة أحجام للشاشات بشكل أوتوماتيكي.

كما يتم اختبار:

• الحركة العادية؛
• Reduced Motion؛
• تجربة الموقع دون JavaScript.

الاختبارات

يستخدم المشروع Playwright للتحقق من أهم المسارات.

تغطي الاختبارات:

• سلوك الموقع؛
• Accessibility؛
• SEO؛
• Responsive Design؛
• تفاعلات القائمة.

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

• Next.js 16
• React
• TypeScript
• Playwright
• axe accessibility
• JSON-LD
• Responsive Design
• Technical SEO

النتيجة

212 Chicken هو امتداد رقمي لشخصية العلامة التجارية.

يجمع المشروع بين اتجاه إبداعي قوي، وقائمة منظمة، وحركات مدروسة، وبحث سريع، وبنية تقنية قوية لتحسين الظهور في محركات البحث.

النتيجة هي تجربة مطعم أكثر جرأة وتميزاً من المواقع التقليدية، مع الحفاظ على التجاوب وإمكانية الوصول وقابلية التطوير.