landing page style upgrade

README.md

@@ -2,6 +2,8 @@
 
 Crush Your Race is the next generation of running coach apps, powered by an advanced AI agent that delivers hyper-personalized training plans and dynamic feedback in real time. Built with runners in mind, it integrates seamlessly with Strava, transforming performance data into actionable insights to help you reach your goals faster.
 
+![Crush Your Race Banner](webapp/public/banner.png)
+
 ## Principles
 
 ### Vertical AI Agents
@@ -24,4 +26,4 @@ Automatic syncing with Strava ensures your plan stays current, constantly refini
 ### Dynamic Real-Time Adjustments
 Because performance can vary day to day, Crush Your Race updates your regimen on the fly, keeping you on track toward your goals no matter what life throws at you.
 
-Join us in reshaping how runners train—let’s run smarter, together.
+Join us in reshaping how runners train—let's run smarter, together.

webapp/src/app/components/ImageCarousel.tsx

@@ -23,7 +23,7 @@ const pages: CarouselPage[] = [
     {
         image: "/Profile.png",
         title: "Tailored For You",
-        subtitle: "Update your preferences to get the most out of your training"
+        subtitle: "Customize your preferences to get the most out of your training"
     }
 ];
 
@@ -86,7 +86,7 @@ export default function ImageCarousel(): React.ReactElement {
                                 />
                                 <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent" />
                             </div>
-                            <div className="absolute bottom-6 left-6 right-6">
+                            <div className="absolute bottom-6 left-6 right-6 text-center">
                                 <h3 className="text-2xl font-semibold text-white mb-2">
                                     {pages[currentPage].title}
                                 </h3>

webapp/src/app/components/Navbar.tsx

@@ -14,15 +14,26 @@ export default function Navbar(): React.ReactElement {
                     <span className="text-blue-300">Crush</span>{' '}
                     <span className="text-blue-500">Your Race</span>
                 </Link>
-                <button
-                    className={`flex items-center space-x-2 ${montserrat.className}`}
-                    onClick={() => router.push('/dashboard')}
-                >
-                    <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
-                    </svg>
-                    <span className="text-lg font-bold">Dashboard</span>
-                </button>
+                <div className={`flex items-center space-x-4 ${montserrat.className}`}>
+                    <Link
+                        href="https://github.com/voynow/crushyourrace"
+                        target="_blank"
+                        className="hover:text-blue-300 transition-colors"
+                    >
+                        <svg className="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
+                            <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z" />
+                        </svg>
+                    </Link>
+                    <Link
+                        href="https://x.com/jamievoynow"
+                        target="_blank"
+                        className="hover:text-blue-300 transition-colors"
+                    >
+                        <svg className="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
+                            <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
+                        </svg>
+                    </Link>
+                </div>
             </div>
         </nav>
     );

webapp/src/app/globals.css

@@ -19,3 +19,49 @@ body {
   background: var(--background);
   font-family: Arial, Helvetica, sans-serif;
 }
+
+.glass-section {
+  background: rgba(17, 25, 40, 0.75);
+  backdrop-filter: blur(12px);
+  border: 1px solid rgba(255, 255, 255, 0.125);
+}
+
+.glow {
+  position: absolute;
+  width: 500px;
+  height: 500px;
+  border-radius: 50%;
+  filter: blur(100px);
+  opacity: 0.15;
+  pointer-events: none;
+}
+
+.glow-blue {
+  background: #60A5FA;
+}
+
+.glow-purple {
+  background: #818CF8;
+}
+
+.gradient-dark {
+  background: linear-gradient(to bottom right, rgba(17, 24, 39, 0.8), rgba(17, 24, 39, 0.4));
+}
+
+.gradient-blue {
+  background: linear-gradient(to bottom right, rgba(59, 130, 246, 0.05), rgba(37, 99, 235, 0.1));
+}
+
+.gradient-purple {
+  background: linear-gradient(to bottom right, rgba(139, 92, 246, 0.05), rgba(124, 58, 237, 0.1));
+}
+
+.section-divider {
+  height: 1px;
+  width: 100%;
+  background: linear-gradient(to right, 
+    transparent, 
+    rgba(255, 255, 255, 0.1), 
+    transparent
+  );
+}