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

Merge version_4 into main

src/app/page.tsx

@@ -1,7 +1,7 @@
 "use client"
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
-import HeroLogo from '@/components/sections/hero/HeroLogo';
+import HeroBillboard from '@/components/sections/hero/HeroBillboard';
 import MediaAbout from '@/components/sections/about/MediaAbout';
 import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
 import ProductCardOne from '@/components/sections/product/ProductCardOne';
@@ -10,6 +10,7 @@ import FaqBase from '@/components/sections/faq/FaqBase';
 import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
 import FooterMedia from '@/components/sections/footer/FooterMedia';
 import { Sparkles, Star, HelpCircle } from "lucide-react";
+import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
 
 export default function LandingPage() {
   return (
@@ -43,17 +44,35 @@ export default function LandingPage() {
       </div>
 
       <div id="hero-section" data-section="hero-section">
-        <HeroLogo
-          logoText="Warm & Crumb"
-          description="Artisan Baked Goods Delivered to Your Doorstep"
+        <HeroBillboardCarousel
+          title="Artisanal Baked Goods"
+          description="Handcrafted with passion and premium ingredients for an unforgettable taste experience"
+          background={{ variant: "radial-gradient" }}
+          tag="Fresh Daily"
+          tagIcon={null}
+          tagAnimation="fade-in"
           buttons={[
-            { text: "View Our Menu", href: "products-section" },
-            { text: "Visit Us", href: "contact-section" }
+            { text: "View Our Menu", href: "#menu", dataWebildId: "btn-carousel-1" },
+            { text: "Order Online", href: "#order", dataWebildId: "btn-carousel-2" }
           ]}
           buttonAnimation="slide-up"
-          imageSrc="https://img.b2bpic.net/free-photo/view-delicious-baked-bread-pastry-shop_23-2150379551.jpg"
-          imageAlt="Warm and inviting bakery interior with fresh pastries on display"
-          showDimOverlay={true}
+          mediaItems={[
+            { imageSrc: "https://img.b2bpic.net/free-photo/abstract-luxury-gradient-blue-background_53876-120942.jpg", imageAlt: "Fresh baked croissants" },
+            { imageSrc: "https://img.b2bpic.net/free-photo/futuristic-moon-background_23-2150930890.jpg", imageAlt: "Artisan sourdough bread" },
+            { imageSrc: "https://img.b2bpic.net/free-photo/futuristic-city-architecture_23-2151918947.jpg", imageAlt: "Delicious pastries display" },
+            { imageSrc: "https://img.b2bpic.net/free-photo/beautiful-landscape-with-mountains_23-2151151078.jpg", imageAlt: "Warm & Crumb bakery interior" }
+          ]}
+          ariaLabel="Welcome to Warm & Crumb Bakery"
+          className=""
+          containerClassName=""
+          textBoxClassName=""
+          titleClassName=""
+          descriptionClassName=""
+          tagClassName=""
+          buttonContainerClassName=""
+          buttonClassName=""
+          buttonTextClassName=""
+          mediaWrapperClassName=""
         />
       </div>
 
@@ -151,6 +170,14 @@ export default function LandingPage() {
         />
       </div>
 
+      <div className="flex justify-center gap-4 py-8">
+        <span className="text-4xl">❤️</span>
+        <span className="text-4xl">❤️</span>
+        <span className="text-4xl">❤️</span>
+        <span className="text-4xl">❤️</span>
+        <span className="text-4xl">❤️</span>
+      </div>
+
       <div id="faq-section" data-section="faq-section">
         <FaqBase
           title="Frequently Asked Questions"

src/app/styles/variables.css

@@ -4,18 +4,18 @@
 
   /* --background: #f7f6f7;;
   --card: #1a1a1a;;
-  --foreground: #ffff00;;
+  --foreground: #000000;;
   --primary-cta: #ffcc00;;
-  --secondary-cta: #ffff00;;
+  --secondary-cta: #ffcc00;;
   --accent: #ff9900;;
   --background-accent: #333300;; */
 
   --background: #000000;;
   --card: #1a1a1a;;
-  --foreground: #ffff00;;
+  --foreground: #000000;;
   --primary-cta: #ffcc00;;
   --primary-cta-text: #f7f6f7;;
-  --secondary-cta: #ffff00;;
+  --secondary-cta: #ffcc00;;
   --secondary-cta-text: #0c1325;;
   --accent: #ff9900;;
   --background-accent: #333300;;

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="relative z-10 flex items-center justify-center h-full w-content-width p-5 md:w-45 mx-auto">
+                <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 hover:scale-105 transition-transform duration-300">
                         <TextBox
                             title={title}
                             description={description}

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 { useRef, useEffect } from "react";
 
 type HeroBillboardBackgroundProps = Extract<
   HeroBackgroundVariantProps,
@@ -67,9 +68,13 @@ interface HeroBillboardProps {
   marqueeImageClassName?: string;
   marqueeTextClassName?: string;
   marqueeIconClassName?: string;
+  backgroundVideoSrc?: string;
+  backgroundVideoFallbackSrc?: string;
 }
 
 const HeroBillboard = ({
+  backgroundVideoSrc,
+  backgroundVideoFallbackSrc = "https://img.b2bpic.net/free-photo/abstract-luxury-gradient-blue-background_53876-120942.jpg",
   title,
   description,
   background,

src/components/sections/hero/HeroBillboardCarousel.tsx

@@ -82,7 +82,10 @@ const HeroBillboardCarousel = ({
     const renderCarouselItem = (item: MediaItem, index: number) => (
         <div
             key={index}
-            className="w-full aspect-[4/5] overflow-hidden rounded-theme-capped card p-2 shadow-lg"
+            className={cls(
+                "w-full aspect-[4/5] overflow-hidden rounded-theme-capped card p-2 shadow-lg",
+                index % 2 === 0 && "border-2 border-green-500"
+            )}
         >
             <MediaContent
                 imageSrc={item.imageSrc}

src/components/sections/product/ProductCardOne.tsx

@@ -8,6 +8,7 @@ import ProductImage from "@/components/shared/ProductImage";
 import { cls, shouldUseInvertedText } from "@/lib/utils";
 import { useTheme } from "@/providers/themeProvider/ThemeProvider";
 import { useProducts } from "@/hooks/useProducts";
+import { useRef, useEffect } from "react";
 import type { Product } from "@/lib/api/product";
 import type { LucideIcon } from "lucide-react";
 import type { ButtonConfig, GridVariant, CardAnimationType, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types";
@@ -52,6 +53,8 @@ interface ProductCardOneProps {
     textBoxButtonContainerClassName?: string;
     textBoxButtonClassName?: string;
     textBoxButtonTextClassName?: string;
+    backgroundVideoUrl?: string;
+    showBackgroundVideo?: boolean;
 }
 
 interface ProductCardItemProps {
@@ -72,7 +75,7 @@ const ProductCardItem = memo(({
     cardPriceClassName = "",
 }: ProductCardItemProps) => {
     return (
-        <article
+        <article className="relative overflow-hidden"
             className={cls("card group relative h-full flex flex-col gap-4 cursor-pointer p-4 rounded-theme-capped", cardClassName)}
             onClick={product.onProductClick}
             role="article"