A premium, animated landing page for BrewBoba — a handcrafted milk tea brand. Built with a modern React stack, designed for performance, and ready to deploy on Vercel.
| Section | Description |
|---|---|
| Hero | Full-screen cinematic intro with floating boba pearls, gradient background, and animated CTA buttons |
| Flavor Showcase | Interactive cards for 5 signature flavors — Chocolate, Matcha, Strawberry, Taro, and Caramel — each with hover animations and product imagery |
| Navbar | Sticky header with scroll-aware blur effect and mobile hamburger menu |
| Footer | Brand info, quick links, contact details, and social icons |
| Layer | Technology |
|---|---|
| Framework | React 18 |
| Build Tool | Vite 6 |
| Language | TypeScript 5 |
| Styling | Tailwind CSS v4 |
| Animations | Motion (Framer Motion) |
| UI Components | shadcn/ui + Radix UI |
| Icons | Lucide React |
| Deployment | Vercel |
brewboba/
├── public/
│ └── favicon.png
├── src/
│ ├── assets/
│ │ └── images/ # Product and decorative images
│ ├── components/
│ │ ├── layout/
│ │ │ ├── Navbar.tsx # Sticky nav with mobile menu
│ │ │ └── Footer.tsx # Brand footer with links and contact
│ │ ├── sections/
│ │ │ ├── HeroSection.tsx # Hero banner with animations
│ │ │ └── FlavorShowcase.tsx # 5-flavor card grid
│ │ └── ui/ # shadcn/ui component library
│ ├── lib/
│ │ └── ImageWithFallback.tsx
│ ├── types/
│ │ └── index.ts # Shared TypeScript types
│ ├── styles/
│ │ ├── index.css
│ │ ├── tailwind.css
│ │ └── theme.css # Design tokens and CSS variables
│ ├── App.tsx
│ └── main.tsx
├── tsconfig.json
├── vite.config.ts
└── vercel.json
- Node.js v18 or higher
- npm v9 or higher
# Clone the repository
git clone https://github.com/your-username/brewboba.git
cd brewboba
# Install dependencies
npm install
# Start the development server
npm run devThe app will be available at http://localhost:5173.
| Command | Description |
|---|---|
npm run dev |
Start local development server |
npm run build |
Build for production (outputs to dist/) |
npm run preview |
Preview the production build locally |
npm run type-check |
Run TypeScript type checking |
This project is pre-configured for Vercel deployment via vercel.json.
# Install Vercel CLI
npm i -g vercel
# Deploy
vercelVercel auto-detects the Vite framework. The vercel.json config applies:
- Immutable cache headers on all hashed assets (
/assets/*) — 1-year TTL - SPA rewrite rule so all routes resolve to
index.html
The build is optimized for fast load times:
- Code splitting — JS is split into named chunks:
react-vendor,motion,radix-ui, and app code so returning visitors hit cached chunks - Lazy loading — below-fold images use
loading="lazy"to defer network requests - ESNext target — no unnecessary transpilation overhead
- Tailwind CSS v4 — only ships CSS that is actually used
| Flavor | Description |
|---|---|
| Chocolate | Rich cocoa blended into creamy milk tea perfection |
| Matcha | Earthy premium matcha balanced with silky sweetness |
| Strawberry | Fresh fruity sweetness with a creamy smooth finish |
| Taro | Classic nutty taro flavor with a velvety texture |
| Caramel | Sweet golden caramel with deep creamy notes |
This project is private. All brand assets and product imagery are property of BrewBoba.