Project Overview

W'Food is a single-page restaurant landing site that presents a hero section, menu items, a reservation form, an about section, an interactive map, and a footer. It is built with the Next.js 15 App Router, TypeScript, TailwindCSS, and Framer Motion. The app is fully static and frontend-only: there is no backend server, database, or API. All data (menu items, nav links, map markers) lives in the codebase under data/ and types/. The project is suitable for learning Next.js App Router, client components, animations, and responsive layout patterns.

Features & Functionality

Core features:

• Hero section – Full-width hero with headline, subtitle, and imagery. Uses Framer Motion for fade-in animations keyed to scroll.
• Menu section – Grid of featured dishes (image, title, price). Data comes from data/menu.ts. Hover effects and responsive columns.
• Reservation section – Form with first/last name, date picker (react-day-picker), and party size select (Radix Select). UI-only; no submission backend.
• About section – Two-column layout (text + image) with scroll-triggered animations.
• Map section – Interactive Leaflet map (via react-leaflet) with multiple markers and popups. Loaded only on the client via MapDynamic to avoid SSR issues with Leaflet.
• Header – Fixed nav with logo, desktop nav links (smooth scroll via react-scroll), “Book a table” CTA, and mobile menu.
• Footer – Logo, link columns (Blog, New Item, Socials), and copyright.

Technical behaviour:

• Single route – The only route is / (home). All sections are on one page; navigation uses scroll-to-section (e.g. #home, #menu, #about, #contact, #reservation).
• Client components – Interactive pieces use "use client" (Header, Hero, Menu, About, Footer, Map, Nav, NavMobile, Reservation, ReservationForm, UI primitives).
• Dynamic import – The map is wrapped in MapDynamic, which uses next/dynamic with ssr: false so Leaflet runs only in the browser.
• SEO – Metadata (title, description, keywords, Open Graph, Twitter, icons, author) is set in app/layout.tsx for better search and sharing.

Technology Stack

Project Structure

restaurant-1/
├── app/
│   ├── layout.tsx      # Root layout, fonts, metadata, global styles
│   ├── page.tsx        # Home page: composes all sections
│   ├── globals.css     # Tailwind directives + base styles
│   └── favicon.ico     # Site favicon
├── components/
│   ├── Header.tsx      # Fixed header, logo, nav, CTA, mobile menu
│   ├── Hero.tsx        # Hero section with motion animations
│   ├── Menu.tsx        # Menu grid (data from data/menu.ts)
│   ├── Reservation.tsx # Reservation section wrapper
│   ├── ReservationForm.tsx # Form: name, date picker, party size
│   ├── About.tsx       # About section (text + image)
│   ├── Map.tsx         # Leaflet map with markers (client-only)
│   ├── MapDynamic.tsx  # Dynamic wrapper for Map (ssr: false)
│   ├── Footer.tsx      # Footer with links and copyright
│   ├── Nav.tsx         # Desktop nav (react-scroll links)
│   ├── NavMobile.tsx   # Mobile menu with icons
│   ├── StyleGuide.tsx  # Style guide / UI showcase
│   └── ui/             # Reusable UI primitives
│       ├── button.tsx
│       ├── input.tsx
│       ├── label.tsx
│       ├── select.tsx
│       ├── popover.tsx
│       └── calendar.tsx
├── data/
│   ├── menu.ts         # Menu items (img, title, price)
│   ├── navLinks.ts     # Desktop nav (path, name, offset)
│   ├── navMobileLinks.tsx # Mobile nav with icons
│   └── mapMarkers.ts   # Map marker data (position, title, subtitle, image)
├── lib/
│   ├── utils.ts        # cn() – merge Tailwind classes
│   └── variants.ts    # Framer Motion fadeIn variants
├── types/
│   ├── index.ts        # MenuItem, NavLinkConfig, MapMarkerData, etc.
│   └── react-scroll.d.ts # Type declaration for react-scroll
├── public/             # Static assets (images, icons)
├── next.config.mjs
├── tailwind.config.js
├── tsconfig.json
├── vercel.json         # Rewrites for SPA-style routing on Vercel
└── package.json

Installation & How to Run

Prerequisites: Node.js 18+ and npm (or yarn/pnpm).

Steps:

1. Clone the repository and go into the project folder:

   git clone <repository-url>
   cd restaurant-1
   

2. Install dependencies:

   npm install
   

3. Run the development server:

   npm run dev
   

   Open http://localhost:3000 in your browser.

4. Other scripts:

   • Build: npm run build – production build.
   • Start: npm run start – run the production build locally.
   • Lint: npm run lint – run ESLint (Next.js config).

You do not need a backend or any external service to run or build this project.

Environment Variables

You do not need any environment variables to run this project. It works out of the box with no .env file.

If you later add features that need configuration (e.g. analytics, a contact form backend, or a CMS), you can:

1. Create a .env.local in the project root (this file is gitignored).

2. Add variables such as:

   NEXT_PUBLIC_SITE_URL=https://restaurant-wfood.vercel.app
   # Optional examples:
   # NEXT_PUBLIC_ANALYTICS_ID=...
   # CONTACT_FORM_ENDPOINT=...
   

3. Use them in code via process.env.NEXT_PUBLIC_* (client) or process.env.* (server). Restart the dev server after changing .env.local.

For the current codebase, no env vars are read; this section is for future use only.

Routes & Navigation

• Route: There is a single route, /, defined by app/page.tsx. It renders the main layout with all sections (Header, Hero, Menu, Reservation, About, Map, Footer).

• In-page navigation: Links in the header and mobile menu use react-scroll to smooth-scroll to section IDs: #home, #menu, #about, #contact, #reservation. Section IDs are set on the corresponding <section> elements (e.g. id="home", id="menu").

• Vercel rewrites: vercel.json rewrites all non-asset paths to / so that refreshing the page on any path still serves the app (SPA-style behaviour on Vercel).

There are no API routes or server-only routes in this project.

Components Walkthrough

app/layout.tsx
Root layout: loads Lora and Poppins via next/font/google, applies globals.css, and exports metadata (title, description, keywords, Open Graph, Twitter, icons, author, etc.). Renders <html> and <body> with font variables and background styles.

app/page.tsx
Server component that composes the single page: Header, Hero, Menu, Reservation, About, MapDynamic, Footer inside a <main> container.

Header
Client component. Tracks scroll position; toggles header background after 100px. Renders logo (Next.js Link + Image), desktop Nav, a react-scroll “Book a table” button, and NavMobile for small screens.

Nav
Uses Link from react-scroll to scroll to section IDs. Link list and offsets come from data/navLinks.ts.

NavMobile
Mobile menu: hamburger icon toggles a full-screen overlay with logo, scroll links (with icons from data/navMobileLinks.tsx), and “Book a table” button.

Hero
Hero block with headline, byline, and CTA. Uses Framer Motion’s motion.* and fadeIn from lib/variants.ts for scroll-triggered animations. Images via Next.js Image.

Menu
Reads menuItems from data/menu.ts and renders a responsive grid. Each item shows image, title, and price with hover effects.

Reservation & ReservationForm
Reservation is a wrapper with motion; the form inside uses Radix Popover + react-day-picker for the date and Radix Select for party size. No submit handler; form is UI-only.

About
Two-column layout (text + image) with motion variants.

Map & MapDynamic
Map uses react-leaflet (MapContainer, TileLayer, Marker, Popup) and mapMarkers from data/mapMarkers.ts. It is only loaded on the client; MapDynamic uses dynamic(() => import('@/components/Map'), { ssr: false }) so the map does not run during