feat: add comprehensive Pods landing page sections

- Created new sections including benefits grid, federation design, upcoming features, and call-to-action
- Added pricing tiers component with three Pod subscription levels
- Updated existing sections with refined messaging and improved visual hierarchy

src/pages/pods/CallToAction.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import { Button } from "@/components/Button";
+import { Container } from "@/components/Container";
+
+export function CallToAction() {
+  return (
+    <section className="relative overflow-hidden bg-[#121212] ">
+      {/* ✅ Top horizontal line with spacing */}
+      <div className="max-w-7xl bg-[#111111] mx-auto py-6 border border-t-0 border-b-0 border-gray-800"></div>
+      <div className="w-full border-t border-l border-r border-gray-800" />
+
+      {/* ✅ Main boxed area */}
+      <div
+        id="get-started"
+        className="relative py-18 max-w-7xl mx-auto bg-[#111111] border border-t-0 border-b-0 border-gray-800"
+      >
+        <Container className="relative">
+          <div className="mx-auto max-w-3xl text-center">
+            <h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-white sm:text-4xl">
+              Join the First Wave
+            </h2>
+
+            <p className="mt-6 text-lg text-gray-300">
+              Pods are launching soon. Be among the first to claim your private space in the new internet.
+            </p>
+
+            {/* ✅ Two cards, stacked center with spacing */}
+            <div className="mt-10 flex flex-wrap justify-center gap-x-10 gap-y-8">
+              <div className="flex flex-col items-center text-center max-w-xs">
+                <Button to="#" variant="solid" color="cyan" className="mt-4">
+                  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">
+                  Deploy Pods in Your Community
+                </Button>
+              </div>
+            </div>
+          </div>
+        </Container>
+      </div>
+
+      {/* ✅ Bottom horizontal line with spacing */}
+      <div className="w-full border-b border-gray-800" />
+      <div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-800 bg-transparent" />
+    </section>
+  );
+}

src/pages/pods/PodsBenefits.tsx

