forked from emre/www_projectmycelium_com
96 lines
4.6 KiB
TypeScript
96 lines
4.6 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from "framer-motion";
|
|
import { SectionHeader, P, Eyebrow, CT, CP } from "@/components/Texts";
|
|
import type { ComponentPropsWithoutRef } from "react";
|
|
|
|
type CircleIconProps = ComponentPropsWithoutRef<"svg">;
|
|
|
|
const CircleNumber1Icon = (props: CircleIconProps) => (
|
|
<svg viewBox="0 0 24 24" fill="currentColor" {...props}>
|
|
<path d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2zm.994 5.886c-.083-.777-1.008-1.16-1.617-.67l-.084.077-2 2-.083.094a1 1 0 000 1.226l.083.094.094.083a1 1 0 001.226 0l.094-.083.293-.293v5.586l.007.117a1 1 0 001.986 0l.007-.117v-8l-.006-.114z" />
|
|
</svg>
|
|
);
|
|
|
|
const CircleNumber2Icon = (props: CircleIconProps) => (
|
|
<svg viewBox="0 0 24 24" fill="currentColor" {...props}>
|
|
<path d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2zm1 5h-3l-.117.007a1 1 0 000 1.986l.117.007h3v2h-2l-.15.005a2 2 0 00-1.844 1.838l-.006.157v2l.005.15a2 2 0 001.838 1.844l.157.006h3l.117-.007a1 1 0 000-1.986l-.117-.007h-3v-2h2l.15-.005a2 2 0 001.844-1.838l.006-.157v-2l-.005-.15a2 2 0 00-1.838-1.844l-.157-.006z" />
|
|
</svg>
|
|
);
|
|
|
|
const CircleNumber3Icon = (props: CircleIconProps) => (
|
|
<svg viewBox="0 0 24 24" fill="currentColor" {...props}>
|
|
<path d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2zm1 5h-2l-.15.005a2 2 0 00-1.85 1.995 1 1 0 001.974.23l.02-.113.006-.117h2v2h-2l-.133.007c-1.111.12-1.154 1.73-.128 1.965l.128.021.133.007h2v2h-2l-.007-.117a1 1 0 00-1.993.117 2 2 0 001.85 1.995l.15.005h2l.15-.005a2 2 0 001.844-1.838l.006-.157v-2l-.005-.15a1.988 1.988 0 00-.17-.667l-.075-.152-.019-.032.02-.03a2.01 2.01 0 00.242-.795l.007-.174v-2l-.005-.15a2 2 0 00-1.838-1.844l-.157-.006z" />
|
|
</svg>
|
|
);
|
|
|
|
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: CircleNumber1Icon,
|
|
},
|
|
{
|
|
name: 'Add Your Knowledge',
|
|
description:
|
|
'Connect your data or knowledge base to enable personalized, context-aware results while keeping your information private.',
|
|
icon: CircleNumber2Icon,
|
|
},
|
|
{
|
|
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: CircleNumber3Icon,
|
|
},
|
|
];
|
|
|
|
export function DeploySection() {
|
|
return (
|
|
<section id="benefits" className="relative bg-black px-4 pb-4 pt-12 text-white lg:px-12 lg:pt-24">
|
|
<div className="relative px-6 lg:px-12">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true, amount: 0.3 }}
|
|
transition={{ duration: 0.6, ease: "easeOut", delay: 0.1 }}
|
|
className="mx-auto max-w-5xl text-center"
|
|
>
|
|
<Eyebrow color="accent">Get Started</Eyebrow>
|
|
<SectionHeader className="text-3xl font-medium tracking-tight" color="light">
|
|
Deploy Scalable LLMs and AI Agents
|
|
</SectionHeader>
|
|
<P className="mt-6" 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>
|
|
<motion.ul
|
|
initial={{ opacity: 0 }}
|
|
whileInView={{ opacity: 1 }}
|
|
viewport={{ once: true, amount: 0.2 }}
|
|
transition={{ duration: 0.5, delay: 0.2 }}
|
|
className="mx-auto mt-8 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-8 text-base/7 sm:grid-cols-2 sm:gap-y-16 lg:mx-12 lg:mt-12 lg:max-w-7xl lg:grid-cols-3"
|
|
>
|
|
{features.map((feature, index) => (
|
|
<motion.li
|
|
key={feature.name}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true, amount: 0.2 }}
|
|
transition={{ duration: 0.45, delay: 0.3 + index * 0.15, ease: "easeOut" }}
|
|
className="rounded-2xl border border-gray-300 bg-white/5 p-8 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 backdrop-blur-md"
|
|
>
|
|
<feature.icon className="mb-4 h-8 w-8 text-white" />
|
|
<CT as="span" className="text-left font-semibold" color="light">
|
|
{feature.name}
|
|
</CT>
|
|
<CP className="mt-2 text-left text-sm" color="light">
|
|
{feature.description}
|
|
</CP>
|
|
</motion.li>
|
|
))}
|
|
</motion.ul>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|