Landing page - Food delivery

Omnifood هو موقع ويب حديث قمتُ بتصميمه وتطويره باستخدام HTML5 وCSS3 وJavaScript، ويقدّم تجربة متكاملة للتعريف بخدمة توصيل الوجبات الصحية المعتمدة على الذكاء الاصطناعي، والتي تهدف إلى مساعدة المستخدمين على اختيار النظام الغذائي الأنسب لهم بطريقة سهلة وسريعة.

يركّز الموقع على التصميم العصري و تجربة المستخدم السلسة، مع مراعاة توافقه الكامل مع جميع الأجهزة عبر تصميم Responsive يغطي الهواتف الذكية والأجهزة اللوحية والحواسيب.

أبرز الخصائص التي تم تنفيذها

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

قسم المميزات يعرض أهم فوائد الخدمة باستخدام أيقونات واضحة وتصميم متناسق.

قسم الوجبات يضم بطاقات (Cards) منسّقة توضّح نماذج من الوجبات الصحية مع تفاصيل مختصرة.

قسم خطط الأسعار (Pricing Plans) بأسلوب احترافي مع أزرار CTA واضحة للانضمام.

قسم تقييمات العملاء (Testimonials) يعرض آراء مستخدمين حقيقيين مع صورهم لزيادة الثقة.

معرض صور (Gallery) بتنسيق Grid متجاوب ومنظم.

شريط تنقّل ذكي (Navigation Bar) يشمل:

خاصية Sticky Navigation باستخدام JavaScript

تنقّل سلس بين الأقسام (Smooth Scrolling)

نموذج اشتراك (Form) مع التحقق من صحة البيانات عبر JavaScript.

الجوانب التقنية للمشروع

استخدام CSS Grid و Flexbox للحصول على تصميم مرن ومنظم.

اعتماد منهجية Mobile First لضمان أفضل تجربة على الأجهزة الصغيرة.

كتابة كود نظيف ومنظم مع تقسيم واضح بين ملفات HTML وCSS وJavaScript.

تحسين الصور وملفات الموقع لتحقيق أداء أسرع (Performance Optimization).

استخدام JavaScript للتحكم في عناصر التفاعل، مثل:

سلوك شريط التنقّل

أزرار الدعوة إلى الإجراء

التحقق من الحقول

الالتزام بمعايير تهيئة محركات البحث (SEO) عبر هيكلة صحيحة للصفحة باستخدام العناوين، ووصف الصور، والعناصر الدلالية.

هدف الموقع

يهدف موقع Omnifood إلى تقديم خدمة توصيل الطعام الصحي بصورة احترافية، مع إبراز الفوائد الرئيسية للخدمة وتشجيع الزوار على الاشتراك من خلال تصميم فعّال يركز على التحويل (Conversion-Focused Design).