Merge version_9 into main

Merge version_9 into main

src/components/sections/hero/HeroBillboardCarousel.tsx

@@ -101,27 +101,30 @@ const HeroBillboardCarousel = ({
             <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",
+                "w-full md:w-content-width md:h-full md:items-start md:justify-center",
                 containerClassName
             )}>
-                <TextBox
-                    title={title}
-                    description={description}
-                    tag={tag}
-                    tagIcon={tagIcon}
-                    buttons={buttons}
-                    className={cls(
-                        "flex flex-col gap-3 md:gap-1 w-content-width mx-auto",
-                        textBoxClassName
-                    )}
-                    titleClassName={cls("text-6xl font-medium text-balance", titleClassName)}
-                    descriptionClassName={cls("text-base md:text-lg leading-[1.2]", descriptionClassName)}
-                    tagClassName={cls("px-3 py-1 text-sm rounded-theme card text-foreground inline-flex items-center gap-2 mb-3", tagClassName)}
-                    buttonContainerClassName={cls("flex flex-wrap gap-4 mt-3", buttonContainerClassName)}
-                    buttonClassName={cls("rounded-full shadow-3d", buttonClassName)}
-                    buttonTextClassName={buttonTextClassName}
-                    center={true}
-                />
+                <div className="flex flex-col md:flex-row md:items-start md:justify-between">
+                    <TextBox
+                        title={title}
+                        description={description}
+                        tag={tag}
+                        tagIcon={tagIcon}
+                        buttons={buttons}
+                        className={cls(
+                            "flex flex-col gap-3 md:gap-1 w-content-width",
+                            textBoxClassName
+                        )}
+                        titleClassName={cls("text-6xl font-medium text-balance", titleClassName)}
+                        descriptionClassName={cls("text-base md:text-lg leading-[1.2]", descriptionClassName)}
+                        tagClassName={cls("px-3 py-1 text-sm rounded-theme card text-foreground inline-flex items-center gap-2 mb-3", tagClassName)}
+                        buttonContainerClassName={cls("flex flex-wrap gap-4 mt-3", buttonContainerClassName)}
+                        buttonClassName={cls("rounded-full shadow-3d", buttonClassName)}
+                        buttonTextClassName={buttonTextClassName}
+                        center={false}
+                    />
+                    <h2 className="mt-10 md:mt-0">Hero Section Title</h2>
+                </div>
 
                 <div className={cls("w-full -mx-[var(--content-padding)]", mediaWrapperClassName)}>
                     <AutoCarousel