bender/2b7cb165-78d6-4017-9b03-1a5cd1285163
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_2_1782848221874 into main #1

Merged
bender merged 1 commits from version_2_1782848221874 into main 2026-06-30 19:38:31 +00:00
Conversation 0 Commits 1 Files Changed 6 +260 -101
6 changed files with 260 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
src/pages/HomePage.tsx
View File

@@ -1,118 +1,35 @@
// AUTO-GENERATED shell by per-section-migrate.
// Section bodies live in the sibling sections/ folder (one file per section).
// Edit those section files directly. Non-block content (wrappers,
// non-inlinable sections) is preserved inline; extracted section blocks
// become component refs.
import { StyleProvider } from "@/components/ui/StyleProvider";
import SiteBackgroundSlot from "@/components/ui/SiteBackgroundSlot";
import PageTransitionSwirl from "@/components/ui/PageTransitionSwirl";
import HeroBillboardBrandFloatingCards from "@/components/sections/hero/HeroBillboardBrandFloatingCards";
import AboutCursorTrail from "@/components/sections/about/AboutCursorTrail";
import FeaturesFilterGrid from "@/components/sections/features/FeaturesFilterGrid";
import FeaturesGridSplitLarge from "@/components/sections/features/FeaturesGridSplitLarge";
import ContactBar from "@/components/sections/contact/ContactBar";
import { Phone, MessageCircle, Mail } from "lucide-react";
import React from 'react';
import HeroSection from './HomePage/sections/Hero';
import AboutSection from './HomePage/sections/About';
import MenuSection from './HomePage/sections/Menu';
import FeaturesSection from './HomePage/sections/Features';
import ContactSection from './HomePage/sections/Contact';
export default function HomePage() {
export default function HomePage(): React.JSX.Element {
return (
<StyleProvider siteBackground="aurora" heroBackground="none" buttonVariant="bounce">
<SiteBackgroundSlot />
<PageTransitionSwirl />
<div id="hero" data-section="hero">
<HeroBillboardBrandFloatingCards
textAnimation="fade-blur"
brand="Joe's Coffee"
description="Handcrafted espresso drinks and freshly baked pastries in a warm, welcoming atmosphere. From our first roast to your morning cup, every sip tells a story."
primaryButton={{ text: "Order Now", href: "#order" }}
secondaryButton={{ text: "View Menu", href: "#menu" }}
videoSrc="https://storage.googleapis.com/webild/default/templates/joes-coffee/hero/hero.mp4"
floatingCards={[
{ imageSrc: "https://storage.googleapis.com/webild/default/templates/joes-coffee/hero/iced-coffee.webp", name: "Americano" },
{ imageSrc: "https://storage.googleapis.com/webild/default/templates/joes-coffee/hero/latte.webp", name: "Latte" },
]}
/>
</div>
<HeroSection />
<div id="about" data-section="about">
<AboutCursorTrail
textAnimation="fade-blur"
tag="Move your cursor!"
title="What are you in the mood for?"
media={[
{ imageSrc: "https://storage.googleapis.com/webild/default/templates/joes-coffee/trail/trail-1.webp" },
{ imageSrc: "https://storage.googleapis.com/webild/default/templates/joes-coffee/trail/trail-2.webp" },
{ imageSrc: "https://storage.googleapis.com/webild/default/templates/joes-coffee/trail/trail-3.webp" },
{ imageSrc: "https://storage.googleapis.com/webild/default/templates/joes-coffee/trail/trail-4.webp" },
{ imageSrc: "https://storage.googleapis.com/webild/default/templates/joes-coffee/trail/trail-5.webp" },
{ imageSrc: "https://storage.googleapis.com/webild/default/templates/joes-coffee/trail/trail-6.webp" },
{ imageSrc: "https://storage.googleapis.com/webild/default/templates/joes-coffee/trail/trail-7.webp" },
{ imageSrc: "https://storage.googleapis.com/webild/default/templates/joes-coffee/trail/trail-8.webp" },
]}
primaryButton={{ text: "See the Menu", href: "#menu" }}
secondaryButton={{ text: "Find Us", href: "#locations" }}
/>
</div>
<AboutSection />
<div id="menu" data-section="menu">
<FeaturesFilterGrid
textAnimation="fade-blur"
tag="What We Serve"
title="Explore What's on Our Menu"
description="From handcrafted espresso drinks to freshly baked pastries, every item is made with care."
categories={["Hot Drinks", "Cold Drinks", "Pastries"]}
items={[
{ name: "Espresso", category: "Hot Drinks", imageSrc: "https://storage.googleapis.com/webild/default/templates/joes-coffee/menu/espresso.webp" },
{ name: "Latte", category: "Hot Drinks", imageSrc: "https://storage.googleapis.com/webild/default/templates/joes-coffee/menu/latte-menu.webp" },
{ name: "Iced Latte", category: "Cold Drinks", imageSrc: "https://storage.googleapis.com/webild/default/templates/joes-coffee/trail/trail-2.webp" },
{ name: "Cappuccino", category: "Hot Drinks", imageSrc: "https://storage.googleapis.com/webild/default/templates/joes-coffee/menu/cappuccino.webp" },
{ name: "Iced Americano", category: "Cold Drinks", imageSrc: "https://storage.googleapis.com/webild/default/templates/joes-coffee/hero/iced-coffee.webp" },
{ name: "Mocha", category: "Hot Drinks", imageSrc: "https://storage.googleapis.com/webild/default/templates/joes-coffee/menu/mocha.webp" },
{ name: "Iced Mocha", category: "Cold Drinks", imageSrc: "https://storage.googleapis.com/webild/default/templates/joes-coffee/trail/trail-6.webp" },
{ name: "Flat White", category: "Hot Drinks", imageSrc: "https://storage.googleapis.com/webild/default/templates/joes-coffee/trail/trail-7.webp" },
{ name: "Iced Flat White", category: "Cold Drinks", imageSrc: "https://storage.googleapis.com/webild/default/templates/joes-coffee/menu/iced-flat-white.webp" },
{ name: "Chai Latte", category: "Hot Drinks", imageSrc: "https://storage.googleapis.com/webild/default/templates/joes-coffee/menu/chai-latte.webp" },
{ name: "Croissant", category: "Pastries", imageSrc: "https://storage.googleapis.com/webild/default/templates/joes-coffee/trail/trail-3.webp" },
{ name: "Chocolate Chip Cookie", category: "Pastries", imageSrc: "https://storage.googleapis.com/webild/default/templates/joes-coffee/menu/chocolate-chip-cookie.webp" },
]}
/>
</div>
<MenuSection />
<div id="features" data-section="features">
<FeaturesGridSplitLarge
textAnimation="fade-blur"
tag="Beyond the Cup"
title="Host Your Next Event at Joe's"
description="From intimate gatherings to full-scale catering, we bring the warmth of Joe's wherever you need it."
topItems={[
{
title: "Private Events",
description: "Book our space for birthdays, meetings, or just a good excuse to get together. Great coffee and good vibes included.",
imageSrc: "https://storage.googleapis.com/webild/default/templates/joes-coffee/features/private-events.webp",
},
{
title: "Catering",
description: "Let us handle the coffee and pastries for your next event. We'll set up, pour, and make sure nobody runs on empty.",
imageSrc: "https://storage.googleapis.com/webild/default/templates/joes-coffee/features/catering.webp",
},
]}
bottomItem={{
title: "Custom Menus",
description: "Work with our team to build a tailored menu for your event — from espresso bars to pastry platters, we've got you covered.",
imageSrc: "https://storage.googleapis.com/webild/default/templates/joes-coffee/features/custom-menus.webp",
primaryButton: { text: "Get in Touch", href: "#contact" },
}}
/>
</div>
<FeaturesSection />
<div id="contact" data-section="contact">
<ContactBar
textAnimation="fade-blur"
tag="Get in Touch"
title={"Speak with one\nof our experts"}
options={[
{ icon: MessageCircle, label: "Whatsapp", href: "https://wa.me/1234567890" },
{ icon: Mail, label: "Email", href: "mailto:hello@joescoffee.com" },
{ icon: Phone, label: "Number", href: "tel:+1234567890" },
]}
/>
</div>
<ContactSection />
</StyleProvider>

29
src/pages/HomePage/sections/About.tsx Normal file
View File

@@ -0,0 +1,29 @@
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
// file as the canonical source for the "about" section.
import React from 'react';
import AboutCursorTrail from "@/components/sections/about/AboutCursorTrail";
export default function AboutSection(): React.JSX.Element {
return (
<div id="about" data-section="about">
<AboutCursorTrail
textAnimation="fade-blur"
tag="Move your cursor!"
title="What are you in the mood for?"
media={[
{ imageSrc: "https://storage.googleapis.com/webild/default/templates/joes-coffee/trail/trail-1.webp" },
{ imageSrc: "https://storage.googleapis.com/webild/default/templates/joes-coffee/trail/trail-2.webp" },
{ imageSrc: "https://storage.googleapis.com/webild/default/templates/joes-coffee/trail/trail-3.webp" },
{ imageSrc: "https://storage.googleapis.com/webild/default/templates/joes-coffee/trail/trail-4.webp" },
{ imageSrc: "https://storage.googleapis.com/webild/default/templates/joes-coffee/trail/trail-5.webp" },
{ imageSrc: "https://storage.googleapis.com/webild/default/templates/joes-coffee/trail/trail-6.webp" },
{ imageSrc: "https://storage.googleapis.com/webild/default/templates/joes-coffee/trail/trail-7.webp" },
{ imageSrc: "https://storage.googleapis.com/webild/default/templates/joes-coffee/trail/trail-8.webp" },
]}
primaryButton={{ text: "See the Menu", href: "#menu" }}
secondaryButton={{ text: "Find Us", href: "#locations" }}
/>
</div>
);
}

23
src/pages/HomePage/sections/Contact.tsx Normal file
View File

@@ -0,0 +1,23 @@
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
// file as the canonical source for the "contact" section.
import React from 'react';
import ContactBar from "@/components/sections/contact/ContactBar";
import { Phone, MessageCircle, Mail } from "lucide-react";
export default function ContactSection(): React.JSX.Element {
return (
<div id="contact" data-section="contact">
<ContactBar
textAnimation="fade-blur"
tag="Get in Touch"
title={"Speak with one\nof our experts"}
options={[
{ icon: MessageCircle, label: "Whatsapp", href: "https://wa.me/1234567890" },
{ icon: Mail, label: "Email", href: "mailto:hello@joescoffee.com" },
{ icon: Phone, label: "Number", href: "tel:+1234567890" },
]}
/>
</div>
);
}

133
src/pages/HomePage/sections/Features.tsx Normal file
View File

@@ -0,0 +1,133 @@
/* eslint-disable */
// @ts-nocheck — generated by catalog-eject; runtime-correct but TS strict-mode false-positives on inlined catalog body
import Button from "@/components/ui/Button";
import TextAnimation from "@/components/ui/TextAnimation";
import AvatarGroup from "@/components/ui/AvatarGroup";
import ImageOrVideo from "@/components/ui/ImageOrVideo";
import ScrollReveal from "@/components/ui/ScrollReveal";
const topItems = [
{
title: "Private Events",
description: "Book our space for birthdays, meetings, or just a good excuse to get together. Great coffee and good vibes included.",
imageSrc: "https://storage.googleapis.com/webild/default/templates/joes-coffee/features/private-events.webp"
},
{
title: "Catering",
description: "Let us handle the coffee and pastries for your next event. We'll set up, pour, and make sure nobody runs on empty.",
imageSrc: "https://storage.googleapis.com/webild/default/templates/joes-coffee/features/catering.webp"
},
{
title: "Birthday Parties",
description: "Celebrate your special day with us. We'll provide the space, the coffee, and the perfect atmosphere for your birthday bash.",
imageSrc: "https://images.unsplash.com/photo-1530103862676-de8892bc952f?q=80&w=2070&auto=format&fit=crop"
}
];
const bottomItem = {
title: "Custom Menus",
description: "Work with our team to build a tailored menu for your event — from espresso bars to pastry platters, we've got you covered.",
imageSrc: "https://storage.googleapis.com/webild/default/templates/joes-coffee/features/custom-menus.webp",
primaryButton: {
text: "Get in Touch",
href: "#contact"
}
};
type FeatureItem = {
title: string;
description: string;
} & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
type BottomFeatureItem = FeatureItem & {
primaryButton: { text: string; href: string };
avatarsSrc?: string[];
avatarsLabel?: string;
};
type FeaturesGridSplitLargeProps = {
tag: string;
title: string;
description: string;
primaryButton?: { text: string; href: string };
secondaryButton?: { text: string; href: string };
topItems: [FeatureItem, FeatureItem];
bottomItem: BottomFeatureItem;
textAnimation: "slide-up" | "fade-blur" | "fade";
};
const FeaturesInline = () => {
return (
<section aria-label="Features section" className="flex flex-col gap-8 md:gap-10 py-20">
<div className="flex flex-col items-center w-content-width mx-auto gap-2">
<div className="px-3 py-1 mb-1 text-sm card rounded w-fit">
<p>{"Beyond the Cup"}</p>
</div>
<TextAnimation
text={"Host Your Next Event at Joe's"}
variant={"fade-blur"}
gradientText={true}
tag="h2"
className="md:max-w-8/10 text-7xl 2xl:text-8xl leading-[1.15] font-semibold text-center text-balance"
/>
<TextAnimation
text={"From intimate gatherings to full-scale catering, we bring the warmth of Joe's wherever you need it."}
variant={"fade-blur"}
gradientText={false}
tag="p"
className="md:max-w-7/10 text-lg md:text-xl leading-snug text-center text-balance"
/>
{(undefined || undefined) && (
<div className="flex flex-wrap justify-center gap-3 mt-2 md:mt-3">
{undefined && <Button text={undefined.text} href={undefined.href} variant="primary"/>}
{undefined && <Button text={undefined.text} href={undefined.href} variant="secondary" animationDelay={0.1} />}
</div>
)}
</div>
<div className="w-content-width mx-auto flex flex-col gap-3 xl:gap-3.5 2xl:gap-4">
<ScrollReveal variant="slide-up" className="grid grid-cols-1 md:grid-cols-3 gap-3 xl:gap-3.5 2xl:gap-4">
{topItems.map((item) => (
<div key={item.title} className="flex flex-col gap-3 xl:gap-3.5 2xl:gap-4 p-3 xl:p-3.5 2xl:p-4 card rounded">
<div className="aspect-square rounded overflow-hidden bg-foreground/5 shadow shadow-foreground/5">
<ImageOrVideo imageSrc={item.imageSrc} videoSrc={item.videoSrc} />
</div>
<div className="flex flex-col gap-1 p-3 xl:p-3.5 2xl:p-4">
<h3 className="text-5xl font-semibold leading-snug text-balance">{item.title}</h3>
<p className="text-lg leading-snug text-balance">{item.description}</p>
</div>
</div>
))}
</ScrollReveal>
<ScrollReveal variant="slide-up">
<div className="flex flex-col md:flex-row gap-3 xl:gap-3.5 2xl:gap-4 p-3 xl:p-3.5 2xl:p-4 card rounded">
<div className="flex flex-col gap-1 justify-center md:w-1/2 p-3 xl:p-3.5 2xl:p-4">
<h3 className="text-5xl font-semibold leading-snug text-balance">{bottomItem.title}</h3>
<p className="text-lg leading-snug text-balance">{bottomItem.description}</p>
<div className="flex flex-wrap items-center gap-3 mt-2 md:mt-3">
<Button text={bottomItem.primaryButton.text} href={bottomItem.primaryButton.href} variant="primary" />
{bottomItem.avatarsSrc && bottomItem.avatarsSrc.length > 0 && (
<AvatarGroup avatarsSrc={bottomItem.avatarsSrc} size="md" label={bottomItem.avatarsLabel} />
)}
</div>
</div>
<div className="md:w-1/2 rounded overflow-hidden bg-foreground/5 shadow shadow-foreground/5">
<ImageOrVideo imageSrc={bottomItem.imageSrc} videoSrc={bottomItem.videoSrc} />
</div>
</div>
</ScrollReveal>
</div>
</section>
);
};
export default function FeaturesSection() {
return (
<div data-webild-section="features" id="features">
<FeaturesInline />
</div>
);
}

24
src/pages/HomePage/sections/Hero.tsx Normal file
View File

@@ -0,0 +1,24 @@
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
// file as the canonical source for the "hero" section.
import React from 'react';
import HeroBillboardBrandFloatingCards from "@/components/sections/hero/HeroBillboardBrandFloatingCards";
export default function HeroSection(): React.JSX.Element {
return (
<div id="hero" data-section="hero">
<HeroBillboardBrandFloatingCards
textAnimation="fade-blur"
brand="Joe's Coffee"
description="Handcrafted espresso drinks and freshly baked pastries in a warm, welcoming atmosphere. From our first roast to your morning cup, every sip tells a story."
primaryButton={{ text: "Order Now", href: "#order" }}
secondaryButton={{ text: "View Menu", href: "#menu" }}
videoSrc="https://storage.googleapis.com/webild/default/templates/joes-coffee/hero/hero.mp4"
floatingCards={[
{ imageSrc: "https://storage.googleapis.com/webild/default/templates/joes-coffee/hero/iced-coffee.webp", name: "Americano" },
{ imageSrc: "https://storage.googleapis.com/webild/default/templates/joes-coffee/hero/latte.webp", name: "Latte" },
]}
/>
</div>
);
}

33
src/pages/HomePage/sections/Menu.tsx Normal file
View File

@@ -0,0 +1,33 @@
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
// file as the canonical source for the "menu" section.
import React from 'react';
import FeaturesFilterGrid from "@/components/sections/features/FeaturesFilterGrid";
export default function MenuSection(): React.JSX.Element {
return (
<div id="menu" data-section="menu">
<FeaturesFilterGrid
textAnimation="fade-blur"
tag="What We Serve"
title="Explore What's on Our Menu"
description="From handcrafted espresso drinks to freshly baked pastries, every item is made with care."
categories={["Hot Drinks", "Cold Drinks", "Pastries"]}
items={[
{ name: "Espresso", category: "Hot Drinks", imageSrc: "https://storage.googleapis.com/webild/default/templates/joes-coffee/menu/espresso.webp" },
{ name: "Latte", category: "Hot Drinks", imageSrc: "https://storage.googleapis.com/webild/default/templates/joes-coffee/menu/latte-menu.webp" },
{ name: "Iced Latte", category: "Cold Drinks", imageSrc: "https://storage.googleapis.com/webild/default/templates/joes-coffee/trail/trail-2.webp" },
{ name: "Cappuccino", category: "Hot Drinks", imageSrc: "https://storage.googleapis.com/webild/default/templates/joes-coffee/menu/cappuccino.webp" },
{ name: "Iced Americano", category: "Cold Drinks", imageSrc: "https://storage.googleapis.com/webild/default/templates/joes-coffee/hero/iced-coffee.webp" },
{ name: "Mocha", category: "Hot Drinks", imageSrc: "https://storage.googleapis.com/webild/default/templates/joes-coffee/menu/mocha.webp" },
{ name: "Iced Mocha", category: "Cold Drinks", imageSrc: "https://storage.googleapis.com/webild/default/templates/joes-coffee/trail/trail-6.webp" },
{ name: "Flat White", category: "Hot Drinks", imageSrc: "https://storage.googleapis.com/webild/default/templates/joes-coffee/trail/trail-7.webp" },
{ name: "Iced Flat White", category: "Cold Drinks", imageSrc: "https://storage.googleapis.com/webild/default/templates/joes-coffee/menu/iced-flat-white.webp" },
{ name: "Chai Latte", category: "Hot Drinks", imageSrc: "https://storage.googleapis.com/webild/default/templates/joes-coffee/menu/chai-latte.webp" },
{ name: "Croissant", category: "Pastries", imageSrc: "https://storage.googleapis.com/webild/default/templates/joes-coffee/trail/trail-3.webp" },
{ name: "Chocolate Chip Cookie", category: "Pastries", imageSrc: "https://storage.googleapis.com/webild/default/templates/joes-coffee/menu/chocolate-chip-cookie.webp" },
]}
/>
</div>
);
}