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
What the business was up against
City Hub sells franchises, not meals — a decision an investor makes over weeks with their own capital, not a checkout. Interest arrived through scattered channels: social messages, phone calls and WhatsApp threads, each one starting from zero. Six brands were explained one conversation at a time, the franchise process lived in the founders' heads, and an enquiry usually arrived as a name and a phone number with no indication of budget, target city or which brand the investor actually wanted. Qualifying a lead cost a call before anyone knew whether the call was worth making.
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.
The calls that shaped it
The handful of decisions that determined how this system behaves — and what each one bought.
- 01
The page sequenced as a funnel, not a brochure
Sections answer an investor's objections in the order they surface: does this portfolio have real substance, what exactly is the process, who supports me after signing — and only then the form. Nothing is on the page that does not move the reader one step closer to enquiring.
- 02
Qualification moved into the form, not the follow-up call
Investment budget band, target city and preferred brand are structured selectors rather than free text. Each enquiry arrives routable to the right brand owner, and a mismatched lead identifies itself before anyone spends a call on it.
- 03
Arabic and English as peer locales, not a translation layer
Both languages are driven end to end with full RTL mirroring and a one-tap switcher, because investors in this market read and negotiate in both — and a half-translated page reads as a half-serious operation.
- 04
One validation schema on both sides of the wire
The same Zod shape validates in the browser through React Hook Form and again in the API route before anything is written. One definition of a valid enquiry means the client cannot drift from the server.
- 05
Leads persisted, not emailed
Enquiries are written to the database rather than fired off as a notification. A franchise pipeline that lives in an inbox is a pipeline nobody can query, sort or hand over.
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 changed operationally
Documented outcomes from the delivered system. Where exact figures are confidential, the operational change is stated instead.
- Six brands presented in one place instead of explained one conversation at a time
- Enquiries arrive pre-qualified with budget band, target city and preferred brand
- Franchise leads stored as durable, queryable records rather than scattered across inboxes and chat threads
- Bilingual Arabic/English site with full RTL and one-tap language switching
- The franchise process documented publicly, so investors self-serve the questions that used to consume the first call
- Live in production on the client's own domain
What we had to work within
- The reader is deciding where to place capital, so the page had to feel like a brand worth trusting with it
- Bilingual Arabic/English across every section, including the enquiry form and its validation messages
- Six brands with different cuisines and concepts had to stay individually legible without fragmenting one page
- Enquiry volume is low and each enquiry is high value — qualification matters far more than raw conversion rate
- A marketing-site budget and timeline, not a platform build
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
Want something like City Hub?
Boutique software studio — agency-quality systems, shipped by one senior engineer.
// Related work
