ok

src/components/Archives/Steps copy.tsx

@@ -0,0 +1,71 @@
+'use client'
+
+import React, { useRef } from 'react'
+import { motion, useInView } from 'framer-motion'
+import { H2, P, CT, CP } from '@/components/Texts'
+import { TbCircleNumber1Filled, TbCircleNumber2Filled, TbCircleNumber3Filled } from 'react-icons/tb'
+
+const features = [
+  {
+    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: TbCircleNumber1Filled,
+  },
+  {
+    name: 'Add Your Knowledge',
+    description:
+      'Connect your data or knowledge base to enable personalized, context-aware results while keeping your information private.',
+    icon: TbCircleNumber2Filled,
+  },
+  {
+    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: TbCircleNumber3Filled,
+  },
+]
+
+export function Steps() {
+  const ref = useRef(null);
+  const isInView = useInView(ref, { once: true });
+
+  return (
+    <section id="benefits" ref={ref} className="bg-white pt-0 pb-24 dark:bg-gray-900">
+      <div className="mx-auto max-w-7xl px-6 lg:px-0">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
+          transition={{ duration: 0.8, delay: 0.1 }}
+          className="mx-auto max-w-5xl lg:mx-0"
+        >
+          <H2 className="text-3xl font-medium tracking-tight">
+            Deploy Scalable LLMs and AI Agents in Seconds
+          </H2>
+          <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>
+        </motion.div>
+        <motion.ul
+          initial={{ opacity: 0 }}
+          animate={isInView ? { opacity: 1 } : { opacity: 0 }}
+          transition={{ duration: 0.5, delay: 0.2, staggerChildren: 0.2 }}
+          className="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 text-base/7 sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-3"
+        >
+          {features.map((feature, index) => (
+            <motion.li
+              key={feature.name}
+              initial={{ opacity: 0, y: 20 }}
+              animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
+              transition={{ duration: 0.5, delay: 0.3 + index * 0.2 }}
+              className="rounded-2xl border border-gray-200 p-8 dark:border-gray-700"
+            >
+              <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>
+            </motion.li>
+          ))}
+        </motion.ul>
+      </div>
+    </section>
+  )
+}

src/components/Steps.tsx

@@ -30,18 +30,19 @@ export function Steps() {
   const isInView = useInView(ref, { once: true });
 
   return (
-    <section id="benefits" ref={ref} className="bg-white pt-0 pb-24 dark:bg-gray-900">
+    <section id="benefits" ref={ref} className="relative bg-cover bg-center py-32 -top-20 text-white" style={{ backgroundImage: "url('/images/deployment.webp')" }}>
-      <div className="mx-auto max-w-7xl px-6 lg:px-0">
+      <div className="absolute inset-0 bg-black/70" />
+      <div className="relative px-6 lg:px-4">
         <motion.div
           initial={{ opacity: 0, y: 20 }}
           animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
           transition={{ duration: 0.8, delay: 0.1 }}
           className="mx-auto max-w-5xl lg:mx-0"
         >
-          <H2 className="text-3xl font-medium tracking-tight">
+          <H2 className="text-3xl font-medium tracking-tight" color="light">
             Deploy Scalable LLMs and AI Agents in Seconds
           </H2>
-          <P className="mt-6 text-lg" color="custom">
+          <P className="mt-6 text-lg" color="light">
             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>
         </motion.div>
@@ -57,11 +58,11 @@ export function Steps() {
               initial={{ opacity: 0, y: 20 }}
               animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
               transition={{ duration: 0.5, delay: 0.3 + index * 0.2 }}
-              className="rounded-2xl border border-gray-200 p-8 dark:border-gray-700"
+              className="rounded-2xl border border-white/20 bg-black/20 p-8 backdrop-blur-sm"
             >
-              <feature.icon className="h-8 w-8 mb-4 text-[#2F3178]" />
+              <feature.icon className="h-8 w-8 mb-4 text-white" />
-              <CT as="span" className="font-semibold">{feature.name}</CT>
+              <CT as="span" className="font-semibold" color="light">{feature.name}</CT>
-              <CP className="mt-2 text-sm" color="custom">{feature.description}</CP>
+              <CP className="mt-2 text-sm" color="light">{feature.description}</CP>
             </motion.li>
           ))}
         </motion.ul>