feat: add Pods page with navigation links

- Added new Pods page route with lazy loading
- Integrated Pods navigation links in header (desktop and mobile) and footer

src/App.tsx

@@ -10,6 +10,7 @@ const DownloadPage = lazy(() => import('./pages/download/DownloadPage'));
 const ComputePage = lazy(() => import('./pages/compute/ComputePage'));
 const StoragePage = lazy(() => import('./pages/storage/StoragePage'));
 const GpuPage = lazy(() => import('./pages/gpu/GpuPage'));
+const PodsPage = lazy(() => import('./pages/pods/PodsPage'));
 
 function App() {
   return (
@@ -24,7 +25,8 @@ function App() {
             <Route path="download" element={<DownloadPage />} />
             <Route path="compute" element={<ComputePage />} />
             <Route path="storage" element={<StoragePage />} />
-            <Route path="gpu" element={<GpuPage />} />
+                        <Route path="gpu" element={<GpuPage />} />
+            <Route path="pods" element={<PodsPage />} />
           </Route>
         </Routes>
       </Suspense>

src/components/Footer.tsx

@@ -27,6 +27,9 @@ export function Footer() {
               <Link to="/agents" className="text-sm text-gray-700 hover:text-cyan-500 transition-colors">
                 Agents
               </Link>
+              <Link to="/pods" className="text-sm text-gray-700 hover:text-cyan-500 transition-colors">
+                Pods
+              </Link>
             </nav>
           </div>
           <div className="group relative -mx-4 flex items-center self-stretch p-4 transition-colors hover:bg-gray-100 sm:self-auto sm:rounded-2xl lg:mx-0 lg:self-auto lg:p-6">

src/components/Header.tsx

@@ -64,6 +64,12 @@ export function Header() {
               >
                 Agents
               </Link>
+              <Link
+                to="/pods"
+                className="text-base/7 tracking-tight text-gray-700 hover:text-cyan-500 transition-colors"
+              >
+                Pods
+              </Link>
             </div>
           </div>
           <div className="flex items-center gap-6">
@@ -142,6 +148,13 @@ export function Header() {
                 >
                   Agents
                 </Link>
+                <Link
+                  to="/pods"
+                  className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
+                  onClick={() => setMobileMenuOpen(false)}
+                >
+                  Pods
+                </Link>
               </div>
               <div className="py-6">
                 <Button

src/pages/pods/Homepod.tsx

@@ -0,0 +1,34 @@
+import { H3, Eyebrow } from "@/components/Texts"
+
+export default function Homepod() {
+  return (
+    <div className="">
+      {/* Boxed container */}
+      <div
+        className="relative mx-auto max-w-7xl border border-t-0 border-b-0 border-gray-100 bg-white overflow-hidden bg-contain bg-right bg-no-repeat"
+        style={{ backgroundImage: "url('/images/pods.png')", backgroundSize: "contain" }}
+      >
+        {/* Inner padding */}
+        <div className="px-6 py-16 lg:py-16">
+          <div className="max-w-2xl lg:pl-6">
+            <Eyebrow>
+              MYCELIUM PODS
+            </Eyebrow>
+            <H3 className="mt-4">
+              Your Private Space in the New Internet
+            </H3>
+            <p className="mt-6 text-lg">
+             Imagine having your own corner of the internet — private, secure, and always online.
+             A Pod is your personal digital space on the Mycelium Network.
+             It’s where your conversations, files, and digital tools live — owned by you, connected to others directly.
+            </p>
+          </div>
+        </div>
+        
+      </div>
+      {/* ✅ Bottom horizontal line with spacing */}
+      <div className="w-full border-b  border-gray-100" />
+      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>
+    </div>
+  )
+}