From 8276ede9fd5c80cfda9f5a201c07e76f3cc44048 Mon Sep 17 00:00:00 2001
From: sasha-astiadi <sasha@incubaid.com>
Date: Mon, 10 Nov 2025 15:33:04 +0100
Subject: [PATCH] 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                |  4 +++-
 src/components/Footer.tsx  |  3 +++
 src/components/Header.tsx  | 13 +++++++++++++
 src/pages/pods/Homepod.tsx | 34 ++++++++++++++++++++++++++++++++++
 4 files changed, 53 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/pods/Homepod.tsx

diff --git a/src/App.tsx b/src/App.tsx
index a2e1173..505a29c 100644
--- a/src/App.tsx
+++ b/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>
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 1656af3..08df4b5 100644
--- a/src/components/Footer.tsx
+++ b/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">
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 4c64d0e..47c36d6 100644
--- a/src/components/Header.tsx
+++ b/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
diff --git a/src/pages/pods/Homepod.tsx b/src/pages/pods/Homepod.tsx
new file mode 100644
index 0000000..066321e
--- /dev/null
+++ b/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>
+  )
+}