ok

src/components/Steps.tsx

@@ -0,0 +1,64 @@
+'use client'
+
+import React, { useEffect, useMemo, useRef, useState } from 'react'
+import clsx from 'clsx'
+import { useInView } from 'framer-motion'
+import { Container } from '@/components/Container'
+import { H2, P, CT, CP } from '@/components/Texts'
+
+
+
+
+
+const features = [
+  {
+    name: '1. 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',
+  },
+  {
+    name: '2. Add Your Knowledge',
+    description:
+      'Connect your data or knowledge base to enable personalized, context-aware results while keeping your information private.',
+    icon: 'step2',
+  },
+  {
+    name: '3. 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',
+  },
+]
+
+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">
+        <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
+          </H2>
+          <P className="mt-6 text-lg">
+            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>
+        <ul 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) => (
+            <li
+              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>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </section>
+  )
+}