Interview Project

📖 Overview

This project is a 3D interactive, browser-based sales deck designed to showcase brands in a visually engaging and immersive way. It merges retail, dining, entertainment, hospitality, and live events into a cinematic, luxury-inspired digital experience. The tool replaces fragmented sales presentations with a seamless, high-impact pitch.

✨ Features

• Cinematic Intro powered by Framer Motion for smooth transitions
• Non-linear Navigation with React Three Fiber scene-based routing
• Luxury UI styled with TailwindCSS for clean, responsive layouts
• Immersive 3D using Three.js + React Three Fiber
• Ready-made Components via drei (OrbitControls, loaders, Html overlays)
• Post-Processing Effects with React Three PostProcessing for cinematic polish
• Expandable Modules for events, sponsorships, and leasing paths
• Responsive Design optimized for desktop and tablet
• AI-Generated Assets supplement real media where limited

🎯 Business Objectives

• Drive retail leasing deals (luxury, mid-tier, flagship, pop-up)
• Secure sponsorship and brand partnerships
• Promote event bookings (concerts, activations, corporate events)
• Highlight venue-specific opportunities (Performing Arts Centers, Expo Halls)

⚙️ Technical Requirements

• Performance: Achieved 92% efficiency on PC and 86% on mobile (with occasional dips to ~72% depending on device load)
• Optimization: Lazy loading, compressed textures, and modular asset pipelines ensure smooth rendering
• Deployment: Hosted via GitHub Pages, Vercel
• Source Code: Clean, modular architecture with strict typing and reusable hooks

📊 Evaluation Criteria

Category	Weight	Focus Area
Visual & UX Design	30%	Premium feel, intuitive interaction
Technical Execution	25%	Code quality, performance, responsiveness
AI Integration	15%	Effective use of AI assets
Storytelling & Strategy	15%	Compelling narrative driving business action
Expandability	10%	Modular design supporting future growth
Attention to Detail	5%	Typography, spacing, loading states, README quality

🚀 Submission Instructions

• Deploy live URL via GitHub Pages, Vercel, or Netlify
• Share public GitHub repository with setup instructions and design rationale
• Optional: Include a 1–2 page write-up explaining design decisions and AI usage

🛠 Tech Stack

Logo	Name
	Next.js
	TailwindCSS
	Three.js
	React Three Fiber
	Blender
	JavaScript / TypeScript
🎞️	Framer Motion
🎨	React Three PostProcessing
🧩	drei (helpers)

• Framework: Next.js
• Styling: TailwindCSS
• 3D Engine: Three.js
• Renderer: React Three Fiber
• Helpers: drei
• Post-Processing: React Three PostProcessing
• Animations: Framer Motion
• Asset Creation: Blender (for 3D models and textures)

⚡ Setup Instructions

1. Clone the repository
2. Install dependencies:

   npm install