feat: redesign pods page with enhanced UI and animations

- Replaced HomeBlink with HomeAurora component for improved visual experience
- Added PodCapabilities horizontal slider with interactive navigation controls
- Created PodsFeatures section showcasing use cases with hover animations
- Updated PodsHow layout with bullet points and new PodsFlow animation component

src/pages/pods/PodCapabilities.tsx

@@ -0,0 +1,151 @@
+"use client";
+
+import { useRef } from "react";
+import { Eyebrow, CP, CT, H4 } from "@/components/Texts";
+import { IoArrowBackOutline, IoArrowForwardOutline } from "react-icons/io5";
+
+import {
+  HomeModernIcon,
+  CpuChipIcon,
+  ServerStackIcon,
+  ShieldCheckIcon,
+} from "@heroicons/react/24/solid";
+
+const capabilities = [
+  {
+    isIntro: true,
+    eyebrow: "CAPABILITIES",
+    title: "What is a Pod?",
+    description: "",
+  },
+
+  {
+    title: "Your private digital home on the decentralized internet",
+    description:
+      "Your Pod is a private digital home where apps, data, and identity live independently of Big Tech and central servers.",
+    icon: (
+      <div className="flex items-start justify-start">
+        <HomeModernIcon className="h-12 w-12 text-cyan-400" />
+      </div>
+    ),
+  },
+
+  {
+    title: "An always-on space you fully control",
+    description:
+      "A dedicated, always-on environment you fully command — your own sovereign slice of the network that never goes offline.",
+    icon: (
+      <div className="flex items-start justify-start">
+        <CpuChipIcon className="h-12 w-12 text-cyan-400" />
+      </div>
+    ),
+  },
+
+  {
+    title: "Runs communication, storage, and collaboration tools",
+    description:
+      "Runs your communication, storage, and collaboration tools in a secure local environment without reliance on outside platforms.",
+    icon: (
+      <div className="flex items-start justify-start">
+        <ServerStackIcon className="h-12 w-12 text-cyan-400" />
+      </div>
+    ),
+  },
+
+  {
+    title: "Fully encrypted, federated peer-to-peer network",
+    description:
+      "Encrypted, federated peer-to-peer networking that links your Pod directly with trusted devices without intermediaries.",
+    icon: (
+      <div className="flex items-start justify-start">
+        <ShieldCheckIcon className="h-12 w-12 text-cyan-400" />
+      </div>
+    ),
+  },
+];
+
+export function PodCapabilities() {
+  const sliderRef = useRef<HTMLUListElement>(null);
+
+  const scrollLeft = () =>
+    sliderRef.current?.scrollBy({ left: -400, behavior: "smooth" });
+
+  const scrollRight = () =>
+    sliderRef.current?.scrollBy({ left: 400, behavior: "smooth" });
+
+  return (
+    <section className="bg-[#121212] w-full max-w-8xl mx-auto">
+      <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="relative mx-auto max-w-7xl border border-t-0 border-b-0 border-gray-800 bg-[#111111] overflow-hidden">
+        {/* Horizontal Slider */}
+        <ul
+          ref={sliderRef}
+          className="flex overflow-x-auto snap-x snap-mandatory scroll-smooth no-scrollbar"
+        >
+          {capabilities.map((item, idx) => (
+            <li
+              key={idx}
+              className={`snap-start shrink-0 w-[85%] sm:w-[50%] lg:w-[33%] border border-gray-800 p-10 relative ${
+                item.isIntro ? "" : "bg-[#111]/60"
+              }`}
+            >
+              {/* INTRO CARD */}
+              {item.isIntro ? (
+                <div className="flex flex-col justify-between h-full">
+                  <div>
+                    <Eyebrow>{item.eyebrow}</Eyebrow>
+                    <H4 className="text-white mt-0 max-w-lg">{item.title}</H4>
+                    <p className="text-gray-400 lg:text-lg text-sm leading-relaxed">
+                      {item.description}
+                    </p>
+                  </div>
+
+                  {/* Arrow controls */}
+                  <div className="flex items-center gap-x-4 mt-2">
+                    <button
+                      onClick={scrollLeft}
+                      className="h-8 w-8 flex items-center justify-center border border-gray-800 rounded-md hover:border-cyan-500 transition-colors"
+                    >
+                      <IoArrowBackOutline className="text-gray-300" size={16} />
+                    </button>
+
+                    <button
+                      onClick={scrollRight}
+                      className="h-8 w-8 flex items-center justify-center border border-gray-800 rounded-md hover:border-cyan-500 transition-colors"
+                    >
+                      <IoArrowForwardOutline
+                        className="text-gray-300"
+                        size={16}
+                      />
+                    </button>
+                  </div>
+                </div>
+              ) : (
+                <>
+                  {/* LEFT-ALIGNED ICON */}
+                  {item.icon}
+
+                  <br />
+
+                  {/* LEFT-ALIGNED TEXT */}
+                  <CT className="font-semibold leading-tight text-white text-left">
+                    {item.title}
+                  </CT>
+
+                  <CP className="mt-2 text-gray-400  text-left">
+                    {item.description}
+                  </CP>
+                </>
+              )}
+            </li>
+          ))}
+        </ul>
+      </div>
+
+      <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" />
+    </section>
+  );
+}