website landing page

apps/website/components/landing/Footer.tsx

@@ -1,57 +1,73 @@
+'use client';
+
+import { useRef } from 'react';
+import { useScrollProgress } from '@/hooks/useScrollProgress';
+
 export default function Footer() {
   return (
     <footer className="relative bg-deep-graphite">
       <div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-primary-blue to-transparent" />
       
-      <div className="max-w-6xl mx-auto px-6 py-16">
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-12 mb-12">
-          <div>
-            <h3 className="text-xl font-semibold text-white mb-2">GridPilot</h3>
-            <div className="w-16 h-0.5 bg-gradient-to-r from-primary-blue to-neon-aqua mb-4 rounded-full" />
-            <p className="text-sm text-gray-400 font-light">
-              Making league racing less chaotic
-            </p>
-          </div>
-
-          <div>
-            <h4 className="text-sm font-semibold text-white mb-4">Product</h4>
-            <ul className="space-y-3">
-              <li>
-                <span className="text-sm text-gray-400 font-light cursor-not-allowed opacity-50">
-                  Roadmap <span className="text-xs">(coming soon)</span>
-                </span>
-              </li>
-              <li>
-                <span className="text-sm text-gray-400 font-light cursor-not-allowed opacity-50">
-                  Docs <span className="text-xs">(coming soon)</span>
-                </span>
-              </li>
-            </ul>
-          </div>
-
-          <div>
-            <h4 className="text-sm font-semibold text-white mb-4">Legal</h4>
-            <ul className="space-y-3">
-              <li>
-                <span className="text-sm text-gray-400 font-light cursor-not-allowed opacity-50">
-                  Privacy <span className="text-xs">(coming soon)</span>
-                </span>
-              </li>
-              <li>
-                <span className="text-sm text-gray-400 font-light cursor-not-allowed opacity-50">
-                  Terms <span className="text-xs">(coming soon)</span>
-                </span>
-              </li>
-            </ul>
-          </div>
+      <div className="max-w-4xl mx-auto px-[calc(1.5rem+var(--sal))] pr-[calc(1.5rem+var(--sar))] py-2 md:py-8 lg:py-12 pb-[calc(0.5rem+var(--sab))] md:pb-[calc(1.5rem+var(--sab))]">
+        {/* Racing stripe accent */}
+        <div
+          className="flex gap-1 mb-2 md:mb-4 lg:mb-6 justify-center"
+          style={{
+            opacity: 1,
+            transform: 'scaleX(1)'
+          }}
+        >
+          <div className="w-12 md:w-20 lg:w-28 h-[2px] md:h-0.5 lg:h-1 bg-white rounded-full" />
+          <div className="w-12 md:w-20 lg:w-28 h-[2px] md:h-0.5 lg:h-1 bg-primary-blue rounded-full" />
+          <div className="w-12 md:w-20 lg:w-28 h-[2px] md:h-0.5 lg:h-1 bg-white rounded-full" />
         </div>
 
-        <div className="pt-8 border-t border-charcoal-outline">
-          <div className="flex flex-col md:flex-row justify-between items-center gap-4">
-            <p className="text-sm text-gray-500 font-light">
-              © 2025 GridPilot. All rights reserved.
-            </p>
-          </div>
+        {/* Personal message */}
+        <div
+          className="text-center mb-3 md:mb-6 lg:mb-8"
+          style={{
+            opacity: 1,
+            transform: 'translateY(0)'
+          }}
+        >
+          <p className="text-[9px] md:text-xs lg:text-sm text-gray-300 mb-1 md:mb-2">
+            🏁 Built by a sim racer, for sim racers
+          </p>
+          <p className="text-[9px] md:text-xs text-gray-400 font-light max-w-2xl mx-auto">
+            Just a fellow racer tired of spreadsheets and chaos. GridPilot is my passion project to make league racing actually fun again.
+          </p>
+        </div>
+
+        {/* Community links */}
+        <div
+          className="flex justify-center gap-4 md:gap-6 lg:gap-8 mb-3 md:mb-6 lg:mb-8"
+          style={{
+            opacity: 1,
+            transform: 'scale(1)'
+          }}
+        >
+          <a
+            href="https://discord.gg/gridpilot"
+            className="text-[9px] md:text-xs text-primary-blue hover:text-neon-aqua transition-colors font-medium inline-flex items-center justify-center min-h-[44px] min-w-[44px] px-3 py-2 active:scale-95 transition-transform"
+          >
+            💬 Join Discord
+          </a>
+        </div>
+
+        {/* Development status */}
+        <div
+          className="text-center pt-2 md:pt-4 lg:pt-6 border-t border-charcoal-outline"
+          style={{
+            opacity: 1,
+            transform: 'translateY(0)'
+          }}
+        >
+          <p className="text-[9px] md:text-xs lg:text-sm text-gray-500 mb-1 md:mb-2">
+            ⚡ Early development • Feedback welcome
+          </p>
+          <p className="text-[9px] md:text-xs text-gray-600">
+            Questions? Find me on Discord
+          </p>
         </div>
       </div>
     </footer>