City Hub
Premium bilingual landing page for an F&B franchise group — brand showcase, franchise funnel and lead capture.
// By the numbers
- 6
- Brands showcased
- 2
- Languages
- 8+
- Target markets
- 48h
- Lead response
A premium, conversion-first landing page for City Hub — an F&B management and franchise group operating six brands across the region. The site presents the brand portfolio, the franchise process and the support system, then funnels qualified investors into a validated lead-capture form — fully bilingual Arabic/English with right-to-left support.
How it's put together
Hero & brand portfolio
6 F&B concepts · animated reveals
Franchise funnel
Process · why · support · vision
Lead form
Budget · brand · validated fields
Next.js App Router
RSC · next-intl AR/EN · RTL
Leads API
Zod-validated POST /api/leads
MongoDB
Mongoose lead store
Vercel
Edge-served · fast global delivery
A single bilingual Next.js site that captures and stores qualified franchise leads.
Signature capabilities
Conversion-first funnel
Every section is sequenced to move an investor from curiosity to a submitted franchise request — brand proof, process clarity, support assurance, then a single decisive form.
Qualified lead capture
The enquiry form captures budget band, target city and preferred brand, so each lead arrives pre-qualified and routable instead of a bare name and email.
Truly bilingual
Arabic and English are first-class — full RTL layout, mirrored components and a language switcher — built for a market that browses in both.
Premium motion
Framer Motion scroll reveals and an animated hero give the page the polish of a brand the investor is being asked to trust with capital.
Business feature set
The functional scope delivered across every part of the product.
Brand & story
- Animated hero with live brand counter
- Six-brand portfolio with cuisine + concept cards
- About / company-story timeline (since 2012)
- Regional footprint across Egypt, MENA & Africa
- "Why City Hub" differentiators marquee
Franchise funnel
- Six-step franchise process, step by step
- Integrated services / what-we-do grid
- Support-system overview
- Sticky 'Start your journey' + WhatsApp CTA
Lead capture
- Validated enquiry form (name, email, phone, city)
- Investment-budget and preferred-brand selectors
- Zod + React Hook Form typed validation
- Leads persisted to MongoDB
Bilingual & platform
- Arabic / English with full RTL via next-intl
- One-tap language switcher
- Scroll-reveal motion throughout
- Responsive, SEO-ready, fast
What I owned
End-to-end on this project — from architecture and data modelling through to a shipped, production product.
- Design direction & UX of the full landing experience
- Next.js App Router build with next-intl (AR/EN + RTL)
- Bilingual content modeling and brand portfolio system
- Validated lead-capture form (Zod + React Hook Form)
- MongoDB lead persistence via Mongoose API route
- Deployment & delivery on Vercel
Built with
Framework
UI & motion
Data & validation
Infrastructure
// Gallery
Want something like City Hub?
Boutique software studio — agency-quality systems, shipped by one senior engineer.
// Related work
