🍸 Velvet Pour - Premium Cocktail Website

React + TypeScript + Tailwind CSS v4 + GSAP Animations

A stunning, interactive cocktail website that creates an emotional connection to the authentic bar experience, showcasing premium mixology with smooth animations and responsive design

✨ Features • 🛠️ Tech Stack • 📚 Libraries • 🎯 Learning • 🚀 Setup

---

✨ Features

Premium cocktail experience with cutting-edge web technologies

• 🎭 Immersive Hero Section - Full-screen background with parallax effects
• 🎨 Advanced GSAP Animations - Smooth text reveals, scroll-triggered animations
• 📱 Fully Responsive Design - Optimized for all devices using Tailwind CSS v4
• 🍹 Interactive Cocktail Menu - Dynamic slider with recipe details
• 🎬 Video Integration - Scroll-controlled video playback and loading screens
• ♿ Accessibility First - ARIA labels, keyboard navigation, screen reader support
• ⚡ Performance Optimized - Lazy loading, efficient animations, modern React patterns

🛠️ Tech Stack

Frontend	Styling	Animation	Build Tool	Language
React 19	Tailwind CSS v4	GSAP	Vite	TypeScript

📚 Key Libraries

Powerful libraries that bring this cocktail experience to life

🎬 @gsap/react

Official React integration for GSAP animations

import { useGSAP } from "@gsap/react";
import gsap from "gsap";

const Hero = () => {
  useGSAP(() => {
    gsap.from(".title", {
      yPercent: 100,
      duration: 1.8,
      ease: "expo.out",
      stagger: 0.06,
    });
  });
};

Perfect for creating smooth, performant animations in React components with automatic cleanup.

⚡ gsap (GreenSock Animation Platform)

Industry-standard JavaScript animation library

import { gsap, ScrollTrigger, SplitText } from "gsap/all";

gsap.registerPlugin(ScrollTrigger, SplitText);

// Scroll-triggered parallax effects
gsap
  .timeline({
    scrollTrigger: {
      trigger: "#hero",
      start: "top top",
      end: "bottom top",
      scrub: true,
    },
  })
  .to(".right-leaf", { y: 200 }, 0)
  .to(".left-leaf", { y: -200 }, 0);

Enables complex animations like text splitting, scroll triggers, and timeline control.

📱 react-responsive

Responsive breakpoint management for React

import { useMediaQuery } from "react-responsive";

const Hero = () => {
  const isMobile = useMediaQuery({ query: "(max-width: 767px)" });

  const startValue = isMobile ? "top 50%" : "center 60%";
  // Conditional animation values based on screen size
};

Provides clean, declarative media queries for responsive animations and layouts.

🎯 Learning Objectives

This project is designed for educational purposes to demonstrate modern React development practices

🧠 React Concepts Covered

• ⚛️ Modern Hooks - useRef, useGSAP, custom hooks patterns
• 🎨 Component Architecture - Modular design, reusable components
• 📱 Responsive Design - Mobile-first approach with Tailwind CSS v4
• 🎬 Media Handling - Video controls, loading states, intersection observers
• ⚡ Performance - Animation optimization, lazy loading, efficient re-renders
• ♿ Accessibility - WCAG compliance, semantic HTML, ARIA attributes
• 🎭 Advanced Animations - GSAP integration, scroll-triggered effects, text animations
• 📐 Layout Techniques - CSS Grid, Flexbox, absolute positioning

🔧 Development Skills

• TypeScript Integration - Proper typing for animations and media elements
• Modern CSS - Tailwind CSS v4 features, custom utilities, layer management
• Animation Principles - Timing, easing, stagger effects, performance considerations
• Responsive Development - Breakpoint management, mobile optimization
• Asset Optimization - Video loading, image handling, performance monitoring

🚀 Getting Started

Prerequisites

Node.js 18+ and npm/yarn/pnpm

Installation

# Clone the repository
git clone https://github.com/Chamith-Dilshan/cocktail_website.git

# Navigate to project directory
cd cocktail_website

# Install dependencies
npm install

# Start development server
npm run dev

🎯 Project Structure

src/
├── components/
│   ├── Hero.tsx          # Main hero section with video
│   ├── NavBar.tsx        # Navigation with scroll effects
│   ├── Menu.tsx          # Interactive cocktail slider
│   ├── LoadingScreen.tsx # Video preloader
│   └── ...
├── constants/
│   └── index.ts          # Navigation links, cocktail data
├── assets/
│   ├── images/           # Static images
│   └── videos/           # Background videos
└── index.css             # Tailwind CSS v4 configuration

🎨 Animation Highlights

• Text Reveal Animations - Character-by-character text animations using SplitText
• Scroll-Controlled Video - Video playback synced with scroll progress
• Parallax Effects - Multi-layer scrolling with different speeds
• Interactive Sliders - Smooth transitions between cocktail selections
• Loading Animations - Engaging preloader with progress tracking

🌟 Educational Purpose

This repository is created for educational purposes to demonstrate:

• Modern React development patterns and best practices
• Advanced animation techniques with GSAP in React applications
• Responsive design implementation using Tailwind CSS v4
• TypeScript integration in complex React projects
• Performance optimization strategies for animation-heavy websites
• Accessibility considerations in modern web development

🤝 Contributing & Learning

Perfect for developers looking to learn modern React + GSAP integration! 🎓

🐛 Report Issues • 💡 Suggest Improvements • 🍴 Fork & Learn

⭐ Star this repository if it helps your learning journey!

Built with ❤️ for the React community and aspiring developers