diff --git a/src/app/page.tsx b/src/app/page.tsx
index eff983e..a2620e9 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -6,7 +6,7 @@ import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
-import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
+import HeroSplitImage from '@/components/sections/hero/HeroSplitImage';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
@@ -61,66 +61,21 @@ export default function LandingPage() {
diff --git a/src/components/sections/hero/HeroSplitImage.tsx b/src/components/sections/hero/HeroSplitImage.tsx
new file mode 100644
index 0000000..57b6c2d
--- /dev/null
+++ b/src/components/sections/hero/HeroSplitImage.tsx
@@ -0,0 +1,115 @@
+"use client";
+
+import TextBox from "@/components/Textbox";
+import MediaContent from "@/components/shared/MediaContent";
+import HeroBackgrounds, { type HeroBackgroundVariantProps } from "@/components/background/HeroBackgrounds";
+import { cls } from "@/lib/utils";
+import type { ButtonConfig, ButtonAnimationType } from "@/types/button";
+import type { LucideIcon } from "lucide-react";
+
+// A simplified background prop type for this hero variant
+type HeroSplitImageBackgroundProps = Extract<
+ HeroBackgroundVariantProps,
+ | { variant: "plain" }
+ | { variant: "animated-grid" }
+ | { variant: "radial-gradient" }
+ | { variant: "sparkles-gradient" }
+>;
+
+interface HeroSplitImageProps {
+ title: string;
+ description: string;
+ background: HeroSplitImageBackgroundProps;
+ useInvertedBackground?: boolean;
+ tag?: string;
+ tagIcon?: LucideIcon;
+ buttons?: ButtonConfig[];
+ buttonAnimation?: ButtonAnimationType;
+ imageSrc?: string;
+ videoSrc?: string;
+ imageAlt?: string;
+ videoAriaLabel?: string;
+ imageOnLeft?: boolean;
+ ariaLabel?: string;
+ className?: string;
+ containerClassName?: string;
+ textBoxClassName?: string;
+ titleClassName?: string;
+ descriptionClassName?: string;
+ tagClassName?: string;
+ buttonContainerClassName?: string;
+ buttonClassName?: string;
+ buttonTextClassName?: string;
+ mediaWrapperClassName?: string;
+ imageClassName?: string;
+}
+
+const HeroSplitImage = ({
+ title,
+ description,
+ background = { variant: "plain" },
+ useInvertedBackground = false,
+ tag,
+ tagIcon,
+ buttons = [],
+ buttonAnimation = "slide-up",
+ imageSrc,
+ videoSrc,
+ imageAlt = "",
+ videoAriaLabel = "Hero video",
+ imageOnLeft = false,
+ ariaLabel = "Hero section",
+ className = "",
+ containerClassName = "",
+ textBoxClassName = "",
+ titleClassName = "",
+ descriptionClassName = "",
+ tagClassName = "",
+ buttonContainerClassName = "",
+ buttonClassName = "",
+ buttonTextClassName = "",
+ mediaWrapperClassName = "",
+ imageClassName = "",
+}: HeroSplitImageProps) => {
+ return (
+
+ );
+};
+
+HeroSplitImage.displayName = "HeroSplitImage";
+
+export default HeroSplitImage;
\ No newline at end of file