Merge version_3 into main

Merge version_3 into main

src/components/sections/hero/HeroBillboard.tsx

@@ -9,6 +9,7 @@ import { useButtonAnimation } from "@/components/hooks/useButtonAnimation";
 import type { LucideIcon } from "lucide-react";
 import type { ButtonConfig, ButtonAnimationType } from "@/types/button";
 import type { Avatar } from "@/components/shared/AvatarGroup";
+import HeroBackgrounds from "@/components/background/HeroBackgrounds";
 
 type HeroBillboardBackgroundProps = Extract<
   HeroBackgroundVariantProps,
@@ -139,14 +140,21 @@ const HeroBillboard = ({
           center={true}
         />
         <div className="flex flex-col gap-6" >
-          <div ref={mediaContainerRef} className={cls("w-full overflow-hidden rounded-theme-capped card p-4", mediaWrapperClassName)}>
+          <div ref={mediaContainerRef} className={cls("w-full overflow-hidden rounded-theme-capped card p-4 [perspective:1000px]", mediaWrapperClassName)}>
-            <MediaContent
+            <div className="w-full h-full [transform-style:preserve-3d] transition-transform duration-500 hover:[transform:rotateY(180deg)]">
-              imageSrc={imageSrc}
+              <div className="[backface-visibility:hidden]">
-              videoSrc={videoSrc}
+                <MediaContent
-              imageAlt={imageAlt}
+                  imageSrc={imageSrc}
-              videoAriaLabel={videoAriaLabel}
+                  videoSrc={videoSrc}
-              imageClassName={cls("z-1 aspect-square md:aspect-video", imageClassName)}
+                  imageAlt={imageAlt}
-            />
+                  videoAriaLabel={videoAriaLabel}
+                  imageClassName={cls("z-1 aspect-square md:aspect-video", imageClassName)}
+                />
+              </div>
+              <div className="absolute inset-0 [backface-visibility:hidden] [transform:rotateY(180deg)] flex items-center justify-center bg-gradient-to-br from-primary to-primary/80 rounded-theme-capped">
+                <p className="text-white text-center text-lg font-medium px-6">Explore More</p>
+              </div>
+            </div>
           </div>
           {marqueeItems && marqueeItems.length > 0 && (
             <LogoMarquee