Bob AI: use this video for faq section beckground - https:...

src/app/styles/variables.css

@@ -4,15 +4,15 @@
 
   /* --background: #fffafa;;
   --card: #fff7f7;;
-  --foreground: #1a0000;;
+  --foreground: #ffffff;;
   --primary-cta: #e63946;;
   --secondary-cta: #ffffff;;
   --accent: #f5c4c7;;
   --background-accent: #f09199;; */
 
-  --background: #fffafa;;
+  --background: #000000;;
   --card: #fff7f7;;
-  --foreground: #1a0000;;
+  --foreground: #ffffff;;
   --primary-cta: #e63946;;
   --secondary-cta: #ffffff;;
   --accent: #f5c4c7;;

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)}
-            descriptionClassName={cls("max-w-8/10 text-lg md:text-xl leading-[1.2] text-center md:text-left", 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)}
+            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 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 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)}
-            descriptionClassName={cls("max-w-8/10 text-lg md:text-xl leading-tight text-center md:text-left", 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)}
+            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 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 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}
           />