From e3e977c0ce0f7ba601b10eb5a7c7304948e49836 Mon Sep 17 00:00:00 2001
From: kudindmitriy <kudin.dima@gmail.com>
Date: Thu, 26 Feb 2026 13:13:37 +0000
Subject: [PATCH] Bob AI: Add infinite continuous spinning animation to the
 hero image

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

diff --git a/src/components/sections/hero/HeroBillboard.tsx b/src/components/sections/hero/HeroBillboard.tsx
index f10eb66..f968edc 100644
--- a/src/components/sections/hero/HeroBillboard.tsx
+++ b/src/components/sections/hero/HeroBillboard.tsx
@@ -139,17 +139,30 @@ 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 [perspective:1000px]", mediaWrapperClassName)}>
-            <div className="w-full h-full transition-transform duration-500 [transform-style:preserve-3d] hover:[transform:rotateX(180deg)]">
-              <MediaContent
-                imageSrc={imageSrc}
-                videoSrc={videoSrc}
-                imageAlt={imageAlt}
-                videoAriaLabel={videoAriaLabel}
-                imageClassName={cls("z-1 aspect-square md:aspect-video", imageClassName)}
-              />
-            </div>
-          </div>
+           <div ref={mediaContainerRef} className={cls("w-full overflow-hidden rounded-theme-capped card p-4 [perspective:1000px]", mediaWrapperClassName)}>
+             <style>{`
+               @keyframes infiniteSpin {
+                 from {
+                   transform: rotate(0deg);
+                 }
+                 to {
+                   transform: rotate(360deg);
+                 }
+               }
+               .spin-infinite {
+                 animation: infiniteSpin 8s linear infinite;
+               }
+             `}</style>
+             <div className="spin-infinite w-full h-full [transform-style:preserve-3d]">
+               <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
               items={marqueeItems}
-- 
2.49.1