emre/www_projectmycelium_com
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki 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

28
src/components/magicui/infinite-moving-cards.tsx
View File

@@ -66,37 +66,19 @@ export const InfiniteMovingCards = ({
return (
<div
ref={containerRef}
className={cn(
"scroller relative z-20 max-w-7xl overflow-hidden [mask-image:linear-gradient(to_right,transparent,white_20%,white_80%,transparent)]",
className
)}
className={cn("scroller relative z-20 overflow-hidden", className)}
>
<ul
ref={scrollerRef}
className={cn(
"flex min-w-full shrink-0 gap-4 py-4 w-max flex-nowrap",
"flex min-w-full shrink-0 gap-16 py-4 w-max flex-nowrap",
start && "animate-scroll",
pauseOnHover && "hover:[animation-play-state:paused]"
pauseOnHover && "hover:[animation-play-state:paused]",
)}
>
{items.map((item, idx) => (
<li
className="w-[350px] max-w-full relative rounded-2xl border border-b-0 flex-shrink-0 border-slate-700 px-8 py-6 md:w-[450px]"
style={{
background:
"linear-gradient(180deg, var(--slate-800), var(--slate-900))",
}}
key={idx}
>
<blockquote>
<div
aria-hidden="true"
className="user-select-none -z-1 pointer-events-none absolute -left-0.5 -top-0.5 h-[calc(100%_+_4px)] w-[calc(100%_+_4px)]"
></div>
<span className="relative z-20 text-sm leading-[1.6] text-gray-100 font-normal">
{item}
</span>
</blockquote>
<li className="relative flex-shrink-0" key={idx}>
{item}
</li>
))}
</ul>

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>
)
}

17
src/styles/tailwind.css
View File

@@ -1,5 +1,22 @@
@import 'tailwindcss';
@theme {
--animate-scroll: scroll var(--animation-duration, 40s) var(--animation-direction, forwards) linear infinite;
@keyframes scroll {
to {
transform: translate(calc(-50% - 0.5rem));
}
}
--animate-pulse-slow: pulse 6s ease-in-out infinite;
@keyframes pulse {
'0%, 100%': { opacity: '1' },
'50%': { opacity: '0.6' }
}
}
@plugin '@tailwindcss/forms';
@theme {