src/App.tsx

@@ -7,6 +7,7 @@ import HeroSplitMediaGrid from '@/components/sections/hero/HeroSplitMediaGrid';
 import NavbarCentered from '@/components/ui/NavbarCentered';
 import ProductMediaCards from '@/components/sections/product/ProductMediaCards';
 import TestimonialOverlayCards from '@/components/sections/testimonial/TestimonialOverlayCards';
+import HeroBillboard from '@/components/sections/hero/HeroBillboard';
 
 export default function App() {
   return (
@@ -290,6 +291,11 @@ export default function App() {
       ]}
     />
   </div>
-    </>
+    
+
+  <div id="hero" data-section="hero">
+    <HeroBillboard />
+  </div>
+</>
   );
 }

src/components/sections/hero/HeroBillboard.tsx

@@ -9,7 +9,9 @@ type HeroBillboardProps = {
   description: string;
   primaryButton: { text: string; href: string };
   secondaryButton: { text: string; href: string };
-} & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
+  imageSrc?: string;
+  videoSrc?: string;
+};
 
 const HeroBillboard = ({
   tag,
@@ -21,23 +23,23 @@ const HeroBillboard = ({
   videoSrc,
 }: HeroBillboardProps) => {
   return (
-    <section aria-label="Hero section" className="pt-25 pb-20 md:py-30">
-      <div className="flex flex-col gap-10 md:gap-13 w-content-width mx-auto">
+    <section aria-label="Hero section" className="flex flex-col justify-center min-h-svh pt-25 pb-20 md:py-0">
+      <div className="flex flex-col items-center gap-8 w-content-width mx-auto">
         <div className="flex flex-col items-center gap-3 text-center">
-          <span className="px-3 py-1 mb-1 text-sm card rounded">{tag}</span>
+          <span className="px-3 py-1 mb-2 text-sm card rounded">{tag}</span>
 
           <TextAnimation
             text={title}
-            variant="slide-up"
+            variant="fade"
             tag="h1"
-            className="text-6xl font-medium text-balance"
+            className="text-7xl 2xl:text-8xl font-medium text-balance"
           />
 
           <TextAnimation
             text={description}
-            variant="slide-up"
+            variant="fade"
             tag="p"
-            className="text-base md:text-lg leading-tight text-balance"
+            className="max-w-2xl text-lg md:text-xl leading-tight"
           />
 
           <div className="flex flex-wrap justify-center gap-3 mt-2">
@@ -50,13 +52,13 @@ const HeroBillboard = ({
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.6, ease: "easeOut", delay: 0.2 }}
-          className="w-full p-3 md:p-5 card rounded overflow-hidden"
+          className="w-full h-[50vh] md:h-[60vh] p-3 card rounded overflow-hidden"
         >
-          <ImageOrVideo imageSrc={imageSrc} videoSrc={videoSrc} className="aspect-4/5 md:aspect-video" />
+          <ImageOrVideo imageSrc={imageSrc} videoSrc={videoSrc} />
         </motion.div>
       </div>
     </section>
   );
 };
 
-export default HeroBillboard;
+export default HeroBillboard;