Foodie-Spot — Next.js 企业官网模板

SHA-256: bef955cda65a95ca08c6327c3aa6f245cb2368ccfb9a7d9e90b87e707cfdea30

2026-10-13T08:11:53.975Z

<!-- PROJECT LOGO -->
<br />
<div align="center">
  <a href="https://foodiespot.pk">
    <img src="https://images.unsplash.com/photo-1504674900247-0877df9cc836?q=80&w=200&h=80&auto=format&fit=crop" alt="Foodie Spot Logo" width="200" height="80">
  </a>

  <h1 align="center">FOODIE SPOT — Delicious Food, Delivered Hot & Fresh</h1>

  <p align="center">
    Modern single-page restaurant website with direct WhatsApp ordering, scroll-driven animations, and a clean dark theme.
    <br />
    <a href="https://foodiespot-demo.vercel.app"><strong>View Live Demo »</strong></a>
    <br />
    <br />
    <a href="https://github.com/zainshah3464/Foodie-Spot">GitHub Repository</a>
    ·
    <a href="https://github.com/zainshah3464/Foodie-Spot/issues">Report Bug</a>
    ·
    <a href="https://github.com/zainshah3464/Foodie-Spot/issues">Request Feature</a>
  </p>
</div>

<!-- BADGES -->
<p align="center">
  <a href="https://github.com/zainshah3464/Foodie-Spot/actions">
    <img src="https://img.shields.io/github/actions/workflow/status/zainshah3464/Foodie-Spot/deploy.yml?style=flat-square" alt="Build Status">
  </a>
  <a href="https://foodiespot-demo.vercel.app">
    <img src="https://img.shields.io/github/deployments/zainshah3464/Foodie-Spot/production?style=flat-square&label=vercel" alt="Deployment">
  </a>
  <a href="LICENSE">
    <img src="https://img.shields.io/github/license/zainshah3464/Foodie-Spot?style=flat-square" alt="License">
  </a>
  <img src="https://img.shields.io/badge/Next.js-16-black?style=for-the-badge&logo=next.js&logoColor=white" alt="Next.js">
  <img src="https://img.shields.io/badge/TypeScript-5-blue?style=for-the-badge&logo=typescript&logoColor=white" alt="TypeScript">
  <img src="https://img.shields.io/badge/Tailwind%20CSS-4-38B2AC?style=for-the-badge&logo=tailwind-css&logoColor=white" alt="Tailwind">
  <img src="https://img.shields.io/badge/Framer%20Motion-11-purple?style=for-the-badge&logo=framer&logoColor=white" alt="Framer Motion">
  <img src="https://img.shields.io/badge/Google%20Fonts-Poppins-orange?style=for-the-badge" alt="Fonts">
</p>

<!-- TABLE OF CONTENTS -->
<details>
  <summary>Table of Contents</summary>
  <ol>
    <li><a href="#about-the-project">About The Project</a></li>
    <li><a href="#features">Features</a></li>
    <li><a href="#tech-stack">Tech Stack</a></li>
    <li><a href="#getting-started">Getting Started</a></li>
    <li><a href="#environment-variables">Environment Variables</a></li>
    <li><a href="#project-structure">Project Structure</a></li>
    <li><a href="#key-components">Key Components</a></li>
    <li><a href="#how-it-works">How It Works</a></li>
    <li><a href="#customization">Customization</a></li>
    <li><a href="#performance-optimizations">Performance Optimizations</a></li>
    <li><a href="#mobile-responsiveness">Mobile Responsiveness</a></li>
    <li><a href="#accessibility">Accessibility</a></li>
    <li><a href="#troubleshooting">Troubleshooting</a></li>
    <li><a href="#roadmap">Roadmap</a></li>
    <li><a href="#changelog">Changelog</a></li>
    <li><a href="#testing">Testing</a></li>
    <li><a href="#code-style">Code Style</a></li>
    <li><a href="#deployment">Deployment</a></li>
    <li><a href="#contributing">Contributing</a></li>
    <li><a href="#license">License</a></li>
    <li><a href="#developer">Developer</a></li>
    <li><a href="#support">Support</a></li>
    <li><a href="#faq">FAQ</a></li>
    <li><a href="#acknowledgments">Acknowledgments</a></li>
  </ol>
</details>

---

## About The Project

**Foodie Spot** is a modern, fully responsive single-page restaurant website built with **Next.js** and **Framer Motion**. It features an elegant dark theme with subtle orange accents, smooth scroll-driven animations, and a direct WhatsApp ordering system—no commission, no app download. The project serves as a demo to help restaurants and small food businesses establish a professional online presence quickly.

> **Note:** All images are from Unsplash and can be replaced with your own. The site is a front‑end demo with no backend.

<p align="center">
  <img src="https://images.unsplash.com/photo-1504674900247-0877df9cc836?q=80&w=1200&auto=format&fit=crop" alt="Foodie Spot Demo" width="80%">
</p>

---

## Features

