A modern, animated single-page cocktail bar/restaurant website built with React and Vite. Features smooth scroll-based animations powered by GSAP and a fully responsive layout styled with Tailwind CSS.
The site includes the following sections:
- Navbar — Transparent nav that transitions to a frosted-glass style on scroll
- Hero — Full-screen intro with animated text (character-by-character reveal)
- Cocktails — Showcase of featured cocktails
- About — Brand story / about section
- Art — Visual/artistic feature section
- Menu — Full menu display
- Contact — Contact information / form
https://react-websit.vercel.app/
| Technology | Purpose |
|---|---|
| React 19 | UI framework |
| Vite 7 | Build tool & dev server |
| GSAP 3 | Scroll-based & text animations |
| Tailwind CSS 4 | Utility-first styling |
| react-responsive | Responsive breakpoint hooks |
- Node.js v18 or higher
- npm v9 or higher
# Clone the repository
git clone <your-repo-url>
cd my-app
# Install dependencies
npm installnpm run devOpen http://localhost:5173 in your browser.
npm run buildThe output will be in the dist/ folder.
npm run previewnpm run lintmy-app/
├── public/
│ ├── fonts/ # Custom fonts
│ ├── images/ # Static images
│ └── videos/ # Background/hero videos
├── src/
│ ├── components/
│ │ ├── Navbar.jsx
│ │ ├── Hero.jsx
│ │ ├── Cocktails.jsx
│ │ ├── About.jsx
│ │ ├── Art.jsx
│ │ ├── Menu.jsx
│ │ └── Contact.jsx
│ ├── App.jsx
│ ├── App.css
│ ├── main.jsx
│ └── index.css
├── constants/
│ └── index.js # Shared constants (nav links, etc.)
├── index.html
├── vite.config.js
└── package.json
GSAP plugins used:
- ScrollTrigger — Triggers animations as the user scrolls
- SplitText — Splits headings into individual characters/lines for staggered reveals
Both plugins are registered globally in App.jsx and Hero.jsx.