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/cloud/CloudPros.tsx

@@ -1,47 +1,66 @@
-import { Small } from '@/components/Texts'
+import { Small } from "@/components/Texts";
 
 const highlights = [
   {
-    label: 'Platform Architecture',
-    title: 'Unified compute, storage & orchestration.',
+    label: "Local Execution",
+    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',
-    title: 'Consistent performance everywhere.',
+    label: "Mesh Connectivity",
+    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',
-    title: 'Works with your existing stack.',
+    label: "Private Data Access",
+    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',
-    title: 'Grows with your needs.',
+    label: "Portability",
+    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>
-  )
+  );
 }