- 🍔 **Fully Responsive** – Optimized for mobile, tablet, and desktop.
- 🎬 **Scroll‑Driven Animations** – Parallax effects, progressive reveals, and smooth transitions powered by Framer Motion.
- 📱 **WhatsApp Direct Ordering** – Customers can place orders via WhatsApp with pre‑filled messages.
- 🍕 **Dynamic Menu with Category Filters** – Filter dishes by category (Burger, Pizza, Biryani, etc.) with smooth layout animations.
- 🖼️ **Interactive Gallery with Lightbox** – Hover‑to‑zoom and click‑to‑preview food images.
- ⭐ **Testimonials Section** – Customer reviews with star ratings and avatars.
- 📍 **Contact & Map** – Embedded Google Map, contact details, and WhatsApp CTA.
- 🔍 **Professional Metadata** – Open Graph, Twitter Cards, and JSON‑LD structured data for SEO and social sharing.
- 🎨 **Custom SVG Favicon** – Inline SVG favicon with a burger icon (path‑based), no external files.
- 🌙 **Clean, Minimal Design** – Dark background (`#0d0d0d`) with subtle neutral borders and orange accent gradients.

---

## Tech Stack

| Category          | Technology                                                                                     |
| ----------------- | ---------------------------------------------------------------------------------------------- |
| **Framework**     | [Next.js 16](https://nextjs.org/) (App Router)                                                  |
| **Language**      | [TypeScript 5](https://www.typescriptlang.org/)                                                 |
| **Styling**       | [Tailwind CSS 4](https://tailwindcss.com/)                                                      |
| **Animations**    | [Framer Motion 11](https://www.framer.com/motion/)                                               |
| **Fonts**         | [Poppins](https://fonts.google.com/specimen/Poppins)                                             |
| **Icons**         | Custom inline SVG + [Lucide Icons](https://lucide.dev/) (optional)                              |
| **Images**        | [Unsplash](https://unsplash.com/) (replaceable with own)                                        |

---

## Getting Started

### Prerequisites

- Node.js (v18.18 or higher)
- npm / yarn / pnpm / bun

### Installation

1. Clone the repository
   ```bash
   git clone https://github.com/zainshah3464/Foodie-Spot.git
   cd Foodie-Spot
   ```

2. Install dependencies
   ```bash
   npm install
   # or
   yarn install
   # or
   pnpm install
   ```

3. Run the development server
   ```bash
   npm run dev
   ```

4. Open [http://localhost:3000](http://localhost:3000) to view it in your browser.

---

## Environment Variables

| Variable | Description | Required | Default |
|----------|-------------|----------|---------|
| `NEXT_PUBLIC_SITE_URL` | Base URL for SEO and metadata | No | `http://localhost:3000` |
| *(None required for this demo)* | | | |

No mandatory environment variables are needed to run the project. If you wish to override the default site URL, create a `.env.local` file and set `NEXT_PUBLIC_SITE_URL`.

---

## Project Structure

```
src/
├── app/
│   ├── layout.tsx          # Root layout with metadata & fonts
│   ├── page.tsx            # Main page assembling all sections
│   └── globals.css         # Global styles & animations
├── components/
│   ├── Hero.tsx            # Hero section with parallax
│   ├── About.tsx           # About/Story section with stats
│   ├── Menu.tsx            # Menu with category filters
│   ├── Gallery.tsx         # Photo gallery with lightbox
│   ├── Reviews.tsx         # Testimonials
│   ├── Contact.tsx         # Contact details & map
│   └── Footer.tsx          # Footer with social links
├── public/                 # Static assets (if any)
├── package.json
└── README.md
```

---

## Key Components

### Hero Section
- Parallax effect on scroll.
- Animated headline and CTA buttons.
- Direct WhatsApp order button.

### Menu Section
- Category filter buttons (Burger, Pizza, Biryani, etc.).
- Framer Motion layout animations for smooth filtering.
- Each dish card with name, description, price, and "Order Now" button.

### Gallery Section
- Grid of food images with hover zoom.
- Lightbox modal for full‑size preview.

### Reviews Section
- Testimonial cards with avatar, name, rating stars, and feedback.
- Subtle entry animations.

### Contact Section
- Embedded Google Map.
- Contact details (address, phone, hours).
- WhatsApp CTA button.

### Footer
- Social media icons, quick links, and copyright.

---

## How It Works

### Ordering Flow
1. Customer browses menu.
2. Clicks "Order Now" on any dish.
3. WhatsApp opens with a pre‑filled message containing the item name and quantity request.
4. Customer sends message; restaurant receives order directly.

### Animation Pipeline
- **Framer Motion** handles all scroll‑triggered animations (`whileInView`) and layout transitions.
- No external smooth scroll library – native CSS `scroll-behavior: smooth` for anchor links.
- GSAP not used; Framer Motion is sufficient for this project.

---

## Customization

### Replace Content
- **Menu items**: Edit the `menuItems` array in `components/Menu.tsx`.
- **Testimonials**: Modify the `reviews` array in `components/Reviews.tsx`.
- **Contact details**: Update the `contactInfo` array and WhatsApp number in `components/Contact.tsx`.
- **Gallery images**: Change the `galleryImages` array in `components/Gallery.tsx`.
- **About stats**: Adjust the `stats` array in `components/About.tsx`.

### Change Colors
The theme uses a dark background (`#0d0d0d`) and orange accent (`#f97316`). You can change these in `globals.css` and by searching for the hex codes or Tailwind classes (`bg-[#0d0d0d]`, `from-orange-400 to-red-500`, etc.).

### Update Metadata & SEO
- Edit `app/layout.tsx`:
  - Replace `baseUrl` with your domain.
  - Update the Open Graph image URL to your own hosted image.
  - Adjust site title, description, and keywords.

### WhatsApp Number
Replace `923710371689` in all `href` attributes (Hero, Menu, Contact, etc.) with your own WhatsApp number (include country code, no plus sign).

---

## Performance Optimizations

- **Image Optimization** – Uses `next/image` with lazy loading and appropriate sizes.
- **Code Splitting** – Automatic by Next.js; no heavy libraries.
- **Font Optimization** – `next/font` with subsetting.
- **Reduced Motion** – Respects `prefers-reduced-motion` via CSS and Framer Motion `useReducedMotion`.
- **Minimal Dependencies** – Only essential packages.

---

## Mobile Responsiveness

- Fluid typography using `clamp()` and responsive Tailwind classes.
- Touch‑friendly buttons and interactive elements.
- Menu filters wrap horizontally on small screens.
- Gallery grid collapses to single column on mobile.
- WhatsApp buttons work seamlessly on mobile (opens app).

---

## Accessibility

- Semantic HTML (`<header>`, `<nav>`, `<main>`, `<section>`, `<footer>`).
- ARIA labels on icon buttons and interactive elements.
- Keyboard navigable (all buttons are real `<button>` elements).
- Sufficient color contrast (dark background with light text).
- `prefers-reduced-motion` support.

---

## Troubleshooting

### Images not loading?
- Ensure you have internet connection; images are from Unsplash.
- Replace with local images in `/public` if needed.

### WhatsApp link not opening?
- Check that the number is in international format without `+` (e.g., `923710371689`).
- Test on a device with WhatsApp installed.

### Build errors?
- Delete `node_modules` and `package-lock.json`, then `npm install`.
- Ensure you are using Node v18.18+.

---

## Roadmap

- [x] Hero section with parallax
- [x] Menu with category filters
- [x] Gallery lightbox
- [x] Testimonials
- [x] WhatsApp ordering
- [ ] Add online payment integration
- [ ] Multi‑language support
- [ ] CMS integration for menu items
- [ ] Unit and E2E testing

---

## Changelog

### v1.0.0 (Feb 2026)
- Initial release
- Fully responsive design
- WhatsApp ordering
- Framer Motion animations
- Professional metadata and SEO

---

## Testing

```bash
npm run lint
npm run type-check
# No unit tests yet — planned for v2.0
```

---

## Code Style

- **ESLint** — `next lint` (Next.js default config)
- **Prettier** — `.prettierrc` with `singleQuote: true`, `semi: false`
- **Commit Convention** — Conventional Commits (`feat:`, `fix:`, `docs:`)

---

## Deployment

### Deploy on Vercel

1. Push your repository to GitHub.
2. Import the project into [Vercel](https://vercel.com).
3. Set framework preset to **Next.js**.
4. Deploy – no additional configuration needed.

### Deploy on Netlify

1. Build command: `npm run build`
2. Publish directory: `.next`
3. Add environment variables if needed (none required for this demo).

---

## Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.

1. Fork the Project
2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the Branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request

---

## License

Distributed under the MIT License. See [LICENSE](LICENSE) for more information.

---

## Developer

**Zain Shah**  
*Full‑Stack Developer & Software Engineer*

A passionate developer focused on creating modern, high‑performance web experiences. This project showcases advanced front‑end techniques with animations and responsive design.

- **Portfolio:** [zain-main-web.vercel.app](https://zain-main-web.vercel.app/)
- **GitHub:** [@zainshah3464](https://github.com/zainshah3464)
- **Instagram:** [@zainshah3464](https://www.instagram.com/zainshah3464)
- **Email:** [[email protected]](mailto:[email protected])

---

## Support

Issues ke liye [GitHub Issues](https://github.com/zainshah3464/Foodie-Spot/issues) use karein.  
Direct contact: [Email](mailto:[email protected])

---

## FAQ

### Q: Can I use this project for my own restaurant?
**A:** Absolutely! Just replace the placeholder content with your own (menu items, images, contact details, WhatsApp number).

### Q: Where do the food images come from?
**A:** They are from Unsplash. For production, replace them with your own high‑quality photos.

### Q: Is there a backend?
**A:** No, this is a front‑end only demo. Orders go directly to WhatsApp, no database or server required.

### Q: Does it support online payments?
**A:** Not yet, but it's on the roadmap. Currently only WhatsApp ordering is supported.

---

## Acknowledgments

- [Next.js Documentation](https://nextjs.org/docs)
- [Framer Motion](https://www.framer.com/motion/)
- [Tailwind CSS](https://tailwindcss.com/)
- [Unsplash](https://unsplash.com/) for placeholder images
- [Google Fonts](https://fonts.google.com/) for typography
- [Lucide Icons](https://lucide.dev/) for some SVG icons