🍃 Happy Pan Shop Bilagi — Official Website & Digital Flagship

ಹ್ಯಾಪಿ ಪಾನ್ ಶೋಪ ಬೀಳಗಿ • World-Class Paan Experience & Digital Storefront

---

🌟 1. Project Overview & Brand Identity

Happy Pan Shop (founded & curated by Jonny / Bilagi Bro) is Bilagi's most celebrated paan destination. Known across Karnataka for 100% Tobacco-Free, handcrafted dessert paans, royal dry fruit creations, and authentic traditional varieties, this web application brings the physical shop’s warm hospitality and vibrant energy to the digital world.

Designed with an ultra-premium aesthetic inspired by modern luxury craft brands, the website delivers a seamless, interactive, and visually stunning digital experience across all screen sizes (Desktops, Laptops, Tablets, and Smartphones).

• Location: Bus Stop Road, Bilgi Rural, Karnataka 587116
• Tagline: "Crafting happiness, one paan at a time."
• Local Tagline: ಆಮ್ ಸಕ್ಕರಿ ನಮ್ ಬೀಳಗಿ ಮಂದಿ (Aam Sakkari Nam Bilagi Mandi)
• Direct Order Line: WhatsApp +91 97405 20627
• Instagram Channel: Bilagi Bro Community

---

🎨 2. UI/UX Design System & Aesthetics

The design architecture adheres to luxury modern web design principles:

A. Color Palette