@@ -0,0 +1,74 @@
+import { Small } from '@/components/Texts'
+
+const highlights = [
+  {
+    label: 'Identity',
+    title: 'Identity built on cryptographic keys',
+    description:
+      'combined with familiar logins for everyday access',
+  },
+  {
+    label: 'Network',
+    title: 'Runs on the Mycelium Network',
+    description:
+      'not on centralized cloud servers',
+  },
+  {
+    label: 'Privacy',
+    title: 'No data collection or tracking',
+    description:
+      'Your Pod decides what to share',
+  },
+  {
+    label: 'Resilience',
+    title: 'No single point of failure',
+    description:
+      'If one node goes offline, others keep you connected',
+  },
+  {
+    label: 'Scalability',
+    title: 'Expandable architecture',
+    description:
+      'Each Pod can host your personal AI Agent and scale with your needs',
+  },
+]
+
+export function PodsBenefits() {
+  return (
+    <section className="bg-[#121212] w-full max-w-8xl mx-auto">
+      {/* Top line */}
+      <div className="max-w-7xl py-6  mx-auto border border-t-0 border-b-0 border-gray-800" />
+      <div className="w-full border-t border-l border-r border-gray-800" />
+
+      <div className="bg-[#121212] w-full max-w-7xl mx-auto border border-t-0 border-b-0 border-gray-800">
+        <div className="grid lg:grid-cols-5">
+          {highlights.map((item) => (
+            <div
+              key={item.title}
+              className="group relative overflow-hidden border border-white/10 bg-white/4 p-8 backdrop-blur-sm transition hover:border-cyan-300/50 hover:bg-white/8"
+            >
+              <div className="absolute inset-0 bg-linear-to-br from-cyan-500/0 via-white/5 to-cyan-300/20 opacity-0 transition group-hover:opacity-100" />
+
+              <div className="relative">
+                <Small className="text-xs uppercase tracking-[0.16em] text-cyan-200">
+                  {item.label}
+                </Small>
+
+                <h3 className="mt-4 text-lg font-semibold text-white">
+                  {item.title}
+                </h3>
+
+                <p className="mt-4 text-sm leading-relaxed text-gray-300">
+                  {item.description}
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <div className="w-full border-b border-gray-800 bg-[#121212]" />
+      <div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-800" />
+    </section>
+  )
+}

src/pages/pods/PodsComing.tsx

@@ -0,0 +1,95 @@
+import {
+  ChatBubbleLeftRightIcon,
+  CalendarDaysIcon,
+  UsersIcon,
+  CpuChipIcon,
+} from '@heroicons/react/24/solid'
+import { Button } from '@/components/Button'
+import { Eyebrow, H4, P } from '@/components/Texts'
+
+export function PodsComing() {
+  return (
+    <section className="w-full max-w-8xl mx-auto bg-white">
+
+      {/* Top horizontal line */}
+      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-200" />
+      <div className="w-full border-t border-l border-r border-gray-200" />
+
+      {/* Main content */}
+      <div className="mx-auto max-w-7xl px-6 bg-white lg:px-8 grid grid-cols-1 lg:grid-cols-2 gap-20 py-12 border border-t-0 border-b-0 border-gray-200">
+        
+        {/* LEFT SIDE – Title + Intro */}
+        <div className="max-w-xl">
+          <Eyebrow className="text-cyan-600">COMING SOON</Eyebrow>
+
+          <H4 className="mt-6 text-gray-900">
+            Be Among The First
+          </H4>
+
+          <P className="mt-6 text-gray-700">
+            The first Pods are launching soon.
+10,000 early Pods will be available for early adopters. Next, Pods will support peer-to-peer AI Agents that live inside your environment.
+Your own AI, powered by your data without any data leaks.
+          </P>
+        </div>
+
+        {/* RIGHT SIDE — 4 upcoming features */}
+        <div className="space-y-10">
+
+          {/* 1 — Private Chat & Calls */}
+          <div>
+            <h3 className="text-lg font-semibold text-gray-900 flex items-center">
+              <ChatBubbleLeftRightIcon className="h-6 w-6 text-cyan-600 mr-3" />
+              Private Chat & Calls
+            </h3>
+            <p className="mt-2 text-gray-700 max-w-2xl">
+              Peer-to-peer conversations and calling routed directly between Pods.
+            </p>
+            <div className="mt-8 h-px w-full bg-cyan-200" />
+          </div>
+
+          {/* 2 — Calendar & File Sync */}
+          <div>
+            <h3 className="text-lg font-semibold text-gray-900 flex items-center">
+              <CalendarDaysIcon className="h-6 w-6 text-cyan-600 mr-3" />
+              Calendar & File Sync
+            </h3>
+            <p className="mt-2 text-gray-700 max-w-2xl">
+              Your schedules, documents, and files — synced across your Pods with no central cloud.
+            </p>
+            <div className="mt-8 h-px w-full bg-cyan-200" />
+          </div>
+
+          {/* 3 — Secure Team Spaces */}
+          <div>
+            <h3 className="text-lg font-semibold text-gray-900 flex items-center">
+              <UsersIcon className="h-6 w-6 text-cyan-600 mr-3" />
+              Secure Team Spaces
+            </h3>
+            <p className="mt-2 text-gray-700 max-w-2xl">
+              Create shared Pods for teams, communities, or groups — fully encrypted, fully sovereign.
+            </p>
+            <div className="mt-8 h-px w-full bg-cyan-200" />
+          </div>
+
+          {/* 4 — Early AI Agent Integration */}
+          <div>
+            <h3 className="text-lg font-semibold text-gray-900 flex items-center">
+              <CpuChipIcon className="h-6 w-6 text-cyan-600 mr-3" />
+              Early AI Agent Integration 
+              <span className="ml-2 text-xs text-gray-400">🕒</span>
+            </h3>
+            <p className="mt-2 text-gray-700 max-w-2xl">
+              Host your personal AI agent inside your Pod — private, local-first, and fully under your control.
+            </p>
+          </div>
+
+        </div>
+      </div>
+
+      {/* Bottom horizontal line */}
+      <div className="w-full border-b border-gray-200" />
+      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-200" />
+    </section>
+  )
+}

src/pages/pods/PodsDesign.tsx

@@ -0,0 +1,121 @@
+'use client'
+
+import {
+  Disclosure,
+  DisclosureButton,
+  DisclosurePanel,
+} from '@headlessui/react'
+import { MinusIcon, PlusIcon } from '@heroicons/react/24/outline'
+
+import { Eyebrow, H3, H4 } from "@/components/Texts"
+
+
+const product = {
+  subtitle: "Federation",
+  name: "Runs on Your Own Infrastructure",
+  description: `
+    <p>
+      Each Pod lives on your own hardware or on trusted local nodes in the Mycelium Network.
+There is no central cloud and no company in the middle. You are not uploading your life to the cloud. You are running it yourself.
+    </p>
+  `,
+
+  details: [
+    {
+      name: "Your Data Lives on Your Pods",
+      description:
+        "Full control of where your data is stored and how it’s shared.",
+    },
+    {
+      name: "Direct Pod-to-Pod Networking",
+      description:
+        "Direct connections between Pods for faster, private communication.",
+    },
+    {
+      name: "No One Can Spy or Shut You Down",
+      description:
+        "Independence from corporate servers or cloud outages.",
+    },
+    {
+      name: "Resilient Even if Nodes Disconnect",
+      description:
+        "Continuous availability even if one node disconnects.",
+    },
+  ],
+}
+
+
+export function PodsDesign() {
+  return (
+    <div className="bg-white text-gray-900">
+      {/* TOP LINE */}
+      <div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-200" />
+      <div className="w-full border-t border-l border-r border-gray-200" />
+
+      <main className="mx-auto max-w-7xl px-6 lg:px-12 py-12 border border-t-0 border-b-0 border-gray-200">
+        <div className="mx-auto max-w-2xl lg:max-w-none">
+
+          <div className="lg:grid lg:grid-cols-5 lg:items-start lg:gap-x-8">
+
+            {/* IMAGE */}
+            <div className="lg:col-span-2 lg:mt-8 mt-2">
+              <img
+                alt="Mycelium Federation"
+                src="/images/cloudhosting.webp"
+                className="aspect-square w-full object-cover rounded-md"
+              />
+            </div>
+
+            {/* PRODUCT INFO */}
+            <div className="mt-8 px-4 sm:px-0 lg:mt-0 lg:col-span-3">
+
+              <Eyebrow className="text-cyan-600">
+                {product.subtitle}
+              </Eyebrow>
+
+              <H4 className="text-gray-900">
+                {product.name}
+              </H4>
+
+              <div
+                className="mt-4 text-gray-700 text-xl"
+                dangerouslySetInnerHTML={{ __html: product.description }}
+              />
+
+              {/* DETAILS ACCORDION */}
+              <section className="mt-6">
+                <div className="divide-y divide-gray-200 border-t border-cyan-600/60">
+                  {product.details.map((detail) => (
+                    <Disclosure key={detail.name} as="div">
+                      <H3>
+                        <DisclosureButton className="group flex w-full items-center justify-between py-6 text-left">
+                          <span className="text-lg font-medium text-gray-900">
+                            {detail.name}
+                          </span>
+                          <span className="ml-6 flex items-center">
+                            <PlusIcon className="block h-6 w-6 text-gray-500 group-open:hidden" />
+                            <MinusIcon className="hidden h-6 w-6 text-cyan-600 group-open:block" />
+                          </span>
+                        </DisclosureButton>
+                      </H3>
+
+                      <DisclosurePanel className="pb-6">
+                        <p className="text-gray-600 text-base">
+                          {detail.description}
+                        </p>
+                      </DisclosurePanel>
+                    </Disclosure>
+                  ))}
+                </div>
+              </section>
+            </div>
+          </div>
+        </div>
+      </main>
+
+      {/* BOTTOM LINE */}
+      <div className="w-full border-b border-gray-200" />
+      <div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-200" />
+    </div>
+  )
+}

src/pages/pods/PodsFeatures.tsx

@@ -85,8 +85,7 @@ export function PodsFeatures() {
           </p>
 
           <p className="mt-6 text-lg text-gray-600">
-            A Pod gives you a secure digital home where communication, storage,
+            Pods use open standard protocols like Matrix and Nostr. Everything runs directly through the Mycelium Network.
-            identity, and collaboration remain fully under your control. 
           </p>
         </div>
 

src/pages/pods/PodsHow.tsx

@@ -26,22 +26,22 @@ export function PodsHow() {
               How it works
             </Eyebrow>
             <H3 color="white" className="mt-6">
-              Living in a Pod 
+              A Pod in Action
             </H3>
             <P className="max-w-4xl text-gray-400 mt-6">
-              When you use Mycelium, everything — your messages, calls, files — runs directly from your Pod.
+              When you use Mycelium, everything runs directly from your Pod.
             </P>
-            <ul className="max-w-4xl text-gray-400 mt-6 space-y-3 ml-4">
+            <ul className="max-w-4xl text-gray-400 mt-6 space-y-2 ml-6">
-              <li className="flex items-start gap-3">
+              <li className="flex items-start gap-2">
-                <span className="mt-1.5 inline-block size-2 rounded-full bg-cyan-400" />
+                <span className="mt-1 inline-block size-2 rounded-full bg-cyan-400" />
                 <span>When you message someone, it goes Pod to Pod, not through a central server.</span>
               </li>
               <li className="flex items-start gap-3">
-                <span className="mt-1.5 inline-block size-2 rounded-full bg-cyan-400" />
+                <span className="mt-1 inline-block size-2 rounded-full bg-cyan-400" />
                 <span>When you host a call, it runs on your Pod — no third-party data centers.</span>
               </li>
               <li className="flex items-start gap-3">
-                <span className="mt-1.5 inline-block size-2 rounded-full bg-cyan-400" />
+                <span className="mt-1 inline-block size-2 rounded-full bg-cyan-400" />
                 <span>When you save a file, it stays on your Pod, encrypted and always available.</span>
               </li>
             </ul>

src/pages/pods/PodsPage.tsx

@@ -2,6 +2,11 @@ import Homepod from './Homepod';
 import { PodCapabilities } from './PodCapabilities';
 import { PodsHow } from './PodsHow';
 import { PodsFeatures } from './PodsFeatures';
+import { PodsDesign } from './PodsDesign';
+import { PodsBenefits } from './PodsBenefits';
+import { PodsComing } from './PodsComing';
+import { PodsPricing } from './PodsPricing';
+import { CallToAction } from './CallToAction';
 
 const PodsPage = () => {
   return (
@@ -10,6 +15,10 @@ const PodsPage = () => {
             <PodCapabilities />
             <PodsFeatures />
             <PodsHow />
+            <PodsDesign />
+            <PodsBenefits />
+            <PodsComing />
+            <CallToAction />
     </>
   );
 };

src/pages/pods/PodsPricing.tsx

@@ -0,0 +1,143 @@
+import { CheckIcon } from "@heroicons/react/20/solid";
+import { Eyebrow, H3, H4 } from "@/components/Texts";
+
+const tiers = [
+  {
+    name: "Pod Basic",
+    id: "pod-basic",
+    href: "#",
+    priceMonthly: "€3",
+    description:
+      "A sovereign starter Pod with private communication, storage, and local-first identity.",
+    features: [
+      "1 private space (chat, calls, storage)",
+      "Local-first identity (no sign-up)",
+      "Peer-to-peer encrypted networking",
+    ],
+    mostPopular: false,
+  },
+  {
+    name: "Pod Plus",
+    id: "pod-plus",
+    href: "#",
+    priceMonthly: "€5",
+    description:
+      "A multi-device Pod with team spaces and expanded tools for encrypted collaboration.",
+    features: [
+      "Team spaces & multi-device sync",
+      "Shared encrypted folders",
+      "Priority relay paths for roaming devices",
+    ],
+    mostPopular: true,
+  },
+  {
+    name: "Pod Pro",
+    id: "pod-pro",
+    href: "#",
+    priceMonthly: "€8",
+    description:
+      "Advanced Pod with AI Agent support and the upcoming private automation layer.",
+    features: [
+      "AI Agent layer (coming soon)",
+      "Federated compute support",
+      "Private AI memory stored on your Pod",
+    ],
+    mostPopular: false,
+  },
+];
+
+export function PodsPricing() {
+  return (
+    <div className="bg-[#121212] text-white ">
+
+      {/* Top horizontal line */}
+      <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" />
+
+      <div className="mx-auto max-w-7xl px-6 lg:px-8 py-12 border border-t-0 border-b-0 border-gray-800">
+
+        {/* Header */}
+        <div className="mx-auto max-w-4xl text-center">
+          <Eyebrow>PLANS</Eyebrow>
+          <H3 className="mt-2 text-white">
+            Choose your Pod
+          </H3>
+        </div>
+
+        <p className="mx-auto mt-6 max-w-2xl text-center text-lg text-gray-400 sm:text-xl">
+          Personal, sovereign cloud environments—priced for everyone.
+        </p>
+
+        {/* Pricing grid */}
+        <div className="isolate mx-auto mt-16 grid max-w-md grid-cols-1 gap-y-8 
+                        sm:mt-20 lg:max-w-none lg:grid-cols-3 lg:mx-0">
+
+          {tiers.map((tier, i) => (
+            <div
+              key={tier.id}
+              className={`flex flex-col justify-between rounded-3xl p-8 xl:p-10 
+                         bg-[#1a1a1a]/60 border border-gray-800 hover:border-cyan-500 transition
+                         ${tier.mostPopular ? "lg:z-10" : "lg:mt-8"}
+                         ${i === 0 ? "lg:rounded-r-none" : ""}
+                         ${i === tiers.length - 1 ? "lg:rounded-l-none" : ""}`}
+            >
+              <div>
+                <div className="flex items-center justify-between">
+                  <h3
+                    id={tier.id}
+                    className={`text-lg font-semibold ${
+                      tier.mostPopular ? "text-cyan-500" : "text-white"
+                    }`}
+                  >
+                    {tier.name}
+                  </h3>
+
+                  {tier.mostPopular && (
+                    <p className="rounded-full bg-cyan-500/10 px-2.5 py-1 text-xs font-semibold text-cyan-500">
+                      Most popular
+                    </p>
+                  )}
+                </div>
+
+                <p className="mt-4 text-sm text-gray-300">{tier.description}</p>
+
+                <p className="mt-6 flex items-baseline gap-x-1">
+                  <span className="text-4xl font-semibold">{tier.priceMonthly}</span>
+                  <span className="text-sm font-semibold text-gray-400">/month</span>
+                </p>
+
+                <ul className="mt-8 space-y-3 text-sm text-gray-300">
+                  {tier.features.map((feature) => (
+                    <li key={feature} className="flex gap-x-3">
+                      <CheckIcon className="h-5 w-5 flex-none text-cyan-500" />
+                      {feature}
+                    </li>
+                  ))}
+                </ul>
+              </div>
+
+              {/* CTA */}
+              <a
+                href={tier.href}
+                aria-describedby={tier.id}
+                className={`mt-8 block rounded-md px-3 py-2 text-center text-sm font-semibold
+                           focus-visible:outline-2 focus-visible:outline-offset-2
+                           ${
+                             tier.mostPopular
+                               ? "bg-cyan-500 text-white hover:bg-cyan-400 focus-visible:outline-cyan-500"
+                               : "bg-white/10 text-white hover:bg-white/20 focus-visible:outline-cyan-500"
+                           }`}
+              >
+                Choose Pod
+              </a>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Bottom horizontal line */}
+      <div className="w-full border-b border-gray-800" />
+      <div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-800" />
+    </div>
+  );
+}