bender/846d3cd4-8217-409e-9a0e-e090e9e27953
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_2_1782616229592 into main #1

Merged
bender merged 1 commits from version_2_1782616229592 into main 2026-06-28 03:12:17 +00:00
Conversation 0 Commits 1 Files Changed 6 +263 -101
6 changed files with 263 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
src/pages/HomePage.tsx
View File

@@ -1,118 +1,34 @@
// AUTO-GENERATED shell by per-section-migrate.
// Section bodies live in ./<PageBase>/sections/<X>.tsx. Edit the section
// files directly. Non-block content (wrappers, non-inlinable sections) is
// preserved inline; extracted section blocks become <XSection/> 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>
);
}

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

@@ -0,0 +1,36 @@
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
// file as the canonical source for the "features" section.
import React from 'react';
import FeaturesGridSplitLarge from "@/components/sections/features/FeaturesGridSplitLarge";
export default function FeaturesSection(): React.JSX.Element {
return (
<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>
);
}

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

@@ -0,0 +1,125 @@
/* eslint-disable */
// @ts-nocheck — generated by catalog-eject; runtime-correct but TS strict-mode false-positives on inlined catalog body
import { useRef } from "react";
import { motion, useScroll, useTransform } from "motion/react";
import { cls } from "@/lib/utils";
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 AutoFillText from "@/components/ui/AutoFillText";
import ScrollReveal from "@/components/ui/ScrollReveal";
const primaryButton = {
text: "Order Now",
href: "#order"
};
const secondaryButton = {
text: "View Menu",
href: "#menu"
};
const 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"
},
{
imageSrc: "https://storage.googleapis.com/webild/default/templates/joes-coffee/menu/cappuccino.webp",
name: "Cappuccino"
}
];
type FloatingCard = {
name: string;
} & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
const CARD_CONFIG = [
{ position: "left", bottom: "30%", aspect: "aspect-3/4", movement: "-100%" },
{ position: "right", bottom: "14%", aspect: "aspect-square", movement: "-75%" },
{ position: "left", bottom: "65%", aspect: "aspect-square", movement: "-120%" },
] as const;
type HeroBillboardBrandFloatingCardsProps = {
brand: string;
description: string;
primaryButton: { text: string; href: string };
secondaryButton: { text: string; href: string };
floatingCards: [FloatingCard, FloatingCard, FloatingCard];
textAnimation: "slide-up" | "fade-blur" | "fade";
} & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
const HeroInline = () => {
const heroRef = useRef<HTMLDivElement>(null);
const { scrollYProgress } = useScroll({
target: heroRef,
offset: ["start start", "end start"],
});
const leftCardY = useTransform(scrollYProgress, [0, 1], ["0%", CARD_CONFIG[0].movement]);
const rightCardY = useTransform(scrollYProgress, [0, 1], ["0%", CARD_CONFIG[1].movement]);
const cardYTransforms = [leftCardY, rightCardY];
return (
<section ref={heroRef} aria-label="Hero section" className="relative pt-25 pb-20 md:pt-30">
<HeroBackgroundSlot />
{floatingCards.map((card, i) => (
<motion.div
key={i}
style={{ y: cardYTransforms[i], bottom: CARD_CONFIG[i].bottom }}
className={cls(
"absolute z-10 w-28 xl:w-48 2xl:w-52 p-1 xl:p-2 2xl:p-3 card rounded overflow-hidden shadow-xl",
CARD_CONFIG[i].position === "left"
? "left-[calc((100vw-var(--width-content-width))/2)] translate-x-1/4 lg:-translate-x-1/2"
: "right-[calc((100vw-var(--width-content-width))/2)] -translate-x-1/4 lg:translate-x-1/2"
)}
>
<div className="relative">
<ImageOrVideo
imageSrc={card.imageSrc}
videoSrc={card.videoSrc}
className={cls("w-full object-cover rounded", CARD_CONFIG[i].aspect)}
/>
<div className="absolute bottom-1 xl:bottom-2 2xl:bottom-3 inset-x-1 xl:inset-x-2 2xl:inset-x-3 card rounded p-1 xl:p-2 2xl:p-3">
<h3 className="text-2xl md:text-3xl text-center truncate">{card.name}</h3>
</div>
</div>
</motion.div>
))}
<div className="flex flex-col gap-10 md:gap-12 w-content-width mx-auto">
<div className="flex flex-col items-end gap-5">
<AutoFillText className="w-full font-semibold" paddingY="">{"Joe's Coffee"}</AutoFillText>
<TextAnimation
text={"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."}
variant={"fade-blur"}
gradientText={false}
tag="p"
className="w-full md:w-1/2 text-lg md:text-2xl leading-snug text-balance text-right"
/>
<div className="flex flex-wrap justify-end gap-3 mt-1 md:mt-2">
<Button text={primaryButton.text} href={primaryButton.href} variant="primary"/>
<Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary" animationDelay={0.1} />
</div>
</div>
<ScrollReveal variant="slide-up" delay={0.2} className="w-full p-2 xl:p-3 2xl:p-4 card rounded overflow-hidden">
<ImageOrVideo videoSrc={"https://storage.googleapis.com/webild/default/templates/joes-coffee/hero/hero.mp4"} className="aspect-4/5 md:aspect-video" />
</ScrollReveal>
</div>
</section>
);
};
export default function HeroSection() {
return (
<div data-webild-section="hero" id="hero">
<HeroInline />
</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>
);
}