refactor: streamline page components and simplify UI elements

- Removed unused HomeAudience component from HomePage
- Renamed NetworkPros to CloudPros for clarity
- Removed bullet point lists from PodsFeatures to simplify presentation
- Replaced PodCapabilities with PodsWhat and removed PodsComing section

src/pages/home/HomePage.tsx

@@ -4,7 +4,6 @@ import { AnimatedSection } from '../../components/AnimatedSection'
 import { CallToAction } from './CallToAction'
 import { HomeTab } from './HomeTab'
 import { HomeMap } from './HomeMap' 
-import { HomeAudience } from './HomeAudience'
 import { HomeAurora } from './HomeAurora'
 import { HomeArchitecture } from './HomeArchitecture';
 import { HomeDesign } from './HomeDesign';

src/pages/network/NetworkPage.tsx

@@ -6,7 +6,7 @@ import { SecondaryFeatures } from './SecondaryFeatures'
 import { CallToAction } from './CallToAction'
 import { NetworkCapabilities } from './NetworkCapabilities'
 import { NetworkUsecases } from './NetworkUsecases'
-import { NetworkPros } from './NetworkPros'
+import { CloudPros } from './NetworkPros'
 
 
 export default function NetworkPage() {
@@ -33,7 +33,7 @@ export default function NetworkPage() {
       </AnimatedSection>
 
       <AnimatedSection>
-        <NetworkPros />
+        <CloudPros />
       </AnimatedSection>
 
       <AnimatedSection>

src/pages/pods/PodsFeatures.tsx

@@ -115,19 +115,6 @@ export function PodsFeatures() {
               <p className="mt-4 text-gray-700 leading-snug">
                 {useCase.description}
               </p>
-
-              {/* Bullet list */}
-              <ul className="mt-6 space-y-3 text-sm text-gray-600">
-                {useCase.bullets.map((bullet) => (
-                  <li
-                    key={bullet}
-                    className="flex items-start gap-3 rounded-2xl border border-cyan-100 bg-cyan-50/60 p-3 leading-relaxed"
-                  >
-                    <span className="mt-1 inline-block size-2 rounded-full bg-cyan-500" />
-                    <span>{bullet}</span>
-                  </li>
-                ))}
-              </ul>
             </li>
           ))}
         </ul>

src/pages/pods/PodsPage.tsx

@@ -1,22 +1,20 @@
 import Homepod from './Homepod';
-import { PodCapabilities } from './PodCapabilities';
 import { PodsHow } from './PodsHow';
 import { PodsFeatures } from './PodsFeatures';
 import { PodsDesign } from './PodsDesign';
 import { PodsBenefits } from './PodsBenefits';
-import { PodsComing } from './PodsComing';
 import { CallToAction } from './CallToAction';
+import { PodsWhat } from './PodsWhat';
 
 const PodsPage = () => {
   return (
     <>
             <Homepod />
-            <PodCapabilities />
+            <PodsWhat />
             <PodsFeatures />
             <PodsHow />
             <PodsDesign />
             <PodsBenefits />
-            <PodsComing />
             <CallToAction />
     </>
   );

src/pages/pods/PodsWhat.tsx

@@ -0,0 +1,133 @@
+"use client";
+
+import { Eyebrow, H3 } from "@/components/Texts";
+
+const podCards = [
+  {
+    id: "intro",
+    eyebrow: "Capabilities",
+    title: "What is a Pod?",
+    description: null,
+    image: null,
+    colSpan: "lg:col-span-3",
+    rowSpan: "lg:row-span-1",
+    custom: true,
+    noBorder: true,
+  },
+  {
+    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)]",
+  },
+  {
+    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)]",
+  },
+  {
+    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",
+  },
+  {
+    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)]",
+  },
+];
+
+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="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`}
+                />
+              )}
+
+              <div
+                className={`relative flex lg:h-90 flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] ${card.innerRounded}`}
+              >
+                {/* 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>
+                ) : (
+                  <div className="h-48 w-full flex items-center justify-center bg-transparent" />
+                )}
+
+                {/* 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>
+
+      <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>
+  );
+}