feat: replace card stack with new feature grid and add product icons

src/pages/home/HomeFeatures.tsx

@@ -1,56 +1,80 @@
 import { InboxIcon, TrashIcon, UsersIcon } from '@heroicons/react/24/outline'
 import { H2, P } from '@/components/Texts'
-import { CardStack } from '@/components/ui/card-stack'
 
 const features = [
   {
-    name: 'Network Layer',
+    name: 'Mycelium Network',
     description:
-      "A global, end-to-end encrypted overlay that simply doesn't break. Shortest-path routing moves your traffic the fastest way, every time with instant discovery.",
-    href: '#',
+      "A global, end-to-end encrypted overlay that simply doesn't break.",
+    href: '/network',
     icon: UsersIcon,
+    image: '/images/network_icon.png',
   },
   {
-    name: 'Cloud Layer',
+    name: 'Mycelium Cloud',
     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.',
-    href: '#',
+      'An autonomous, stateless OS that enforces pre-deterministic deployments you define.',
+    href: '/cloud',
     icon: TrashIcon,
+    image: '/images/cloud_icon.png',
   },
   {
-    name: 'Agent Layer',
+    name: 'Mycelium Agents',
     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.',
-    href: '#',
+      'Your sovereign agent with private memory and permissioned data access—always under your control.',
+    href: '/agents',
     icon: InboxIcon,
+    image: '/images/agent_icon.png',
   },
 ]
 
 export function HomeFeatures() {
-  const cards = features.map((feature, index) => ({
-    id: index,
-    name: feature.name,
-    description: feature.description,
-    icon: <feature.icon aria-hidden="true" className="size-6 text-white" />,
-  }));
 
   return (
-    <div className="bg-white py-24">
+    <div className="">
+        <div className="relative bg-transparent py-24 overflow-hidden">
+      {/* --- Soft background gradients --- */}
+      <div
+        className="absolute -top-32 right-0 w-[600px] h-[600px] rounded-full blur-3xl opacity-50 -z-10"
+        style={{
+          background:
+            'radial-gradient(circle at center, rgba(147,197,253,0.6) 0%, rgba(165,180,252,0.4) 40%, rgba(221,214,254,0.2) 80%)',
+        }}
+      ></div>
+
+      <div
+        className="absolute -bottom-40 -left-40 w-[600px] h-[600px] rounded-full blur-3xl opacity-50 -z-10"
+        style={{
+          background:
+            'radial-gradient(circle at center, rgba(115,207,255,0.5) 0%, rgba(59,130,246,0.4) 40%, rgba(221,214,254,0.2) 90%)',
+        }}
+      ></div>
       <div className="mx-auto max-w-7xl px-6 lg:px-8">
         <div className="mx-auto max-w-2xl lg:mx-0">
           <H2 className="">
-            The Mycelium <span className="font-neuton font-bold italic">Stack</span>
+            The Building Blocks of <span className="font-neuton font-medium text-7xl italic">Decentralized Future</span>
           </H2>
           <P className="mt-6 ">
-            Built with Mycelium technology, our AI infrastructure ensures unbreakable networks, complete data sovereignty, ultra-secure agent-human communication, and unhackable data storage systems.
+            From compute and networking to intelligent automation, these components work together to empower users, developers, and organizations to build freely, without intermediaries.
           </P>
         </div>
-        <div className="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-32 lg:max-w-7xl">
-          <div className="flex items-center justify-center w-full">
-            <CardStack items={cards} offset={80} />
+        <div className="mx-auto mt-16 max-w-2xl lg:max-w-7xl">
+          <div className="grid grid-cols-1 gap-x-12 gap-y-12 lg:grid-cols-3">
+            {features.map((feature) => (
+              <div key={feature.name} className="relative flex flex-col p-8 rounded-3xl border border-gray-100 bg-white backdrop-blur-lg overflow-hidden shadow-lg hover:shadow-xl hover:border-cyan-500 hover:scale-105 transform transition-all duration-300">
+                <div className="w-30 h-30 bg-white/80 rounded-full flex items-center justify-center">
+                  <img src={feature.image} alt="" className="w-25 h-25" />
+                </div>
+                <h3 className="mt-6 text-xl font-semibold text-black">{feature.name}</h3>
+                <p className="mt-4 text-base text-gray-800">{feature.description}</p>
+                <a href={feature.href} className="mt-6 text-base font-semibold text-black">Learn more &gt;</a>
+                <div className="absolute -bottom-10 -right-10 h-50 w-50 -z-10" style={{ background: 'radial-gradient(circle, rgba(173, 239, 255, 0.6) 0%, rgba(115, 207, 255, 0.4) 100%)', filter: 'blur(80px)' }}></div>
+              </div>
+            ))}
           </div>
         </div>
       </div>
     </div>
+    </div>
   )
 }