Taste Passport 🌍🥘

Your Taste Has a Passport is a highly engaging, immersive frontend experience built with React. It helps users discover international cuisines based on the Indian dishes they already love.

Built for the Weboreel challenge, it features smooth cinematic transitions, a vertical "reel-style" recommendation engine, and interactive animations.

✨ Features

• 🎭 Immersive Food Journey: Not a traditional website—feels like an interactive reel.
• 🧬 Taste DNA Analysis: Maps your favorite Indian dishes (Idly, Biryani, Chaat) to taste traits.
• 🛫 Global Matches: Recommends global cuisines (Bao, Paella, Ceviche) based on your palate.
• 🎠 Smooth Kinetic Scrolling: Integrated with Lenis for a premium feel.
• 🎬 Framer Motion Animations: Every transition is fluid and high-end.
• 🎵 Audio Experience: Responsive sound effects and ambient music toggle.
• 📱 Mobile-First: Fully responsive design designed for scroll-stopping interaction.

🛠️ Tech Stack

• Framework: React 18 (via Vite)
• Styling: Tailwind CSS
• Animations: Framer Motion
• Scrolling: Lenis
• Audio: use-sound
• Icons: Lucide React

🚀 Getting Started

1. Clone and Install

   npm install

2. Run Development Server

   npm run dev

3. Build for Production

   npm run build

🌍 Design System

The application uses a warm, food-inspired palette:

• Spice Orange: Primary interaction color.
• Warm Cream: Background and base tones.
• Deep Charcoal: Typography and high-contrast elements.
• Glassmorphism: Used for navigation and UI overlays.

📦 Project Structure

/src
  /components  - Reusable UI elements (Navbar, Cards)
  /data        - Mapping logic and dish definitions
  /hooks       - Custom state and store hooks
  /pages       - Main journey sections (Hero, Selection, Reel, DNA)
  /index.css    - Global styles and Tailwind configuration

🚢 Deployment

This project is optimized for deployment on Vercel or Netlify. Simply connect your GitHub repository and it will deploy with zero configuration.

---

Made with ❤️ for food explorers everywhere.