• Obsidian Charcoal (#1A1A1A / #0A0A0A): Deep, distraction-free foundation.
• Saffron & Antique Gold (#E5B834 / #F5A623 / #D4AF37): Royal accents and active states.
• Warm Betel Green (#345229 / #225522): Natural herbal identity.
• Rich Cocoa Brown (#4A2E1B / #583328): Decadent chocolate paan themes.
• Cream Ivory (#F8F7E5): Soft, high-contrast readable typography.

B. Dynamic Theme Morphing

When users navigate between the Top Signature Paans (Meetha Paan, Chocolate Paan, Dark Chocolate Paan, White Chocolate Paan, Dry Fruit Paan), the entire background color and primary gold accents transition in real time with circular expanding wipe effects.

C. Typography

• Display & Headlines: Lilita One, Bebas Neue, Outfit (Bold, energetic, street-smart).
• Kannada Local Subtitles: Baloo Tamma 2 (Authentic, curved, friendly regional script).
• Body & Specs: Inter (Clean, hyper-legible geometric sans-serif).

D. Micro-Interactions & Overlays

• Cinematic Film Grain Overlay: High-frequency SVG turbulence texture with blend-mode overlay.
• Magnetic Custom Cursor: Glowing dual-ring cursor with hover states (disabled on touch devices).
• Smooth Inertia Scrolling: Integrated with Lenis for buttery 60fps momentum scrolling.

---

🛠️ 3. Technology Stack & Architecture

Layer	Technology	Purpose
Core Framework	React 18+ & TypeScript	Strictly typed components, state machines, and hooks
Build Tooling	Vite 8+	Lightning-fast HMR and optimized production bundling
Routing	React Router v6	Single-Page Application client routing
Styling	Vanilla CSS3 Design Tokens	Maximum performance, zero framework runtime overhead
Smooth Scrolling	Lenis Scroll	Momentum-based physics scrolling across sections
Gesture & 3D Math	Native Pointer Events & CSS 3D Matrix	Hardware-accelerated 3D carousel and card flips
Media & Video	HTML5 Video + Web Fullscreen API	Low-latency reel playback with mobile fullscreen

---

🧩 4. Step-by-Step Feature Walkthrough (Pin-to-Pin)

1. Cinematic Opening / Splash Screen (SplashScreen.tsx)

• Duration: 3.8 seconds total (starts fade-out at 3.2s).
• Lifecycle:
  1. Instant pitch-black screen ensures zero flash of unstyled content.
  2. The branded circular gold badge zooms in from center with radial ambient glow and blur-to-sharp reveal.
  3. Concentric animated gold rings expand outward.
  4. Kannada and English tagline slides up smoothly.
  5. Smooth fade & scale reveal transitioning into the main application.

2. Interactive 3D Hero Section (Hero.tsx)

• 3D Card Flip Showcase: Clicking the card or the NEXT PAAN 🍃 button smoothly flips the 3D card 90 degrees with a color-matched circular expansion wipe.
• Mouse Parallax 3D Tilt: Real-time pointer tracking tilts the card dynamically in 3D space (rotateX / rotateY).
• Floating Spice Particles: Orbiting golden spice embers float with subtle sine-wave animations.
• Product Specifications Deck:
  • Active Paan Counter (1 / 5, 2 / 5, etc.)
  • Real-time pricing, flavor title, and taste profile
  • Main Fresh Ingredients pill tags with emojis
  • Instant One-Click WhatsApp Ordering button pre-configured with the active paan's name

3. Bilagi Bro (Owner Jonny) Spotlight (Owner.tsx)

• Circular Profile Frame: Beautifully framed circular portrait with 24-karat gold glowing outline and hover elevation.
• Regional Kannada Catchphrase: Prominently displays the iconic "Aam Sakkari Nam Bilagi Mandi" quote.
• Story Narrative: Details Jonny's dedication to freshness, hospitality, and 100% tobacco-free recipes.

4. Brand Heritage & Story (Story.tsx)

• Highlighting zero tobacco, hygienic food-grade preparation, and authentic ingredients (Damascus Rose Gulkand, Medjool Dates, Sliced Almonds, and Iranian Pistachios).

5. Full 22-Paan Catalog & Filter (Products.tsx / Specials.tsx)

• Interactive category tabs:
  • All Paans (22)
  • Sweet & Classic (5)
  • Chocolate & Fusion (9)
  • Fruit & Refreshing (5)
  • Royal & Dry Fruit (3)
• Each product card contains HD imagery, taste notes, ingredients list, price range, and direct WhatsApp order trigger.

6. Concave 3D Coverflow Gallery (Gallery.tsx)

• Pure-Image 3D Arc: Cards are mapped along a concave cylindrical 3D arc using translateX, translateZ, and rotateY.
• Gesture Physics: Full Pointer Capture swipe/drag support with velocity thresholds.
• Smart Autoplay: Automatically rotates every 3 seconds; pauses on touch/hover and resumes after 3 seconds of inactivity.
• Responsive Spread: Dynamically adjusts card spread (155px desktop → 120px tablet → 90px mobile) to prevent overflow.

7. Bilagi Location & Google Maps (Location.tsx)

• Exact location details for Bus Stop Road, Bilgi Rural.
• Google Maps deep-link and contact cards.

8. Official Instagram Community CTA (Newsletter.tsx)

• Replaced basic email inputs with a vibrant, gradient-bordered button linking directly to the official Bilagi Bro Instagram Community.

9. Draggable Floating Reel Video (FloatingVideo.tsx)

• Floating Auto-Reel: Plays authentic in-shop preparation clips (reel01.mp4).
• Drag-and-Drop: Smooth pointer capture allows repositioning anywhere within safe viewport bounds.
• 5-Second Auto-Shrink: After 5 seconds, collapses to half-size with compact drag handles.
• Mobile Fullscreen: Tapping on mobile devices triggers native device fullscreen video playback.

10. Interactive Mini-Game: "Click the Pan" (ClickThePan.tsx)

• Fun interactive game where tapping the paan triggers particle bursts, score milestones, and celebration messages.
• High scores can be shared directly to WhatsApp with one click!

---

📱 5. Responsive Engineering & Breakpoint Specifications

Every component is meticulously optimized across 4 primary responsive viewports:

Device Category	Breakpoint	Layout Behavior
Large Desktop / Monitor	≥ 1200px	3-column Hero stage, full 3D parallax tilt, full-width concave gallery
Laptop / iPad Pro	900px – 1199px	2-column layout, compact side switcher, scaled 3D carousel
Tablet / Large Phone	481px – 899px	Clean linear vertical flow: Paan card sits prominently at top; product specs, ingredients, and CTAs stack cleanly below
Mobile Phone	≤ 480px	Compact headers, icon-only side switcher, auto-fitting cards, native video fullscreen

---

📂 6. Directory Structure

happy-panshop/
├── public/
│   ├── favicon.svg               # Vector brand favicon
│   ├── icons.svg                 # SVG sprite sheet
│   ├── images/
│   │   ├── betel-leaf-logo.png   # Brand logo
│   │   ├── happy-pan/
│   │   │   ├── splash-logo.jpg   # Opening splash badge
│   │   │   ├── hero/             # Background overlays
│   │   │   ├── staff/            # Owner photo (bilagi-bro.jpg)
│   │   │   └── gallery/          # 8 High-res shop & launch photos
│   │   └── products/             # High-definition images for all 22 paan varieties
│   └── video/
│       └── reel01.mp4            # High-definition floating video reel
├── src/
│   ├── components/
│   │   ├── CustomCursor/         # Magnetic dual-ring glowing cursor
│   │   ├── FloatingVideo/        # Draggable video player with mobile fullscreen
│   │   ├── Footer/               # Centered footer with legal and location links
│   │   ├── Gallery/              # 3D curved coverflow gallery with touch gestures
│   │   ├── GrainOverlay/         # Ambient film grain canvas
│   │   ├── Header/               # Responsive header with Kannada subtitles & menu
│   │   ├── Hero/                 # 3D interactive hero with color wipe transitions
│   │   ├── Location/             # Shop map and address details
│   │   ├── Newsletter/           # Bilagi Bro Instagram Community CTA
│   │   ├── Owner/                # Jonny / Bilagi Bro profile and circular badge
│   │   ├── Reviews/              # Customer testimonials and ratings
│   │   ├── Specials/             # Signature featured paans
│   │   ├── SplashScreen/         # 3.8s intro animation with concentric gold rings
│   │   ├── Story/                # Heritage and 100% tobacco-free guarantee
│   │   └── WhatsApp/             # Floating WhatsApp order button
│   ├── data/
│   │   └── products.ts           # Complete database of 22 paans with ingredients & themes
│   ├── hooks/
│   │   └── useLenis.ts           # Inertia scrolling lifecycle hook
│   ├── pages/
│   │   ├── Home.tsx              # Main scrollytelling flagship page
│   │   ├── Products.tsx          # 22-Paan catalog with filters
│   │   ├── ProductDetail.tsx     # Single paan deep dive
│   │   ├── About.tsx             # Story and craftsmanship
│   │   ├── Contact.tsx           # Contact & directions
│   │   ├── ClickThePan.tsx       # Interactive mini-game
│   │   └── Legal.tsx             # Privacy, Terms, and Cookies
│   ├── App.tsx                   # Top-level routing, splash orchestration & layout
│   ├── main.tsx                  # Vite React root mounting
│   └── index.css                 # Global CSS design tokens, typography & media queries
├── package.json
├── tsconfig.json
└── vite.config.ts

---

🍃 7. Complete 22-Paan Menu Reference

1. Meetha Paan — Classic sweet paan with organic Damascus rose gulkand, sweet saunf & dates.
2. Chocolate Paan — Silky milk chocolate glaze with roasted nuts.
3. Dark Chocolate Paan — Deep cocoa intensity, bitter-sweet gourmet crunch.
4. White Chocolate Paan — Creamy white cocoa drizzle with desiccated coconut.
5. Dry Fruit Paan — Kashmiri almonds, cashews, Iranian pistachios & dates.
6. Kulfi Paan — Cardamom, mawa crumble & roasted pistachios.
7. Ice Paan — Arctic cooling menthol sensation with chilled rose petals.
8. Strawberry Paan — Juicy strawberry essence with sweet rose preserves.
9. Pineapple Paan — Tangy tropical pineapple punch with crisp betel leaf.
10. Rose Paan — Fragrant Damascus rose nectar and candied petals.
11. Mango Paan — Alphonso mango aroma paired with toasted coconut.
12. Jamun Paan — Distinctive Indian blackberry tangy-sweet profile.
13. Coconut Paan — Freshly shredded coconut in a soothing herbal fold.
14. Silver Paan — Crowned with 100% vegetarian edible silver foil (chandi ka varq).
15. Mawa Paan — Slow-roasted khoya mawa crumble with cardamom.
16. Mista Paan — Emerald green Iranian pistachio flakes with creamy gulkand.
17. Almond Paan — Sliced roasted almonds generously packed.
18. Nutella Paan — Rich imported hazelnut Nutella spread swirl.
19. Chocolate Crunch Paan — Crispy wafer bits with rich chocolate syrup.
20. Irish Coffee Chocolate Paan — Roasted espresso note with dark chocolate.
21. Mint Chocolate Paan — Chilled spearmint freshness with chocolate drizzles.
22. Black Forest Paan — Glacé cherries, dark chocolate curls & sweet cream.

---

🚀 8. Getting Started & Deployment

Prerequisites

• Node.js v18.0.0 or higher
• npm v9.0.0 or higher

Installation

# 1. Clone or navigate to the project directory
cd "happy panshop"

# 2. Install all dependencies
npm install

# 3. Start local development server with Hot Module Replacement
npm run dev

The app will be available at http://localhost:5173.

Production Build

# Compile TypeScript and generate optimized production bundle
npm run build

# Preview production build locally
npm run preview

Output directory: dist/ (ready for static hosting on Vercel, Netlify, Cloudflare Pages, or AWS S3).

---

🏆 9. Quality Assurance & Standards

• TypeScript: 100% type-safe compilation (0 errors).
• STLC & Responsiveness: Verified across Chrome DevTools for iPhone SE, iPhone 14 Pro, Samsung Galaxy, iPad Air, and 4K Desktop monitors.
• Accessibility & SEO: Semantic HTML5 tags, descriptive meta tags, ARIA labels on all interactive controls.
• Zero Tobacco Guarantee: Every product and marketing message promotes healthy, family-friendly, 100% tobacco-free refreshment.

---

Handcrafted with ❤️ for Happy Pan Shop, Bilagi by the team.

---

🛠️ Tech stack React TypeScript Vite React Router Tailwind CSS Framer Motion Three.js / React Three Fiber Lenis Lucide React Firebase Hosting ✨ Key features 🎨 Modern premium UI/UX 📱 Fully responsive design 🥬 Interactive product catalog 🥙 Product detail pages 🎥 Immersive video experience 🧊 Interactive 3D elements ✨ Smooth scrolling and animations 🖼️ Product & shop gallery 📍 Location and Google Maps integration 💬 Direct WhatsApp ordering 🎮 Interactive "Click the Pan" experience ⚡ Vite-powered production build 🔒 Firebase Hosting with HTTPS 🌐 Live Website

Happy Panshop — Live Website

⭐ A more impressive README opening

If you're asking for the README.md description, I'd use this:

🌿 Happy Panshop

A modern, immersive digital experience for Happy Panshop — blending premium design, smooth animations, interactive 3D elements, and a simple customer ordering experience.

🌐 Live Website

Visit Happy Panshop

✨ About

Happy Panshop is a modern web experience created to bring a traditional local pan shop into the digital world.

The website focuses on creating a memorable visual experience while keeping the customer journey simple — from discovering products to exploring the shop, finding its location, and placing an order directly through WhatsApp.

🚀 Features

• 🎨 Premium modern UI/UX
• 📱 Responsive design for mobile, tablet, and desktop
• 🥬 Interactive product catalog
• 🔎 Detailed product pages
• 🎥 Immersive video sections
• 🧊 Interactive 3D experiences
• ✨ Smooth scrolling and animations
• 🖼️ Product and shop gallery
• 📍 Location and map integration
• 💬 Direct WhatsApp ordering
• 🎮 Interactive mini-game experience
• ⚡ Fast Vite production build
• 🔒 Firebase Hosting with HTTPS

🛠️ Tech Stack

• React
• TypeScript
• Vite
• React Router
• Tailwind CSS
• Framer Motion
• Three.js / React Three Fiber
• Lenis
• Lucide React
• Firebase Hosting

📂 Project Structure

src/
├── components/
├── pages/
├── hooks/
├── three/
├── App.tsx
└── main.tsx


public/
├── images/
├── video/
└── ...
💬 Ordering

Customers can explore the available products and contact the shop directly
through WhatsApp for ordering and enquiries.

📍 Location

The website also provides location information to help customers easily find
the shop.