From 9a44615c9da0a85e2b221a6bcab8e6e2ed0fba85 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Wed, 4 Mar 2026 00:42:53 +0000
Subject: [PATCH] Switch to version 2: modified
 src/components/sections/hero/HeroBillboardCarousel.tsx

---
 .../sections/hero/HeroBillboardCarousel.tsx   | 161 +-----------------
 1 file changed, 8 insertions(+), 153 deletions(-)

diff --git a/src/components/sections/hero/HeroBillboardCarousel.tsx b/src/components/sections/hero/HeroBillboardCarousel.tsx
index f6bc30b..423b9f0 100644
--- a/src/components/sections/hero/HeroBillboardCarousel.tsx
+++ b/src/components/sections/hero/HeroBillboardCarousel.tsx
@@ -1,155 +1,10 @@
-"use client";
+import React from 'react';
+import { AutoCarousel } from '../../cardStack/layouts/carousels/AutoCarousel';
 
-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;
+export function HeroBillboardCarousel() {
+  return (
+    <div>
+      <AutoCarousel />
+    </div>
+  );
 }
-
-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