bender/466bdf8e-c080-4f1f-a21c-e050159e79a8
1
0
Fork 0
Code Issues Pull Requests 9 Actions Packages Projects Releases Wiki Activity

Compare commits

base: bender:version_2
Branches Tags
bender:main bender:version_12 bender:version_11 bender:version_10 bender:version_9 bender:version_8 bender:version_7 bender:version_6 bender:version_5 bender:version_4 bender:version_3 bender:version_1 bender:version_2
..
compare: bender:version_10
Branches Tags
bender:main bender:version_12 bender:version_11 bender:version_10 bender:version_9 bender:version_8 bender:version_7 bender:version_6 bender:version_5 bender:version_4 bender:version_3 bender:version_1 bender:version_2

11 Commits
version_2 ... version_10

Author SHA1 Message Date
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
6 changed files with 81 additions and 43 deletions
Expand all files Collapse all files

7
src/app/layout.tsx
View File

@@ -1,14 +1,9 @@
import type { Metadata } from "next"; import type { Metadata } from "next";
import { Mulish } from "next/font/google";
import { Inter } from "next/font/google"; import { Inter } from "next/font/google";
import "./globals.css"; import "./globals.css";
import { ServiceWrapper } from "@/components/ServiceWrapper"; import { ServiceWrapper } from "@/components/ServiceWrapper";
import Tag from "@/tag/Tag"; import Tag from "@/tag/Tag";
const mulish = Mulish({
variable: "--font-mulish", subsets: ["latin"],
});
const inter = Inter({ const inter = Inter({
variable: "--font-inter", subsets: ["latin"], variable: "--font-inter", subsets: ["latin"],
}); });
@@ -26,7 +21,7 @@ export default function RootLayout({
<html lang="en" suppressHydrationWarning> <html lang="en" suppressHydrationWarning>
<ServiceWrapper> <ServiceWrapper>
<body <body
className={`${mulish.variable} ${inter.variable} antialiased`} className={`${inter.variable} antialiased`}
> >
<Tag /> <Tag />
{children} {children}

79
src/app/page.tsx
View File

@@ -1,7 +1,7 @@
"use client" "use client"
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen'; 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 MediaAbout from '@/components/sections/about/MediaAbout';
import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia'; import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
import ProductCardOne from '@/components/sections/product/ProductCardOne'; import ProductCardOne from '@/components/sections/product/ProductCardOne';
@@ -43,22 +43,49 @@ export default function LandingPage() {
</div> </div>
<div id="hero-section" data-section="hero-section"> <div id="hero-section" data-section="hero-section">
<HeroOverlay <HeroBillboard
title="Artisan Baked Goods Delivered to Your Doorstep" title="Artisanal Baked Goods"
description="Experience the warmth of freshly baked breads, pastries, and desserts made with love using time-honored techniques and the finest ingredients." description="Handcrafted with passion and premium ingredients for an unforgettable taste experience"
background={{ variant: "radial-gradient" }}
tag="Fresh Daily" tag="Fresh Daily"
tagIcon={Sparkles} tagIcon={null}
tagAnimation="slide-up" tagAnimation="fade-in"
buttons={[ buttons={[
{ text: "View Our Menu", href: "#products-section" }, { text: "View Our Menu", href: "#menu", dataWebildId: "btn-1" },
{ text: "Visit Us", href: "#contact-section" } { text: "Order Online", href: "#order", dataWebildId: "btn-2" }
]} ]}
buttonAnimation="slide-up" buttonAnimation="slide-up"
imageSrc="https://img.b2bpic.net/free-photo/view-delicious-baked-bread-pastry-shop_23-2150379551.jpg" avatars={[]}
imageAlt="Warm and inviting bakery interior with fresh pastries on display" avatarText=""
textPosition="bottom-left" videoSrc="https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
showDimOverlay={true} videoAriaLabel="Baking process demonstration video"
showBlur={true} 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> </div>
@@ -70,8 +97,8 @@ export default function LandingPage() {
tagIcon={Sparkles} tagIcon={Sparkles}
tagAnimation="slide-up" tagAnimation="slide-up"
buttons={[ buttons={[
{ text: "Explore Our Products", href: "#products-section" }, { text: "Explore Our Products", href: "products-section" },
{ text: "Visit Our Bakery", href: "#contact-section" } { text: "Visit Our Bakery", href: "contact-section" }
]} ]}
buttonAnimation="slide-up" buttonAnimation="slide-up"
imageSrc="https://img.b2bpic.net/free-photo/baker-forming-dough-sphere-wooden-board_74855-5658.jpg" imageSrc="https://img.b2bpic.net/free-photo/baker-forming-dough-sphere-wooden-board_74855-5658.jpg"
@@ -156,6 +183,14 @@ export default function LandingPage() {
/> />
</div> </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"> <div id="faq-section" data-section="faq-section">
<FaqBase <FaqBase
title="Frequently Asked Questions" title="Frequently Asked Questions"
@@ -181,7 +216,7 @@ export default function LandingPage() {
tagIcon={HelpCircle} tagIcon={HelpCircle}
tagAnimation="slide-up" tagAnimation="slide-up"
buttons={[ buttons={[
{ text: "Contact Us", href: "#contact-section" } { text: "Contact Us", href: "contact-section" }
]} ]}
buttonAnimation="slide-up" buttonAnimation="slide-up"
/> />
@@ -216,16 +251,16 @@ export default function LandingPage() {
columns={[ columns={[
{ {
title: "Explore", items: [ title: "Explore", items: [
{ label: "Home", href: "#hero-section" }, { label: "Home", href: "hero-section" },
{ label: "Our Story", href: "#about-section" }, { label: "Our Story", href: "about-section" },
{ label: "Menu", href: "#products-section" }, { label: "Menu", href: "products-section" },
{ label: "Testimonials", href: "#testimonials-section" } { label: "Testimonials", href: "testimonials-section" }
] ]
}, },
{ {
title: "Support", items: [ title: "Support", items: [
{ label: "FAQ", href: "#faq-section" }, { label: "FAQ", href: "faq-section" },
{ label: "Contact Us", href: "#contact-section" }, { label: "Contact Us", href: "contact-section" },
{ label: "Delivery Info", href: "#" }, { label: "Delivery Info", href: "#" },
{ label: "Returns Policy", href: "#" } { label: "Returns Policy", href: "#" }
] ]

2
src/app/styles/base.css
View File

@@ -24,5 +24,5 @@ h3,
h4, h4,
h5, h5,
h6 { h6 {
font-family: var(--font-mulish), sans-serif; font-family: var(--font-inter), sans-serif;
} }

26
src/app/styles/variables.css
View File

@@ -3,22 +3,22 @@
/* --vw is set by ThemeProvider */ /* --vw is set by ThemeProvider */
/* --background: #f7f6f7;; /* --background: #f7f6f7;;
--card: #ffffff;; --card: #1a1a1a;;
--foreground: #0c1325;; --foreground: #000000;;
--primary-cta: #0b07ff;; --primary-cta: #ffcc00;;
--secondary-cta: #ffffff;; --secondary-cta: #ffcc00;;
--accent: #93b7ff;; --accent: #ff9900;;
--background-accent: #a8bae8;; */ --background-accent: #333300;; */
--background: #f7f6f7;; --background: #000000;;
--card: #ffffff;; --card: #1a1a1a;;
--foreground: #0c1325;; --foreground: #000000;;
--primary-cta: #0b07ff;; --primary-cta: #ffcc00;;
--primary-cta-text: #f7f6f7;; --primary-cta-text: #f7f6f7;;
--secondary-cta: #ffffff;; --secondary-cta: #ffcc00;;
--secondary-cta-text: #0c1325;; --secondary-cta-text: #0c1325;;
--accent: #93b7ff;; --accent: #ff9900;;
--background-accent: #a8bae8;; --background-accent: #333300;;
/* text sizing - set by ThemeProvider */ /* text sizing - set by ThemeProvider */
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem); /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);

5
src/components/sections/hero/HeroBillboard.tsx
View File

@@ -9,6 +9,7 @@ import { useButtonAnimation } from "@/components/hooks/useButtonAnimation";
import type { LucideIcon } from "lucide-react"; import type { LucideIcon } from "lucide-react";
import type { ButtonConfig, ButtonAnimationType } from "@/types/button"; import type { ButtonConfig, ButtonAnimationType } from "@/types/button";
import type { Avatar } from "@/components/shared/AvatarGroup"; import type { Avatar } from "@/components/shared/AvatarGroup";
import { useRef, useEffect } from "react";
type HeroBillboardBackgroundProps = Extract< type HeroBillboardBackgroundProps = Extract<
HeroBackgroundVariantProps, HeroBackgroundVariantProps,
@@ -67,9 +68,13 @@ interface HeroBillboardProps {
marqueeImageClassName?: string; marqueeImageClassName?: string;
marqueeTextClassName?: string; marqueeTextClassName?: string;
marqueeIconClassName?: string; marqueeIconClassName?: string;
backgroundVideoSrc?: string;
backgroundVideoFallbackSrc?: string;
} }
const HeroBillboard = ({ const HeroBillboard = ({
backgroundVideoSrc,
backgroundVideoFallbackSrc = "https://img.b2bpic.net/free-photo/abstract-luxury-gradient-blue-background_53876-120942.jpg",
title, title,
description, description,
background, background,

5
src/components/sections/product/ProductCardOne.tsx
View File

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