ourworld_web/www_projectmycelium_com
23
0
Fork 0
forked from emre/www_projectmycelium_com
Code Issues 3 Pull Requests Projects Releases Activity

improvements

Browse Source
This commit is contained in:
Emre
2025-10-24 02:17:33 +03:00
parent 644bb34419
commit 3a7aa82ff7
34 changed files with 740 additions and 442 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
src/pages/agents/DeploySection.tsx
View File

@@ -1,9 +1,8 @@
'use client'
"use client";
import { useRef } from 'react'
import { motion, useInView } from 'framer-motion'
import { SectionHeader, P, Eyebrow, CT, CP } from '@/components/Texts'
import { TbCircleNumber1Filled, TbCircleNumber2Filled, TbCircleNumber3Filled } from 'react-icons/tb'
import { motion } from "framer-motion";
import { SectionHeader, P, Eyebrow, CT, CP } from "@/components/Texts";
import { TbCircleNumber1Filled, TbCircleNumber2Filled, TbCircleNumber3Filled } from "react-icons/tb";
const features = [
{
@@ -23,24 +22,22 @@ const features = [
'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 DeploySection() {
const ref = useRef(null);
const isInView = useInView(ref, { once: true });
return (
<section id="benefits" ref={ref} className="relative pt-12 lg:pt-24 pb-4 px-4 lg:px-12 text-white bg-black">
<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 }}
animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
transition={{ duration: 0.8, delay: 0.1 }}
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 in Seconds
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.
@@ -48,25 +45,31 @@ export function DeploySection() {
</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 lg:mt-12 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:max-w-7xl lg:grid-cols-3"
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 }}
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-300 p-8 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 bg-white/5 backdrop-blur-md"
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="h-8 w-8 mb-4 text-white" />
<CT as="span" className="font-semibold text-left" color="light">{feature.name}</CT>
<CP className="mt-2 text-sm text-left" color="light">{feature.description}</CP>
<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>
)
);
}