Bob AI: Add a background video to the HeroBillboard hero section. Im

Bob AI: add a background video for Artisanal Baked Goods s...
Bob AI: Modify the ProductCardOne component to add a background vide
2026-02-23 18:48:16 +02:00 · 2026-02-23 18:39:19 +02:00 · 2026-02-23 18:35:33 +02:00 · 2026-02-23 16:05:28 +00:00 · 2026-02-23 16:05:23 +00:00 · 2026-02-23 16:00:37 +00:00
6 changed files with 73 additions and 43 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';
@@ -43,22 +43,49 @@ 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."
+        <HeroBillboard
+          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-1" },
+            { text: "Order Online", href: "#order", dataWebildId: "btn-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}
+          avatars={[]}
+          avatarText=""
+          videoSrc="https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
+          videoAriaLabel="Baking process demonstration video"
+          mediaAnimation="zoom-in"
+          marqueeItems={[
+            { text: "Organic Ingredients", icon: null, dataWebildId: "marquee-1" },
+            { text: "Fresh Daily", icon: null, dataWebildId: "marquee-2" },
+            { text: "Handcrafted", icon: null, dataWebildId: "marquee-3" }
+          ]}
+          marqueeSpeed={1}
+          showMarqueeCard={true}
+          ariaLabel="Welcome to Warm & Crumb Bakery"
+          className=""
+          containerClassName=""
+          textBoxClassName=""
+          titleClassName=""
+          descriptionClassName=""
+          tagClassName=""
+          avatarGroupClassName=""
+          buttonContainerClassName=""
+          buttonClassName=""
+          buttonTextClassName=""
+          mediaWrapperClassName=""
+          imageClassName=""
+          marqueeClassName=""
+          marqueeItemClassName=""
+          marqueeCardClassName=""
+          marqueeImageClassName=""
+          marqueeTextClassName=""
+          marqueeIconClassName=""
        />
      </div>

@@ -70,8 +97,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"
@@ -181,7 +208,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 +243,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: #ffff00;;
+  --primary-cta: #ffcc00;;
+  --secondary-cta: #ffff00;;
+  --accent: #ff9900;;
+  --background-accent: #333300;; */

-  --background: #f7f6f7;;
-  --card: #ffffff;;
-  --foreground: #0c1325;;
-  --primary-cta: #0b07ff;;
+  --background: #000000;;
+  --card: #1a1a1a;;
+  --foreground: #ffff00;;
+  --primary-cta: #ffcc00;;
  --primary-cta-text: #f7f6f7;;
-  --secondary-cta: #ffffff;;
+  --secondary-cta: #ffff00;;
  --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/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/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	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