refactor: improve AgentUseCase layout and typography with responsive background image

- Added leading-normal to CT text component for better readability
- Changed AgentHeroAlt background image to only display on md+ screens using md:bg-[url(...)] classes
- Removed inline style attribute in favor of Tailwind classes for background image
- Updated AgentUseCase to use typography components (H3, CT, CP) instead of generic elements
- Changed Eyebrow color from text-cyan-600 to text-cyan-500
- Adjuste

src/components/Texts.tsx

@@ -162,5 +162,5 @@ export const DownloadCardDescription = createTextComponent(
   'text-base/7 leading-normal tracking-normal'
 )
 
-export const CT = createTextComponent('span', 'text-base lg:text-lg font-medium')
+export const CT = createTextComponent('span', 'text-base lg:text-lg leading-normal font-medium')
 export const CP = createTextComponent('p', 'text-sm lg:text-base tracking-wide leading-tight font-light')

src/pages/agents/AgentHeroAlt.tsx

@@ -8,8 +8,7 @@ export function AgentHeroAlt() {
     <div className="">
       {/* Boxed container */}
       <div
-        className="relative mx-auto max-w-7xl border border-t-0 border-b-0 border-gray-100 bg-white overflow-hidden bg-contain bg-right bg-no-repeat"
+        className="relative mx-auto max-w-7xl border border-t-0 border-b-0 border-gray-100 bg-white overflow-hidden md:bg-[url('/images/agents.webp')] md:bg-contain md:bg-right md:bg-no-repeat"
-        style={{ backgroundImage: "url('/images/agents.webp')", backgroundSize: "contain" }}
       >
         {/* Inner padding */}
         <div className="px-6 py-16 lg:py-24">

src/pages/agents/AgentUseCase.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Eyebrow, SectionHeader, P } from "@/components/Texts";
+import { Eyebrow,  P, CT, CP, H3} from "@/components/Texts";
 import {
   CpuChipIcon,
   GlobeAltIcon,
@@ -63,19 +63,18 @@ export function AgentUsecase() {
       <div className="w-full border-t border-l border-r border-gray-100" />
 
       {/* Main framed section */}
-      <div className="border border-t-0 border-b-0 border-gray-100 bg-white">
+      <div className="max-w-7xl bg-white mx-auto py-12 border border-t-0 border-b-0 border-gray-100">
-        <div className="mx-auto max-w-4xl sm:text-center py-12">
+        <div className="mx-auto max-w-3xl sm:text-center px-6 lg:px-8">
           {/* Intro block (from isIntro item) */}
           {networkUseCases[0].isIntro && (
             <>
-              <Eyebrow className="text-cyan-600">{networkUseCases[0].eyebrow}</Eyebrow>
+              <Eyebrow className="text-cyan-500">{networkUseCases[0].eyebrow}</Eyebrow>
-              <SectionHeader
+              <H3
-                as="h3"
+                className="mt-4 text-gray-900"
-                className="mt-4 text-gray-900 text-3xl lg:text-4xl"
               >
                 {networkUseCases[0].title}
-              </SectionHeader>
+              </H3>
-              <P className="mt-6 text-lg text-gray-600">
+              <P className="mt-4 text-lg text-gray-600">
                 {networkUseCases[0].description}
               </P>
             </>
@@ -85,7 +84,7 @@ export function AgentUsecase() {
         {/* Grid of features (excluding intro) */}
         <ul
           role="list"
-          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="mx-auto mt-8 max-w-6xl grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-y-10 px-6"
         >
           {networkUseCases.slice(1).map((item, idx) => (
             <li
@@ -94,20 +93,20 @@ export function AgentUsecase() {
             >
               {/* Icon */}
               {item.icon && (
-                <div className="h-10 w-10 flex items-center justify-center rounded-xl bg-gray-100">
+                <div className="h-10 w-10 mb-2 flex items-center justify-center rounded-xl bg-gray-100">
-                  <item.icon className="h-6 w-6 text-cyan-600" />
+                  <item.icon className="h-6 w-6 text-cyan-500" />
                 </div>
               )}
 
               {/* Title */}
-              <p className="mt-6 text-lg font-semibold text-gray-900">
+              <CT className="leading-normal text-gray-900">
                 {item.title}
-              </p>
+              </CT>
 
               {/* Description */}
-              <p className="mt-2 text-gray-600 text-sm leading-snug">
+              <CP className="mt-2 text-gray-600 text-sm leading-snug">
                 {item.description}
-              </p>
+              </CP>
             </li>
           ))}
         </ul>