bender/f03fa937-1716-4a75-a67c-4564ed3410ce
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_18_1781005423576 into main #15

Merged
bender merged 1 commits from version_18_1781005423576 into main 2026-06-09 11:48:08 +00:00
Conversation 0 Commits 1 Files Changed 1 +72 -42
1 changed files with 72 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
src/pages/HomePage/sections/Hero.tsx
View File

@@ -4,71 +4,101 @@ import Button from "@/components/ui/Button";
import HeroBackgroundSlot from "@/components/ui/HeroBackgroundSlot";
import TextAnimation from "@/components/ui/TextAnimation";
import ImageOrVideo from "@/components/ui/ImageOrVideo";
import Carousel from "@/components/ui/Carousel";
import AutoFillText from "@/components/ui/AutoFillText";
const primaryButton = {
text: "Start Your Order",
href: "#contact"
};
const secondaryButton = {
text: "View Our Menu",
href: "#products"
href: "#products",
text: "View Our Menu"
};
const leftItems = [
{
imageSrc: "http://img.b2bpic.net/free-photo/overhead-view-baked-chocolate-cakes-with-spoon-clothes-wooden-backdrop_23-2148087027.jpg"
},
{
imageSrc: "https://picsum.photos/seed/952460365/1200/800"
}
];
const rightItems = [
{
imageSrc: "https://picsum.photos/seed/1804074766/1200/800"
},
{
imageSrc: "http://img.b2bpic.net/free-photo/overhead-view-baked-chocolate-cakes-with-spoon-clothes-wooden-backdrop_23-2148087027.jpg"
}
];
type HeroBrandProps = {
brand: string;
type HeroSplitVerticalMarqueeProps = {
tag: string;
title: string;
description: string;
primaryButton: { text: string; href: string };
secondaryButton: { text: string; href: string };
} & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
leftItems: ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never })[];
rightItems: ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never })[];
};
const HeroInline = () => {
const duplicatedLeft = [...leftItems, ...leftItems, ...leftItems, ...leftItems];
const duplicatedRight = [...rightItems, ...rightItems, ...rightItems, ...rightItems];
return (
<section
aria-label="Hero section"
className="relative w-full h-svh overflow-hidden flex flex-col justify-end mb-20"
>
<section aria-label="Hero section" className="relative flex items-center h-fit md:h-svh pt-25 pb-20 md:py-0">
<HeroBackgroundSlot />
<Carousel className="absolute inset-0 w-full h-full" itemClassName="w-full h-full flex-shrink-0">
{[
"http://img.b2bpic.net/free-photo/overhead-view-baked-chocolate-cakes-with-spoon-clothes-wooden-backdrop_23-2148087027.jpg",
"https://images.unsplash.com/photo-1550617931-e17a7b70dce2?auto=format&fit=crop&q=80&w=2000",
"https://images.unsplash.com/photo-1578985545062-69928b1d9587?auto=format&fit=crop&q=80&w=2000"
].map((src, idx) => (
<ImageOrVideo
key={idx}
imageSrc={src}
className="w-full h-full object-cover rounded-none"
/>
))}
</Carousel>
<div className="flex flex-col md:flex-row items-center gap-12 md:gap-20 w-content-width mx-auto">
<div className="w-full md:w-1/2">
<div className="flex flex-col items-center md:items-start gap-3">
<div className="px-3 py-1 mb-1 text-sm card rounded w-fit">
<p>{"Artisan Bakery"}</p>
</div>
<div
className="absolute z-10 w-full h-[50svh] md:h-[75svh] left-0 bottom-0 backdrop-blur-xl mask-[linear-gradient(to_bottom,transparent,black_60%)]"
aria-hidden="true"
/>
<div className="relative z-10 w-content-width mx-auto pb-5">
<div className="flex flex-col">
<div className="w-full flex flex-col md:flex-row md:justify-between items-start md:items-end gap-3 md:gap-5">
<TextAnimation
text={"Artisan pastries, custom cakes, and daily favorites made with premium ingredients. Order online for pickup or delivery today."}
variant="fade-blur"
gradientText={false}
tag="p"
className="w-full md:w-1/2 text-lg md:text-2xl text-balance font-normal text-primary-cta-text leading-snug"
text={"Indulge in Artisan Pastries Delivered Fresh to Your Door"}
variant="slide-up"
gradientText={true}
tag="h1"
className="text-7xl 2xl:text-8xl leading-[1.15] font-semibold text-center md:text-left text-balance"
/>
<div className="w-full md:w-1/2 flex justify-start md:justify-end">
<div className="flex flex-wrap gap-3">
<Button text={primaryButton.text} href={primaryButton.href} variant="primary"/>
<Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary"animationDelay={0.1} />
</div>
<TextAnimation
text={"Artisan pastries, custom cakes, and daily favorites made with premium ingredients. Order online for pickup or delivery today."}
variant="slide-up"
gradientText={false}
tag="p"
className="md:max-w-8/10 text-lg md:text-xl leading-snug text-center md:text-left text-balance"
/>
<div className="flex flex-wrap max-md:justify-center gap-3 mt-2 md:mt-3">
<Button text={primaryButton.text} href={primaryButton.href} variant="primary"/>
<Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary"animationDelay={0.1} />
</div>
</div>
</div>
<div className="w-full md:w-1/2 h-100 md:h-[75vh] flex gap-2 xl:gap-3 2xl:gap-4 overflow-hidden">
<div className="flex-1 overflow-hidden mask-fade-y-medium">
<div className="flex flex-col gap-2 xl:gap-3 2xl:gap-4 animate-marquee-vertical">
{duplicatedLeft.map((item, index) => (
<div key={index} className="shrink-0 aspect-square p-2 xl:p-3 2xl:p-4 card rounded overflow-hidden">
<ImageOrVideo imageSrc={item.imageSrc} videoSrc={item.videoSrc} />
</div>
))}
</div>
</div>
<AutoFillText className="font-semibold text-primary-cta-text">{"Indulge in Artisan Pastries Delivered Fresh to Your Door"}</AutoFillText>
<div className="flex-1 overflow-hidden mask-fade-y-medium">
<div className="flex flex-col gap-2 xl:gap-3 2xl:gap-4 animate-marquee-vertical-reverse">
{duplicatedRight.map((item, index) => (
<div key={index} className="shrink-0 aspect-square p-2 xl:p-3 2xl:p-4 card rounded overflow-hidden">
<ImageOrVideo imageSrc={item.imageSrc} videoSrc={item.videoSrc} />
</div>
))}
</div>
</div>
</div>
</div>
</section>