style: improve hero section layout and text positioning for better responsiveness

src/components/HomeHero.tsx

@@ -5,7 +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'
+import { H1, H2, PL } from '@/components/Texts'
 
 const navigation = [
   { name: 'Product', href: '#' },
@@ -32,9 +32,9 @@ export function HomeHero() {
         <div className="absolute inset-0 bg-black/60" />
       </div>
       <div className="relative px-6 lg:px-8">
-        <div className="relative -top-15 mx-auto flex h-screen max-w-8xl items-center justify-center">
+        <div className="relative mt-4 mx-auto flex h-screen max-w-8xl items-center justify-center">
           <div className="text-center">
-            <div className="max-w-5xl">
+            <div className="max-w-6xl">
               <H1 color="light">
                 <TypeAnimation
                   sequence={[
@@ -55,23 +55,23 @@ export function HomeHero() {
               transition={{ duration: 1, delay: 1 }}
               className="lg:hidden"
             >
-              <PL className="mt-8 max-w-xl text-center text-gray-100" color="light">
+              <PL className="mt-12 max-w-3xl text-center text-gray-100" color="light">
+                Mycelium's advancements in Agentic infrastructure supports private, secure and autonomous Agents that connect, learn and grow with you.
+              </PL>
+            </motion.div>
+
+            {/* Desktop-only PL */}
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              transition={{ duration: 1, delay: 1 }}
+              className="hidden lg:block"
+            >
+              <PL className="mt-12 max-w-4xl text-center text-gray-100 mx-auto" color="light">
                 Mycelium's advancements in Agentic infrastructure supports private, secure and autonomous Agents that connect, learn and grow with you.
               </PL>
             </motion.div>
           </div>
-
-          {/* Desktop-only PL */}
-          <motion.div
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            transition={{ duration: 1, delay: 1 }}
-            className="hidden lg:block"
-          >
-            <PL className="absolute -bottom-8 left-0 max-w-xl text-left text-gray-100" color="light">
-              Mycelium's advancements in Agentic infrastructure supports private, secure and autonomous Agents that connect, learn and grow with you.
-            </PL>
-          </motion.div>
         </div>
       </div>
     </div>

src/components/StackSection.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { StackedCubes } from "@/components/ui/StackedCubes";
-import { H2, P } from '@/components/Texts';
+import { H1, H2, P } from '@/components/Texts';
 import { FadeIn } from "./FadeIn";
 
 export function StackSectionPreview() {