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

src/components/magicui/infinite-moving-cards.tsx

@@ -66,37 +66,19 @@ export const InfiniteMovingCards = ({
   return (
     <div
       ref={containerRef}
-      className={cn(
+      className={cn("scroller relative z-20 overflow-hidden", className)}
-        "scroller relative z-20 max-w-7xl overflow-hidden [mask-image:linear-gradient(to_right,transparent,white_20%,white_80%,transparent)]",
-        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
+          <li className="relative flex-shrink-0" key={idx}>
-            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]"
+            {item}
-            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>
         ))}
       </ul>

src/pages/agents/DeploySection.tsx

@@ -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 ref = useRef(null);
-  const isInView = useInView(ref, { once: true })
+  const isInView = useInView(ref, { once: true });
 
   return (
-    <section ref={ref} className="bg-white py-20 lg:py-32">
+    <section id="benefits" ref={ref} className="relative pt-12 lg:pt-24 pb-4 px-4 lg:px-12  text-white bg-black">
-      <Container>
+      <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>
+          </SectionHeader>
-          <p className="mt-6 text-lg text-gray-600">
+          <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" />
+              <feature.icon className="h-8 w-8 mb-4 text-white" />
-              <h3 className="text-lg font-semibold text-gray-900">{feature.name}</h3>
+              <FeatureTitle as="span" className="font-semibold" color="light">{feature.name}</FeatureTitle>
-              <p className="mt-3 text-sm text-gray-600">{feature.description}</p>
+              <FeatureDescription className="mt-2 text-sm" color="light">{feature.description}</FeatureDescription>
             </motion.li>
           ))}
         </motion.ul>
-      </Container>
+      </div>
     </section>
   )
 }

src/styles/tailwind.css

@@ -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 {