From d7769a5ecd36dce343c7cbb7ed3b8ccd3cb341cf Mon Sep 17 00:00:00 2001
From: sasha-astiadi <sasha@incubaid.com>
Date: Thu, 6 Nov 2025 03:41:26 +0100
Subject: [PATCH] feat: redesign homepage with new sections and layout

- Added new component sections including globe visualization, statistics dashboard, interactive stack explorer, and product showcase
- Replaced existing homepage sections with updated components featuring improved visual hierarchy and user engagement
- Removed footer border and adjusted hero section spacing for cleaner visual flow
---
 src/components/Footer.tsx        |   2 +-
 src/pages/home/HomeCTA.tsx       |  40 +++++++++++
 src/pages/home/HomeGlobeNew.tsx  |  36 ++++++++++
 src/pages/home/HomeHero.tsx      |   4 +-
 src/pages/home/HomePage.tsx      |  35 +++++++--
 src/pages/home/HomeProductsA.tsx |  63 ++++++++++++++++
 src/pages/home/HomeStack.tsx     |  76 ++++++++++++++++++++
 src/pages/home/HomeStat.tsx      |  61 ++++++++++++++++
 src/pages/home/HomeTabs.tsx      | 119 +++++++++++++++++++++++++++++++
 src/pages/home/HomeUniverse.tsx  |  22 ++++++
 src/pages/home/HomeWhy.tsx       |  33 +++++++++
 11 files changed, 481 insertions(+), 10 deletions(-)
 create mode 100644 src/pages/home/HomeCTA.tsx
 create mode 100644 src/pages/home/HomeGlobeNew.tsx
 create mode 100644 src/pages/home/HomeProductsA.tsx
 create mode 100644 src/pages/home/HomeStack.tsx
 create mode 100644 src/pages/home/HomeStat.tsx
 create mode 100644 src/pages/home/HomeTabs.tsx
 create mode 100644 src/pages/home/HomeUniverse.tsx
 create mode 100644 src/pages/home/HomeWhy.tsx

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 4a3723a..61f4d78 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -3,7 +3,7 @@ import { Container } from './Container'
 
 export function Footer() {
   return (
-    <footer className="border-t border-gray-200">
+    <footer className="">
       <Container>
         <div className="flex flex-col items-start justify-between gap-y-12 pt-16 pb-6 lg:flex-row lg:items-center lg:py-8">
           <div>
diff --git a/src/pages/home/HomeCTA.tsx b/src/pages/home/HomeCTA.tsx
new file mode 100644
index 0000000..5e41576
--- /dev/null
+++ b/src/pages/home/HomeCTA.tsx
@@ -0,0 +1,40 @@
+"use client";
+
+import { ArrowRightIcon } from "@heroicons/react/24/solid";
+
+export function HomeCTA() {
+  return (
+    <section className="mx-4 lg:mx-auto max-w-5xl border border-t-0 border-gray-200 py-16">
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 items-center px-6">
+
+        {/* LEFT: Big CTA Button */}
+        <button className="w-full lg:col-span-2 flex items-center justify-between bg-white border items-left border-gray-300 rounded-full px-8 py-5 shadow-sm hover:border-cyan-500 transition">
+          <span className="text-2xl lg:text-3xl font-semibold text-gray-900">
+            Start Your Mycelium Journey 
+          </span>
+
+          <span className="flex h-12 w-12 items-center justify-center rounded-full bg-cyan-500">
+            <ArrowRightIcon className="h-6 w-6 text-white" />
+          </span>
+        </button>
+
+        {/* RIGHT: Two small CTAs */}
+        <div className="flex flex-col gap-4">
+
+          {/* Button 1 */}
+          <button className="inline-flex items-center justify-between bg-cyan-500 text-white rounded-full px-6 py-3 text-sm font-semibold shadow-sm hover:bg-cyan-600 transition">
+            Get Started
+            <ArrowRightIcon className="h-4 w-4 ml-2" />
+          </button>
+
+          {/* Button 2 */}
+          <button className="inline-flex items-center justify-between bg-white border border-gray-300 rounded-full px-6 py-3 text-sm font-semibold shadow-sm hover:border-cyan-500 transition">
+            Explore Docs
+            <ArrowRightIcon className="h-4 w-4 ml-2 text-gray-700" />
+          </button>
+
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/pages/home/HomeGlobeNew.tsx b/src/pages/home/HomeGlobeNew.tsx
new file mode 100644
index 0000000..aa1d590
--- /dev/null
+++ b/src/pages/home/HomeGlobeNew.tsx
@@ -0,0 +1,36 @@
+"use client";
+
+import { Globe } from "@/components/ui/Globe";
+
+export function HomeGlobeNew() {
+  return (
+    <section className="mx-4 pt-12 border-t lg:mx-auto max-w-5xl border border-gray-200">
+      <div className="lg:-mt-12 grid grid-cols-1 lg:grid-cols-2 divide-y lg:divide-y-0 lg:divide-x divide-gray-200">
+        
+        {/* Column 1 */}
+        <div className="px-6 lg:px-24 py-16 flex flex-col items-start text-left">
+          <span className="text-xs font-medium text-gray-500 uppercase tracking-wide px-2.5 py-1 border border-gray-300 rounded-md">
+            Decentralized Network
+          </span>
+          <h2 className="mt-4 text-3xl font-semibold tracking-tight text-gray-900 lg:text-4xl">
+            Project Mycelium is Live.
+          </h2>
+
+          <p className="mt-4 text-lg text-gray-500 max-w-lg leading-relaxed">
+            Project Mycelium enables anyone to deploy their own Internet infrastructure, anywhere.
+          </p>
+
+          <button className="mt-6 inline-flex items-center justify-center rounded-full border px-5 py-2 hover:border-cyan-500 text-sm font-semibold text-gray-600 hover:bg-gray-50">
+            Explore Dashboard
+          </button>
+        </div>
+
+        {/* Column 2 */}
+        <div className="flex items-center justify-center relative">
+          <Globe className="relative w-full max-w-[320px] lg:max-w-[420px]" />
+        </div>
+
+      </div>
+    </section>
+  );
+}
diff --git a/src/pages/home/HomeHero.tsx b/src/pages/home/HomeHero.tsx
index 926dfc9..05e88cd 100644
--- a/src/pages/home/HomeHero.tsx
+++ b/src/pages/home/HomeHero.tsx
@@ -2,8 +2,8 @@ import { Button } from '@/components/Button'
 
 export function HomeHero() {
   return (
-    <section className="mt-6 bg-transparent border border-gray-200 border-b-0 mx-4 lg:mx-auto max-w-5xl shadow-[0_0_40px_-20px_rgba(0,0,0,0.06)]">
-      <div className="px-6 pt-12 pb-32 sm:pb-40 lg:px-12 lg:pt-24 lg:pb-48">
+    <section className="mt-12 bg-transparent border border-gray-200 border-b-0 mx-4 lg:mx-auto max-w-5xl shadow-[0_0_40px_-20px_rgba(0,0,0,0.06)]">
+      <div className="px-6 py-12 lg:px-8 lg:py-24">
         <div className="max-w-2xl mx-auto text-center">
           <h1 className="text-3xl font-semibold tracking-tight text-gray-900 lg:text-5xl">
             The Sovereign Agentic Cloud
diff --git a/src/pages/home/HomePage.tsx b/src/pages/home/HomePage.tsx
index afc5fda..109c815 100644
--- a/src/pages/home/HomePage.tsx
+++ b/src/pages/home/HomePage.tsx
@@ -6,6 +6,19 @@ import { HomeBenefits } from './HomeBenefits'
 import { CallToAction } from './CallToAction'
 import { HomeSlider } from './HomeSlider'
 import { HomeHosting } from './HomeHosting'
+import { HomeGlobeNew } from './HomeGlobeNew'
+import { HomeStat } from './HomeStat'
+import { HomeApplication } from './HomeTabs'
+import { HomeStack } from './HomeStack'
+import { HomeUniverse } from './HomeUniverse'
+import { HomeProductsA } from './HomeProductsA'
+import { HomeWhy } from './HomeWhy'
+import { HomeCTA } from './HomeCTA'
+
+
+
+
+
 
 
 export default function HomePage() {
@@ -15,28 +28,36 @@ export default function HomePage() {
         <HomeHero />
       </AnimatedSection>
 
-      <AnimatedSection id="next-section">
-        <WorldMap />
+      <AnimatedSection>
+        <HomeGlobeNew />
       </AnimatedSection>
 
       <AnimatedSection>
-        <HomeHosting />
+        <HomeStat />
       </AnimatedSection>
 
       <AnimatedSection>
-        <StackSectionDark />
+        <HomeApplication />
       </AnimatedSection>
 
       <AnimatedSection>
-        <HomeSlider />
+        <HomeStack />
       </AnimatedSection>
 
       <AnimatedSection>
-       <HomeBenefits />
+        <HomeUniverse />
       </AnimatedSection>
 
       <AnimatedSection>
-        <CallToAction />
+        <HomeProductsA />
+      </AnimatedSection>
+
+      <AnimatedSection>
+        <HomeWhy />
+      </AnimatedSection>
+
+      <AnimatedSection>
+        <HomeCTA />
       </AnimatedSection>
     </div>
   )
diff --git a/src/pages/home/HomeProductsA.tsx b/src/pages/home/HomeProductsA.tsx
new file mode 100644
index 0000000..2b18205
--- /dev/null
+++ b/src/pages/home/HomeProductsA.tsx
@@ -0,0 +1,63 @@
+"use client";
+
+export function HomeProductsA() {
+  return (
+    <section className="mx-4 pt-12 border-t-0 lg:mx-auto max-w-5xl border border-gray-200">
+      <div className="lg:-mt-12 grid grid-cols-1 lg:grid-cols-2 divide-y lg:divide-y-0 lg:divide-x divide-gray-200">
+
+        {/* Product 1 */}
+        <div className="px-6 lg:px-24 py-16 flex flex-col items-center text-center">
+          <h2 className="mt-4 text-xl font-semibold tracking-tight text-gray-900 lg:text-2xl">
+            Mycelium Cloud
+          </h2>
+          <p className="mt-4 text-3xl font-semibold text-gray-900 max-w-lg leading-10">
+            Deploy K8s clusters on sovereign infrastructure.
+          </p>
+          <button className="mt-6 inline-flex items-center justify-center rounded-full border px-5 py-2 hover:border-cyan-500 text-sm font-semibold text-gray-600 hover:bg-gray-50">
+            Learn more
+          </button>
+        </div>
+
+        {/* Product 2 */}
+        <div className="px-6 lg:px-24 py-16 flex flex-col items-center text-center">
+          <h2 className="mt-4 text-xl font-semibold tracking-tight text-gray-900 lg:text-2xl">
+            Mycelium Network
+          </h2>
+          <p className="mt-4 text-3xl font-semibold text-gray-900 max-w-lg leading-10">
+            Encrypted peer-to-peer mesh networking across the globe.
+          </p>
+          <button className="mt-6 inline-flex items-center justify-center rounded-full border px-5 py-2 hover:border-cyan-500 text-sm font-semibold text-gray-600 hover:bg-gray-50">
+            Learn more
+          </button>
+        </div>
+
+        {/* Product 3 */}
+        <div className="px-6 lg:px-24 py-16 flex border-t border-gray-200 flex-col items-center text-center">
+          <h2 className="mt-4 text-xl font-semibold tracking-tight text-gray-900 lg:text-2xl">
+            Mycelium Agents
+          </h2>
+          <p className="mt-4 text-3xl font-semibold text-gray-900 max-w-lg leading-10">
+            Programmable AI systems that run on your hardware.
+          </p>
+          <button className="mt-6 inline-flex items-center justify-center rounded-full border px-5 py-2 hover:border-cyan-500 text-sm font-semibold text-gray-600 hover:bg-gray-50">
+            Learn more
+          </button>
+        </div>
+
+        {/* Product 4 */}
+        <div className="px-6 lg:px-24 py-16 flex border-t border-gray-200 flex-col items-center text-center">
+          <h2 className="mt-4 text-xl font-semibold tracking-tight text-gray-900 lg:text-2xl">
+            Compute / Storage / GPU
+          </h2>
+          <p className="mt-4 text-3xl font-semibold text-gray-900 max-w-lg leading-10">
+            The 3 powerful resource layers powering the stack.
+          </p>
+          <button className="mt-6 inline-flex items-center justify-center rounded-full border px-5 py-2 hover:border-cyan-500 text-sm font-semibold text-gray-600 hover:bg-gray-50">
+            Learn more
+          </button>
+        </div>
+
+      </div>
+    </section>
+  );
+}
diff --git a/src/pages/home/HomeStack.tsx b/src/pages/home/HomeStack.tsx
new file mode 100644
index 0000000..e516bfb
--- /dev/null
+++ b/src/pages/home/HomeStack.tsx
@@ -0,0 +1,76 @@
+"use client";
+
+import { useState } from "react";
+
+const layers = [
+  {
+    id: "agent",
+    label: "Agent Layer",
+    description: `
+      Your sovereign agent with private memory and permissioned data access—always under your control. Choose from a wide library of open-source LLMs, paired with built-in semantic search and retrieval. It coordinates across people, apps, and other agents to plan, create, and execute. It operates inside a compliant legal sandbox, ready for real-world transactions and operations.
+    `,
+  },
+  {
+    id: "network",
+    label: "Network Layer",
+    description: `
+      A global, end-to-end encrypted overlay that simply doesn’t break. Shortest-path routing moves your traffic the fastest way, every time. Instant discovery with integrated DNS, semantic search, and indexing. A distributed CDN and edge delivery keep content available and tamper-resistant worldwide. Built-in tools and secure coding sandboxes—seamless on phones, desktops, and edge.
+    `,
+  },
+  {
+    id: "cloud",
+    label: "Cloud Layer",
+    description: `
+      An autonomous, stateless OS that enforces pre-deterministic deployments you define. Workloads are cryptographically bound to your private key—location and access are yours. No cloud vendor or middleman in the path: end-to-end ownership and isolation by default. Geo-aware placement delivers locality, compliance, and ultra-low latency where it matters.
+    `,
+  },
+];
+
+export function HomeStack() {
+  const [active, setActive] = useState("agent");
+  const current = layers.find((l) => l.id === active)!;
+
+  return (
+    <section className="mx-4 pt-12 border-t-0 lg:mx-auto max-w-5xl border border-gray-200">
+      <div className="lg:-mt-12 grid grid-cols-1 lg:grid-cols-5 divide-y lg:divide-y-0 lg:divide-x divide-gray-200">
+
+        {/* LEFT COLUMN (2 COLS) */}
+        <div className="lg:col-span-1 px-6 lg:px-8 py-12 flex flex-col items-start text-left">
+          <h2 className="mt-4 text-3xl text-center leading-tight font-semibold tracking-tight text-gray-900">
+            The Mycelium Stack
+          </h2>
+        </div>
+
+        {/* MIDDLE COLUMN (1 COL) */}
+        <div className="lg:col-span-1 px-6 lg:px-12 py-12 flex flex-col space-y-6 text-left">
+          {layers.map((layer) => (
+            <button
+              key={layer.id}
+              onClick={() => setActive(layer.id)}
+              className={`transition-all ${
+                active === layer.id
+                  ? "text-gray-900 font-semibold"
+                  : "text-gray-400 hover:text-gray-600"
+              }`}
+            >
+              <span className="text-sm font-medium uppercase tracking-wide">
+                {layer.label}
+              </span>
+            </button>
+          ))}
+        </div>
+
+        {/* RIGHT COLUMN (2 COLS) */}
+        <div className="lg:col-span-3 px-6 lg:px-12 py-12 flex flex-col text-left space-y-4">
+          <h3 className="text-lg font-semibold text-gray-900 uppercase tracking-wide">
+            {current.label}
+          </h3>
+          <p className="text-sm text-gray-500 leading-relaxed whitespace-pre-line">
+            {current.description.trim()}
+          </p>
+        </div>
+
+      </div>
+    </section>
+  );
+}
diff --git a/src/pages/home/HomeStat.tsx b/src/pages/home/HomeStat.tsx
new file mode 100644
index 0000000..e872b09
--- /dev/null
+++ b/src/pages/home/HomeStat.tsx
@@ -0,0 +1,61 @@
+export function HomeStat() {
+    return (
+        <section className="mx-4 pt-12 border-t-0 lg:mx-auto max-w-5xl border border-gray-200">
+        <div className="lg:-mt-12 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 divide-y sm:divide-y-0 lg:divide-y-0 lg:divide-x divide-gray-200">
+            
+            {/* CORES */}
+            <div className="px-6 lg:px-12 py-12 flex flex-col items-start text-left">
+            <span className="text-xs font-medium text-gray-500 uppercase tracking-wide px-2.5 py-1 border border-gray-300 rounded-md">
+                CORES
+            </span>
+            <h2 className="mt-4 text-4xl font-semibold tracking-tight text-gray-900">
+                54,958
+            </h2>
+            <p className="mt-2 text-sm text-gray-500 leading-relaxed">
+                Total Central Processing Unit cores available on the grid.
+            </p>
+            </div>
+
+            {/* NODES */}
+            <div className="px-6 lg:px-12 py-12 flex flex-col items-start text-left">
+            <span className="text-xs font-medium text-gray-500 uppercase tracking-wide px-2.5 py-1 border border-gray-300 rounded-md">
+                NODES
+            </span>
+            <h2 className="mt-4 text-4xl font-semibold tracking-tight text-gray-900">
+                1,493
+            </h2>
+            <p className="mt-2 text-sm text-gray-500 leading-relaxed">
+                Total number of nodes on the grid.
+            </p>
+            </div>
+
+            {/* SSD CAPACITY */}
+            <div className="px-6 lg:px-12 py-12 flex flex-col items-start text-left">
+            <span className="text-xs font-medium text-gray-500 uppercase tracking-wide px-2.5 py-1 border border-gray-300 rounded-md">
+                SSD CAPACITY
+            </span>
+            <h2 className="mt-4 text-4xl font-semibold tracking-tight text-gray-900">
+                5,388,956
+            </h2>
+            <p className="mt-2 text-sm text-gray-500 leading-relaxed">
+                Total GB amount of storage (SSD, HDD, and RAM) on the grid.
+            </p>
+            </div>
+
+            {/* COUNTRIES */}
+            <div className="px-6 lg:px-12 py-12 flex flex-col items-start text-left">
+            <span className="text-xs font-medium text-gray-500 uppercase tracking-wide px-2.5 py-1 border border-gray-300 rounded-md">
+                COUNTRIES
+            </span>
+            <h2 className="mt-4 text-4xl font-semibold tracking-tight text-gray-900">
+                44
+            </h2>
+            <p className="mt-2 text-sm text-gray-500 leading-relaxed">
+                Total number of countries with active nodes.
+            </p>
+            </div>
+
+        </div>
+        </section>
+    );
+}
\ No newline at end of file
diff --git a/src/pages/home/HomeTabs.tsx b/src/pages/home/HomeTabs.tsx
new file mode 100644
index 0000000..896dda0
--- /dev/null
+++ b/src/pages/home/HomeTabs.tsx
@@ -0,0 +1,119 @@
+"use client";
+
+import { useState } from "react";
+
+// ✅ IMPORT HEROICONS
+import {
+  CubeIcon,
+  SparklesIcon,
+  ServerStackIcon,
+  ShieldCheckIcon,
+} from "@heroicons/react/20/solid";
+
+const tabs = [
+  {
+    id: "ai",
+    label: "K8s Clusters",
+    title: "K8s Clusters",
+    description:
+      "Deploy and scale containerized apps across your own hardware — enabling a world of possibilities.",
+    link: "#",
+    icon: CubeIcon,
+  },
+  {
+    id: "web",
+    label: "AI Agents",
+    title: "AI Agents",
+    description: "Run open-source models locally, securely, and offline.",
+    link: "#",
+    icon: SparklesIcon,
+  },
+  {
+    id: "ecommerce",
+    label: "S3-Compatible Storage",
+    title: "S3-Compatible Storage",
+    description:
+      "Your own personal over-the-network drive, encrypted end-to-end.",
+    link: "#",
+    icon: ServerStackIcon,
+  },
+  {
+    id: "platforms",
+    label: "Mesh VPN & 0-Trust Networking",
+    title: "Mesh VPN & 0-Trust Networking",
+    description:
+      "Securely connect all your devices and remote locations.",
+    link: "#",
+    icon: ShieldCheckIcon,
+  },
+];
+
+export function HomeApplication() {
+  const [active, setActive] = useState("ai");
+  const current = tabs.find((t) => t.id === active)!;
+  const Icon = current.icon; // ✅ dynamic icon
+
+  return (
+    <section className="mx-4  border-t-0  lg:mx-auto max-w-5xl border border-gray-200">
+      <div className="grid grid-cols-1 lg:grid-cols-4 gap-12 relative">
+
+        {/* ✅ VERTICAL DIVIDER ON DESKTOP */}
+        <div className="hidden lg:block absolute left-3/4 top-0 bottom-0 border-l border-gray-200 pointer-events-none"></div>
+
+        {/* LEFT COLUMN */}
+        <div className="lg:col-span-3 space-y-6 lg:pl-6 py-12">
+          <h1 className="text-3xl lg:text-3xl font-semibold tracking-tight text-gray-900 leading-tight">
+            Run Real Infrastructure on Your Own Hardware
+          </h1>
+
+          <p className="text-sm text-gray-500 leading-relaxed max-w-2xl">
+            Build and run production-grade workloads on hardware you control, whether it’s your own node or capacity from the decentralized grid. Mycelium handles the networking, orchestration, and security layers, so you can deploy services the same way you would on a public cloud, without giving your data or control to anyone.
+          </p>
+
+          {/* TABS */}
+          <div className="inline-flex flex-wrap gap-2 bg-gray-50 rounded-full p-1 border border-gray-200 w-auto">
+            {tabs.map((tab) => (
+              <button
+                key={tab.id}
+                onClick={() => setActive(tab.id)}
+                className={`px-4 py-2 rounded-full text-sm font-medium transition-all
+                  ${
+                    active === tab.id
+                      ? "bg-white border border-gray-300 shadow-sm"
+                      : "text-gray-500 hover:text-cyan-500"
+                  }`}
+              >
+                {tab.label}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {/* RIGHT COLUMN — ONLY 1 ROW CHANGES */}
+        <div className="space-y-3 lg:pr-6 py-12">
+
+          {/* ✅ ICON WITH BLACK BG */}
+          <div className="h-10 w-10 flex items-center justify-center rounded-full bg-black">
+            <Icon className="h-5 w-5 text-white" />
+          </div>
+
+          <h4 className="text-lg font-semibold text-gray-900 uppercase tracking-wide">
+            {current.title}
+          </h4>
+
+          <p className="text-sm text-gray-500 leading-tight">
+            {current.description}
+          </p>
+
+          <a
+            href={current.link}
+            className="text-gray-700 font-semibold hover:text-cyan-600 text-sm"
+          >
+            Learn more →
+          </a>
+        </div>
+
+      </div>
+    </section>
+  );
+}
diff --git a/src/pages/home/HomeUniverse.tsx b/src/pages/home/HomeUniverse.tsx
new file mode 100644
index 0000000..02c54c2
--- /dev/null
+++ b/src/pages/home/HomeUniverse.tsx
@@ -0,0 +1,22 @@
+"use client";
+
+import { GlobeAltIcon } from "@heroicons/react/24/outline";
+
+export function HomeUniverse() {
+  return (
+    <section className="mx-4 lg:mx-auto max-w-5xl border border-t-0 border-gray-200 py-8 text-center">
+      <h2 className="text-2xl sm:text-3xl font-semibold text-gray-900 flex flex-wrap items-center justify-center gap-3">
+
+        {/* left text */}
+        <span>Explore the Mycelium</span>
+
+        {/* optional end pill */}
+        <span className="inline-flex items-center gap-2 bg-white border border-gray-300 rounded-full px-6 py-2 text-2xl font-medium shadow-sm">
+          <GlobeAltIcon className="h-5 w-5 text-gray-900" />
+          Universe
+        </span>
+
+      </h2>
+    </section>
+  );
+}
diff --git a/src/pages/home/HomeWhy.tsx b/src/pages/home/HomeWhy.tsx
new file mode 100644
index 0000000..d39d299
--- /dev/null
+++ b/src/pages/home/HomeWhy.tsx
@@ -0,0 +1,33 @@
+"use client";
+
+import {
+  ShieldCheckIcon,
+  KeyIcon,
+  CodeBracketIcon,
+  BoltIcon,
+} from "@heroicons/react/24/outline";
+
+export function HomeWhy() {
+  const items = [
+    { label: "Unbreakable by Design", icon: ShieldCheckIcon },
+    { label: "Sovereign by Default", icon: KeyIcon },
+    { label: "Hackable & Open", icon: CodeBracketIcon },
+    { label: "Cost & Energy Efficient", icon: BoltIcon },
+  ];
+
+  return (
+    <section className="mx-4 lg:mx-auto max-w-5xl border border-t-0 border-gray-200 py-12 px-6 text-center">
+      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 place-items-center">
+        {items.map(({ label, icon: Icon }) => (
+          <span
+            key={label}
+            className="inline-flex items-center gap-2 bg-white border border-gray-300 rounded-full px-6 py-2 text-sm  font-medium text-gray-900 shadow-sm"
+          >
+            <Icon className="h-5 w-5 text-gray-900" />
+            {label}
+          </span>
+        ))}
+      </div>
+    </section>
+  );
+}