Bob AI: Modify the HeroSplit component to use a video background fro

Merge version_1 into main

src/components/sections/hero/HeroSplit.tsx

@@ -133,10 +133,23 @@ const HeroSplit = ({
 
   return (
     <section
+      id="hero"
       aria-label={ariaLabel}
       className={cls("relative w-full h-fit py-hero-page-padding md:py-0 md:h-svh flex items-center", className)}
     >
-      <HeroBackgrounds {...background} />
+      <div className="absolute inset-0 w-full h-full">
+        <video
+          autoPlay
+          loop
+          muted
+          playsInline
+          className="w-full h-full object-cover"
+        >
+          <source src="https://www.pexels.com/download/video/34287480/" type="video/mp4" />
+          Your browser does not support the video tag.
+        </video>
+        <div className="absolute inset-0 w-full h-full bg-black opacity-50"></div>
+      </div>
       <div className={cls("w-content-width mx-auto flex flex-col md:flex-row gap-13 md:gap-15 items-center relative z-10", containerClassName)}>
         {imagePosition === "left" && mediaContent}
 
@@ -154,11 +167,11 @@ const HeroSplit = ({
             avatarText={avatarText}
             avatarGroupClassName={cls("!mt-5", avatarGroupClassName)}
             className={cls("flex flex-col gap-3 md:hidden", textBoxClassName)}
-            titleClassName={cls("text-7xl 2xl:text-8xl font-medium text-center md:text-left text-balance", titleClassName)}
+            titleClassName={cls("text-7xl 2xl:text-8xl font-medium text-center md:text-left text-balance text-white", titleClassName)}
-            descriptionClassName={cls("max-w-8/10 text-lg md:text-xl leading-[1.2] text-center md:text-left", descriptionClassName)}
+            descriptionClassName={cls("max-w-8/10 text-lg md:text-xl leading-[1.2] text-center md:text-left text-white", descriptionClassName)}
-            tagClassName={cls("w-fit px-3 py-1 text-sm rounded-theme card text-foreground inline-flex items-center gap-2 mb-3", tagClassName)}
+            tagClassName={cls("w-fit px-3 py-1 text-sm rounded-theme card text-foreground inline-flex items-center gap-2 mb-3 bg-black/75", tagClassName)}
             buttonContainerClassName={cls("flex flex-wrap gap-4 mt-2", buttonContainerClassName)}
-            buttonClassName={cls("", buttonClassName)}
+            buttonClassName={cls("bg-white text-black", buttonClassName)}
             buttonTextClassName={cls("text-base", buttonTextClassName)}
             center={true}
           />
@@ -175,11 +188,11 @@ const HeroSplit = ({
             avatarText={avatarText}
             avatarGroupClassName={cls("", avatarGroupClassName)}
             className={cls("hidden md:flex flex-col gap-3 md:gap-4", textBoxClassName)}
-            titleClassName={cls("text-7xl 2xl:text-8xl font-medium text-center md:text-left text-balance", titleClassName)}
+            titleClassName={cls("text-7xl 2xl:text-8xl font-medium text-center md:text-left text-balance text-white", titleClassName)}
-            descriptionClassName={cls("max-w-8/10 text-lg md:text-xl leading-tight text-center md:text-left", descriptionClassName)}
+            descriptionClassName={cls("max-w-8/10 text-lg md:text-xl leading-tight text-center md:text-left text-white", descriptionClassName)}
-            tagClassName={cls("w-fit px-3 py-1 text-sm rounded-theme card text-foreground inline-flex items-center gap-2 mb-3", tagClassName)}
+            tagClassName={cls("w-fit px-3 py-1 text-sm rounded-theme card text-foreground inline-flex items-center gap-2 mb-3 bg-black/75", tagClassName)}
             buttonContainerClassName={cls("flex flex-wrap gap-4 mt-2", buttonContainerClassName)}
-            buttonClassName={cls("", buttonClassName)}
+            buttonClassName={cls("bg-white text-black", buttonClassName)}
             buttonTextClassName={cls("text-base", buttonTextClassName)}
             center={false}
           />