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/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>
+  )
+}