refactor: simplify benefits section layout and styling

- Replaced complex grid layout with centered 4-column design
- Switched from images to Heroicons for consistent iconography
- Removed unused animation components and dependencies (cobe, motion)

src/pages/compute/ComputeDesign.tsx

@@ -1,4 +1,4 @@
-import { Eyebrow, H3, P, CP, CT } from '@/components/Texts'
+import { CP, CT } from '@/components/Texts'
 import {
   ArrowPathIcon,
   GlobeAltIcon,

src/pages/compute/ComputeFeatures.tsx

@@ -1,68 +1,102 @@
-import { Container } from '@/components/Container'
-import { Eyebrow, SectionHeader, P, Small } from '@/components/Texts'
 
-const featureGroups = [
-  {
-    title: 'Self-Managing Infrastructure',
-    description:
-      'Scaling, healing, and failover happen automatically, no manual intervention.',
-  },
-  {
-    title: 'Secure, Stateless Execution',
-    description:
-      'Workloads remain isolated, reproducible, and portable, no environment drift or configuration decay.',
-  },
-  {
-    title: 'Zero-Image Delivery',
-    description:
-      'Deploy workloads using metadata instead of large container images for instant launches.',
-  },
-  {
-    title: 'Global Placement Control',
-    description:
-      'Choose where workloads run, on your hardware or across the decentralized grid.',
-  },
-]
+import { Container } from '@/components/Container'
+import { Eyebrow, SectionHeader, H3, P, Small, CT, CP } from '@/components/Texts'
+import {
+  ArrowTrendingUpIcon,
+  ChatBubbleLeftRightIcon,
+  MagnifyingGlassIcon,
+  ServerStackIcon,
+} from '@heroicons/react/24/solid'
 
 export function ComputeFeatures() {
   return (
-    <section className="bg-white py-24 sm:py-32">
-      <Container>
-        <div className="mx-auto max-w-3xl text-center">
-          <Eyebrow className="tracking-[0.28em] uppercase text-cyan-500">
-            Core Features
+    <section className="w-full max-w-8xl mx-auto bg-transparent">
+
+      {/* ✅ 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-200"></div>
+      <div className="w-full border-t border-l border-r border-gray-200" />
+      
+      <div className="mx-auto max-w-7xl px-6 bg-white lg:px-8 grid grid-cols-1 lg:grid-cols-2 gap-20  py-12 border border-t-0 border-b-0 border-gray-200">
+
+        {/* ✅ LEFT SIDE — Title + Intro */}
+        <div className="max-w-xl">
+          <Eyebrow className="">
+            Core Components
           </Eyebrow>
-          <SectionHeader as="h2" className="mt-6 text-gray-900">
-            Precision infrastructure that verifies itself.
-          </SectionHeader>
-          <P className="mt-6 text-gray-600">
-            Every layer is designed for determinism, from how workloads are
-            declared to the way they scale, protect, and govern themselves on
-            the grid.
+
+          <H3 className="mt-6  ">
+            Network Capabilities
+          </H3>
+
+          <P className="mt-6 text-lg text-gray-600">
+            Built for resilience and autonomy, the Mycelium Network dynamically connects nodes
+            through intelligent routing, proxy discovery, and decentralized delivery.
+          </P>
+
+          <P className="mt-3 text-lg text-gray-600">
+            Each component — from message passing to content distribution — works in harmony
+            to create a fully self-healing, self-optimizing data mesh.
           </P>
         </div>
 
-        <div className="mt-16 grid gap-8 md:grid-cols-2">
-          {featureGroups.map((feature) => (
-            <div
-              key={feature.title}
-              className="flex h-full flex-col rounded-3xl border border-slate-200 bg-white p-10 shadow-sm transition hover:-translate-y-1 hover:shadow-xl"
-            >
+        {/* ✅ RIGHT SIDE — 4 items stacked with dividers */}
+        <div className="space-y-8">
+
+          {/* 1 — Routing */}
           <div>
-                <Small className="text-xs uppercase tracking-[0.3em] text-cyan-500">
-                  Feature
-                </Small>
-                <h3 className="mt-4 text-2xl font-semibold text-gray-900">
-                  {feature.title}
+            <h3 className="text-lg font-semibold text-gray-950 flex items-center">
+              <ArrowTrendingUpIcon className="h-6 w-6 text-cyan-500 mr-3" />
+              Automatic routing & pathfinding
             </h3>
-                <p className="mt-4 text-sm leading-relaxed text-gray-600">
-                  {feature.description}
+            <p className="mt-2 text-gray-600 max-w-2xl">
+              The Mycelium Network automatically discovers the shortest and fastest
+              routes between nodes, ensuring optimal data flow and network efficiency.
+            </p>
+            <div className="mt-8 h-px w-full bg-cyan-500/50" />
+          </div>
+
+          {/* 2 — Distributed bus */}
+          <div>
+            <h3 className="text-lg font-semibold text-gray-950 flex items-center">
+              <ChatBubbleLeftRightIcon className="h-6 w-6 text-cyan-500 mr-3" />
+              Distributed message bus
+            </h3>
+            <p className="mt-2 text-gray-600 max-w-2xl">
+              Nodes exchange information seamlessly through a resilient global
+              message layer, enabling asynchronous decentralized communication.
+            </p>
+            <div className="mt-8 h-px w-full bg-cyan-500/50" />
+          </div>
+
+          {/* 3 — Proxy detection */}
+          <div>
+            <h3 className="text-lg font-semibold text-gray-950 flex items-center">
+              <MagnifyingGlassIcon className="h-6 w-6 text-cyan-500 mr-3" />
+              Automatic proxy discovery
+            </h3>
+            <p className="mt-2 text-gray-600 max-w-2xl">
+              The network scans for open SOCKS5 proxies so devices can join and
+              connect without manual setup or configuration.
+            </p>
+            <div className="mt-8 h-px w-full bg-cyan-500/50" />
+          </div>
+
+          {/* 4 — Delivery / CDN */}
+          <div>
+            <h3 className="text-lg font-semibold text-gray-950 flex items-center">
+              <ServerStackIcon className="h-6 w-6 text-cyan-500 mr-3" />
+              Decentralized content distribution
+            </h3>
+            <p className="mt-2 text-gray-600 max-w-2xl">
+              Data can be served from distributed 0-DBs, forming a CDN-like delivery
+              layer that is faster and more resilient than centralized servers.
             </p>
           </div>
         </div>
-          ))}
       </div>
-      </Container>
+       {/* ✅ Bottom horizontal line with spacing */}
+      <div className="w-full border-b  border-gray-200" />
+      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-200"></div>
     </section>
   )
 }

src/pages/home/HomeBenefits.tsx

@@ -1,305 +1,69 @@
-import createGlobe from "cobe";
-import { useEffect, useRef } from "react";
-import { motion } from "motion/react";
-import { IconBrandYoutubeFilled } from "@tabler/icons-react";
-import { H2, CP, Eyebrow } from '@/components/Texts'
+import { CP } from '@/components/Texts'
+import {
+  ShieldCheckIcon,
+  GlobeAltIcon,
+  BoltIcon,
+  BanknotesIcon,
+} from '@heroicons/react/24/solid'
 
+const benefits = [
+  {
+    id: 1,
+    title: "Unbreakable by Design",
+    desc: "No central cloud to censor or fail. The network heals itself.",
+    icon: ShieldCheckIcon,
+  },
+  {
+    id: 2,
+    title: "Sovereign by Default",
+    desc: "Identity, compute, and data belong to you – cryptographically.",
+    icon: GlobeAltIcon,
+  },
+  {
+    id: 3,
+    title: "Hackable & Open",
+    desc: "Learn, build, and experiment without permission.",
+    icon: BoltIcon,
+  },
+  {
+    id: 4,
+    title: "Cost & Energy Efficient",
+    desc: "Distributed hardware eliminates hyperscale overhead.",
+    icon: BanknotesIcon,
+  },
+];
 
 export function HomeBenefits() {
-  const features = [
-    {
-      title: "Unbreakable by Design",
-      description:
-        "No central cloud to censor or fail. The network heals itself.",
-      image: "/images/benefits/energy.webp",
-    },
-    {
-      title: "Sovereign by Default",
-      description:
-        "Identity, compute, and data belong to you – cryptographically.",
-      image: "/images/benefits/sovereign.webp",
-    },
-    {
-      title: "Hackable & Open",
-      description:
-        "Learn, build, and experiment without permission.",
-      image: "/images/benefits/autonomous.webp",
-    },
- 
-    {
-      title: "Cost & Energy Efficient",
-      description:
-        "Distributed hardware eliminates hyperscale overhead.",
-      image: "/images/benefits/cost.webp",
-    },
-  ];
   return (
-    <div className="relative z-20 bg-blackpy-6 lg:py-24 max-w-7xl mx-auto border border-t-0 border-gray-200">
-      <div className="px-12">
-        <Eyebrow className="text-center text-cyan-500">
-         Benefits
-        </Eyebrow>
-        <H2 className="text-3xl lg:text-5xl lg:leading-tight max-w-5xl mx-auto text-center tracking-tight font-medium text-black dark:text-white">
-          Why It Matters
-        </H2>
+    <div className="">
+
+      {/* ✅ Top horizontal line with spacing */}
+      <div className="max-w-7xl bg-transparent mx-auto  border border-t-0 border-b-0 border-gray-200" />
+      <div className="w-full border-t border-l border-r border-gray-200" />
+
+      {/* ✅ Main content */}
+      <div className="mx-auto max-w-7xl border-gray-200">
+        <dl className="grid grid-cols-1 gap-4 lg:gap-6 lg:grid-cols-4 text-center">
+          {benefits.map((item) => (
+            <div
+              key={item.id}
+              className="flex flex-col items-center bg-white/40 dark:bg-black/40 py-10 px-4 border border-gray-200 lg:border-t-0 lg:border-b-0"
+            >
+              <item.icon className="h-10 w-10 text-cyan-500 mb-4" />
+              <h3 className="text-lg font-semibold text-black dark:text-white">
+                {item.title}
+              </h3>
+              <CP className="mt-2 max-w-xs text-gray-600 dark:text-gray-300">
+                {item.desc}
+              </CP>
+            </div>
+          ))}
+        </dl>
       </div>
 
-      <div className="mt-10 grid grid-cols-1 gap-4 lg:grid-cols-7 lg:grid-rows-2 lg:px-12 px-6">
-          <div className="flex p-px lg:col-span-4">
-            <div className="w-full overflow-hidden rounded-lg bg-white/40 dark:bg-black/40 shadow-sm border border-transparent transition-all duration-300 hover:scale-105 hover:shadow-lg hover:shadow-cyan-500/50 hover:border-cyan-500 max-lg:rounded-t-4xl lg:rounded-tl-4xl">
-                <div className="flex items-center">
-                    <div className="w-1/3 p-2">
-                        <img
-                            alt={features[0].title}
-                            src={features[0].image}
-                            className="w-40 h-40 object-contain"
-                        />
-                    </div>
-                    <div className="w-2/3 p-2 pr-12">
-                        <h3 className="text-lg font-semibold text-black dark:text-white">{features[0].title}</h3>
-                        <CP  className="mt-2  text-gray-600 dark:text-gray-300">
-                            {features[0].description}
-                        </CP>
-                    </div>
-                </div>
-            </div>
-          </div>
-          <div className="flex p-px lg:col-span-3">
-            <div className="w-full overflow-hidden rounded-lg bg-white/40 dark:bg-black/40 shadow-sm border border-transparent transition-all duration-300 hover:scale-105 hover:shadow-lg hover:shadow-cyan-500/50 hover:border-cyan-500 lg:rounded-tr-4xl">
-                <div className="flex items-center">
-                    <div className="w-1/3 p-4">
-                        <img
-                            alt={features[1].title}
-                            src={features[1].image}
-                            className="w-40 h-40 object-contain"
-                        />
-                    </div>
-                    <div className="w-2/3 p-4">
-                        <h3 className="text-lg font-semibold text-black dark:text-white">{features[1].title}</h3>
-                        <CP className="mt-2  text-gray-600 dark:text-gray-300">
-                            {features[1].description}
-                        </CP>
-                    </div>
-                </div>
-            </div>
-          </div>
-          <div className="flex p-px lg:col-span-3">
-            <div className="w-full overflow-hidden rounded-lg bg-white/40 dark:bg-black/40 shadow-sm border border-transparent transition-all duration-300 hover:scale-105 hover:shadow-lg hover:shadow-cyan-500/50 hover:border-cyan-500 lg:rounded-bl-4xl">
-                <div className="flex items-center">
-                    <div className="w-1/3 p-4">
-                        <img
-                            alt={features[2].title}
-                            src={features[2].image}
-                            className="w-40 h-40 object-contain"
-                        />
-                    </div>
-                    <div className="w-2/3 p-4">
-                        <h3 className="text-lg font-semibold text-black dark:text-white">{features[2].title}</h3>
-                        <CP className="mt-2  text-gray-600 dark:text-gray-300">
-                            {features[2].description}
-                        </CP>
-                    </div>
-                </div>
-            </div>
-          </div>
-          <div className="flex p-px lg:col-span-4">
-            <div className="w-full overflow-hidden rounded-lg bg-white/40 dark:bg-black/40 shadow-sm border border-transparent transition-all duration-300 hover:scale-105 hover:shadow-lg hover:shadow-cyan-500/50 hover:border-cyan-500 max-lg:rounded-b-4xl lg:rounded-br-4xl">
-                <div className="flex items-center">
-                    <div className="w-1/3 p-2">
-                        <img
-                            alt={features[3].title}
-                            src={features[3].image}
-                            className="w-40 h-40 object-contain"
-                        />
-                    </div>
-                    <div className="w-2/3 p-2 pr-12">
-                        <h3 className="text-lg font-semibold text-black dark:text-white">{features[3].title}</h3>
-                        <CP className="mt-2  text-gray-600 dark:text-gray-300">
-                            {features[3].description}
-                        </CP>
-                    </div>
-                </div>
-            </div>
-          </div>
-        </div>
+      {/* ✅ Bottom line + spacing */}
+      <div className="w-full border-b border-gray-200" />
+      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-200" />
     </div>
   );
 }
-
-
-export const SkeletonOne = () => {
-  return (
-    <div className="relative flex py-6 px-2 gap-10 h-full">
-      <div className="w-full  p-5  mx-auto bg-white dark:bg-neutral-900 shadow-2xl group h-full">
-        <div className="flex flex-1 w-full h-full flex-col space-y-2  ">
-          {/* TODO */}
-          <img
-            src="/linear.webp"
-            alt="header"
-            width={800}
-            height={800}
-            className="h-full w-full aspect-square object-cover object-left-top rounded-sm"
-          />
-        </div>
-      </div>
-
-      <div className="absolute bottom-0 z-40 inset-x-0 h-60 bg-gradient-to-t from-white dark:from-black via-white dark:via-black to-transparent w-full pointer-events-none" />
-      <div className="absolute top-0 z-40 inset-x-0 h-60 bg-gradient-to-b from-white dark:from-black via-transparent to-transparent w-full pointer-events-none" />
-    </div>
-  );
-};
-
-export const SkeletonThree = () => {
-  return (
-    <a
-      href="https://www.youtube.com/watch?v=RPa3_AD1_Vs"
-      target="__blank"
-      className="relative flex gap-10  h-full group/image"
-    >
-      <div className="w-full  mx-auto bg-transparent dark:bg-transparent group h-full">
-        <div className="flex flex-1 w-full h-full flex-col space-y-2  relative">
-          {/* TODO */}
-          <IconBrandYoutubeFilled className="h-20 w-20 absolute z-10 inset-0 text-red-500 m-auto " />
-          <img
-            src="https://assets.aceternity.com/fireship.jpg"
-            alt="header"
-            width={800}
-            height={800}
-            className="h-full w-full aspect-square object-cover object-center rounded-sm blur-none group-hover/image:blur-md transition-all duration-200"
-          />
-        </div>
-      </div>
-    </a>
-  );
-};
-
-export const SkeletonTwo = () => {
-  const images = [
-    "https://images.unsplash.com/photo-1517322048670-4fba75cbbb62?q=80&w=3000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-    "https://images.unsplash.com/photo-1573790387438-4da905039392?q=80&w=3425&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-    "https://images.unsplash.com/photo-1555400038-63f5ba517a47?q=80&w=3540&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-    "https://images.unsplash.com/photo-1554931670-4ebfabf6e7a9?q=80&w=3387&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-    "https://images.unsplash.com/photo-1546484475-7f7bd55792da?q=80&w=2581&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-  ];
-
-  const imageVariants = {
-    whileHover: {
-      scale: 1.1,
-      rotate: 0,
-      zIndex: 100,
-    },
-    whileTap: {
-      scale: 1.1,
-      rotate: 0,
-      zIndex: 100,
-    },
-  };
-  return (
-    <div className="relative flex flex-col items-start p-8 gap-10 h-full overflow-hidden">
-      {/* TODO */}
-      <div className="flex flex-row -ml-20">
-        {images.map((image, idx) => (
-          <motion.div
-            variants={imageVariants}
-            key={"images-first" + idx}
-            style={{
-              rotate: Math.random() * 20 - 10,
-            }}
-            whileHover="whileHover"
-            whileTap="whileTap"
-            className="rounded-xl -mr-4 mt-4 p-1 bg-black s border-neutral-100 shrink-0 overflow-hidden"
-          >
-            <img
-              src={image}
-              alt="bali images"
-              width="500"
-              height="500"
-              className="rounded-lg h-20 w-20 md:h-40 md:w-40 object-cover shrink-0"
-            />
-          </motion.div>
-        ))}
-      </div>
-      <div className="flex flex-row">
-        {images.map((image, idx) => (
-          <motion.div
-            key={"images-second" + idx}
-            style={{
-              rotate: Math.random() * 20 - 10,
-            }}
-            variants={imageVariants}
-            whileHover="whileHover"
-            whileTap="whileTap"
-            className="rounded-xl -mr-4 mt-4 p-1 bg-white dark:bg-neutral-800 dark:border-neutral-700 border border-neutral-100 shrink-0 overflow-hidden"
-          >
-            <img
-              src={image}
-              alt="bali images"
-              width="500"
-              height="500"
-              className="rounded-lg h-20 w-20 md:h-40 md:w-40 object-cover shrink-0"
-            />
-          </motion.div>
-        ))}
-      </div>
-
-      <div className="absolute left-0 z-[100] inset-y-0 w-20 bg-gradient-to-r from-white dark:from-black to-transparent  h-full pointer-events-none" />
-      <div className="absolute right-0 z-[100] inset-y-0 w-20 bg-gradient-to-l from-white dark:from-black  to-transparent h-full pointer-events-none" />
-    </div>
-  );
-};
-
-export const SkeletonFour = () => {
-  return (
-    <div className="h-60 md:h-60  flex flex-col items-center relative bg-transparent dark:bg-transparent mt-10">
-      <Globe className="absolute -right-10 md:-right-10 -bottom-80 md:-bottom-72" />
-    </div>
-  );
-};
-
-export const Globe = ({ className }: { className?: string }) => {
-  const canvasRef = useRef<HTMLCanvasElement>(null);
-
-  useEffect(() => {
-    let phi = 0;
-
-    if (!canvasRef.current) return;
-
-    const globe = createGlobe(canvasRef.current, {
-      devicePixelRatio: 2,
-      width: 600 * 2,
-      height: 600 * 2,
-      phi: 0,
-      theta: 0,
-      dark: 1,
-      diffuse: 1.2,
-      mapSamples: 16000,
-      mapBrightness: 6,
-      baseColor: [0.3, 0.3, 0.3],
-      markerColor: [0.1, 0.8, 1],
-      glowColor: [1, 1, 1],
-      markers: [
-        // longitude latitude
-        { location: [37.7595, -122.4367], size: 0.03 },
-        { location: [40.7128, -74.006], size: 0.1 },
-      ],
-      onRender: (state) => {
-        // Called on every animation frame.
-        // `state` will be an empty object, return updated params.
-        state.phi = phi;
-        phi += 0.01;
-      },
-    });
-
-    return () => {
-      globe.destroy();
-    };
-  }, []);
-
-  return (
-    <canvas
-      ref={canvasRef}
-      style={{ width: 600, height: 600, maxWidth: "100%", aspectRatio: 1 }}
-      className={className}
-    />
-  );
-};

src/pages/home/HomePage.tsx

@@ -7,7 +7,7 @@ import { CallToAction } from './CallToAction'
 import { HomeHosting } from './HomeHosting'
 import { HomeAurora } from './HomeAurora'
 import { HomeTab } from './HomeTab'
-
+import { HomeBenefits } from './HomeBenefits'
 
 
 export default function HomePage() {
@@ -37,6 +37,9 @@ export default function HomePage() {
       <AnimatedSection>
         <HomeTab />
       </AnimatedSection>
+      <AnimatedSection>
+        <HomeBenefits />
+      </AnimatedSection>
 
       <AnimatedSection>
         <CallToAction />