Bob AI: Add a flip animation effect to the image block in the hero s

Merge version_2 into main

src/app/page.tsx

@@ -10,6 +10,7 @@ import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCar
 import ContactSplit from '@/components/sections/contact/ContactSplit';
 import FooterBase from '@/components/sections/footer/FooterBase';
 import { Award, Code, Linkedin, Network, Sparkles, Twitter, Users } from "lucide-react";
+import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
 
 export default function SitePage() {
   return (
@@ -26,7 +27,7 @@ export default function SitePage() {
       headingFontWeight="normal"
     >
       <div id="nav" data-section="nav">
-        <NavbarStyleCentered 
+        <NavbarStyleApple 
           navItems={[{name:"Hero",id:"hero-section"},{name:"About",id:"about-section"},{name:"Features",id:"features-section"},{name:"Team",id:"team-section"},{name:"Testimonials",id:"testimonials-section"},{name:"Events",id:"events-section"},{name:"Contact",id:"contact-section"}]} 
           button={{text:"Join Us",href:"#contact-section"}} 
           brandName="TechClub Community"

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