Native

Native, beyond the plate — order food from local restaurants and discover markets, culture, stays, events and experiences, all in one place. The sample listings in this prototype are set in Owerri, Imo State.

Stack: Next.js 16 (App Router, Cache Components) · TypeScript · Tailwind CSS v4 · Lucide React · Motion

Run locally

npm install
npm run dev

Open http://localhost:3000

Script	What it does
npm run dev	Development server
npm run build / npm start	Production build / serve
npm run lint	ESLint
npm run typecheck	Generate route types + tsc --noEmit

Brand

• Name: Native · Tagline: Native, beyond the plate
• Logo: the official artwork (lowercase “native” with the woman carrying a pot as the “i”), drawn only by Wordmark in src/components/brand.tsx, which every header, drawer, footer, the splash screen, auth pages and the admin previews use. public/brand/native-logo-green.png / native-logo-white.png are the full lockup with “BEYOND THE PLATE” (tagline, the default); native-wordmark-green.png / native-wordmark-white.png are the wordmark alone for tight spaces such as the phone header. White files are used on dark backgrounds and in the Option 2 dark theme.
• Colours: forest green is primary; neutrals stay clean. A soft gold accent --color-spark (#E7B655 — lighter than the original #F1A10C, which read too yellow) is used for small highlights, ratings and the key Explore Food / Add / View Restaurant buttons.
• Pattern: the supplied image (public/brand/native-pattern.jpg) is kept; bg-native-pattern / bg-native-pattern-lg draw a mirrored tile of it at reduced scale under a deep-green wash so it reads as a quiet texture.

Opening splash & homepage

• Splash: white screen with the wordmark and tagline, a soft entrance and fade (globals.css, components/splash.tsx). Shown on every full load of the homepage, and on the first page of a browser session elsewhere — never on internal navigation (src/lib/theme-script.ts). It never intercepts clicks, shortens under reduced motion, and a timer removes it even if animations are paused.
• Hero: a compact, cinematic food photograph (three slides cross-fading every 6 s, with dots; paused under reduced motion) with the text to one side: a small label, "Real Flavours. True Stories.", one line and an orange Explore Food button. The supplied cultural video and its renditions remain in public/videos/ and components/hero-video.tsx (HeroVideo) but are no longer shown on the homepage.
• Homepage (follows the dark reference mock-up): header with the logo on the left; on phones only search, cart and the menu button (right) — notifications and the account are inside the menu. Then the food hero, the search bar beneath it (the existing site search; the filter icon opens Explore), six illustrated shortcuts (compact soft-coloured tiles) (Restaurants, Hangout → Events filtered to Hangouts, Places, Events, Market, Stays — homeShortcuts in src/lib/services.ts), Featured Restaurants as a spotlight for Annie’s Native Kitchen (label, name, place, description, View Restaurant) beside a "Places to explore" card, Popular Dishes (bordered cards with a category badge, price and Add / quantity controls using the shared cart), Nearby (closest places and restaurants with distance badges; they open the existing details) Farmers Market (produce and spice stalls) and Shops & Crafts (craft makers) rows, and a compact culture banner on the Native pattern. On phones there is no bottom bar. Version B uses the same structure in its own style (rounded hero card, round shortcut bubbles, softer radii). Components: components/home/*.
• Shortcut and menu illustrations come from src/components/service-art.tsx (one consistent flat style).
• Site menu: both versions' mobile menus use the same grouped list (components/app-menu.tsx, menuGroups in services.ts): the account card, Discover & Order (Home, Restaurants, Explore Nigerian Food) followed by the Native Kitchen banner, Explore More (Farmers Market, Tours & Experiences — which includes stays, Events & Hangouts, Nearby, Shops & Crafts, Explore — the stories page), (Saved, Orders, Notifications, Settings, Help / Support) and the Taste the regions banner.

Food ordering

Food ordering is a primary service: Restaurants (/restaurants) is second in the navigation, first among the homepage shortcuts and in both mobile docks.

This is the beginning of the README. Read the rest at the original. Read the full README ↗