Trinath Enterprises — uPVC Manufacturing Prompts

Trinath Enterprises — Asset Integration & Project Setup Guidelines

1. LOCAL DIRECTORY SETUP:
Create a dedicated `Trinath` folder in your project repository root or under `/public/assets/trinath/`:
- Store the official logo asset (`logo.png` or `logo.svg`)
- Store the single-take drone walkthrough video (`upvc-journey.mp4`)

2. MEDIA ACCESSIBILITY & CONTRAST:
- Ensure all floating text overlay cards use dark glassmorphism (Void Carbon #050608 with 40% backdrop blur) to guarantee high contrast readability over video frames.
- Typography: Playfair Display / Space Grotesk for uppercase headlines, Plus Jakarta Sans / Inter for technical metrics.
- Accent: Architectural Amber Gold (#D4AF37 / #E5B869) for CTA buttons, active milestone indicators, and interactive hotspot pins.

You are an award-winning Creative Director, Senior Motion Designer, and Lead Full-Stack Architect who has won multiple Awwwards Site of the Day and FWA awards. Build a production-ready, ultra-premium, scroll-driven interactive single-page website for "Trinath Enterprises" — the premier uPVC door and window manufacturing company in Odisha.

The website's centerpiece is a continuous, scroll-controlled single-take cinematic film (`/public/upvc-journey.mp4`). The user's scroll speed and velocity physically control the video playback and camera trajectory through high-rise skyscrapers, luxury penthouse sliding doors, casement windows, and into the high-tech uPVC manufacturing factory floor in Odisha.

==================================================
1. TECH STACK & DEPENDENCIES
==================================================
- Framework: Next.js 15 (App Router, React 19) with TypeScript
- Styling: Tailwind CSS (v3 or v4) with custom luxury dark design tokens
- Scroll Engine: Lenis smooth scrolling (@studio-freight/lenis or lenis)
- Motion & Animation: GSAP 3 (with ScrollTrigger) & Framer Motion
- Icons: Lucide React (lucide-react)
- Audio/Micro-interactions: Canvas-confetti, subtle Web Audio API sound feedback
- Optimization: HTML5 Canvas Video Frame Buffering / requestAnimationFrame scrubbing

==================================================
2. BRAND IDENTITY & CONTACT TELEMETRY
==================================================
- Brand Name: Trinath Enterprises
- Tagline: Precision German Engineering. Crafted in Odisha.
- Primary Location: Infront of Radio Station, Odisha, India
- WhatsApp API Target: +91 7008859673
- Design System Tokens:
  * Void Carbon / Obsidian: #050608, #0B0D13
  * Titanium / Anodized Anthracite: #1E232A, #2C323D
  * Architectural Amber Gold: #D4AF37, #E5B869
  * Pure Optical White & Glass Mist: #F4F6F9, #8C96A5
- Typography:
  * Headlines: Playfair Display / Space Grotesk (uppercase, tracking-wider)
  * UI & Metrics: Plus Jakarta Sans / Inter (clean, geometric, ultra-legible)

==================================================
3. VIDEO SCRUBBING ARCHITECTURE (/public/upvc-journey.mp4)
==================================================
- Implement a sticky full-screen canvas/video container (`VideoScrubber.tsx`) pinned via GSAP ScrollTrigger across 500vh of virtual scroll height.
- Bind `video.currentTime` to `ScrollTrigger.progress` with smooth inertial damping (lerp 0.08–0.1) using `requestAnimationFrame` to ensure stutter-free 60+ FPS bidirectional scrubbing.
- Scrolling forward flies into the building and factory; scrolling backward reverses the drone smoothly.

==================================================
4. SCROLL MILESTONES & KINETIC CONTENT CHOREOGRAPHY
==================================================
Synchronize floating glassmorphic HUD overlays, telemetry data, and kinetic typography precisely with the video's narrative timeline:

1. Scene 01 (0% – 20% Scroll) — The Skyline Descent
   - Background: Drone diving through morning clouds along the skyscraper facade.
   - Large Headline unmasking: "ARCHITECTURAL PERFECTION. ELEVATED."
   - Subtitle: "Custom Engineered uPVC Solutions for Odisha's Finest Residences."
   - Scroll Indicator: Pulsing golden vertical stroke with "SCROLL TO EXPLORE".

2. Scene 02 (20% – 45% Scroll) — The Balcony Threshold (Sliding Doors)
   - Background: Matte-anthracite multi-track sliding door opens smoothly as camera enters.
   - Floating Glass Card (Left): "HEAVY-DUTY MULTI-TRACK SLIDING SYSTEMS"
   - Telemetry Metrics (Right):
     * 100% Weatherproof & Cyclone Resistant (Odisha coastal grade)
     * Heavy-duty German multi-point locking mechanisms
     * Ultra-slim sightlines with flush floor tracks

3. Scene 03 (45% – 70% Scroll) — Interior Walkthrough (Casement & Tilt-Turn Windows)
   - Background: Camera glides past panoramic living room windows and bedroom corner joints.
   - Floating Glass Card: "THERMAL & ACOUSTIC SHIELDING"
   - Interactive Hotspot Pins:
     * Triple-Glazed Glass: 45dB Sound Reduction
     * Multi-Chamber Profiles: 35% Air-Conditioning Energy Savings
     * UV-Stabilized Titanium Dioxide formulation (Zero fading under Indian tropical sun)

4. Scene 04 (70% – 88% Scroll) — Smart Manufacturing Plant Entry
   - Background: Drone flies out of the window across the city into the automated manufacturing factory.
   - Floating Glass Card: "PRECISION AUTOMATION AT SCALE"
   - Industrial Specs:
     * Automated CNC 4-Point Corner Seam Fusion
     * Galvanized Steel Core Reinforcement
     * Zero-Tolerance Quality Calibration

5. Scene 05 (88% – 100% Scroll) — Factory Finale & Interactive Inquiry
   - Background: Camera rises above the factory floor revealing finished staged installations.
   - Headline: "TRANSFORM YOUR ARCHITECTURAL VISION"
   - Prominent Floating CTAs:
     * Primary: "CHAT ON WHATSAPP (+91 7008859673)" — Glowing gold button with WhatsApp icon.
     * Secondary: "REQUEST FACTORY VISIT / QUOTE" (triggers modal)
   - Address Badge: "Factory & Experience Center: Infront of Radio Station, Odisha"

==================================================
5. UI COMPONENTS & INTERACTIVE FEATURES
==================================================
1. `Navbar.tsx`:
   - Fixed glassmorphic header (`backdrop-blur-xl bg-black/40 border-b border-white/10`).
   - Left: "TRINATH ENTERPRISES" with animated golden logo monogram.
   - Center: Milestone chapter pills ("Skyline", "Sliding Doors", "Windows", "Manufacturing"). Clicking smoothly animates the scroll position to that chapter.
   - Right: "Connect WhatsApp" button linking directly to `+91 7008859673`.

2. `FloatingWhatsApp.tsx`:
   - Fixed magnetic bottom-right floating pill with WhatsApp branding, pulsing online indicator, and one-click direct message launch.

3. `QuickQuoteModal.tsx`:
   - Glassmorphic modal with project type selector (Villa, Apartment, Commercial), estimated dimensions slider, and "Send Direct to WhatsApp" submission that formats the form data into a pre-filled WhatsApp message URL.

4. `ProductSpecDrawer.tsx`:
   - Slide-over drawer with technical comparisons (uPVC vs Aluminum vs Wood: Sound insulation, Thermal U-value, Lifespan, Maintenance).

5. `CustomCursor.tsx`:
   - Precision trailing ring cursor with magnetic snap over buttons, cards, and hotspot pins.

==================================================
6. PRODUCTION QUALITY & CODE STANDARDS
==================================================
- Ensure zero layout shifts, full responsive design (desktop cinematic mode + touch-friendly mobile fallback with video scrub / swipe gestures).
- Include comprehensive metadata, OpenGraph tags, and JSON-LD LocalBusiness schema for Trinath Enterprises (Odisha).
- Output complete, modular, error-free TypeScript code across all files without omitting logic or using placeholder comments.