fix routing

src/App.tsx

@@ -1,4 +1,4 @@
-import { HashRouter, Routes, Route, useLocation } from 'react-router-dom';
+import { BrowserRouter, Routes, Route, useLocation } from 'react-router-dom';
 import { Layout } from './components/Layout';
 import { lazy, Suspense, useEffect } from 'react';
 
@@ -35,7 +35,7 @@ function ScrollToTop() {
 
 function App() {
   return (
-    <HashRouter>
+    <BrowserRouter>
       <ScrollToTop />
       <Suspense fallback={<div>Loading...</div>}>
         <Routes>
@@ -54,7 +54,7 @@ function App() {
           </Route>
         </Routes>
       </Suspense>
-    </HashRouter>
+    </BrowserRouter>
   )
 }
 

src/components/Header.tsx

@@ -94,7 +94,7 @@ export function Header() {
         <div className="fixed inset-0 z-10" />
         <Dialog.Panel className="fixed inset-y-0 right-0 z-10 w-full overflow-y-auto lg:bg-transparent lg:bg-transparent bg-white px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10">
           <div className="flex items-center justify-between">
-            <Link to="#" className="-m-1.5 p-1.5">
+            <Link to="/" className="-m-1.5 p-1.5" onClick={() => setMobileMenuOpen(false)}>
               <span className="sr-only">Mycelium</span>
               <img
                 className="h-8 w-auto"

src/components/HeaderDark.tsx

@@ -94,7 +94,7 @@ export function HeaderDark() {
         <div className="fixed inset-0 z-10" />
         <Dialog.Panel className="fixed inset-y-0 right-0 z-10 w-full overflow-y-auto bg-[#111111] px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-200/10">
           <div className="flex items-center justify-between">
-            <Link to="#" className="-m-1.5 p-1.5">
+            <Link to="/" className="-m-1.5 p-1.5" onClick={() => setMobileMenuOpen(false)}>
               <span className="sr-only">Mycelium</span>
               <img
                 className="h-8 w-auto"

src/pages/gpu/CallToAction.tsx

@@ -65,8 +65,7 @@ export function CallToAction() {
 
               <div className="flex flex-col items-center text-center max-w-xs">
                 <Button
-                  to="#gpu-architecture"
+                  to="/gpu#gpu-architecture"
-                  as="a"
                   variant="outline"
                   color="white"
                   className="mt-4"

src/pages/gpu/GpuCapabilities.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useRef } from "react";
+import { Link } from "react-router-dom";
 import { Eyebrow, CP, CT, H5 } from "@/components/Texts";
 import { IoArrowBackOutline, IoArrowForwardOutline } from "react-icons/io5";
 
@@ -82,12 +83,12 @@ export function GpuCapabilities() {
                   </div>
 
                   <div className="flex items-center gap-x-4 mt-3">
-                    <a
+                    <Link
-                      href="#"
+                      to="/gpu#gpu-architecture"
                       className="inline-flex items-center gap-1 text-cyan-500 hover:text-cyan-400 text-sm font-medium mr-auto"
                     >
                       Learn more →
-                    </a>
+                    </Link>
 
                     <button
                       onClick={scrollLeft}

src/pages/gpu/GpuHero.tsx

@@ -22,10 +22,10 @@ export function GpuHero() {
               Access GPUs across the Mycelium mesh without waitlists, inflated pricing, or centralized control. Run inference, training, and compute workloads where they make sense: cloud, edge, or on your own hardware.
             </p>
             <div className="mt-10 flex items-center gap-x-6">
-              <Button to="#gpu-getting-started" as="a" variant="solid" color="cyan">
+              <Button to="/gpu#gpu-getting-started" variant="solid" color="cyan">
                 How it works
               </Button>
-              <Button to="#gpu-architecture" as="a" variant="outline">
+              <Button to="/gpu#gpu-architecture" variant="outline">
                 Explore Docs <span aria-hidden="true">→</span>
               </Button>
             </div>

src/pages/gpu/GpuOverview.tsx

@@ -32,7 +32,7 @@ const coreFeatures = [
 
 export function GpuOverview() {
   return (
-    <section className="bg-[#121212] w-full max-w-8xl mx-auto">
+    <section id="gpu-getting-started" className="bg-[#121212] w-full max-w-8xl mx-auto">
 
       {/* ✅ Top spacer */}
       <div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-800 bg-transparent" />

src/pages/pods/CallToAction.tsx

@@ -14,6 +14,14 @@ const benefits = [
 
 
 export function CallToAction() {
+  const handleJoinWaitlist = () => {
+    if (typeof window !== 'undefined' && typeof (window as any).ml_account === 'function') {
+      ;(window as any).ml_account('webforms', '6108375', 'l9m8g1', 'show')
+    } else {
+      console.log('MailerLite script (ml_account) not fully loaded or not in browser.')
+    }
+  }
+
   return (
     <section className="relative overflow-hidden bg-[#121212] ">
       {/* ✅ Top horizontal line with spacing */}
@@ -83,13 +91,13 @@ export function CallToAction() {
             {/* ✅ Two cards, stacked center with spacing */}
             <div className="mt-6 flex flex-wrap justify-center gap-x-8 gap-y-8">
               <div className="flex flex-col items-center text-center max-w-xs">
-                <Button to="#" variant="solid" color="cyan" className="mt-4">
+                <Button variant="solid" color="cyan" className="mt-4" onClick={handleJoinWaitlist}>
                   Join the Waitlist
                 </Button>
               </div>
 
               <div className="flex flex-col items-center text-center max-w-xs">
-                <Button to="#" variant="outline" color="white" className="mt-4">
+                <Button to="/pods#pods-learn-more" variant="outline" color="white" className="mt-4">
                   Learn More
                 </Button>
               </div>

src/pages/pods/Homepod.tsx

@@ -45,7 +45,7 @@ export default function Homepod() {
               >
                 Join the Waitlist
               </Button>
-              <Button to="#" variant="outline">
+              <Button to="/pods#pods-learn-more" variant="outline">
                 Explore Docs
               </Button>
             </div>

src/pages/pods/PodsFeatures.tsx

@@ -222,7 +222,7 @@ const icons = [
 
 export function PodsFeatures() {
   return (
-    <section className="w-full max-w-8xl mx-auto bg-transparent">
+    <section id="pods-learn-more" className="w-full max-w-8xl mx-auto bg-transparent">
       {/* Top horizontal spacing */}
       <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>
       <div className="w-full border-t border-l border-r border-gray-100" />

src/pages/storage/CallToAction.tsx

@@ -64,8 +64,7 @@ export function CallToAction() {
 
               <div className="flex flex-col items-center text-center max-w-xs">
                 <Button 
-                  to="#storage-developer-experience"
+                  to="/storage#storage-developer-experience"
-                  as="a"
                   variant="outline" 
                   color="white" 
                   className="mt-4"

src/pages/storage/StorageArchitecture.tsx

@@ -24,7 +24,7 @@ export function StorageArchitecture() {
   const [active, setActive] = useState(0);
 
   return (
-    <section className="bg-[#121212] w-full max-w-8xl mx-auto">
+    <section id="storage-developer-experience" className="bg-[#121212] w-full max-w-8xl mx-auto">
       {/* ✅ Top horizontal line with spacing */}
       <div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-800" />
       <div className="w-full border-t border-l border-r border-gray-800" />

src/pages/storage/StorageCapabilitiesNew.tsx

@@ -41,7 +41,7 @@ export function StorageCapabilitiesNew() {
   const scrollRight = () => sliderRef.current?.scrollBy({ left: 400, behavior: "smooth" });
 
   return (
-    <section className="bg-[#121212] w-full max-w-8xl mx-auto">
+    <section id="storage-features" className="bg-[#121212] w-full max-w-8xl mx-auto">
       <div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-800" />
       <div className="w-full border-t border-l border-r border-gray-800" />
 

src/pages/storage/StorageHero.tsx

@@ -22,12 +22,11 @@ export function StorageHero() {
               Store, replicate, and serve data across the global mesh with encrypted, quantum safe, verifiable storage you control at the infrastructure layer.
             </p>
             <div className="mt-10 flex items-center gap-x-6">
-              <Button to="#storage-features" as="a" variant="solid" color="cyan">
+              <Button to="/storage#storage-features" variant="solid" color="cyan">
                 How It Works
               </Button>
               <Button
-                to="#storage-developer-experience"
+                to="/storage#storage-developer-experience"
-                as="a"
                 variant="outline"
               >
                 Explore Docs <span aria-hidden="true">→</span>