ok

src/components/Steps.tsx

@@ -5,6 +5,7 @@ import clsx from 'clsx'
 import { useInView } from 'framer-motion'
 import { Container } from '@/components/Container'
 import { H2, P, CT, CP } from '@/components/Texts'
+import { TbCircleNumber1Filled, TbCircleNumber2Filled, TbCircleNumber3Filled } from 'react-icons/tb'
 
 
 
@@ -12,33 +13,33 @@ import { H2, P, CT, CP } from '@/components/Texts'
 
 const features = [
   {
-    name: '1. Choose Your Intelligence',
+    name: 'Choose Your Intelligence',
     description: 'Explore a library of leading LLMs and agentic functions. Pick the ones that fit your use case, from general assistants to specialized reasoning models.',
-    icon: 'step1',
+    icon: TbCircleNumber1Filled,
   },
   {
-    name: '2. Add Your Knowledge',
+    name: 'Add Your Knowledge',
     description:
       'Connect your data or knowledge base to enable personalized, context-aware results while keeping your information private.',
-    icon: 'step2',
+    icon: TbCircleNumber2Filled,
   },
   {
-    name: '3. Define Your Network',
+    name: 'Define Your Network',
     description:
       'Set up and manage your nodes with ease. Scale compute and storage as you grow, while staying fully sovereign and decentralized.',
-    icon: 'step3',
+    icon: TbCircleNumber3Filled,
   },
 ]
 
 export function Steps() {
   return (
-    <section id="benefits" className="bg-white py-24 sm:py-32 dark:bg-gray-900">
-      <div className="mx-auto max-w-7xl px-6 lg:px-8">
+    <section id="benefits" className="bg-white pt-0 pb-12 dark:bg-gray-900">
+      <div className="mx-auto max-w-7xl px-6 lg:px-0">
         <div className="mx-auto max-w-5xl lg:mx-0">
           <H2 className="text-3xl font-medium tracking-tight">
-            Deploy Scalable, Decentralized LLMs and AI Agents in Seconds
+            Deploy Scalable LLMs and AI Agents in Seconds
           </H2>
-          <P className="mt-6 text-lg">
+          <P className="mt-6 text-lg" color="custom">
             Launch and scale intelligence on your own terms. Mycelium Cloud makes it simple to deploy models, integrate knowledge, and run everything on a network you control.
           </P>
         </div>
@@ -48,13 +49,9 @@ export function Steps() {
               key={feature.name}
               className="rounded-2xl border border-gray-200 p-8 dark:border-gray-700"
             >
-              <img
-                src={`/images/${feature.icon}.svg`}
-                alt={feature.name}
-                className="h-8 w-8 mb-4"
-              />
-              <CT as="h3" className="font-semibold">{feature.name}</CT>
-              <CP className="mt-2 text-sm">{feature.description}</CP>
+              <feature.icon className="h-8 w-8 mb-4 text-[#2F3178]" />
+              <CT as="span" className="font-semibold">{feature.name}</CT>
+              <CP className="mt-2 text-sm" color="custom">{feature.description}</CP>
             </li>
           ))}
         </ul>