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/PodsCapabilities.tsx

@@ -0,0 +1,92 @@
+import {
+  ChatBubbleLeftRightIcon,
+  CalendarDaysIcon,
+  UserGroupIcon,
+  ShieldCheckIcon,
+} from '@heroicons/react/24/solid'
+
+import { Eyebrow, H3, P } from '@/components/Texts'
+
+export function PodsCapabilities() {
+  return (
+    <section className="w-full max-w-8xl mx-auto bg-[#121212]">
+
+      {/* ✅ Top horizontal line with spacing */}
+      <div className="max-w-7xl bg-transparent 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 content */}
+      <div className="mx-auto max-w-7xl px-6 bg-[#111111] lg:px-8 grid grid-cols-1 lg:grid-cols-2 gap-20 py-12 border border-t-0 border-b-0 border-gray-800">
+        
+        {/* ✅ LEFT SIDE — Title + Intro */}
+        <div className="max-w-xl ">
+          <Eyebrow>What You Can Do</Eyebrow>
+
+          <H3  className="mt-6 text-white">
+            Pods Features
+          </H3>
+
+          <P className="mt-6 text-gray-200">
+            Access everything from any device — your data follows you, not the other way around.
+            💡 It’s like having your own tiny cloud that belongs only to you.
+          </P>
+        </div>
+
+        {/* ✅ RIGHT SIDE — 4 stacked features */}
+        <div className="space-y-8">
+
+          {/* 1 — Communicate */}
+          <div>
+            <h3 className="text-lg font-semibold text-white flex items-center">
+              <ChatBubbleLeftRightIcon className="h-6 w-6 text-cyan-500 mr-3" />
+              Communicate
+            </h3>
+            <p className="mt-2 text-gray-200 max-w-2xl">
+              Message, call, and share files privately — no tracking or ads.
+            </p>
+            <div className="mt-8 h-px w-full bg-cyan-500/50" />
+          </div>
+
+          {/* 2 — Organization */}
+          <div>
+            <h3 className="text-lg font-semibold text-white flex items-center">
+              <CalendarDaysIcon className="h-6 w-6 text-cyan-500 mr-3" />
+              Organization
+            </h3>
+            <p className="mt-2 text-gray-200 max-w-2xl">
+              Organize your calendar and meetings inside your own space.
+            </p>
+            <div className="mt-8 h-px w-full bg-cyan-500/50" />
+          </div>
+
+          {/* 3 — Manage */}
+          <div>
+            <h3 className="text-lg font-semibold text-white flex items-center">
+              <UserGroupIcon className="h-6 w-6 text-cyan-500 mr-3" />
+              Manage
+            </h3>
+            <p className="mt-2 text-gray-200 max-w-2xl">
+              Create small communities or teams that interact directly, Pod-to-Pod.
+            </p>
+            <div className="mt-8 h-px w-full bg-cyan-500/50" />
+          </div>
+
+          {/* 4 — Storage */}
+          <div>
+            <h3 className="text-lg font-semibold text-white flex items-center">
+              <ShieldCheckIcon className="h-6 w-6 text-cyan-500 mr-3" />
+              Storage
+            </h3>
+            <p className="mt-2 text-gray-200 max-w-2xl">
+              Store data safely with Quantum Safe File System (QSFS) built in.
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {/* ✅ Bottom horizontal line with spacing */}
+      <div className="w-full border-b border-gray-800" />
+      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-800"></div>
+    </section>
+  )
+}