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

refactor: update deploy section UI with dark theme and hover animations

Browse Source
This commit is contained in:
sasha-astiadi
2025-10-22 17:51:43 +02:00
parent f30006a983
commit 8ea15271d3
3 changed files with 42 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,7 +1,9 @@
'use client'
import React, { useRef } from 'react'
import { motion, useInView } from 'framer-motion'
import { useRef } from 'react'
import { SectionHeader, P, Eyebrow, FeatureTitle, FeatureDescription } from '@/components/Texts'
import { TbCircleNumber1Filled, TbCircleNumber2Filled, TbCircleNumber3Filled } from 'react-icons/tb'
import { Container } from '../../components/Container'
const features = [
{
@@ -24,30 +26,31 @@ const features = [
]
export function DeploySection() {
const ref = useRef(null)
const isInView = useInView(ref, { once: true })
const ref = useRef(null);
const isInView = useInView(ref, { once: true });
return (
<section ref={ref} className="bg-white py-20 lg:py-32">
<Container>
<section id="benefits" ref={ref} className="relative pt-12 lg:pt-24 pb-4 px-4 lg:px-12 text-white bg-black">
<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 }}
className="mx-auto max-w-3xl text-center"
className="mx-auto max-w-5xl text-center"
>
<h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
<Eyebrow color="accent">Get Started</Eyebrow>
<SectionHeader className="text-3xl font-medium tracking-tight" color="light">
Deploy Scalable LLMs and AI Agents in Seconds
</h2>
<p className="mt-6 text-lg text-gray-600">
</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>
</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-6 sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-3"
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"
>
{features.map((feature, index) => (
<motion.li
@@ -55,15 +58,15 @@ export function DeploySection() {
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 bg-gray-50 p-8 hover:border-cyan-500 hover:shadow-lg transition-all duration-300"
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"
>
<feature.icon className="h-8 w-8 mb-4 text-cyan-500" />
<h3 className="text-lg font-semibold text-gray-900">{feature.name}</h3>
<p className="mt-3 text-sm text-gray-600">{feature.description}</p>
<feature.icon className="h-8 w-8 mb-4 text-white" />
<FeatureTitle as="span" className="font-semibold" color="light">{feature.name}</FeatureTitle>
<FeatureDescription className="mt-2 text-sm" color="light">{feature.description}</FeatureDescription>
</motion.li>
))}
</motion.ul>
</Container>
</div>
</section>
)
}