Bob AI: Add infinite continuous spinning animation to the hero image

Merge version_5 into main

src/app/page.tsx

@@ -10,6 +10,7 @@ import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCa
 import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
 import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
 import { Sparkles } from "lucide-react";
+import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
 
 export default function LandingPage() {
   return (
@@ -26,7 +27,7 @@ export default function LandingPage() {
       headingFontWeight="bold"
     >
       <div id="nav" data-section="nav">
-        <NavbarStyleCentered 
+        <NavbarStyleApple 
           navItems={[{name: 'Hero', id: 'hero-section'}, {name: 'About', id: 'about-section'}, {name: 'Feature', id: 'features-section'}, {name: 'Product', id: 'products-section'}, {name: 'Testimonial', id: 'testimonials-section'}, {name: 'Contact', id: 'contact-section'}]}
           button={{text: 'Order Now', href: '#products-section'}}
           brandName="WarmCrust Bakery"

src/components/sections/hero/HeroBillboard.tsx

@@ -61,7 +61,7 @@ interface HeroBillboardProps {
   buttonTextClassName?: string;
   mediaWrapperClassName?: string;
   imageClassName?: string;
-  marqueeClassName?: string;
+   marqueeClassName?: string;
   marqueeItemClassName?: string;
   marqueeCardClassName?: string;
   marqueeImageClassName?: string;
@@ -139,15 +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", mediaWrapperClassName)}>
+           <div ref={mediaContainerRef} className={cls("w-full overflow-hidden rounded-theme-capped card p-4 [perspective:1000px]", mediaWrapperClassName)}>
-            <MediaContent
+             <style>{`
-              imageSrc={imageSrc}
+               @keyframes infiniteSpin {
-              videoSrc={videoSrc}
+                 from {
-              imageAlt={imageAlt}
+                   transform: rotate(0deg);
-              videoAriaLabel={videoAriaLabel}
+                 }
-              imageClassName={cls("z-1 aspect-square md:aspect-video", imageClassName)}
+                 to {
-            />
+                   transform: rotate(360deg);
-          </div>
+                 }
+               }
+               .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}