This is a submission for Weekend Challenge: Passion Edition

Passion Garage — A Cinematic Automotive Experience Powered by Google Gemini

What I Built

For this challenge, I wanted to explore passion through the world of automotive engineering. To millions of enthusiasts, cars are more than transportation—they represent innovation, performance, craftsmanship, and emotion.

To capture that feeling, I built Passion Garage, a cinematic web experience inspired by legendary performance cars. Instead of a traditional landing page, the website takes users on a scroll-driven journey featuring immersive GSAP animations, storytelling, and an AI-powered automotive assistant.

The experience includes:

• Cinematic scroll storytelling
• Featured performance cars
• BMW Story chapter
• AI Garage powered by Google Gemini
• Smooth GSAP animations
• Fully responsive modern UI

The AI Garage acts as an automotive expert, helping users compare cars, understand engine technologies, learn about performance specifications, and receive personalized recommendations.

My goal was to create something that feels less like a website and more like an interactive automotive experience.

Demo

🌐 Live Website

https://passion-garage-ai.vercel.app/

Screenshorts

Code

GitHub Repository

How I Built It

The project was built using Next.js App Router, TypeScript, and Tailwind CSS for a fast and modern development experience.

The most exciting part was creating the cinematic scroll experience using GSAP and ScrollTrigger. Instead of relying on static sections, each chapter reveals itself through carefully timed animations to create a story-driven experience.

To qualify for the Best Use of Google AI category, I integrated Google Gemini into the AI Garage section. Rather than building a generic chatbot, I designed an automotive assistant that specializes in:

• Comparing performance cars
• Explaining engine technologies
• Recommending vehicles based on user needs
• Answering automotive questions
• Providing structured, easy-to-read information

The frontend communicates with a Next.js API route, which securely interacts with the Gemini API to generate intelligent automotive responses.

Tech Stack

• Next.js
• React
• TypeScript
• Tailwind CSS
• GSAP + ScrollTrigger
• Google Gemini API
• Vercel

Best Use of Google AI

Google Gemini powers the AI Garage, transforming it into an intelligent automotive assistant capable of providing comparisons, recommendations, and educational content about performance vehicles. The AI is integrated as a core feature of the experience rather than an optional add-on.

Thank you for checking out my submission!

I'd love to hear your feedback and suggestions for improving Passion Garage.