🍹 Mojito Cocktail Website

---

✨ Overview

Mojito is a modern, interactive cocktail showcase website built with React and Vite. The site features stunning animations, responsive design, and an elegant user interface to present cocktail recipes and information in a visually appealing way.

🚀 Features

• Animated Hero Section - Eye-catching introduction with GSAP animations and video background
• Cocktail Showcase - Beautiful presentation of various cocktail recipes
• Interactive Menu - Elegant display of available drinks
• Responsive Design - Optimized for all devices from mobile to desktop
• Smooth Scrolling - Enhanced user experience with scroll-triggered animations
• Contact Section - Easy way for visitors to get in touch

🛠️ Technologies Used

• React 19 - Modern UI library for building component-based interfaces
• Vite - Next-generation frontend tooling for fast development
• GSAP - Professional-grade animation library for creating smooth animations
• Tailwind CSS - Utility-first CSS framework for rapid UI development
• React Responsive - Media queries in React for responsive design

📋 Prerequisites

• Node.js (v18 or higher recommended)
• npm or yarn

🔧 Installation

1. Clone the repository:

   git clone https://github.com/vishwafernando/cocktailweb.git
   cd cocktailweb

2. Install dependencies:

   npm install
   # or
   yarn

3. Start the development server:

   npm run dev
   # or
   yarn dev

4. Open your browser and navigate to:

   http://localhost:5173
   

🏗️ Building for Production

  npm run build
  # or
  yarn build

The built files will be in the dist directory.

🧪 Preview Production Build

  npm run preview
  # or
  yarn preview

📁 Project Structure

   cocktailweb/
   ├── public/
   │   ├── images/       # Static images
   │   └── videos/       # Video assets
   ├── src/
   │   ├── components/   # React components
   │   │   ├── Navbar.jsx
   │   │   ├── Hero.jsx
   │   │   ├── Cocktails.jsx
   │   │   ├── About.jsx
   │   │   ├── Art.jsx
   │   │   ├── Menu.jsx
   │   │   └── Contact.jsx
   │   ├── App.jsx       # Main application component
   │   ├── main.jsx      # Application entry point
   │   └── index.css     # Global styles
   ├── index.html        # HTML template
   └── package.json      # Project dependencies and scripts

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

📬 Contact

For any questions or suggestions, please reach out through the contact form on the website or open an issue on GitHub.

---