From e9df6699432a130e4ff239b797e87362052d2010 Mon Sep 17 00:00:00 2001
From: kudindmitriy <kudin.dima@gmail.com>
Date: Thu, 26 Feb 2026 13:05:09 +0000
Subject: [PATCH] Bob AI: Add a flip animation effect to the hero image on
 hover using

---
 src/components/sections/hero/HeroBillboard.tsx | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/components/sections/hero/HeroBillboard.tsx b/src/components/sections/hero/HeroBillboard.tsx
index 1bb6f8b..47f972e 100644
--- a/src/components/sections/hero/HeroBillboard.tsx
+++ b/src/components/sections/hero/HeroBillboard.tsx
@@ -139,14 +139,16 @@ 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 transition-transform duration-500 [transform-style:preserve-3d] hover:[transform:rotateY(180deg)]">
+              <MediaContent
+                imageSrc={imageSrc}
+                videoSrc={videoSrc}
+                imageAlt={imageAlt}
+                videoAriaLabel={videoAriaLabel}
+                imageClassName={cls("z-1 aspect-square md:aspect-video", imageClassName)}
+              />
+            </div>
           </div>
           {marqueeItems && marqueeItems.length > 0 && (
             <LogoMarquee
-- 
2.49.1