City Hub
صفحة هبوط فاخرة ثنائية اللغة لمجموعة امتيازات في قطاع الأغذية والمشروبات — عرض العلامات ومسار الامتياز واستقطاب الطلبات.
// بالأرقام
- 6
- علامات معروضة
- 2
- اللغات
- 8+
- أسواق مستهدفة
- 48 ساعة
- زمن الرد على الطلب
ما الذي كان يواجهه العمل
المجموعة تبيع امتيازات لا وجبات — قرار يضع فيه المستثمر رأس ماله ويستغرق أسابيع، لا عملية شراء عابرة. وكان الاهتمام يصل عبر قنوات متفرقة: رسائل على مواقع التواصل ومكالمات ومحادثات واتساب، كل واحدة تبدأ من الصفر. ست علامات تُشرح محادثةً محادثةً، وخطوات الامتياز محفوظة في أذهان المؤسسين، والطلب يصل عادةً اسمًا ورقم هاتف دون أي إشارة إلى الميزانية أو المدينة المستهدفة أو العلامة التي يريدها المستثمر فعلًا. وكان تأهيل الطلب يكلّف مكالمة قبل أن يعرف أحد إن كانت المكالمة تستحق أصلًا.
صفحة هبوط فاخرة موجَّهة للتحويل لمجموعة City Hub — مجموعة إدارة وامتيازات في قطاع الأغذية والمشروبات تدير ست علامات في المنطقة. يعرض الموقع محفظة العلامات وخطوات الامتياز ومنظومة الدعم، ثم يوجّه المستثمرين المؤهلين إلى نموذج استقطاب موثَّق الحقول — بالعربية والإنجليزية بالكامل مع دعم كامل للاتجاه من اليمين لليسار.
كيف رُكِّب النظام
الواجهة ومحفظة العلامات
ست علامات أغذية ومشروبات · ظهور متحرك
مسار الامتياز
الخطوات · لماذا نحن · الدعم · الرؤية
نموذج الطلب
الميزانية · العلامة · حقول موثَّقة
موجّه Next.js App Router
مكوّنات خادم · next-intl عربي/إنجليزي · RTL
واجهة الطلبات
طلب POST موثَّق بـ Zod على /api/leads
MongoDB
مخزن الطلبات عبر Mongoose
Vercel
تسليم عالمي سريع عبر الحافة
موقع واحد ثنائي اللغة بـ Next.js يلتقط طلبات الامتياز المؤهَّلة ويخزّنها.
القرارات التي شكّلت النظام
القرارات القليلة التي حدّدت سلوك هذا النظام — وماذا اشترى كل قرار منها.
- 01
الصفحة مرتَّبة كمسار تحويل لا ككتيّب تعريفي
رُتِّبت الأقسام لتجيب عن اعتراضات المستثمر بالترتيب الذي تظهر به: هل لمحفظة العلامات رصيد حقيقي، وما الخطوات بالضبط، ومن يدعمني بعد التوقيع، ثم النموذج أخيرًا. ولا يوجد في الصفحة ما لا ينقل القارئ خطوة أقرب إلى تقديم الطلب.
- 02
التأهيل داخل النموذج لا في مكالمة المتابعة
شريحة ميزانية الاستثمار والمدينة المستهدفة والعلامة المفضّلة حقول اختيار منظَّمة لا نصًا حرًا. فيصل كل طلب قابلًا للتوجيه إلى صاحب العلامة المناسب، ويعرّف الطلب غير المناسب عن نفسه قبل أن ينفق أحد مكالمة عليه.
- 03
العربية والإنجليزية لغتان أصيلتان لا طبقة ترجمة
تُدار اللغتان من الطرف إلى الطرف مع عكس كامل للتخطيط في الاتجاه من اليمين لليسار ومبدّل بنقرة واحدة، لأن المستثمر في هذا السوق يقرأ ويتفاوض باللغتين، وصفحة مترجمة نصف ترجمة تُقرأ كعملية نصف جادة.
- 04
تعريف واحد للطلب الصحيح يُتحقق منه على طرفي الاتصال
الشكل نفسه يُتحقَّق منه في المتصفح ثم يُتحقَّق منه مرة أخرى في مسار الخادم قبل أن يُكتب شيء. تعريف واحد للطلب الصحيح يعني أن العميل لا يمكن أن ينحرف عن الخادم.
- 05
الطلبات تُحفظ لا تُرسل بريدًا
تُكتب الطلبات في قاعدة البيانات بدل إطلاقها إشعارًا. فمسار امتيازات يعيش في صندوق بريد هو مسار لا يستطيع أحد الاستعلام عنه أو ترتيبه أو تسليمه لغيره.
قدرات مميزة
مسار مصمَّم للتحويل أولًا
كل قسم مرتَّب لينقل المستثمر من الفضول إلى طلب امتياز مُرسَل — إثبات العلامة، ثم وضوح الخطوات، ثم طمأنة الدعم، ثم نموذج واحد حاسم.
طلبات مؤهَّلة لا أسماء مجرَّدة
يلتقط النموذج شريحة الميزانية والمدينة المستهدفة والعلامة المفضّلة، فيصل كل طلب مؤهَّلًا وقابلًا للتوجيه بدل اسم وبريد فقط.
ثنائية لغة حقيقية
العربية والإنجليزية درجة أولى — تخطيط RTL كامل ومكوّنات معكوسة ومبدّل لغة — لسوق يتصفّح باللغتين.
حركة بمستوى فاخر
ظهور بالتمرير عبر Framer Motion وواجهة متحركة تمنح الصفحة صقلًا يليق بعلامة يُطلب من المستثمر ائتمانها على رأس ماله.
مجموعة مزايا العمل التجاري
النطاق الوظيفي المُسلَّم عبر كل جزء من المنتج.
العلامة والقصة
- واجهة متحركة بعدّاد علامات حيّ
- محفظة ست علامات ببطاقات المطبخ والمفهوم
- صفحة عن الشركة وخط زمني لقصتها (منذ 2012)
- انتشار إقليمي في مصر والشرق الأوسط وأفريقيا
- شريط متحرك لعوامل التميّز «لماذا City Hub»
مسار الامتياز
- رحلة امتياز من ست خطوات، خطوة بخطوة
- شبكة الخدمات المتكاملة وما نقوم به
- نظرة عامة على منظومة الدعم
- زر ثابت «ابدأ رحلتك» ودعوة عبر واتساب
استقطاب الطلبات
- نموذج استفسار موثَّق (الاسم والبريد والهاتف والمدينة)
- اختيار ميزانية الاستثمار والعلامة المفضّلة
- تحقق مُنمَّط بـ Zod وReact Hook Form
- حفظ الطلبات في MongoDB
ثنائية اللغة والمنصة
- عربي / إنجليزي بدعم RTL كامل عبر next-intl
- مبدّل لغة بنقرة واحدة
- حركة ظهور بالتمرير عبر الصفحة
- متجاوب وسريع وجاهز لمحركات البحث
ما الذي تغيّر تشغيليًا
نتائج موثقة من النظام المُسلَّم. وحيث تكون الأرقام الدقيقة سرية، يُذكر التغيّر التشغيلي بدلًا منها.
- ست علامات معروضة في مكان واحد بدل شرحها محادثةً محادثةً
- الطلبات تصل مؤهَّلة مسبقًا بشريحة الميزانية والمدينة المستهدفة والعلامة المفضّلة
- طلبات الامتياز محفوظة كسجلات دائمة قابلة للاستعلام بدل تشتّتها بين البريد والمحادثات
- موقع ثنائي اللغة عربي/إنجليزي بدعم RTL كامل وتبديل لغة بنقرة واحدة
- خطوات الامتياز موثَّقة علنًا، فيجيب المستثمر بنفسه عن أسئلة كانت تستهلك المكالمة الأولى
- يعمل في بيئة الإنتاج على نطاق العميل الخاص
ما كان علينا العمل ضمنه
- القارئ يقرر أين يضع رأس ماله، فوجب أن تبدو الصفحة علامة تستحق هذه الثقة
- ثنائية اللغة عربي/إنجليزي في كل قسم، بما في ذلك نموذج الطلب ورسائل التحقق فيه
- ست علامات بمطابخ ومفاهيم مختلفة كان عليها أن تبقى مميَّزة كل على حدة دون تفتيت الصفحة الواحدة
- عدد الطلبات قليل وقيمة كل طلب عالية — التأهيل أهم بكثير من معدل التحويل الخام
- ميزانية وجدول زمني لموقع تسويقي لا لبناء منصة
ما الذي تولّيته
من البداية للنهاية في هذا المشروع — من المعمارية ونمذجة البيانات وحتى منتج إنتاجي مُسلَّم.
- الاتجاه التصميمي وتجربة المستخدم لتجربة الهبوط كاملة
- البناء بـ Next.js App Router مع next-intl (عربي/إنجليزي + RTL)
- نمذجة المحتوى ثنائي اللغة ونظام محفظة العلامات
- نموذج استقطاب موثَّق (Zod وReact Hook Form)
- حفظ الطلبات في MongoDB عبر مسار API بـ Mongoose
- النشر والتسليم على Vercel
بُني بواسطة
إطار العمل
الواجهة والحركة
البيانات والتحقق
البنية التحتية
تريد شيئاً مثل City Hub؟
استوديو برمجيات بوتيك — أنظمة بجودة الوكالات، يبنيها مهندس أول واحد.
// أعمال ذات صلة
