🍰 Bakelpv – Modern Bakery Website

A fully responsive, high-end bakery experience built with Next.js 14 & Tailwind CSS.
Desktop, tablet, and mobile friendly – perfect as a portfolio project.

╔═══════════════════════════════════════╗
║   Freshly baked UI for every device   ║
╚═══════════════════════════════════════╝
  

Features • Pages • Tech Stack • Local Setup • Structure

---

Features

• Beautiful hero section: Floating cake illustration, smooth wave dividers, and brand-consistent colors.
• Fully responsive layout: Carefully tuned for mobile, tablet, and large desktop using Tailwind breakpoints.
• Global navigation & footer:
  • Sticky navbar with search overlay and cart badge.
  • Shared footer with cake illustration and quick links.
• Products & cart flow:
  • /products list with search, filters, and sorting.
  • /products/[slug] detail pages with ingredients, allergens, and related products.
  • /cart with quantity controls, subtotal, tax, delivery, and mock checkout.
• Booking & contact:
  • /book “Book a Table” form with validation and success screen.
  • /contact with contact cards, map embed, and validated contact form.
• Search experience:
  • Global search overlay in navbar.
  • /search page driven by query string (?q=) with add‑to‑cart.

---

Pages & Routes

• Home – /
• About – /about
• Menu – /menu
• Products listing – /products
• Product detail – /products/[slug]
• Cart – /cart
• Search – /search?q=...
• Book a table – /book
• Contact – /contact

All pages share the same Navbar and Footer through the root layout.

---

Tech Stack

• Framework: Next.js 14 (App Router)
• Language: TypeScript + React
• Styling: Tailwind CSS + custom utility classes
• Icons: lucide-react
• State management: Lightweight context-based cart (CartProvider)

---

Local Setup

# 1. Install dependencies
npm install

# 2. Run the development server
npm run dev

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

For a production build:

npm run build
npm start

---

Project Structure

app/
  layout.tsx            # Root layout with Navbar + Footer + CartProvider
  page.tsx              # Home page (hero, creations, story, offers, reviews)
  about/page.tsx        # About us, stats, values, team
  book/page.tsx         # Book a table form & success state
  cart/page.tsx         # Cart + order summary
  contact/page.tsx      # Contact info, map, contact form
  menu/page.tsx         # Menu categories & full overview
  products/page.tsx     # Product listing, filters, search, sort
  products/[slug]/...   # Product detail pages
  search/page.tsx       # Search results driven by ?q=

components/
  Navbar.tsx            # Sticky nav with search overlay & mobile menu
  Footer.tsx            # Decorative footer with cake illustration
  CartProvider.tsx      # Cart context (add / remove / quantity)

lib/
  data.ts               # Products, menu data, time slots

---

Notes for Reviewers / Recruiters

• The design is pixel‑polished for both light and dark backgrounds.
• Layout and spacing are tuned to look good from 320px mobile up to large desktops.
• The cart and booking flows are front‑end only (no real backend) – perfect for demos and UI/UX evaluation.

If you’d like, this project can be easily extended with:

• Real backend / API for orders.
• CMS integration for products (Sanity, Contentful, etc.).
• Authentication + user accounts.