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

Bob AI: Add conditional styling to apply a green border to every odd
Bob AI: [Block: hero-billboard-carousel|Hero Billboard Car...
2026-02-23 19:00:15 +02:00 · 2026-02-23 18:56:37 +02:00 · 2026-02-23 18:54:50 +02:00 · 2026-02-23 18:53:06 +02:00 · 2026-02-23 18:50:27 +02:00 · 2026-02-23 18:48:16 +02:00
8 changed files with 103 additions and 47 deletions
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,14 +1,9 @@
 import type { Metadata } from "next";
-import { Mulish } from "next/font/google";
 import { Inter } from "next/font/google";
 import "./globals.css";
 import { ServiceWrapper } from "@/components/ServiceWrapper";
 import Tag from "@/tag/Tag";

-const mulish = Mulish({
-  variable: "--font-mulish",  subsets: ["latin"],
-});
-
 const inter = Inter({
  variable: "--font-inter",  subsets: ["latin"],
 });
@@ -26,7 +21,7 @@ export default function RootLayout({
    <html lang="en" suppressHydrationWarning>
      <ServiceWrapper>
        <body
-          className={`${mulish.variable} ${inter.variable} antialiased`}
+          className={`${inter.variable} antialiased`}
        >
          <Tag />
          {children}
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,7 +1,7 @@
 "use client"
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
-import HeroOverlay from '@/components/sections/hero/HeroOverlay';
+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,22 +44,35 @@ export default function LandingPage() {
      </div>

      <div id="hero-section" data-section="hero-section">
-        <HeroOverlay
-          title="Artisan Baked Goods Delivered to Your Doorstep"
-          description="Experience the warmth of freshly baked breads, pastries, and desserts made with love using time-honored techniques and the finest ingredients."
+        <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={Sparkles}
-          tagAnimation="slide-up"
+          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"
-          textPosition="bottom-left"
-          showDimOverlay={true}
-          showBlur={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>

@@ -70,8 +84,8 @@ export default function LandingPage() {
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          buttons={[
-            { text: "Explore Our Products", href: "#products-section" },
-            { text: "Visit Our Bakery", href: "#contact-section" }
+            { text: "Explore Our Products", href: "products-section" },
+            { text: "Visit Our Bakery", href: "contact-section" }
          ]}
          buttonAnimation="slide-up"
          imageSrc="https://img.b2bpic.net/free-photo/baker-forming-dough-sphere-wooden-board_74855-5658.jpg"
@@ -156,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"
@@ -181,7 +203,7 @@ export default function LandingPage() {
          tagIcon={HelpCircle}
          tagAnimation="slide-up"
          buttons={[
-            { text: "Contact Us", href: "#contact-section" }
+            { text: "Contact Us", href: "contact-section" }
          ]}
          buttonAnimation="slide-up"
        />
@@ -216,16 +238,16 @@ export default function LandingPage() {
          columns={[
            {
              title: "Explore",              items: [
-                { label: "Home", href: "#hero-section" },
-                { label: "Our Story", href: "#about-section" },
-                { label: "Menu", href: "#products-section" },
-                { label: "Testimonials", href: "#testimonials-section" }
+                { label: "Home", href: "hero-section" },
+                { label: "Our Story", href: "about-section" },
+                { label: "Menu", href: "products-section" },
+                { label: "Testimonials", href: "testimonials-section" }
              ]
            },
            {
              title: "Support",              items: [
-                { label: "FAQ", href: "#faq-section" },
-                { label: "Contact Us", href: "#contact-section" },
+                { label: "FAQ", href: "faq-section" },
+                { label: "Contact Us", href: "contact-section" },
                { label: "Delivery Info", href: "#" },
                { label: "Returns Policy", href: "#" }
              ]
--- a/src/app/styles/base.css
+++ b/src/app/styles/base.css
@@ -24,5 +24,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-mulish), sans-serif;
+  font-family: var(--font-inter), sans-serif;
 }
--- a/src/app/styles/variables.css
+++ b/src/app/styles/variables.css
@@ -3,22 +3,22 @@
  /* --vw is set by ThemeProvider */

  /* --background: #f7f6f7;;
-  --card: #ffffff;;
-  --foreground: #0c1325;;
-  --primary-cta: #0b07ff;;
-  --secondary-cta: #ffffff;;
-  --accent: #93b7ff;;
-  --background-accent: #a8bae8;; */
+  --card: #1a1a1a;;
+  --foreground: #000000;;
+  --primary-cta: #ffcc00;;
+  --secondary-cta: #ffcc00;;
+  --accent: #ff9900;;
+  --background-accent: #333300;; */

-  --background: #f7f6f7;;
-  --card: #ffffff;;
-  --foreground: #0c1325;;
-  --primary-cta: #0b07ff;;
+  --background: #000000;;
+  --card: #1a1a1a;;
+  --foreground: #000000;;
+  --primary-cta: #ffcc00;;
  --primary-cta-text: #f7f6f7;;
-  --secondary-cta: #ffffff;;
+  --secondary-cta: #ffcc00;;
  --secondary-cta-text: #0c1325;;
-  --accent: #93b7ff;;
-  --background-accent: #a8bae8;;
+  --accent: #ff9900;;
+  --background-accent: #333300;;

  /* text sizing - set by ThemeProvider */
  /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
--- a/src/components/sections/about/MediaAbout.tsx
+++ b/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}
--- a/src/components/sections/hero/HeroBillboard.tsx
+++ b/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,
--- a/src/components/sections/hero/HeroBillboardCarousel.tsx
+++ b/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}
--- a/src/components/sections/product/ProductCardOne.tsx
+++ b/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"
Author	SHA1	Message	Date
kudindmitriy	7ec0e99154	Bob AI: Add a flip animation to the Our Story (MediaAbout) section.	2026-02-23 19:00:15 +02:00
kudindmitriy	bac2df8313	Bob AI: Add conditional styling to apply a green border to every odd	2026-02-23 18:56:37 +02:00
kudindmitriy	a8950d99d3	Bob AI: [Block: hero-billboard-carousel\|Hero Billboard Car...	2026-02-23 18:54:50 +02:00
kudindmitriy	993de45e65	Bob AI: make text in buttons black	2026-02-23 18:53:06 +02:00
kudindmitriy	9741023bee	Bob AI: Add 5 red heart elements (❤️ or SVG hearts) above the FAQ se	2026-02-23 18:50:27 +02:00
kudindmitriy	3e2e6b4c01	Bob AI: Add a background video to the HeroBillboard hero section. Im	2026-02-23 18:48:16 +02:00
kudindmitriy	3a2905a8b0	Bob AI: add a background video for Artisanal Baked Goods s...	2026-02-23 18:39:19 +02:00
kudindmitriy	153ad3e960	Bob AI: Modify the ProductCardOne component to add a background vide	2026-02-23 18:35:33 +02:00
bender	f62a9472d6	Merge version_4 into main Merge version_4 into main	2026-02-23 16:05:28 +00:00
bender	982672301f	Update src/app/page.tsx	2026-02-23 16:05:23 +00:00
bender	f5556592af	Merge version_3 into main Merge version_3 into main	2026-02-23 16:00:37 +00:00
bender	487973b161	Update src/app/styles/base.css	2026-02-23 16:00:32 +00:00
bender	4c26cfa1c1	Update src/app/layout.tsx	2026-02-23 16:00:31 +00:00
kudindmitriy	e0ff4d943c	Bob AI: change theme to dark yellow	2026-02-23 17:53:11 +02:00