ok

src/components/HomeHero.tsx

@@ -5,6 +5,7 @@ import { motion } from 'framer-motion'
 import { TypeAnimation } from 'react-type-animation'
 import { Dialog, DialogPanel } from '@headlessui/react'
 import { Bars3Icon, XMarkIcon, ChevronDoubleDownIcon } from '@heroicons/react/24/outline'
+import { H1, PL } from '@/components/Texts'
 
 const navigation = [
   { name: 'Product', href: '#' },
@@ -56,25 +57,26 @@ export function HomeHero() {
         </div>
         <div className="relative -top-10  mx-auto max-w-8xl h-screen flex items-center justify-center">
           <div className="text-center max-w-5xl">
-            <TypeAnimation
-              sequence={[
-                'Decentralized Autonomous Agentic Cloud',
-                1000,
-              ]}
-              wrapper="h1"
-              speed={50}
-              className="text-5xl font-medium tracking-tight text-balance text-[#2F3178] lg:text-8xl"
-              repeat={0}
-            />
+            <H1>
+              <TypeAnimation
+                sequence={[
+                  'Decentralized Autonomous Agentic Cloud',
+                  1000,
+                ]}
+                wrapper="span"
+                speed={50}
+                repeat={0}
+              />
+            </H1>
           </div>
           <motion.div
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
             transition={{ duration: 1, delay: 1 }}
           >
-            <p className="absolute bottom-12 left-0 max-w-xl text-left text-2xl font-medium text-pretty leading-[1.2] text-[#2F3178] lg:text-3xl">
+            <PL className="absolute bottom-12 left-0 max-w-xl text-left">
               Mycelium's advancements in Agentic infrastructure supports private, secure and autonomous Agents that connect, learn and grow with you.
-            </p>
+            </PL>
           </motion.div>
           <a href="#about" className="absolute bottom-24 right-0 flex items-center gap-x-2 text-2xl font-medium text-[#2F3178] lg:text-3xl animate-bounce-y">
             <span>scroll</span>