ChaiVerse

Cinematic single-page experience celebrating the art of chai. Built with React, Vite, Tailwind CSS, GSAP animations, and custom SVG illustrations, ChaiVerse combines storytelling sections (Hero, About, Flavors, Shops, Brewing Journey, Gallery, Footer) with buttery scroll-triggered motion graphics and offline-friendly assets.

✨ Features

• Immersive intro – GSAP-driven splash overlay that fades into the main story flow.
• Scroll choreography – Section reveals, parallax touches, and subtle particle effects tuned for smooth performance.
• Offline-ready visuals – Custom SVG and local JPEG assets replace external image dependencies.
• Responsive storytelling – Tailwind layout scales gracefully from mobile to large displays.
• Production-ready build – Vite tooling, code splitting, and Netlify configuration included.

🛠 Tech Stack

• React 18 + Vite 5 for fast development and optimized builds.
• Tailwind CSS 3 for utility-first styling.
• GSAP 3 + ScrollTrigger for motion design.
• Three.js ecosystem (@react-three/fiber, @react-three/drei) prepared for 3D enhancements.

📦 Project Structure

src/
├── components/        # Hero, About, Flavors, Shops, Brewing, Gallery, Footer, AnimatedIcons, IntroOverlay
├── assets/            # Local SVG & JPEG artwork for offline use
├── index.css          # Global styles & Tailwind layers
├── main.jsx           # React root / Vite entry
└── utils/             # ScrollTrigger registration helper

🚀 Getting Started

Prerequisites

• Node.js 18 or later (includes npm)

Clone the repository

git clone https://github.com/<your-username>/chaiverse.git
cd chaiverse

Install dependencies

npm install

Development server

npm run dev

Vite serves the app at http://localhost:5173 with hot module replacement.

Production build

npm run build

Compiled assets are output to the dist/ directory. Preview locally with:

npm run preview

☁️ Deployment

The project is configured for Netlify, but any static host works.

Netlify (recommended)

1. Create a site in Netlify and link your repo.
2. Use these build settings:
   • Build command: npm run build
   • Publish directory: dist
3. Deploy via
   • Netlify web UI, or
   • CLI: netlify deploy --prod --dir=dist

GitHub Pages / Other hosts

• Ensure npm run build runs in CI and upload the dist/ directory to your hosting provider.

📝 License

This project is currently unlicensed. Add your preferred license file (e.g., MIT, Apache) before open sourcing.

---

Crafted with love & leaves 🍃 – visit the live experience at https://chaiverse.netlify.app.