GrillBurger - 🍔 Satisfy Your Hunger!

GrillBurger 🍔 is a React web app using MUI 🎨 for a sleek UI, Tailwind CSS 💨 for styling, AOS ✨ for animations, and React Slick 🎠 for smooth burger sliders! 🍟

➥ Bite Into Happiness 🥗

💻 Tech Stack ⛅️🏞️

               

Features 🍂

🖥️ Modern & Stylish UI (MUI + Emotion)

• MUI Components – 🎨 Beautiful, pre-styled UI elements.
• Custom Styling with Emotion – 🎭 Easily add unique styles.
• MUI Icons – 🔣 High-quality icons for navigation and design.

✨ Smooth Animations (AOS)

• Scroll Animations – 🔄 Elements fade, slide, or zoom on scroll.
• Engaging User Experience – ⚡ Adds a modern, interactive feel.

🎠 Interactive Sliders (React Slick + Slick Carousel)

• Burger Showcase Slider – 🍔 Highlight signature burgers with smooth transitions.
• Customer Reviews Carousel – 💬 Display testimonials in an elegant slider.
• Auto & Manual Navigation – 🔀 Users can swipe or click to explore.

🪂 Fast & Efficient React Features

• Optimized Performance – ⚡ Built with React 18 for fast rendering.
• Reusable Components – 🛠️ Maintainable and scalable structure.
• React Icons – 🎭 Lightweight, customizable icons for enhanced visuals.

Technologies Used 👩🏻‍💻🤖

• React 18 – ⚛ Fast and efficient UI rendering.
• MUI (Material-UI) – 🎭 Pre-styled, modern UI components.
• Emotion CSS – 🎨 Custom styling with flexibility.
• Tailwind CSS – 🌬 Lightweight and responsive styling.
• AOS (Animate on Scroll) – 🔄 Smooth scroll animations.
• MUI Icons – 🔣 High-quality material icons.
• React Icons – 🎭 Lightweight and customizable icons.
• React Slick & Slick Carousel – 🎡 Smooth sliders for burger showcase & testimonials.

Installation Guide 🚀

Clone 🏗️ the repository 🔍

For Windows 🖥️

git clone https://github.com/Prakhar-002/GrillBurger
cd GrillBurger

For Linux and macOS 🍏

git clone https://github.com/Prakhar-002/GrillBurger
cd GrillBurger

Install 📥 dependencies 📦

npm install

Start ▶️ the application 📤

npm run dev

🌍 Access the app in your browser at ➡️

🔗 http://localhost:5173

🎉 Happy Coding! 🧑‍💻🔥

    GrillBurger
        |                       
        │── 🗂️src/                       🔹 React source code
        |   |                    
        │   ├── 🗂️ assets/               🔹 Images, icons, and other assets
        |   |                    
        │   ├── 🗂️ components/           🔹 Reusable UI components
        |   |   |                 
        │   │   ├── 📑 AppStore/             🔸 App Store section
        |   |   |   |             
        │   │   │   └── ⚛️ AppStore.jsx  
        |   |   |                
        │   │   ├── 📑 Banner/               🔸 Hero banner section
        |   |   |   |             
        │   │   │   └── ⚛️ Banner.jsx  
        |   |   |                
        │   │   ├── 📑 Footer/               🔸 Footer section
        |   |   |   |             
        │   │   │   └── ⚛️ Footer.jsx  
        |   |   |                
        │   │   ├── 📑 HeaderTitle/          🔸 Page heading section
        |   |   |   |             
        │   │   │   └── ⚛️ HeaderTitle.jsx  
        |   |   |                
        │   │   ├── 📑 Hero/                 🔸 Hero section
        |   |   |   |             
        │   │   │   └── ⚛️ Hero.jsx  
        |   |   |                
        │   │   ├── 📑 Navbar/               🔸 Navigation bar
        |   |   |   |             
        │   │   │   └── ⚛️ Navbar.jsx  
        |   |   |                
        │   │   ├── 📑 Services/             🔸 Services section
        |   |   |   |             
        │   │   │   └── ⚛️ Services.jsx  
        |   |   |                
        │   │   └── 📑 Testimonial/          🔸 Customer testimonials
        |   |       |             
        │   │       └── ⚛️ Testimonial.jsx  
        │   │  
        │   └── ⚛️ App.jsx            🔹 Main App component  
        │  
        │── .gitignore                🔹 Git ignore file  
        │── package.json              🔹 Project dependencies  
        │── tailwind.config.js        🔹 Tailwind customization  
        │── postcss.config.js         🔹 PostCSS configuration  
        └──README.md                  🔹 Project documentation