feat: add animated text flip and pointer highlight components with home agent section

src/components/ui/layout-text-flip.tsx

@@ -0,0 +1,58 @@
+"use client";
+import React, { useState, useEffect } from "react";
+import { motion, AnimatePresence } from "motion/react";
+import { cn } from "@/lib/utils";
+
+export const LayoutTextFlip = ({
+  text = "Build Amazing",
+  words = ["Landing Pages", "Component Blocks", "Page Sections", "3D Shaders"],
+  duration = 3000,
+}: {
+  text: string;
+  words: string[];
+  duration?: number;
+}) => {
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setCurrentIndex((prevIndex) => (prevIndex + 1) % words.length);
+    }, duration);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <>
+      <motion.span
+        layoutId="subtext"
+        className="text-2xl font-bold tracking-tight drop-shadow-lg md:text-4xl"
+      >
+        {text}
+      </motion.span>
+
+      <motion.span
+        layout
+        className="relative w-fit overflow-hidden px-8 py-2 font-neuton font-medium italic tracking-tight"
+      >
+        <AnimatePresence mode="popLayout">
+          <motion.span
+            key={currentIndex}
+            initial={{ y: -40, filter: "blur(10px)" }}
+            animate={{
+              y: 0,
+              filter: "blur(0px)",
+            }}
+            exit={{ y: 50, filter: "blur(10px)", opacity: 0 }}
+            transition={{
+              duration: 0.5,
+            }}
+            className={cn("inline-block whitespace-nowrap")}
+          >
+            {words[currentIndex]}
+          </motion.span>
+        </AnimatePresence>
+      </motion.span>
+    </>
+  );
+};

src/components/ui/pointer-highlight.tsx

@@ -0,0 +1,119 @@
+"use client";
+import { cn } from "@/lib/utils";
+import { motion } from "motion/react";
+import { useRef, useEffect, useState } from "react";
+
+export function PointerHighlight({
+  children,
+  rectangleClassName,
+  pointerClassName,
+  containerClassName,
+}: {
+  children: React.ReactNode;
+  rectangleClassName?: string;
+  pointerClassName?: string;
+  containerClassName?: string;
+}) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
+
+  useEffect(() => {
+    if (containerRef.current) {
+      const { width, height } = containerRef.current.getBoundingClientRect();
+      setDimensions({ width, height });
+    }
+
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const { width, height } = entry.contentRect;
+        setDimensions({ width, height });
+      }
+    });
+
+    if (containerRef.current) {
+      resizeObserver.observe(containerRef.current);
+    }
+
+    return () => {
+      if (containerRef.current) {
+        resizeObserver.unobserve(containerRef.current);
+      }
+    };
+  }, []);
+
+  return (
+    <div
+      className={cn("relative w-fit", containerClassName)}
+      ref={containerRef}
+    >
+      {children}
+      {dimensions.width > 0 && dimensions.height > 0 && (
+        <motion.div
+          className="pointer-events-none absolute inset-0 z-0"
+          initial={{ opacity: 0, scale: 0.95, originX: 0, originY: 0 }}
+          animate={{ opacity: 1, scale: 1 }}
+          transition={{ duration: 0.5, ease: "easeOut" }}
+        >
+          <motion.div
+            className={cn(
+              "absolute inset-0 border border-neutral-800 dark:border-neutral-200",
+              rectangleClassName,
+            )}
+            initial={{
+              width: 0,
+              height: 0,
+            }}
+            whileInView={{
+              width: dimensions.width,
+              height: dimensions.height,
+            }}
+            transition={{
+              duration: 1,
+              ease: "easeInOut",
+            }}
+          />
+          <motion.div
+            className="pointer-events-none absolute"
+            initial={{ opacity: 0 }}
+            whileInView={{
+              opacity: 1,
+              x: dimensions.width + 4,
+              y: dimensions.height + 4,
+            }}
+            style={{
+              rotate: -90,
+            }}
+            transition={{
+              opacity: { duration: 0.1, ease: "easeInOut" },
+              duration: 1,
+              ease: "easeInOut",
+            }}
+          >
+            <Pointer
+              className={cn("h-5 w-5 text-blue-500", pointerClassName)}
+            />
+          </motion.div>
+        </motion.div>
+      )}
+    </div>
+  );
+}
+
+const Pointer = ({ ...props }: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      stroke="currentColor"
+      fill="currentColor"
+      strokeWidth="1"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      viewBox="0 0 16 16"
+      height="1em"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path d="M14.082 2.182a.5.5 0 0 1 .103.557L8.528 15.467a.5.5 0 0 1-.917-.007L5.57 10.694.803 8.652a.5.5 0 0 1-.006-.916l12.728-5.657a.5.5 0 0 1 .556.103z"></path>
+    </svg>
+  );
+};

