A modern, interactive cocktail showcase website built with Next.js, featuring stunning animations and a premium cocktail experience. This project showcases various cocktails and mocktails with smooth scroll animations, video backgrounds, and responsive design.
- 🎬 Video Background: Immersive full-screen video background with scroll-triggered playback
- 🎨 GSAP Animations: Smooth scroll animations, text splitting effects, and parallax scrolling
- 📱 Responsive Design: Mobile-first design that works perfectly on all devices
- 🍸 Cocktail Showcase: Interactive sections featuring popular cocktails and mocktails
- 🌿 Visual Elements: Decorative leaf animations and modern UI components
- ⚡ Performance Optimized: Built with Next.js 15 and Turbopack for lightning-fast development
- Framework: Next.js 15 with App Router
- Language: TypeScript
- Styling: Tailwind CSS v4
- Animations: GSAP (GreenSock) with ScrollTrigger and SplitText
- Fonts: Custom fonts (Modern Negra, Mona Sans, DM Serif Text)
- Responsive: React Responsive for media queries
- Build Tool: Turbopack for faster development
-
Clone the repository
git clone <repository-url> cd mojitto_cocktails
-
Install dependencies
npm install
-
Run the development server
npm run dev
-
Open your browser Navigate to http://localhost:3000 to see the result.
src/
├── app/
│ ├── globals.css # Global styles and Tailwind configuration
│ ├── layout.tsx # Root layout with fonts and metadata
│ └── page.tsx # Main page component
├── components/
│ ├── About.tsx # About section component
│ ├── Art.tsx # Art showcase component
│ ├── Cocktails.tsx # Cocktail menu component
│ ├── Hero.tsx # Hero section with animations
│ └── Navbar.tsx # Navigation component
└── constants/
└── index.ts # Data constants (cocktails, navigation, etc.)
- Animated text splitting with gradient effects
- Parallax scrolling leaf decorations
- Video background with scroll-triggered playback
- Responsive design with mobile optimizations
- Interactive cocktail and mocktail listings
- Smooth parallax animations
- Price and origin information display
- Fixed navigation with blur background effect
- Smooth scroll to sections
- Responsive design
- Text Splitting: Characters and words animate in with staggered timing
- Scroll Triggers: Elements animate based on scroll position
- Parallax Effects: Background elements move at different speeds
- Video Scrubbing: Video playback synced with scroll position
- Smooth Transitions: All animations use GSAP's easing functions
The website is fully responsive with breakpoints for:
- Mobile devices (max-width: 767px)
- Tablet and desktop devices
- Optimized touch interactions
- Videos: Background video in
/public/videos/ - Images: Cocktail images, decorative elements, and UI assets
- Fonts: Custom font files in
/public/fonts/
npm run dev- Start development server with Turbopacknpm run build- Build for production with Turbopacknpm run start- Start production server
The easiest way to deploy is using the Vercel Platform:
- Push your code to GitHub
- Connect your repository to Vercel
- Deploy with zero configuration
This Next.js app can be deployed on any platform that supports Node.js:
- Netlify
- AWS Amplify
- Railway
- DigitalOcean App Platform
Edit src/constants/index.ts to add new cocktails to the menu:
const cocktailLists = [
{
name: "Your Cocktail Name",
country: "COUNTRY_CODE",
detail: "Description",
price: "$XX",
},
// ... more cocktails
];Animation configurations are in each component's useGSAP hook. Key areas:
- Hero animations:
src/components/Hero.tsx - Cocktail section:
src/components/Cocktails.tsx - Navigation effects:
src/components/Navbar.tsx
- Global styles:
src/app/globals.css - Tailwind configuration: Custom utilities and theme variables
- Component-specific styles: Inline Tailwind classes
Madhavendranath
Full-Stack Engineer | Building Production-Grade Web Applications
