diff --git a/src/components/sections/hero/HeroBillboardCarousel.tsx b/src/components/sections/hero/HeroBillboardCarousel.tsx
index 423b9f0..f6bc30b 100644
--- a/src/components/sections/hero/HeroBillboardCarousel.tsx
+++ b/src/components/sections/hero/HeroBillboardCarousel.tsx
@@ -1,10 +1,155 @@
-import React from 'react';
-import { AutoCarousel } from '../../cardStack/layouts/carousels/AutoCarousel';
+"use client";
 
-export function HeroBillboardCarousel() {
-  return (
-    <div>
-      <AutoCarousel />
-    </div>
-  );
+import TextBox from "@/components/Textbox";
+import MediaContent from "@/components/shared/MediaContent";
+import AutoCarousel from "@/components/cardStack/layouts/carousels/AutoCarousel";
+import HeroBackgrounds, { type HeroBackgroundVariantProps } from "@/components/background/HeroBackgrounds";
+import { cls } from "@/lib/utils";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, ButtonAnimationType } from "@/types/button";
+
+export interface MediaItem {
+    imageSrc?: string;
+    videoSrc?: string;
+    imageAlt?: string;
+    videoAriaLabel?: string;
 }
+
+type HeroBillboardCarouselBackgroundProps = Extract<
+  HeroBackgroundVariantProps,
+  | { variant: "plain" }
+  | { variant: "animated-grid" }
+  | { variant: "canvas-reveal" }
+  | { variant: "cell-wave" }
+  | { variant: "downward-rays-animated" }
+  | { variant: "downward-rays-animated-grid" }
+  | { variant: "downward-rays-static" }
+  | { variant: "downward-rays-static-grid" }
+  | { variant: "gradient-bars" }
+  | { variant: "radial-gradient" }
+  | { variant: "rotated-rays-animated" }
+  | { variant: "rotated-rays-animated-grid" }
+  | { variant: "rotated-rays-static" }
+  | { variant: "rotated-rays-static-grid" }
+  | { variant: "sparkles-gradient" }
+>;
+
+interface HeroBillboardCarouselProps {
+    title: string;
+    description: string;
+    background: HeroBillboardCarouselBackgroundProps;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    tagAnimation?: ButtonAnimationType;
+    buttons?: ButtonConfig[];
+    buttonAnimation?: ButtonAnimationType;
+    mediaItems: MediaItem[];
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    textBoxClassName?: string;
+    titleClassName?: string;
+    descriptionClassName?: string;
+    tagClassName?: string;
+    buttonContainerClassName?: string;
+    buttonClassName?: string;
+    buttonTextClassName?: string;
+    mediaWrapperClassName?: string;
+}
+
+const HeroBillboardCarousel = ({
+    title,
+    description,
+    background,
+    tag,
+    tagIcon,
+    tagAnimation,
+    buttons,
+    buttonAnimation,
+    mediaItems,
+    ariaLabel = "Hero section",
+    className = "",
+    containerClassName = "",
+    textBoxClassName = "",
+    titleClassName = "",
+    descriptionClassName = "",
+    tagClassName = "",
+    buttonContainerClassName = "",
+    buttonClassName = "",
+    buttonTextClassName = "",
+    mediaWrapperClassName = "",
+}: HeroBillboardCarouselProps) => {
+    const renderCarouselItem = (item: MediaItem, index: number) => (
+        <div
+            key={index}
+            className="w-full aspect-[4/5] overflow-hidden rounded-theme-capped card p-2 shadow-lg"
+        >
+            <MediaContent
+                imageSrc={item.imageSrc}
+                videoSrc={item.videoSrc}
+                imageAlt={item.imageAlt || ""}
+                videoAriaLabel={item.videoAriaLabel || "Carousel media"}
+                imageClassName="z-1 h-full object-cover"
+            />
+        </div>
+    );
+
+    return (
+        <section
+            aria-label={ariaLabel}
+            className={cls(
+                "relative w-full py-hero-page-padding md:h-svh md:py-0",
+                className
+            )}
+        >
+            <HeroBackgrounds {...background} />
+            <div className={cls(
+                "mx-auto flex flex-col gap-14 md:gap-10 relative z-10",
+                "w-full md:w-content-width md:h-full md:items-center md:justify-center",
+                containerClassName
+            )}>
+                <TextBox
+                    title={title}
+                    description={description}
+                    tag={tag}
+                    tagIcon={tagIcon}
+                    tagAnimation={tagAnimation}
+                    buttons={buttons}
+                    buttonAnimation={buttonAnimation}
+                    className={cls(
+                        "flex flex-col gap-3 md:gap-3 w-content-width mx-auto",
+                        textBoxClassName
+                    )}
+                    titleClassName={cls("text-6xl font-medium text-balance", titleClassName)}
+                    descriptionClassName={cls("text-base md:text-lg leading-tight", descriptionClassName)}
+                    tagClassName={cls("px-3 py-1 text-sm rounded-theme card text-foreground inline-flex items-center gap-2 mb-1", tagClassName)}
+                    buttonContainerClassName={cls("flex flex-wrap gap-4 max-md:justify-center mt-2", buttonContainerClassName)}
+                    buttonClassName={buttonClassName}
+                    buttonTextClassName={buttonTextClassName}
+                    center={true}
+                />
+
+                <div className={cls("w-full -mx-[var(--content-padding)]", mediaWrapperClassName)}>
+                    <AutoCarousel
+                        title=""
+                        description=""
+                        textboxLayout="default"
+                        animationType="none"
+                        className="py-0"
+                        carouselClassName="py-0"
+                        containerClassName="!w-full"
+                        itemClassName="!w-55 md:!w-carousel-item-4"
+                        ariaLabel="Hero carousel"
+                        showTextBox={false}
+                    >
+                        {mediaItems?.map(renderCarouselItem)}
+                    </AutoCarousel>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+HeroBillboardCarousel.displayName = "HeroBillboardCarousel";
+
+export default HeroBillboardCarousel;
\ No newline at end of file