Big Lime - React Restaurant UI

Big Lime is a clean, fast, and accessible single‑page restaurant website built with React. It showcases a modern hospitality brand with a strong focus on usability, responsive design, and delightful micro‑interactions.

Highlights

• Polished brand experience: Thoughtful typography, color contrast, and consistent spacing for a premium feel.
• Responsive by design: Looks great on phones, tablets, and desktops without layout hiccups.
• Accessible UX: Semantic HTML, keyboard‑friendly navigation, descriptive alt text, and ARIA where appropriate.
• Realistic content: India‑based contact details, on‑brand copy, and localized testimonial names.
• Modular components: Reusable UI blocks that are easy to extend or restyle.

Pages & Sections

• Home: Hero, Week Specials, Testimonials, and Our Story preview.
• Bookings: Reservation flow with form validation (demo logic using a fake API).
• Not Found / Under Construction: Friendly fallback routes.

Tech Stack

• React 18 with React Router 6
• Create React App tooling
• Font Awesome icons
• Modern Normalize and custom CSS modules per section

Getting Started

1. Install dependencies:

   npm install

2. Run the development server:

   npm start

3. Build for production:

   npm run build

Project Structure

src/
  components/
    layout/           # Header, Footer, Layout shell
    pages/
      Home/           # Hero, Specials, Testimonials, Our Story
      Bookings/       # Booking form, validation, confirmation
      NotFound/       # 404 route
      UnderConstruction/
  utils/              # Fake API, route map

Configuration & Customization

• Branding: Update brand text/colors in public/index.html, public/site.webmanifest, and styles in src/components/layout/*.css.
• Contact details: Edit the contacts array in src/components/layout/Footer.js.
• Menu items: Adjust specials in src/components/pages/Home/WeekSpecials.js.
• Testimonials: Update names and quotes in src/components/pages/Home/Testimonials.js.
• Copy: Our brand story lives in src/components/pages/Home/OurStory.js.

Accessibility Notes

• Color contrast respects WCAG AA where possible.
• Landmarks and headings form a clear document outline.
• Interactive controls have focus styles and accessible names.

Performance Notes

• Lightweight asset footprint and optimized images for a snappy first load.
• Minimal JavaScript outside the main bundle; simple CSS without heavy frameworks.

Deployment

The app can be hosted on any static site host (e.g., Vercel, Netlify, GitHub Pages). Build with npm run build and deploy the contents of the build/ directory.

License

This project is provided for learning and portfolio purposes. You are welcome to adapt it for your own restaurant project.