feat: add Pods capabilities and how-it-works sections

- Created PodsCapabilities component showcasing four key features (communicate, organization, manage, storage) with icon-based layout
- Added PodsHow section with CloudPods animation demonstrating pod-to-pod communication concept
- Implemented animated CloudPods visualization with inter-cluster data flow and pulsing effects

src/pages/pods/PodsHow.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { Eyebrow, H3, P } from "@/components/Texts";
+import CloudPods from "./animations/CloudPods";
+
+export function PodsHow() {
+  return (
+    <section className="relative w-full bg-[#121212] overflow-hidden">
+      {/* ✅ Top horizontal line with spacing */}
+      <div className="max-w-7xl bg-[#121212] 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" />
+
+      <div className="max-w-7xl mx-auto px-6 lg:px-8 py-12 border border-t-0 border-b-0 border-gray-800 bg-[#111111] overflow-hidden">
+
+        {/* ✅ Two-column layout */}
+        <div className="flex flex-col lg:flex-row-reverse gap-16">
+
+          {/* ✅ Right side animation */}
+          <div className="w-full lg:w-1/2">
+            <CloudPods />
+          </div>
+
+          {/* ✅ Left side content */}
+          <div className="w-full lg:w-1/2 text-white">
+            <Eyebrow color="accent" className="">
+              How it works
+            </Eyebrow>
+            <H3 color="white" className="mt-6">
+              What Living in a Pod Feels Like
+            </H3>
+            <P className="max-w-3xl text-gray-400 mt-6">
+              When you use Mycelium, everything — your messages, calls, files — runs directly from your Pod.
+            </P>
+            <P className="max-w-3xl text-gray-400 mt-4">
+              It’s your personal digital hub:
+              When you message someone, it goes Pod to Pod, not through a central server.
+              When you host a call, it runs on your Pod — no third-party data centers.
+            </P>
+            <P className="max-w-3xl text-gray-400 mt-4">
+              When you save a file, it stays on your Pod, encrypted and always available.
+              No one else can read it, rent it, or switch it off.
+            </P>
+            <P className="max-w-3xl text-gray-400 mt-4">
+              You don’t log in to the internet — you are part of it.
+            </P>
+          </div>
+        </div>
+      </div>
+      <div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-800" />
+      <div className="w-full border-b border-gray-800" />
+    </section>
+  );
+}