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 */}