style: update hero section with new cloud background and button layout

src/pages/home/HomeHero.tsx

@@ -1,36 +1,37 @@
-import { motion } from 'framer-motion'
-import { TypeAnimation } from 'react-type-animation'
-import { Container } from '../../components/Container'
+'use client'
+
+import { H1, P } from '@/components/Texts'
+import { FadeIn } from '@/components/FadeIn'
+import { Button } from '@/components/Button'
 
 export function HomeHero() {
   return (
-    <section className="relative bg-white py-20 lg:py-32">
-      <Container>
-        <div className="mx-auto max-w-4xl text-center">
-          <h1 className="text-4xl lg:text-6xl font-medium tracking-tight text-gray-900">
-            <TypeAnimation
-              sequence={[
-                'Decentralized Autonomous Agentic Cloud.',
-                1000,
-              ]}
-              wrapper="span"
-              speed={50}
-              repeat={0}
-            />
-          </h1>
-
-          <motion.div
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            transition={{ duration: 1, delay: 1 }}
-            className="mt-8"
-          >
-            <p className="text-lg lg:text-xl text-gray-600">
-              Mycelium's advancements in Agentic infrastructure supports private, secure and autonomous Agents that connect, learn and grow with you.
-            </p>
-          </motion.div>
+    <div
+      className="relative isolate overflow-hidden bg-white"
+      style={{
+        backgroundImage: 'url(/images/cloud.png)',
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+      }}
+    >
+      <div className="mx-auto max-w-7xl px-6  py-24 lg:py-32 lg:flex lg:px-8">
+        <div className="mx-auto max-w-2xl shrink-0 lg:mx-0 lg:pt-8">
+          <H1 color="primary" className="mt-10 text-5xl font-semibold tracking-tight text-pretty sm:text-7xl">
+            Decentralized Autonomous Agentic Cloud.
+          </H1>
+          <P color="secondary" className="mt-8 text-lg font-medium text-pretty sm:text-xl/8">
+            Mycelium's advancements in Agentic infrastructure supports private, secure and autonomous Agents that connect, learn and grow with you.
+          </P>
+          <div className="mt-10 flex items-center gap-x-6">
+            <Button variant="solid" color="cyan" href="#">
+              Get started
+            </Button>
+            <a href="#" className="text-sm/6 font-semibold text-gray-50">
+              Learn more <span aria-hidden="true">→</span>
+            </a>
+          </div>
         </div>
-      </Container>
-    </section>
+      </div>
+    </div>
   )
 }