From fcce5223c788583eda9c9881571a37bf4c5971cf Mon Sep 17 00:00:00 2001
From: kudindmitriy <kudin.dima@gmail.com>
Date: Thu, 26 Feb 2026 11:20:21 +0000
Subject: [PATCH] Bob AI: Add a flip animation effect to the image block in the
 hero s

---
 .../sections/hero/HeroBillboard.tsx           | 24 ++++++++++++-------
 1 file changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/components/sections/hero/HeroBillboard.tsx b/src/components/sections/hero/HeroBillboard.tsx
index 1bb6f8b..69b16a5 100644
--- a/src/components/sections/hero/HeroBillboard.tsx
+++ b/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)}>
-            <MediaContent
-              imageSrc={imageSrc}
-              videoSrc={videoSrc}
-              imageAlt={imageAlt}
-              videoAriaLabel={videoAriaLabel}
-              imageClassName={cls("z-1 aspect-square md:aspect-video", imageClassName)}
-            />
+          <div ref={mediaContainerRef} className={cls("w-full overflow-hidden rounded-theme-capped card p-4 [perspective:1000px]", mediaWrapperClassName)}>
+            <div className="w-full h-full [transform-style:preserve-3d] transition-transform duration-500 hover:[transform:rotateY(180deg)]">
+              <div className="[backface-visibility:hidden]">
+                <MediaContent
+                  imageSrc={imageSrc}
+                  videoSrc={videoSrc}
+                  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
-- 
2.49.1