feat: add cyan glow effects and new network resilience animation

- Added cyan radial glow SVG to CallToAction components across all product pages for visual consistency
- Created NoSinglePoint animation demonstrating redundant network paths and resilience against single point failures
- Updated HomeArchitecture layout to better center and display animations with improved flex positioning

src/pages/pods/PodsWhat.tsx

@@ -1,5 +1,12 @@
 "use client";
 
+import {
+  ServerIcon,
+  ShieldCheckIcon,
+  BoltIcon,
+  GlobeAltIcon,
+} from "@heroicons/react/24/solid";
+
 import { Eyebrow, H3 } from "@/components/Texts";
 
 const podCards = [
@@ -8,53 +15,38 @@ const podCards = [
     eyebrow: "Capabilities",
     title: "What is a Pod?",
     description: null,
-    image: null,
-    colSpan: "lg:col-span-3",
-    rowSpan: "lg:row-span-1",
+    icon: null,
     custom: true,
     noBorder: true,
+    colSpan: "lg:col-span-4",
   },
   {
     id: "home",
     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.",
-    image: "/images/test.png",
-    colSpan: "lg:col-span-3",
-    rowSpan: "lg:row-span-1",
-    rounded: "lg:rounded-tr-4xl max-lg:rounded-t-4xl",
-    innerRounded: "lg:rounded-tr-[calc(2rem+1px)] max-lg:rounded-t-[calc(2rem+1px)]",
+    icon: ServerIcon,
   },
   {
     id: "control",
     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.",
-    image: "/images/test.png",
-    colSpan: "lg:col-span-2",
-    rowSpan: "lg:row-span-1",
-    rounded: "lg:rounded-bl-4xl max-lg:rounded-b-4xl",
-    innerRounded: "lg:rounded-bl-[calc(2rem+1px)] max-lg:rounded-b-[calc(2rem+1px)]",
+    icon: ShieldCheckIcon,
   },
   {
     id: "tools",
     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.",
-    image: "/images/test.png",
-    colSpan: "lg:col-span-2",
-    rowSpan: "lg:row-span-1",
+    icon: BoltIcon,
   },
   {
     id: "networking",
     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.",
-    image: "/images/test.png",
-    colSpan: "lg:col-span-2",
-    rowSpan: "lg:row-span-1",
-    rounded: "lg:rounded-br-4xl max-lg:rounded-b-4xl",
-    innerRounded: "lg:rounded-br-[calc(2rem+1px)] max-lg:rounded-b-[calc(2rem+1px)]",
+    icon: GlobeAltIcon,
   },
 ];
 
@@ -62,70 +54,51 @@ export function PodsWhat() {
   return (
     <section className="relative w-full bg-[#121212] overflow-hidden">
       {/* Top horizontal line */}
-      <div className="max-w-7xl bg-[#121212] mx-auto py-6 border border-t-0 border-b-0 border-gray-800"></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-t border-l border-r border-gray-800" />
 
-      <div className="mx-auto bg-[#111111] max-w-2xl px-6 lg:max-w-7xl lg:px-10 border border-t-0 border-b-0 border-gray-800">
-        <div className="grid grid-cols-1 gap-6 pt-6 lg:grid-cols-6 lg:grid-rows-2 pb-6">
-          {podCards.map((card) => (
-            <div
-              key={card.id}
-              className={`relative ${card.colSpan} ${card.rowSpan} transition-transform duration-300 hover:scale-102 group`}
-            >
-              {/* Border wrapper for non-intro */}
-              {!card.noBorder && (
-                <div
-                  className={`absolute inset-0 rounded-md border border-gray-800 bg-[#111111] ${card.rounded} group-hover:bg-linear-to-br from-gray-900 to-gray-800`}
-                />
-              )}
+      {/* Content container */}
+      <div className="mx-auto bg-[#111111] max-w-7xl px-6 lg:px-10 border border-t-0 border-b-0 border-gray-800">
 
+        {/* 4-column grid */}
+        <div className="grid grid-cols-1 gap-12 pt-12 lg:grid-cols-4 pb-20">
+          {podCards.map((card) => {
+            const Icon = card.icon;
+
+            return (
               <div
-                className={`relative flex lg:h-90 flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] ${card.innerRounded}`}
+                key={card.id}
+                className={`${card.colSpan || ""} flex flex-col ${
+                  card.custom ? "" : "transition-transform duration-300 hover:scale-[1.02]"
+                }`}
               >
-                {/* Image */}
-                {card.image ? (
-                  <div className="lg:h-64 h-48 w-full flex items-center justify-center bg-transparent overflow-hidden">
-                    <img
-                      src={card.image}
-                      alt={card.title}
-                      className="h-full w-auto object-contain opacity-90"
-                    />
-                  </div>
+                {/* Custom Intro Card */}
+                {card.custom ? (
+                  <>
+                    <Eyebrow>{card.eyebrow}</Eyebrow>
+                    <H3 className="mt-2 text-white">{card.title}</H3>
+                  </>
                 ) : (
-                  <div className="h-48 w-full flex items-center justify-center bg-transparent" />
+                  <>
+                    {/* TITLE WITH ICON (matching the TL example) */}
+                    <dt className="flex items-center gap-x-3 text-base font-semibold text-white">
+                      <Icon className="h-6 w-6 text-cyan-500" aria-hidden="true" />
+                      {card.title}
+                    </dt>
+
+                    {/* DESCRIPTION */}
+                    <dd className="mt-4 text-base text-gray-300">
+                      {card.description}
+                    </dd>
+                  </>
                 )}
-
-                {/* Text */}
-                <div className="px-8 pt-4 pb-6">
-                  {card.custom ? (
-                    <>
-                      <Eyebrow>{card.eyebrow}</Eyebrow>
-                      <H3 className="mt-2 text-white">{card.title}</H3>
-                    </>
-                  ) : (
-                    <>
-                      <p className="mt-1 text-lg font-medium lg:text-xl tracking-tight text-white">
-                        {card.title}
-                      </p>
-                      <p className="mt-1 max-w-lg text-sm/6 text-gray-200">
-                        {card.description}
-                      </p>
-                    </>
-                  )}
-                </div>
               </div>
-
-              {/* Outer shadow */}
-              {!card.noBorder && (
-                <div
-                  className={`pointer-events-none absolute inset-0 rounded-lg shadow-sm outline outline-black/5 ${card.rounded}`}
-                />
-              )}
-            </div>
-          ))}
+            );
+          })}
         </div>
       </div>
 
+      {/* Bottom border */}
       <div className="w-full border-b border-gray-800" />
       <div className="max-w-7xl mx-auto py-6 border-x border-gray-800 border-t-0 border-b-0" />
     </section>