feat: add AgentPro section and refactor AgentUsecase layout

- Created AgentPro component highlighting local execution, mesh connectivity, private data access, and portability advantages
- Replaced horizontal scrolling carousel in AgentUsecase with responsive grid layout
- Added "Blend local + remote intelligence" use case to AgentUsecase
- Removed slider navigation buttons and replaced with static grid display
- Replaced AgentDesign with AgentPro in AgentsPage component order
- Increased hero section padding on

src/pages/agents/AgentHeroAlt.tsx

@@ -12,7 +12,7 @@ export function AgentHeroAlt() {
         style={{ backgroundImage: "url('/images/agents.webp')", backgroundSize: "contain" }}
       >
         {/* Inner padding */}
-        <div className="px-6 py-16 lg:py-16">
+        <div className="px-6 py-16 lg:py-24">
           <div className="max-w-2xl lg:pl-6">
             <Eyebrow>MYCELIUM AGENTS - COMING IN 2026</Eyebrow>
             <H3 as="h1" className="mt-4">

src/pages/agents/AgentPro.tsx

@@ -0,0 +1,90 @@
+import { Small } from "@/components/Texts";
+import { Eyebrow, H3, P } from "@/components/Texts";
+
+const highlights = [
+  {
+    label: "Local Execution",
+    title: "Agents run entirely inside your environment.",
+    description:
+      "Models, logic, and memory stay within your own trusted hardware—never behind third-party APIs.",
+  },
+  {
+    label: "Mesh Connectivity",
+    title: "They communicate peer-to-peer across trusted nodes.",
+    description:
+      "Agents form direct encrypted paths between environments, without relays or central servers.",
+  },
+  {
+    label: "Private Data Access",
+    title: "They use your data without sending it elsewhere.",
+    description:
+      "Your datasets, embeddings, and context never leave your boundaries—processing stays local.",
+  },
+  {
+    label: "Portability",
+    title: "They move with you, not with a cloud provider.",
+    description:
+      "Agents follow your devices, networks, and workflows, remaining sovereign across every location.",
+  },
+];
+
+export function AgentPro() {
+  return (
+    <section className="relative w-full bg-[#FDFDFD] overflow-hidden">
+      {/* Top spacing line */}
+      <div className="max-w-7xl bg-[#FDFDFD] mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>
+      <div className="w-full border-t border-l border-r border-gray-100" />
+
+      {/* Intro Block */}
+      <div className="bg-[#FDFDFD] w-full max-w-7xl mx-auto border border-t-0 border-b-0 border-gray-100">
+        <div className="px-8 py-12 max-w-4xl mx-auto flex flex-col items-center justify-center min-h-[220px] text-center">
+          <Eyebrow className="uppercase tracking-[0.16em] text-cyan-600">
+            Advantages
+          </Eyebrow>
+
+          <H3 className="mt-4 text-black">
+            Why It’s Different
+          </H3>
+
+          <P className="mt-4 text-gray-700 text-base leading-relaxed">
+            Most AI systems run on centralized clouds, where the models, data, and
+            logic operate behind third-party APIs. Mycelium Agents flip that
+            architecture, it runs entirely inside your environment so control,
+            privacy, and autonomy stay with you.
+          </P>
+        </div>
+
+        {/* Grid */}
+        <div className="grid lg:grid-cols-4">
+          {highlights.map((item) => (
+            <div
+              key={item.title}
+              className="group relative overflow-hidden border border-gray-100 bg-white p-8 transition hover:border-cyan-400/40 hover:bg-white"
+            >
+              {/* Glow */}
+              <div className="absolute inset-0 bg-linear-to-br from-cyan-200/0 via-cyan-100/20 to-cyan-300/20 opacity-0 transition group-hover:opacity-100" />
+
+              <div className="relative">
+                <Small className="text-xs uppercase tracking-[0.16em] text-cyan-600">
+                  {item.label}
+                </Small>
+
+                <h3 className="mt-4 text-lg font-semibold leading-tight text-black">
+                  {item.title}
+                </h3>
+
+                <p className="mt-4 text-sm leading-relaxed text-gray-600">
+                  {item.description}
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Bottom spacing */}
+      <div className="w-full border-b border-gray-100 bg-[#FDFDFD]" />
+      <div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-100" />
+    </section>
+  );
+}

src/pages/agents/AgentUseCase.tsx

@@ -1,9 +1,6 @@
 "use client";
 
-import { useRef } from "react";
 import { Eyebrow, SectionHeader, P } from "@/components/Texts";
-import { IoArrowBackOutline, IoArrowForwardOutline } from "react-icons/io5";
-
 import {
   CpuChipIcon,
   GlobeAltIcon,
@@ -50,98 +47,75 @@ const networkUseCases = [
       "Run agents in sectors requiring strict data residency, verified identity, and controlled connectivity.",
     icon: ShieldCheckIcon,
   },
+  {
+    title: "Blend local + remote intelligence",
+    description:
+      "Let lightweight agents run locally while offloading heavy tasks to trusted nodes, maintaining privacy and performance balance.",
+    icon: CpuChipIcon,
+  },
 ];
 
 export function AgentUsecase() {
-  const sliderRef = useRef<HTMLUListElement>(null);
-
-  const scrollLeft = () =>
-    sliderRef.current?.scrollBy({ left: -400, behavior: "smooth" });
-
-  const scrollRight = () =>
-    sliderRef.current?.scrollBy({ left: 400, behavior: "smooth" });
-
   return (
     <section className="w-full max-w-8xl mx-auto bg-transparent">
-
+      {/* Top horizontal spacing line */}
-      {/* ✅ Top horizontal line with spacing */}
+      <div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>
-      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>
       <div className="w-full border-t border-l border-r border-gray-100" />
 
-      <div className="relative mx-auto max-w-7xl border border-t-0 border-b-0 border-slate-200 bg-white overflow-hidden">
+      {/* Main framed section */}
-        <ul
+      <div className="border border-t-0 border-b-0 border-gray-100 bg-white">
-          ref={sliderRef}
+        <div className="mx-auto max-w-4xl sm:text-center py-12">
-          className="flex overflow-x-auto snap-x snap-mandatory scroll-smooth no-scrollbar"
+          {/* Intro block (from isIntro item) */}
-        >
+          {networkUseCases[0].isIntro && (
-          {networkUseCases.map((item, idx) => (
+            <>
-            <li
+              <Eyebrow className="text-cyan-600">{networkUseCases[0].eyebrow}</Eyebrow>
-              key={idx}
-              className={`snap-start shrink-0 w-[85%] sm:w-[50%] lg:w-[33%] 
-                border border-slate-200 px-10 py-12 relative 
-                ${item.isIntro ? "bg-gray-50/80" : "bg-white"}`}
-            >
-              {/* INTRO CARD */}
-              {item.isIntro ? (
-                <div className="flex flex-col justify-between h-full">
-                  <div>
-                    <Eyebrow>{item.eyebrow}</Eyebrow>
               <SectionHeader
                 as="h3"
-                      className="mt-4 text-gray-900 text-xl lg:text-2xl"
+                className="mt-4 text-gray-900 text-3xl lg:text-4xl"
               >
-                      {item.title}
+                {networkUseCases[0].title}
               </SectionHeader>
-                    <P className="mt-4 text-gray-600 text-sm lg:text-base">
+              <P className="mt-6 text-lg text-gray-600">
-                      {item.description}
+                {networkUseCases[0].description}
               </P>
+            </>
+          )}
         </div>
 
-                  {/* slider buttons */}
+        {/* Grid of features (excluding intro) */}
-                  <div className="flex items-center gap-x-4 mt-6">
+        <ul
-                    <button
+          role="list"
-                      onClick={scrollLeft}
+          className="mx-auto mt-6 max-w-6xl grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-y-10 px-6 pb-16"
-                      className="h-8 w-8 flex items-center justify-center 
-                        border border-slate-300 rounded-md 
-                        hover:border-cyan-500 transition-colors"
         >
-                      <IoArrowBackOutline className="text-gray-600" size={16} />
+          {networkUseCases.slice(1).map((item, idx) => (
-                    </button>
+            <li
-
+              key={idx}
-                    <button
+              className="rounded-2xl border border-gray-200 p-8 transition-all duration-300 ease-in-out hover:scale-[1.03] hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 bg-white"
-                      onClick={scrollRight}
-                      className="h-8 w-8 flex items-center justify-center 
-                        border border-slate-300 rounded-md 
-                        hover:border-cyan-500 transition-colors"
             >
-                      <IoArrowForwardOutline className="text-gray-600" size={16} />
+              {/* Icon */}
-                    </button>
-                  </div>
-                </div>
-              ) : (
-                /* REGULAR CARD */
-                <div className="flex flex-col h-full">
               {item.icon && (
-                    <div className="h-12 w-12 flex items-center justify-center rounded-xl bg-gray-100 mb-6">
+                <div className="h-10 w-10 flex items-center justify-center rounded-xl bg-gray-100">
                   <item.icon className="h-6 w-6 text-cyan-600" />
                 </div>
               )}
 
-                  <p className="text-lg font-semibold text-gray-900">
+              {/* Title */}
+              <p className="mt-6 text-lg font-semibold text-gray-900">
                 {item.title}
               </p>
 
-                  <p className="mt-2 text-gray-600 leading-snug">
+              {/* Description */}
+              <p className="mt-2 text-gray-600 text-sm leading-snug">
                 {item.description}
               </p>
-                </div>
-              )}
             </li>
           ))}
         </ul>
       </div>
-      {/* ✅ Bottom horizontal line with spacing */}
+
+      {/* Bottom horizontal line */}
       <div className="w-full border-b border-gray-100" />
-      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>
+      <div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>
     </section>
   );
 }

src/pages/agents/AgentsPage.tsx

@@ -5,7 +5,8 @@ import { AgentBento } from './AgentBento'
 import { AgentHeroAlt } from './AgentHeroAlt'
 import { CallToAction } from './CallToAction'
 import { AgentUsecase } from './AgentUseCase'
-import { AgentDesign } from './AgentDesign'
+
+import { AgentPro } from './AgentPro'
 
 export default function AgentsPage() {
   return (
@@ -31,7 +32,7 @@ export default function AgentsPage() {
       </AnimatedSection>
 
       <AnimatedSection>
-        <AgentDesign />
+        <AgentPro />
       </AnimatedSection>
 
       <AnimatedSection>

src/pages/cloud/CloudPros.tsx

@@ -1,47 +1,66 @@
-import { Small } from '@/components/Texts'
+import { Small } from "@/components/Texts";
 
 const highlights = [
   {
-    label: 'Platform Architecture',
+    label: "Local Execution",
-    title: 'Unified compute, storage & orchestration.',
+    title: "Agents run entirely inside your environment.",
     description:
-      'One unified platform for compute, storage, and orchestration.',
+      "Models, logic, and memory stay within your own trusted hardware—never behind third-party APIs.",
   },
   {
-    label: 'Reliability',
+    label: "Mesh Connectivity",
-    title: 'Consistent performance everywhere.',
+    title: "They communicate peer-to-peer across trusted nodes.",
     description:
-      'Runs reliably across distributed environments.',
+      "Agents form direct encrypted paths between environments, without relays or central servers.",
   },
   {
-    label: 'Compatibility',
+    label: "Private Data Access",
-    title: 'Works with your existing stack.',
+    title: "They use your data without sending it elsewhere.",
     description:
-      'Works with your existing tools and workflows.',
+      "Your datasets, embeddings, and context never leave your boundaries—processing stays local.",
   },
   {
-    label: 'Scalability',
+    label: "Portability",
-    title: 'Grows with your needs.',
+    title: "They move with you, not with a cloud provider.",
     description:
-      'Scales from small projects to full environments.',
+      "Agents follow your devices, networks, and workflows, remaining sovereign across every location.",
   },
-]
+];
 
-export  function CloudPros() {
+export function AgentPro() {
   return (
     <section className="relative w-full bg-[#FDFDFD] overflow-hidden">
       {/* Top spacing line */}
       <div className="max-w-7xl bg-[#FDFDFD] mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>
       <div className="w-full border-t border-l border-r border-gray-100" />
 
+      {/* Intro Block */}
       <div className="bg-[#FDFDFD] w-full max-w-7xl mx-auto border border-t-0 border-b-0 border-gray-100">
+        <div className="px-8 py-12 max-w-3xl">
+          <Small className="uppercase tracking-[0.16em] text-cyan-600">
+            Agent Advantage
+          </Small>
+
+          <h3 className="mt-4 text-2xl lg:text-3xl font-semibold text-black">
+            Why It’s Different
+          </h3>
+
+          <p className="mt-4 text-gray-700 text-base leading-relaxed">
+            Most AI systems run on centralized clouds, where the models, data, and
+            logic operate behind third-party APIs. Mycelium Agents flip that
+            architecture—running entirely inside your environment so control,
+            privacy, and autonomy stay with you.
+          </p>
+        </div>
+
+        {/* Grid */}
         <div className="grid lg:grid-cols-4">
           {highlights.map((item) => (
             <div
               key={item.title}
               className="group relative overflow-hidden border border-gray-100 bg-white p-8 transition hover:border-cyan-400/40 hover:bg-white"
             >
-              {/* Hover glow */}
+              {/* Glow */}
               <div className="absolute inset-0 bg-linear-to-br from-cyan-200/0 via-cyan-100/20 to-cyan-300/20 opacity-0 transition group-hover:opacity-100" />
 
               <div className="relative">
@@ -62,8 +81,9 @@ export  function CloudPros() {
         </div>
       </div>
 
+      {/* Bottom spacing */}
       <div className="w-full border-b border-gray-100 bg-[#FDFDFD]" />
       <div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-100" />
     </section>
-  )
+  );
 }