Merge version_2_1782837735771 into main #1
@@ -1,118 +1,37 @@
|
||||
// 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() {
|
||||
|
||||
import ReviewsSection from './HomePage/sections/Reviews';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 />
|
||||
<ReviewsSection />
|
||||
|
||||
<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
29
src/pages/HomePage/sections/About.tsx
Normal 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
23
src/pages/HomePage/sections/Contact.tsx
Normal 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
36
src/pages/HomePage/sections/Features.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
24
src/pages/HomePage/sections/Hero.tsx
Normal file
24
src/pages/HomePage/sections/Hero.tsx
Normal 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
33
src/pages/HomePage/sections/Menu.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
79
src/pages/HomePage/sections/Reviews.tsx
Normal file
79
src/pages/HomePage/sections/Reviews.tsx
Normal file
@@ -0,0 +1,79 @@
|
||||
import TextAnimation from "@/components/ui/TextAnimation";
|
||||
import ScrollReveal from "@/components/ui/ScrollReveal";
|
||||
import Card from "@/components/ui/Card";
|
||||
import RatingStars from "@/components/ui/RatingStars";
|
||||
import ImageOrVideo from "@/components/ui/ImageOrVideo";
|
||||
import Tag from "@/components/ui/Tag";
|
||||
|
||||
export default function ReviewsSection() {
|
||||
const testimonials = [
|
||||
{
|
||||
name: "Sarah Jenkins",
|
||||
role: "Local Resident",
|
||||
quote: "The best oat milk latte in town, hands down. The atmosphere is so cozy, it's become my go-to spot for morning reading.",
|
||||
rating: 5,
|
||||
imageSrc: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?auto=format&fit=crop&q=80&w=150&h=150"
|
||||
},
|
||||
{
|
||||
name: "David Chen",
|
||||
role: "Freelancer",
|
||||
quote: "Incredible espresso and the staff always remembers my order. The freshly baked croissants are dangerously good.",
|
||||
rating: 5,
|
||||
imageSrc: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&q=80&w=150&h=150"
|
||||
},
|
||||
{
|
||||
name: "Emily Rodriguez",
|
||||
role: "Coffee Enthusiast",
|
||||
quote: "You can really taste the care they put into sourcing their beans. The pour-over selection is fantastic.",
|
||||
rating: 5,
|
||||
imageSrc: "https://images.unsplash.com/photo-1544005313-94ddf0286df2?auto=format&fit=crop&q=80&w=150&h=150"
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<section data-webild-section="reviews" id="reviews" className="relative w-full py-24 bg-background">
|
||||
<div className="w-content-width mx-auto">
|
||||
<div className="flex flex-col items-center text-center mb-16">
|
||||
<ScrollReveal variant="fade">
|
||||
<Tag text="Reviews" className="mb-4" />
|
||||
</ScrollReveal>
|
||||
<TextAnimation
|
||||
text="What Our Locals Say"
|
||||
variant="fade-blur"
|
||||
tag="h2"
|
||||
className="text-4xl md:text-5xl font-bold text-foreground mb-6"
|
||||
gradientText={false}
|
||||
/>
|
||||
<ScrollReveal variant="fade" delay={0.1}>
|
||||
<p className="text-lg text-accent max-w-2xl mx-auto">
|
||||
Don't just take our word for it. Here's what the community thinks about our coffee and pastries.
|
||||
</p>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{testimonials.map((testimonial, index) => (
|
||||
<ScrollReveal variant="fade" key={index} delay={0.2 + index * 0.1}>
|
||||
<Card className="h-full p-8 flex flex-col">
|
||||
<RatingStars rating={testimonial.rating} className="mb-6" />
|
||||
<p className="text-foreground text-lg mb-8 flex-grow">"{testimonial.quote}"</p>
|
||||
<div className="flex items-center gap-4 mt-auto">
|
||||
<div className="w-12 h-12 rounded-full overflow-hidden flex-shrink-0">
|
||||
<ImageOrVideo
|
||||
imageSrc={testimonial.imageSrc}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-foreground font-semibold">{testimonial.name}</h4>
|
||||
<p className="text-accent text-sm">{testimonial.role}</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</ScrollReveal>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user