AJ
Back to Builds
WebComplete

Mami Bhas Kitchen

Marketing site for a delivery-only cloud kitchen in Ahmedabad specializing in stuffed parathas, rolls, and masala Maggi. Full menu system, a 4-theme switcher, and direct Swiggy, Zomato, and WhatsApp ordering links.

Next.js 16Framer MotionTailwind CSSTypeScript

Overview

Mami Bhas Kitchen is a 5-page marketing site for a delivery-only cloud kitchen in Maninagar, Ahmedabad, run by founder Rhutvi Jain. It presents a 30-item menu across 4 categories (Parathas, Rolls, Masala Maggi, Jain Special), with Swiggy and WhatsApp as the live ordering channels and Zomato marked coming soon. Built with no backend, no CMS, and no database, all content lives in a single typed data file.

Why it was built

A client project for a hyperlocal food business that needed a credible web presence beyond its Swiggy listing, something that could carry the brand's identity and Jain-friendly menu clearly, and funnel customers toward direct ordering channels with lower platform fees. The brief favoured speed and zero maintenance overhead over content flexibility.

4-Theme System

Four switchable themes (Vibrant, Premium, Homely, Minimal) driven entirely by CSS variables, persisted to localStorage with a hydration-safe init script so there's no flash of the wrong theme on load.

30-Item Menu System

Menu items live in a typed array grouped into 4 categories, each flagged with bestseller and jain booleans. The homepage filters to 8 bestsellers automatically; the menu page renders the full list.

WhatsApp Order Flow

A floating WhatsApp button and inline CTAs open a chat with a pre-filled message. Paired with direct Swiggy and tel: links, this gives customers four ordering paths without a single form.

Tech Breakdown

Next.js 16

Static-friendly App Router fits a 5-page content site with no dynamic data. Metadata API handles per-page SEO without extra tooling.

CSS Custom Properties

All 4 themes are defined as CSS variables under data-theme selectors rather than swapped Tailwind classes, so every component picks up the active theme with zero JS overhead at render time.

Framer Motion

Used narrowly for the theme switcher's entrance animation and section transitions, kept deliberately light for a site with no other interactivity.

No backend or CMS

All menu, contact, and brand content is hardcoded in src/lib/content.ts as a single source of truth. For a 30-item menu that changes rarely, a database would be pure overhead.

Challenges
  • 1

    Keeping 4 complete colour themes visually distinct and accessible (Vibrant, Premium, Homely, Minimal) while sharing one component tree required every colour reference to route through CSS variables, with no hardcoded Tailwind colours anywhere in the codebase.

  • 2

    Representing a Jain-friendly menu alongside the regular menu without a separate page meant adding a jain flag to the data model and filtering UI, rather than duplicating content.

What's Next

Add the real Zomato link once that listing is live, replace the placeholder contact email, and consider a small image carousel for the bestseller cards. Vercel Web Analytics is available but not yet wired in.

See it live

Check out the deployed site.