Swifteats_Premium_food_delievery_landing_page

KO | EN

gitlite — search

#hacktoberfest #react #ai #typescript #android #machine-learning #docker #nodejs #macos #java #cli #vue #awesome-list #security

Swifteats_Premium_food_delievery_landing_page

(★ 12)

Premium food delivery landing page with responsive design, live menu filtering, smooth animations, FAQ accordion, and interactive UI built using HTML5, CSS3, and Vanilla JavaScript.

Swifteats_Premium_food_delievery_landing_page Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 🍔 SwiftEats – Premium Food Delivery Landing Page

A modern, fully responsive, and interactive food delivery landing page built with **HTML5, CSS3, and Vanilla JavaScript**.

SwiftEats combines a premium UI, smooth animations, menu filtering, FAQ accordions, toast notifications, and responsive layouts to deliver a realistic food-ordering experience for restaurant startups, portfolio projects, and landing pages.

## 🌐 Live Demo

🚀 Live Website:

https://restaurant-food-delivery-website-la.vercel.app/

---

## 📸 Screenshots

### Hero Section
![Hero Section](https://raw.githubusercontent.com/Sara12-2/Swifteats_Premium_food_delievery_landing_page/main/home.png)

### Why Choose SwiftEats
![Why Choose SwiftEats](https://raw.githubusercontent.com/Sara12-2/Swifteats_Premium_food_delievery_landing_page/main/why%20choose.png)

### Menu Section
![Menu Section](https://raw.githubusercontent.com/Sara12-2/Swifteats_Premium_food_delievery_landing_page/main/menu.png)

### How It Works
![How It Works](https://raw.githubusercontent.com/Sara12-2/Swifteats_Premium_food_delievery_landing_page/main/how%20it%20works.png)

### Testimonials
![Testimonials](https://raw.githubusercontent.com/Sara12-2/Swifteats_Premium_food_delievery_landing_page/main/what%20foodies%20say.png)

### FAQ Section
![FAQ](https://raw.githubusercontent.com/Sara12-2/Swifteats_Premium_food_delievery_landing_page/main/FAQ.png)

### Contact Section
![Contact](https://raw.githubusercontent.com/Sara12-2/Swifteats_Premium_food_delievery_landing_page/main/contact.png)

### Ordering Process
![Ordering Process](https://raw.githubusercontent.com/Sara12-2/Swifteats_Premium_food_delievery_landing_page/main/ordering.png)

### Footer
![Footer](https://raw.githubusercontent.com/Sara12-2/Swifteats_Premium_food_delievery_landing_page/main/footer.png)

---

## ✨ Features

### 🎨 Modern UI Design
- Glassmorphism cards
- Gradient overlays
- Floating hero widgets
- Premium typography

### 📱 Fully Responsive
- Desktop
- Tablet
- Mobile
- Small mobile devices

### 🍽️ Interactive Menu
- Live category filtering
- Dynamic dish cards
- Hover effects

### ❓ FAQ Accordion
- Expand / Collapse interaction
- Smooth transitions

### 🛒 Cart Simulation
- Add-to-cart feedback
- Animated button state
- Toast notifications

### 🧭 Smart Navigation
- Sticky navbar
- Active section highlighting
- Smooth scrolling

### ⏳ Loading Experience
- Animated loader screen
- Smooth page reveal

### 🔝 Back To Top Button
- Appears on scroll
- Smooth scroll behavior

### ✨ Scroll Animations
- Intersection Observer API
- Fade-in effects

### 📞 Contact Section
- Email card
- Phone card
- Address card

### 📲 Mobile App CTA
- Google Play button
- App Store button

### 🌟 Hero Statistics
- Restaurant count
- Customer count
- Delivery speed

---

## 🛠️ Tech Stack

| Technology | Usage |
|------------|--------|
| HTML5 | Semantic Structure |
| CSS3 | Styling & Animations |
| JavaScript (ES6) | Interactivity |
| Lucide Icons | SVG Icons |
| Google Fonts | Typography |

---

## 📂 Project Structure

```bash
SwiftEats/
│
├── index.html
├── style.css
├── script.js
│
├── home.png
├── why choose.png
├── menu.png
├── how it works.png
├── what foodies say.png
├── FAQ.png
├── contact.png
├── ordering.png
├── footer.png
│
└── README.md
```

---

## 🚀 Getting Started

### Clone Repository

```bash
git clone https://github.com/Sara12-2/Swifteats_Premium_food_delievery_landing_page
```

### Navigate Into Project

```bash
cd swifteats
```

### Run Project

Simply open:

```bash
index.html
```

Or use VS Code Live Server.

---

## 🎨 Customization

### Change Theme Colors

```css
:root{
  --orange:#F97316;
  --orange-dark:#EA580C;
  --dark:#0F172A;
  --muted:#6B7280;
}
```

### Update Content

- Menu items → `.dish-card`
- FAQ items → `.faq-item`
- Contact cards → `.contact-card`
- Hero stats → `.stat`
- Testimonials → `.testi-card`

---

## 📱 Responsive Breakpoints

| Device | Width |
|----------|----------|
| Desktop | ≥ 1024px |
| Tablet | 768px – 1024px |
| Mobile | < 768px |
| Small Mobile | < 480px |

---

## ⚡ JavaScript Functionality

- Loader Animation
- Sticky Navbar
- Active Navigation Highlight
- FAQ Accordion
- Menu Filtering
- Toast Notifications
- Back-To-Top Button
- Intersection Observer Animations
- Smooth Scrolling

---

## 🌍 Browser Support

✅ Chrome

✅ Firefox

✅ Safari

✅ Microsoft Edge

✅ Android Browsers

✅ iOS Browsers

---

## 📄 License

This project is licensed under the MIT License.

Feel free to use, modify, and distribute.

---

## 🙌 Credits

- Lucide Icons
- Google Fonts
- Unsplash Food Photography

---

## ⭐ Support

If you like this project, consider giving it a ⭐ on GitHub.

Swifteats_Premium_food_delievery_landing_page

Swifteats_Premium_food_delievery_landing_page Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Swifteats_Premium_food_delievery_landing_page

Swifteats_Premium_food_delievery_landing_page Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README