src/pages/home/HomeAgent.tsx

@@ -0,0 +1,65 @@
+import { H2, P } from '@/components/Texts'
+import { Button } from '@/components/Button'
+import { LayoutTextFlip } from '@/components/ui/layout-text-flip' // make sure this import path is correct
+
+export function HomeAgent() {
+  return (
+    <div className="relative isolate overflow-hidden bg-white">
+      <div className="px-6 py-24 sm:py-32 lg:px-8">
+        <div className="mx-auto max-w-4xl text-center">
+          <H2>
+            Deploy your own{" "}
+            <span className="font-neuton text-left text-black font-medium text-7xl italic  bg-clip-text bg-gradient-to-r from-blue-400 via-cyan-400 to-violet-400">
+              <LayoutTextFlip
+                text=""
+                words={[
+                  "GPT-5",
+                  "Claude 3.5",
+                  "Gemini 1.5",
+                  "Mistral 7B",
+                  "Llama 3.1",
+                  
+                  "AI Agents",
+                ]}
+              />
+            </span>
+          </H2>
+
+          <P className="mx-auto mt-6 max-w-xl text-lg/8 text-pretty text-gray-600">
+            Mycelium delivers enterprise-grade AI agents with unmatched customizability and the fastest time to production — all in the agent platform designed for real business use cases.
+          </P>
+
+          <div className="mt-10 flex items-center justify-center gap-x-6">
+            <Button variant="solid" color="cyan" href="/signup">
+              Get started
+            </Button>
+            <a href="/agents" className="text-sm/6 font-semibold text-gray-900 hover:text-gray-600">
+              Learn more <span aria-hidden="true">→</span>
+            </a>
+          </div>
+        </div>
+      </div>
+
+      <svg
+        viewBox="0 0 1024 1024"
+        aria-hidden="true"
+        className="absolute top-1/2 left-1/2 -z-10 size-256 -translate-x-1/2 mask-[radial-gradient(closest-side,white,transparent)]"
+      >
+        <circle
+          r={512}
+          cx={512}
+          cy={512}
+          fill="url(#8d958450-c69f-4251-94bc-4e091a323369)"
+          fillOpacity="0.7"
+        />
+        <defs>
+          <radialGradient id="8d958450-c69f-4251-94bc-4e091a323369" cx="50%" cy="50%" r="50%">
+            <stop offset="0%" stopColor="#60A5FA" /> {/* blue-400 */}
+            <stop offset="50%" stopColor="#06B6D4" /> {/* cyan-500 */}
+            <stop offset="100%" stopColor="#A78BFA" /> {/* violet-400 */}
+          </radialGradient>
+        </defs>
+      </svg>
+    </div>
+  )
+}

src/pages/home/HomeCloud.tsx

@@ -40,7 +40,7 @@ export function HomeCloud() {
                 ))}
               </ul>
               <div className="mt-10 flex">
-                <a href="#" className="text-sm/6 font-semibold text-cyan-600 hover:text-cyan-500">
+                <a href="/cloud" className="text-sm/6 font-semibold text-cyan-600 hover:text-cyan-500">
                   Learn more 
                   <span aria-hidden="true"> &rarr;</span>
                 </a>

src/pages/home/HomePage.tsx

@@ -7,8 +7,8 @@ import { HomeHeroDark } from './HomeHeroDark'
 import { HomeAurora } from './HomeAurora'
 import { HomeMapSection } from './HomeMap'
 import { HomeFeatures } from './HomeFeatures'
-import { HalfGlobe } from '@/components/ui/HalfGlobe'
 import { HomeCloud } from './HomeCloud'
+import { HomeAgent } from './HomeAgent'
 
 export default function HomePage() {
   return (
@@ -29,6 +29,10 @@ export default function HomePage() {
        <HomeCloud />
       </AnimatedSection>
 
+      <AnimatedSection>
+       <HomeAgent />
+      </AnimatedSection>
+
     </div>
   )
 }