Homepage Improvements

frontend/src/pages/HomePage.tsx

@@ -1,15 +1,22 @@
 import { useState } from 'react';
 import { useAuth0 } from '@auth0/auth0-react';
+import { useNavigate } from 'react-router-dom';
 import { HeroCarousel } from './HomePage/HeroCarousel';
 import { FeaturesGrid } from './HomePage/FeaturesGrid';
 import { motion } from 'framer-motion';
 
 export const HomePage = () => {
-  const { loginWithRedirect } = useAuth0();
+  const { loginWithRedirect, isAuthenticated } = useAuth0();
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+  const navigate = useNavigate();
 
-  const handleGetStarted = () => {
-    loginWithRedirect();
+  const handleAuthAction = () => {
+    if (isAuthenticated) {
+      navigate('/garage');
+      return;
+    }
+
+    loginWithRedirect({ appState: { returnTo: '/garage' } });
   };
 
   return (
@@ -38,10 +45,10 @@ export const HomePage = () => {
                 About
               </a>
               <button
-                onClick={handleGetStarted}
+                onClick={handleAuthAction}
                 className="bg-primary-500 hover:bg-primary-700 text-white font-semibold py-2 px-6 rounded-lg transition-colors duration-300"
               >
-                Get Started
+                Login
               </button>
             </div>
 
@@ -97,10 +104,10 @@ export const HomePage = () => {
                 About
               </a>
               <button
-                onClick={handleGetStarted}
+                onClick={handleAuthAction}
                 className="w-full bg-primary-500 hover:bg-primary-700 text-white font-semibold py-2 px-6 rounded-lg transition-colors duration-300"
               >
-                Get Started
+                Login
               </button>
             </motion.div>
           )}
@@ -133,7 +140,7 @@ export const HomePage = () => {
             your needs.
           </p>
           <button
-            onClick={handleGetStarted}
+            onClick={handleAuthAction}
             className="bg-primary-500 hover:bg-primary-700 text-white font-semibold py-3 px-8 rounded-lg transition-colors duration-300"
           >
             Get Started
@@ -200,7 +207,7 @@ export const HomePage = () => {
             We are a cloud-based platform accessible anywhere, anytime.
           </h2>
           <button
-            onClick={handleGetStarted}
+            onClick={handleAuthAction}
             className="bg-white text-primary-500 hover:bg-gray-100 font-semibold py-3 px-8 rounded-lg transition-colors duration-300"
           >
             Get Started