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

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