Bob AI: Add a flip animation to the Our Story (MediaAbout) section.

src/components/sections/about/MediaAbout.tsx

@@ -58,13 +58,41 @@ const MediaAbout = ({
     mediaWrapperClassName = "",
     mediaClassName = "",
 }: MediaAboutProps) => {
+    const [isFlipped, setIsFlipped] = React.useState(false);
+
+    React.useEffect(() => {
+        const observer = new IntersectionObserver(
+            ([entry]) => {
+                if (entry.isIntersecting) {
+                    setIsFlipped(true);
+                }
+            },
+            { threshold: 0.5 }
+        );
+
+        const section = document.querySelector('[data-flip-section]');
+        if (section) observer.observe(section);
+
+        return () => {
+            if (section) observer.unobserve(section);
+        };
+    }, []);
 
     return (
         <section
             aria-label={ariaLabel}
+            data-flip-section
             className={cls("relative py-20 w-full", useInvertedBackground && "bg-foreground", className)}
+            style={{ perspective: "1000px" }}
         >
-            <div className={cls("relative w-content-width mx-auto aspect-auto min-h-70 md:aspect-video md:min-h-0 rounded-theme-capped overflow-hidden", mediaWrapperClassName)}>
+            <div 
+                className={cls("relative w-content-width mx-auto aspect-auto min-h-70 md:aspect-video md:min-h-0 rounded-theme-capped overflow-hidden transition-transform duration-700", mediaWrapperClassName)}
+                style={{
+                    transformStyle: "preserve-3d",
+                    transform: isFlipped ? "rotateY(0deg)" : "rotateY(90deg)",
+                    opacity: isFlipped ? 1 : 0.5,
+                }}
+            >
                 <MediaContent
                     imageSrc={imageSrc}
                     videoSrc={videoSrc}
@@ -73,8 +101,8 @@ const MediaAbout = ({
                     imageClassName={cls("w-full h-full object-cover", mediaClassName)}
                 />
                 <div className="absolute inset-0 z-0 bg-background/40 backdrop-blur-xs pointer-events-none select-none rounded-theme-capped" />
-                <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
+                <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full">
-                    <div className="relative z-10 flex items-center justify-center h-full w-content-width p-5 md:w-45 mx-auto">
+                    <div className="relative z-10 flex items-center justify-center h-full w-content-width p-5 md:w-45 mx-auto hover:scale-105 transition-transform duration-300">
                         <TextBox
                             title={title}
                             description={description}