feat: navigation and UX improvements complete

frontend/src/pages/HomePage.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { useAuth0 } from '@auth0/auth0-react';
 import { useNavigate } from 'react-router-dom';
 import { HeroCarousel } from './HomePage/HeroCarousel';
@@ -8,8 +8,18 @@ import { motion } from 'framer-motion';
 export const HomePage = () => {
   const { loginWithRedirect, isAuthenticated } = useAuth0();
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+  const [isScrolled, setIsScrolled] = useState(false);
   const navigate = useNavigate();
 
+  useEffect(() => {
+    const handleScroll = () => {
+      setIsScrolled(window.scrollY > 100);
+    };
+
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
   const handleAuthAction = () => {
     if (isAuthenticated) {
       navigate('/garage');
@@ -26,8 +36,8 @@ export const HomePage = () => {
   return (
     <div className="min-h-screen bg-nero text-avus">
       {/* Navigation Bar */}
-      <nav className="sticky top-0 z-50 bg-nero/90 backdrop-blur border-b border-white/10">
-        <div className="max-w-7xl mx-auto px-4 md:px-8">
+      <nav className={`fixed top-0 left-0 right-0 z-50 transition-colors duration-300 ${isScrolled ? 'bg-nero/95 backdrop-blur-sm' : 'bg-transparent'}`}>
+        <div className="w-full px-4 md:px-8 lg:px-12">
           <div className="flex justify-between items-center h-16">
             {/* Logo */}
             <div className="flex-shrink-0">
@@ -99,7 +109,7 @@ export const HomePage = () => {
               initial={{ opacity: 0, height: 0 }}
               animate={{ opacity: 1, height: 'auto' }}
               exit={{ opacity: 0, height: 0 }}
-              className="md:hidden py-4 space-y-3 bg-nero border-t border-white/10"
+              className="md:hidden py-4 space-y-3 bg-nero/95 backdrop-blur-sm border-t border-white/10"
             >
               <a
                 href="#home"
@@ -138,7 +148,7 @@ export const HomePage = () => {
 
       {/* Hero Carousel */}
       <section id="home">
-        <HeroCarousel />
+        <HeroCarousel onGetStarted={handleAuthAction} />
       </section>
 
       {/* Welcome Section */}

frontend/src/pages/HomePage/HeroCarousel.tsx

@@ -1,4 +1,4 @@
-import { useRef } from 'react';
+import React, { useRef } from 'react';
 import Slider from 'react-slick';
 import 'slick-carousel/slick/slick.css';
 import 'slick-carousel/slick/slick-theme.css';
@@ -22,8 +22,8 @@ const heroSlides: HeroSlide[] = [
   },
   {
     id: 3,
-    imageSrc: 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=1920&h=1080&fit=crop',
-    imageAlt: 'Green Performance Car',
+    imageSrc: 'https://images.unsplash.com/photo-1609138315745-4e44ac3bbd8d?w=1920&h=1080&fit=crop&crop=focalpoint&fp-x=0.5&fp-y=0.6&q=80&auto=format&ixlib=rb-4.1.0',
+    imageAlt: 'Ferrari SF90',
   },
   {
     id: 4,
@@ -32,8 +32,8 @@ const heroSlides: HeroSlide[] = [
   },
   {
     id: 5,
-    imageSrc: 'https://images.unsplash.com/photo-1549317661-bd32c8ce0db2?w=1920&h=1080&fit=crop',
-    imageAlt: 'SUV on Road',
+    imageSrc: 'https://images.unsplash.com/photo-1740095960937-c7b03f511da4?w=1920&h=1080&fit=crop&crop=focalpoint&fp-x=0.5&fp-y=0.6&q=80&auto=format&ixlib=rb-4.1.0',
+    imageAlt: 'Corvette Z06 - Black Rose',
   },
   {
     id: 6,
@@ -42,7 +42,11 @@ const heroSlides: HeroSlide[] = [
   },
 ];
 
-export const HeroCarousel = () => {
+interface HeroCarouselProps {
+  onGetStarted: () => void;
+}
+
+export const HeroCarousel: React.FC<HeroCarouselProps> = ({ onGetStarted }) => {
   const sliderRef = useRef<Slider>(null);
 
   const settings = {
@@ -76,6 +80,19 @@ export const HeroCarousel = () => {
         ))}
       </Slider>
 
+      {/* Hero Text Overlay - positioned outside Slider to prevent fading */}
+      <div className="absolute inset-0 flex flex-col items-center justify-center text-center px-4 pointer-events-none">
+        <h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-6 md:mb-8 drop-shadow-lg">
+          Track every mile. Own every detail.
+        </h1>
+        <button
+          onClick={onGetStarted}
+          className="pointer-events-auto bg-primary-500 hover:bg-primary-600 text-white font-semibold py-3 px-8 md:py-4 md:px-10 rounded-lg text-lg md:text-xl transition-colors duration-300 shadow-lg shadow-black/30 focus:outline-none focus:ring-2 focus:ring-primary-500/50"
+        >
+          Get Started
+        </button>
+      </div>
+
       <style>{`
         .hero-carousel .slick-dots {
           bottom: 25px;