src/components/sections/hero/HeroBillboardScroll.tsx

@@ -29,49 +29,53 @@ const HeroBillboardScroll = ({
   const scale = useTransform(scrollYProgress, [0, 1], [1.05, 1]);
 
   return (
-    <section aria-label="Hero section" className="relative mb-20">
+    <section aria-label="Hero section" className="relative mb-20 min-h-screen flex items-center">
       <HeroBackgroundSlot />
       <div
         ref={containerRef}
-        className="pt-25 pb-20 md:py-30 perspective-distant"
+        className="w-full pt-25 pb-20 md:py-30 perspective-distant z-10"
       >
-        <div className="w-content-width mx-auto">
-          <div className="flex flex-col items-start gap-2 text-left">
-            <span className="px-3 py-1 mb-1 text-sm card rounded">{tag}</span>
+        <div className="w-content-width mx-auto grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
+          <div className="hidden md:block"></div>
 
-            <TextAnimation
-              text={title}
-              variant="fade"
-              gradientText={true}
-              tag="h1"
-              className="text-6xl font-medium text-balance"
-            />
+          <div className="flex flex-col items-center md:items-end text-center md:text-right gap-8">
+            <div className="flex flex-col items-center md:items-end gap-2">
+              <span className="px-3 py-1 mb-1 text-sm card rounded">{tag}</span>
 
-            <TextAnimation
-              text={description}
-              variant="fade"
-              gradientText={false}
-              tag="p"
-              className="text-base md:text-lg leading-tight text-balance"
-            />
+              <TextAnimation
+                text={title}
+                variant="fade"
+                gradientText={true}
+                tag="h1"
+                className="text-6xl font-medium text-balance"
+              />
 
-            <div className="flex flex-wrap justify-start gap-3 mt-3">
-              <Button text={primaryButton.text} href={primaryButton.href} variant="primary"/>
-              <Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary"animationDelay={0.1} />
+              <TextAnimation
+                text={description}
+                variant="fade"
+                gradientText={false}
+                tag="p"
+                className="text-base md:text-lg leading-tight text-balance"
+              />
+
+              <div className="flex flex-wrap justify-center md:justify-end gap-3 mt-3">
+                <Button text={primaryButton.text} href={primaryButton.href} variant="primary"/>
+                <Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary" animationDelay={0.1} />
+              </div>
             </div>
+
+            <div className="w-full p-3 card rounded overflow-hidden rotate-x-20 md:hidden">
+              <ImageOrVideo imageSrc={imageSrc} videoSrc={videoSrc} className="aspect-4/5" />
+            </div>
+
+            <motion.div
+              style={{ rotateX: rotate, scale }}
+              className="w-full p-3 xl:p-4 2xl:p-5 card rounded overflow-hidden hidden md:block"
+            >
+              <ImageOrVideo imageSrc={imageSrc} videoSrc={videoSrc} className="aspect-video" />
+            </motion.div>
           </div>
         </div>
-
-        <div className="w-content-width mx-auto mt-8 p-3 card rounded overflow-hidden rotate-x-20 md:hidden flex justify-end">
-          <ImageOrVideo imageSrc={imageSrc} videoSrc={videoSrc} className="aspect-4/5" />
-        </div>
-
-        <motion.div
-          style={{ rotateX: rotate, scale }}
-          className="w-content-width mx-auto mt-5 2xl:mt-2 p-3 xl:p-4 2xl:p-5 card rounded overflow-hidden hidden md:block flex justify-end"
-        >
-          <ImageOrVideo imageSrc={imageSrc} videoSrc={videoSrc} className="aspect-video" />
-        </motion.div>
       </div>
     </section>
   );