import React, { useState, useEffect } from 'react'; import { createRoot } from 'react-dom/client'; import { Car, Check, Menu, X, Star, Droplets, Wrench, MapPin, Gauge, Quote, Mail, Phone, ShieldCheck } from 'lucide-react'; // --- Custom Hooks --- const useIntersectionObserver = () => { useEffect(() => { const observerOptions = { threshold: 0.1, rootMargin: "0px 0px -50px 0px" }; const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add('visible'); } }); }, observerOptions); const elements = document.querySelectorAll('.reveal'); elements.forEach(el => observer.observe(el)); return () => observer.disconnect(); }, []); }; const useScrollProgress = () => { useEffect(() => { const updateScrollProgress = () => { const scrollProgress = document.getElementById('scroll-progress'); if (scrollProgress) { const totalHeight = document.documentElement.scrollHeight - window.innerHeight; const progress = (window.scrollY / totalHeight) * 100; scrollProgress.style.width = `${progress}%`; } }; window.addEventListener('scroll', updateScrollProgress); return () => window.removeEventListener('scroll', updateScrollProgress); }, []); }; // --- Shared Components --- interface FeatureCardProps { icon: React.ReactNode; title: string; description: string; bgColor: string; delay?: number; } const FeatureCard: React.FC = ({ icon, title, description, bgColor, delay = 0 }) => (

{icon}

{title}

{description}

); interface TestimonialCardProps { name: string; location: string; quote: string; image: string; color: string; delay?: number; } const TestimonialCard: React.FC = ({ name, location, quote, image, color, delay = 0 }) => (

{[1,2,3,4,5].map(s => )}

"{quote}"

{name}

{name}

{location}

); interface PlaybookStepProps { number: string; title: string; description: string; className?: string; delay?: number; } const PlaybookStep: React.FC = ({ number, title, description, className = "", delay = 0 }) => (

{number}

{title}

{description}

); const Calculator = () => { const [carValue, setCarValue] = useState(45000); const [daysAvailable, setDaysAvailable] = useState(22); const [revenue, setRevenue] = useState(0); useEffect(() => { const calculated = Math.round(carValue * daysAvailable * 0.0014); setRevenue(calculated); }, [carValue, daysAvailable]); return (

Vehicle Value ${carValue.toLocaleString()}

setCarValue(Number(e.target.value))} className="w-full" />

Days Hosted / Mo {daysAvailable} Days

setDaysAvailable(Number(e.target.value))} className="w-full" />

Estimated Net Profit

${revenue.toLocaleString()}

); }; // --- Main App --- const App = () => { const [isMenuOpen, setIsMenuOpen] = useState(false); useIntersectionObserver(); useScrollProgress(); const handleNavClick = (e: React.MouseEvent, id: string) => { e.preventDefault(); const element = document.getElementById(id); if (element) { const offset = 100; const elementPosition = element.getBoundingClientRect().top; const offsetPosition = elementPosition + window.pageYOffset - offset; window.scrollTo({ top: offsetPosition, behavior: "smooth" }); setIsMenuOpen(false); } }; const reviews = [ { name: "Elena V.", location: "Westboro, ON", quote: "Absolute game changer. I never touch the car; they handle the cleaning and airport drop-offs perfectly. My ROI is higher than when I managed it myself.", image: "https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=400&h=400&fit=crop", color: "bg-[#FFEE00]" }, { name: "Raj P.", location: "Kanata Lakes, ON", quote: "The maintenance management is what sold me. They track oil changes and tire rotations so I don't have to. Professional, local, and reliable.", image: "https://images.unsplash.com/photo-1560250097-0b93528c311a?w=400&h=400&fit=crop", color: "bg-[#0047FF]" }, { name: "Nadia T.", location: "Gatineau, QC", quote: "Managing a cross-border fleet was a headache until I found this team. They optimize my pricing daily. 5-star service all the way.", image: "https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=400&h=400&fit=crop", color: "bg-white" }, { name: "Marcus K.", location: "Barrhaven, ON", quote: "I started with one SUV as a test. Now they manage my entire 4-car fleet. They've handled every minor issue flawlessly. True passive income.", image: "https://images.unsplash.com/photo-1506277886164-e25aa3f4ef7f?w=400&h=400&fit=crop", color: "bg-[#FFEE00]" }, { name: "Camille J.", location: "Orléans, ON", quote: "The detailing is incredible. My guests always comment on how clean the car is. The team handles everything while I just check my bank account.", image: "https://images.unsplash.com/photo-1580489944761-15a19d654956?w=400&h=400&fit=crop", color: "bg-[#0047FF]" } ]; return (

Turnkey Fleet Operations

COLLECT CASH.
SKIP
THE GRIND.

Your car is a business. We handle the cleaning, the maintenance, and the 24/7 logistics.

Sleek Car in Ottawa

The Capital's Premier Co-Host

5-STAR RATED

1,200+ Trips Managed

50+ Fleet Partners

98% Utilization Rate

Top-Rated in NCR

} title="Deep Cleaning" description="Industrial-grade detailing after every single trip. We protect your asset's value." bgColor="hover:bg-[#FFEE00]" /> } title="24/7 Hand-offs" description="We manage keys and deliveries across Kanata, downtown, and Gatineau." bgColor="hover:bg-[#0047FF] hover:text-white" /> } title="Fleet Care" description="Proactive maintenance management. Oil changes and tire rotations on autopilot." bgColor="hover:bg-[#FFEE00]" />

Host Success Stories

Real people. Real revenue. No fluff.

{reviews.map((rev, i) => ( ))}

THE ASSET
ACCELERATOR.

We leverage Turo's dynamic pricing and native vetting to keep your car booked.

High Utilization Focus

Comprehensive Fleet Care

The Scaling Playbook

READY TO
SCALE?

Send us your vehicle details and let's build your passive income stream today.

[email protected]

(613) 555-0123

); }; const rootElement = document.getElementById('root'); if (rootElement) { createRoot(rootElement).render(); }