Roboracer site 2026 Updates

src/App.tsx

@@ -26,7 +26,6 @@ function App() {
           <Route path="/race" element={<RaceCalendar />} />
           <Route path="/research" element={<Research />} />
           <Route path="/rules" element={<Rules />} />
-          {/* <Route path="/events" element={<Events />} /> */}
         </Route>
       </Routes>
     </Router>

src/components/FloatingTestimonials.tsx

@@ -69,7 +69,7 @@ export default function FloatingTestimonials() {
               />
               <div>
                 <h4>{testimonial.author}</h4>
-                <p className="text-slate-200">{testimonial.institution}</p>
+                <p className="text-slate-500">{testimonial.institution}</p>
               </div>
             </div>
           </div>

src/components/Footer.tsx

@@ -2,47 +2,103 @@ import { useLocation } from "react-router-dom";
 
 export default function Footer() {
   const location = useLocation();
-  const currentPath = location.pathname;
-  const isAltFooter = currentPath === "/learn" || currentPath === "/build" || currentPath === "/course";
+  const isAltFooter = 
+    location.pathname === "/learn" || 
+    location.pathname === "/build" || 
+    location.pathname === "/course";
+
+  if (isAltFooter) return null;
 
   return (
-<footer
-  className={`${isAltFooter ? "hidden" : ""} dotted-bg flex flex-col md:justify-between items-center text-white responsive-padding pt-8 gap-6 md:gap-12`}
->
-  <div className='w-full flex text-center md:text-start justify-between flex-col md:flex-row items-end gap-6 md:gap-12'>
-  {/* slack link */}
-  <div className="flex flex-col items-start md:items-start gap-3 md:max-w-sm">
-    <a
-      href="https://join.slack.com/t/robo-racer/shared_invite/zt-2pq4fuyjq-gTUflzeZDKDDGjuVoeZqNg"
-      target="_blank"
-      rel="noreferrer noopener"
-      className="flex flex-row items-center gap-2 text-lg font-medium hover:underline"
-    >
-      <img src="/logos/slack-logo.svg" alt="Slack Logo" width={24} height={24} />
-      <h3>Join Our Community!</h3>
-    </a>
-    <p className="text-gray-300 text-start">
-      Join Slack to learn how to get started and get your questions answered.
-    </p>
-    <a href="mailto:contact@roboracer.ai" className="hover:text-gray-300">
-    ✉ Contact Us
-    </a>
-  </div>
+    <footer className="bg-gray-900 text-white">
+      {/* Main Footer Content */}
+      <div className="max-w-7xl mx-auto responsive-padding py-12 md:py-16">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10">
+          {/* Company Info */}
+          <div className="lg:col-span-1 space-y-4">
+            <img 
+              src="/logos/logo-white-gradient.svg" 
+              alt="RoboRacer" 
+              className="h-10 w-auto"
+            />
+            <p className="text-gray-400 text-sm leading-relaxed">
+              Advancing autonomous racing through innovation, education, and competition.
+            </p>
+            <a 
+              href="mailto:contact@roboracer.ai" 
+              className="text-gray-400 hover:text-white hover:underline underline-offset-2 text-sm transition-colors duration-200 inline-block"
+            >
+              contact@roboracer.ai
+            </a>
+          </div>
 
-  {/* logo */}
-  <div className="w-full flex justify-center md:justify-end">
-    <img src="/logos/logo-white.svg" alt="RoboRacer Logo" width={200} height={50} />
-  </div>
+          {/* Quick Links */}
+          <div>
+            <h3 className="font-semibold text-white mb-4">Quick Links</h3>
+            <ul className="space-y-3">
+              <li><a href="/about" className="text-gray-400 hover:text-white text-sm transition-colors">About</a></li>
+              <li><a href="/race" className="text-gray-400 hover:text-white text-sm transition-colors">Race</a></li>
+              <li><a href="/news" className="text-gray-400 hover:text-white text-sm transition-colors">News</a></li>
+              <li><a href="/research" className="text-gray-400 hover:text-white text-sm transition-colors">Research</a></li>
+            </ul>
+          </div>
 
-  </div>
+          {/* Resources */}
+          <div>
+            <h3 className="font-semibold text-white mb-4">Resources</h3>
+            <ul className="space-y-3">
+              <li><a href="/learn" className="text-gray-400 hover:text-white text-sm transition-colors">Learn</a></li>
+              <li><a href="/build" className="text-gray-400 hover:text-white text-sm transition-colors">Build</a></li>
+              <li><a href="/course" className="text-gray-400 hover:text-white text-sm transition-colors">Course</a></li>
+              <li>
+                <a 
+                  href="https://autodrive-ecosystem.github.io/" 
+                  target="_blank" 
+                  rel="noopener noreferrer"
+                  className="text-gray-400 hover:text-white text-sm transition-colors"
+                >
+                  Simulator
+                </a>
+              </li>
+            </ul>
+          </div>
 
-  {/* license */}
-  <div className="w-full text-xs text-center bg-black py-5">
-    <p>Copyright ©2025 RoboRacer Foundation</p>
-    <p>All rights reserved</p>
-    <p>Creative Commons License</p>
-  </div>
-</footer>
+          {/* Community */}
+          <div>
+            <h3 className="font-semibold text-white mb-4">Community</h3>
+            <a
+              href="https://join.slack.com/t/robo-racer/shared_invite/zt-2pq4fuyjq-gTUflzeZDKDDGjuVoeZqNg"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center gap-2 px-4 py-2 bg-white/10 hover:bg-white/20 rounded-md transition-colors duration-200 text-sm font-medium mb-4"
+            >
+              <img 
+                src="/logos/slack-logo.svg" 
+                alt="Slack" 
+                className="h-5 w-5"
+              />
+              Join Slack
+            </a>
+            <p className="text-gray-400 text-sm leading-relaxed">
+              Connect with our community to get started and ask questions.
+            </p>
+          </div>
+        </div>
+      </div>
 
+      {/* Copyright Bar */}
+      <div className="border-t border-gray-800">
+        <div className="max-w-7xl mx-auto responsive-padding py-6">
+          <div className="flex flex-col md:flex-row justify-between items-center gap-4">
+            <p className="text-gray-400 text-sm">
+              © 2026 RoboRacer Foundation. All rights reserved.
+            </p>
+            <p className="text-gray-500 text-sm">
+              Creative Commons License
+            </p>
+          </div>
+        </div>
+      </div>
+    </footer>
   );
-}
+}