EatNow Restaurant

About the Project: EatNow is a restaurant website built with React and Vite. It showcases the restaurant's menu, story, services, and events. The site includes a table reservation form, animated hero slider, and a clean, responsive layout designed to work well on all screen sizes.

Key Highlights: Auto-rotating hero slider, interactive reservation form, animated preloader, sticky navigation with mobile menu, and smooth hover effects throughout.

Explore the project: Visit the Live Website or watch the Demo Video.

Project Details

What's Inside

• Preloader — Animated loading screen that hides when the page is ready.
• Header — Sticky top bar with contact info, navigation, and mobile menu.
• Hero — Full-screen image slider with auto-rotate and manual controls.
• Service — Category section showcasing morning meals, starters, and beverages.
• About — Restaurant story section with overlapping image layout.
• Special Dish — Featured menu item with pricing and call-to-action.
• Menu — Grid layout displaying six menu items with prices and badges.
• Testimonial — Single customer review displayed over a background image.
• Reservation — Table booking form with guest, date, and time selection.
• Features — Four benefit cards highlighting what makes EatNow stand out.
• Event — Latest news section with dated event cards and category labels.
• Footer — Site footer with navigation, social links, and newsletter form.

Key Features

• Hero Slider — Three slides with auto-rotation every 7 seconds and manual controls.
• Animated Preloader — Smooth loading animation that exits when the page finishes loading.
• Sticky Header — Navigation changes style on scroll and hides the top bar automatically.
• Mobile Navigation — Slide-in sidebar menu with overlay for smaller screens.
• Reservation Form — Booking form with guest count, date picker, and time selection.
• Back to Top Button — Fixed button that appears after scrolling down 200 pixels.
• Hover Effects — Shine animation, image scale, and underline transitions on interactive elements.
• Fully Responsive — Layout adapts across mobile, tablet, and desktop screen sizes.

Technologies Used

• React — Component-based UI library used to build the entire page structure.
• Vite — Fast build tool used to run and bundle the React application.
• CSS (Custom Properties) — Global variables and utility classes for consistent styling.
• Lucide React — Icon library used for navigation, forms, and interactive elements.
• Google Fonts — Lobster Two and Pacifico fonts used for headings and body text.

Project Structure

eat-now/
│
├── public/                      # Logos, hero banners, menus, event images, and more
│
├── src/
│   ├── components/
│   │   ├── Preloader.jsx        # Loading animation component
│   │   ├── Header.jsx           # Top bar and navigation
│   │   ├── Hero.jsx             # Auto-rotating slider
│   │   ├── Service.jsx          # Category showcase
│   │   ├── About.jsx            # Restaurant story section
│   │   ├── Special.jsx          # Featured dish highlight
│   │   ├── Menu.jsx             # Menu items grid
│   │   ├── Testimonial.jsx      # Customer review
│   │   ├── Reservation.jsx      # Booking form and contact
│   │   ├── Features.jsx         # Benefit cards
│   │   ├── Event.jsx            # Latest news section
│   │   └── Footer.jsx           # Site footer with newsletter
│   │
│   ├── App.jsx                  # Main component importing all sections
│   ├── main.jsx                 # React DOM render entry point
│   └── index.css                # Global styles and CSS variables
│
├── index.html                   # HTML template with meta tags and fonts
├── package.json                 # Dependencies and scripts
├── vite.config.js               # Vite configuration
└── README.md                    # Project documentation
    

Quick Start

1. Clone the repository:

   git clone https://github.com/nawazdevx/eat-now.git

  <li>
    <strong>Navigate to project folder:</strong>
    <pre><code>cd eat-now</code></pre>
  </li>

  <li>
    <strong>Install dependencies:</strong>
    <pre><code>npm install</code></pre>
  </li>

  <li>
    <strong>Start development server:</strong>
    <pre><code>npm run dev</code></pre>
    Then visit the local URL shown in terminal (usually <code>http://localhost:5173</code>)
  </li>

  <li>
    <strong>Build for production:</strong>
    <pre><code>npm run build</code></pre>
    Production files will be generated in <code>dist/</code> folder
  </li>
</ol>

License: This project is licensed under the MIT License.

Contact: Connect with me on LinkedIn or visit my Portfolio.

Support: Found this helpful? Give it a ⭐ on GitHub! Thank you.

Project Preview