72 lines
2.9 KiB
TypeScript
72 lines
2.9 KiB
TypeScript
'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>
|
|
)
|
|
}
|