Update src/pages/HomePage.tsx
This commit is contained in:
@@ -6,182 +6,163 @@ import FeaturesImageBento from '@/components/sections/features/FeaturesImageBent
|
||||
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
|
||||
import SocialProofMarquee from '@/components/sections/social-proof/SocialProofMarquee';
|
||||
import TestimonialMarqueeOverlayCards from '@/components/sections/testimonial/TestimonialMarqueeOverlayCards';
|
||||
import { Award, Coffee, Flame, Globe, Leaf, Star, Truck } from "lucide-react";
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function HomePage() {
|
||||
return (
|
||||
<>
|
||||
<div id="hero" data-section="hero">
|
||||
<SectionErrorBoundary name="hero">
|
||||
<div id="hero" data-section="hero">
|
||||
<SectionErrorBoundary name="hero">
|
||||
<HeroOverlay
|
||||
tag="Since 2012"
|
||||
title="Experience the Art of Coffee"
|
||||
description="Crafted from ethically sourced, premium beans to create the perfect morning ritual."
|
||||
primaryButton={{
|
||||
text: "View Menu", href: "#menu"}}
|
||||
secondaryButton={{
|
||||
text: "Visit Us", href: "#contact"}}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/breakfast-composition_23-2148104748.jpg"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
tag="Since 2012"
|
||||
title="Experience the Art of Coffee"
|
||||
description="Crafted from ethically sourced, premium beans to create the perfect morning ritual."
|
||||
primaryButton={{ text: "View Menu", href: "#menu" }}
|
||||
secondaryButton={{ text: "Visit Us", href: "#contact" }}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/breakfast-composition_23-2148104748.jpg"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<SectionErrorBoundary name="about">
|
||||
<div id="about" data-section="about">
|
||||
<SectionErrorBoundary name="about">
|
||||
<AboutFeaturesSplit
|
||||
tag="Our Craft"
|
||||
title="Rooted in Quality"
|
||||
description="We believe in transparency from farm to cup. Our roasting process honors the natural profile of every harvest."
|
||||
items={[
|
||||
{
|
||||
icon: "Coffee", title: "Single Origin", description: "Hand-selected from small-lot farmers."},
|
||||
{
|
||||
icon: "Flame", title: "Small Batch Roast", description: "Roasted daily for maximum freshness."},
|
||||
{
|
||||
icon: "Award", title: "Artisanal Method", description: "Expert baristas perfect every pour."},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/female-hands-holding-coffee-beans-flat-lay-grungy-grey-background_176474-64299.jpg"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
tag="Our Craft"
|
||||
title="Rooted in Quality"
|
||||
description="We believe in transparency from farm to cup. Our roasting process honors the natural profile of every harvest."
|
||||
items={[
|
||||
{ icon: "Coffee", title: "Single Origin", description: "Hand-selected from small-lot farmers." },
|
||||
{ icon: "Flame", title: "Small Batch Roast", description: "Roasted daily for maximum freshness." },
|
||||
{ icon: "Award", title: "Artisanal Method", description: "Expert baristas perfect every pour." },
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/female-hands-holding-coffee-beans-flat-lay-grungy-grey-background_176474-64299.jpg"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<SectionErrorBoundary name="features">
|
||||
<div id="features" data-section="features">
|
||||
<SectionErrorBoundary name="features">
|
||||
<FeaturesBento
|
||||
tag="The Process"
|
||||
title="Precision in Every Sip"
|
||||
description="Excellence is not an act, but a habit of meticulous preparation."
|
||||
features={[
|
||||
{
|
||||
title: "Bean Sourcing", description: "Sustainable partnerships globally.", bentoComponent: "info-card-marquee", infoCards: [
|
||||
{
|
||||
icon: "Globe", label: "Origins", value: "12+"},
|
||||
{
|
||||
icon: "Leaf", label: "Organic", value: "100%"},
|
||||
{
|
||||
icon: "Truck", label: "Ethical", value: "Direct"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Coffee Quality", description: "Strict quality control protocols.", bentoComponent: "checklist-timeline", heading: "QC Protocols", subheading: "Standards met", checklistItems: [
|
||||
{
|
||||
label: "Cupping", detail: "Certified judges"},
|
||||
{
|
||||
label: "Roasting", detail: "Temperature locked"},
|
||||
{
|
||||
label: "Brewing", detail: "Ratio perfect"},
|
||||
],
|
||||
completedLabel: "Approved"},
|
||||
{
|
||||
title: "Our Baristas", description: "Expertise in every pour.", bentoComponent: "tilted-stack-cards", stackCards: [
|
||||
{
|
||||
icon: "Award", title: "Certified", subtitle: "Level 1", detail: "Q-Grader"},
|
||||
{
|
||||
icon: "Coffee", title: "Master", subtitle: "Level 2", detail: "Trainer"},
|
||||
{
|
||||
icon: "Star", title: "Pro", subtitle: "Level 3", detail: "Champion"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
tag="The Process"
|
||||
title="Precision in Every Sip"
|
||||
description="Excellence is not an act, but a habit of meticulous preparation."
|
||||
features={[
|
||||
{
|
||||
title: "Bean Sourcing", description: "Sustainable partnerships globally.", bentoComponent: "info-card-marquee", infoCards: [
|
||||
{ icon: "Globe", label: "Origins", value: "12+" },
|
||||
{ icon: "Leaf", label: "Organic", value: "100%" },
|
||||
{ icon: "Truck", label: "Ethical", value: "Direct" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Coffee Quality", description: "Strict quality control protocols.", bentoComponent: "checklist-timeline", heading: "QC Protocols", subheading: "Standards met", checklistItems: [
|
||||
{ label: "Cupping", detail: "Certified judges" },
|
||||
{ label: "Roasting", detail: "Temperature locked" },
|
||||
{ label: "Brewing", detail: "Ratio perfect" },
|
||||
],
|
||||
completedLabel: "Approved"},
|
||||
{
|
||||
title: "Our Baristas", description: "Expertise in every pour.", bentoComponent: "tilted-stack-cards", stackCards: [
|
||||
{ icon: "Award", title: "Certified", subtitle: "Level 1", detail: "Q-Grader" },
|
||||
{ icon: "Coffee", title: "Master", subtitle: "Level 2", detail: "Trainer" },
|
||||
{ icon: "Star", title: "Pro", subtitle: "Level 3", detail: "Champion" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="menu" data-section="menu">
|
||||
<SectionErrorBoundary name="menu">
|
||||
<div id="menu" data-section="menu">
|
||||
<SectionErrorBoundary name="menu">
|
||||
<FeaturesImageBento
|
||||
tag="Our Menu"
|
||||
title="Curated Experiences"
|
||||
description="Discover our signature roasts and paired artisan pastries."
|
||||
items={[
|
||||
{ title: "Signature Espresso", description: "Full-bodied chocolate notes.", imageSrc: "http://img.b2bpic.net/free-photo/top-view-cup-milk-coffee-with-wooden-background_23-2148251668.jpg" },
|
||||
{ title: "Flaky Croissant", description: "French butter perfection.", imageSrc: "http://img.b2bpic.net/free-photo/delicious-pastry-black-board-with-cloth_114579-88111.jpg" },
|
||||
{ title: "Cold Brew", description: "Steeped for 24 hours.", imageSrc: "http://img.b2bpic.net/free-photo/black-cafe-food-old-background_1339-66.jpg" },
|
||||
{ title: "Origin Beans", description: "Home brewing perfection.", imageSrc: "http://img.b2bpic.net/free-photo/woman-buying-dried-food-market-place_23-2148648929.jpg" },
|
||||
{ title: "Matcha Latte", description: "Premium ceremonial grade.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-oatmeal-bowl-with-raspberries-wooden-tray_23-2147916199.jpg" },
|
||||
{ title: "Brewing Tools", description: "Professional quality kits.", imageSrc: "http://img.b2bpic.net/free-photo/making-drip-coffee-vintage-coffee-shop_1150-14513.jpg" },
|
||||
{ title: "Blueberry Muffin", description: "Baked fresh every dawn.", imageSrc: "http://img.b2bpic.net/free-photo/top-view-tasty-muffin-with-blueberries_23-2148718775.jpg" }
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
tag="Our Menu"
|
||||
title="Curated Experiences"
|
||||
description="Discover our signature roasts and paired artisan pastries."
|
||||
items={[
|
||||
{ title: "Signature Espresso", description: "Full-bodied chocolate notes.", imageSrc: "http://img.b2bpic.net/free-photo/top-view-cup-milk-coffee-with-wooden-background_23-2148251668.jpg" },
|
||||
{ title: "Flaky Croissant", description: "French butter perfection.", imageSrc: "http://img.b2bpic.net/free-photo/delicious-pastry-black-board-with-cloth_114579-88111.jpg" },
|
||||
{ title: "Cold Brew", description: "Steeped for 24 hours.", imageSrc: "http://img.b2bpic.net/free-photo/black-cafe-food-old-background_1339-66.jpg" },
|
||||
{ title: "Origin Beans", description: "Home brewing perfection.", imageSrc: "http://img.b2bpic.net/free-photo/woman-buying-dried-food-market-place_23-2148648929.jpg" },
|
||||
{ title: "Matcha Latte", description: "Premium ceremonial grade.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-oatmeal-bowl-with-raspberries-wooden-tray_23-2147916199.jpg" },
|
||||
{ title: "Brewing Tools", description: "Professional quality kits.", imageSrc: "http://img.b2bpic.net/free-photo/making-drip-coffee-vintage-coffee-shop_1150-14513.jpg" },
|
||||
{ title: "Blueberry Muffin", description: "Baked fresh every dawn.", imageSrc: "http://img.b2bpic.net/free-photo/top-view-tasty-muffin-with-blueberries_23-2148718775.jpg" }
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<SectionErrorBoundary name="testimonials">
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<SectionErrorBoundary name="testimonials">
|
||||
<TestimonialMarqueeOverlayCards
|
||||
tag="Love from Guests"
|
||||
title="Community Voices"
|
||||
description="Hear what our loyal morning commuters are saying about their daily brew."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Alice M.", role: "Designer", company: "Studio", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-happy-asian-woman-entrepreneur-recommending-cafe-showing-okay-ok-sign-approval_1258-199352.jpg"},
|
||||
{
|
||||
name: "David L.", role: "Developer", company: "Tech", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-drinking-hot-chocolate-cafe_23-2149944060.jpg"},
|
||||
{
|
||||
name: "Sarah P.", role: "Artist", company: "Galerie", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-couple-standing-kitchen_23-2147805614.jpg"},
|
||||
{
|
||||
name: "Mark R.", role: "Writer", company: "Journal", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-fashionable-bearded-male-with-stylish-haircut-drinks-glass-cappuccino-sitting-cafe-outdoors_613910-6671.jpg"},
|
||||
{
|
||||
name: "Emily V.", role: "Architect", company: "Designs", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/enthusiastic-young-asian-woman-barista-apron-looking-amazed-clap-hands-smiling-standing_1258-199220.jpg"},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
tag="Love from Guests"
|
||||
title="Community Voices"
|
||||
description="Hear what our loyal morning commuters are saying about their daily brew."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Alice M.", role: "Designer", company: "Studio", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-happy-asian-woman-entrepreneur-recommending-cafe-showing-okay-ok-sign-approval_1258-199352.jpg"
|
||||
},
|
||||
{
|
||||
name: "David L.", role: "Developer", company: "Tech", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-drinking-hot-chocolate-cafe_23-2149944060.jpg"
|
||||
},
|
||||
{
|
||||
name: "Sarah P.", role: "Artist", company: "Galerie", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-couple-standing-kitchen_23-2147805614.jpg"
|
||||
},
|
||||
{
|
||||
name: "Mark R.", role: "Writer", company: "Journal", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-fashionable-bearded-male-with-stylish-haircut-drinks-glass-cappuccino-sitting-cafe-outdoors_613910-6671.jpg"
|
||||
},
|
||||
{
|
||||
name: "Emily V.", role: "Architect", company: "Designs", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/enthusiastic-young-asian-woman-barista-apron-looking-amazed-clap-hands-smiling-standing_1258-199220.jpg"
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="social-proof" data-section="social-proof">
|
||||
<SectionErrorBoundary name="social-proof">
|
||||
<div id="social-proof" data-section="social-proof">
|
||||
<SectionErrorBoundary name="social-proof">
|
||||
<SocialProofMarquee
|
||||
tag="Recognized Excellence"
|
||||
title="Awarded Quality"
|
||||
description="Proudly featured in industry journals and community guides."
|
||||
names={[
|
||||
"Food Journal", "Organic Union", "Coffee Weekly", "Artisan Daily", "City Choice", "Fair Trade Int", "Design World"]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
tag="Recognized Excellence"
|
||||
title="Awarded Quality"
|
||||
description="Proudly featured in industry journals and community guides."
|
||||
names={["Food Journal", "Organic Union", "Coffee Weekly", "Artisan Daily", "City Choice", "Fair Trade Int", "Design World"]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<SectionErrorBoundary name="faq">
|
||||
<div id="faq" data-section="faq">
|
||||
<SectionErrorBoundary name="faq">
|
||||
<FaqTwoColumn
|
||||
tag="Support"
|
||||
title="Frequently Asked"
|
||||
description="Got questions about our roasts or beans?"
|
||||
items={[
|
||||
{
|
||||
question: "Do you offer subscriptions?", answer: "Yes, we ship fresh beans directly to your door monthly."},
|
||||
{
|
||||
question: "Are your beans organic?", answer: "We prioritize organic farming for 100% of our supply."},
|
||||
{
|
||||
question: "Where is your cafe located?", answer: "Visit our shop in the downtown artisanal district."},
|
||||
{
|
||||
question: "Can I buy brewing gear?", answer: "Yes, we curate professional tools in-shop and online."},
|
||||
{
|
||||
question: "Do you have dairy alternatives?", answer: "We offer oat, almond, and soy milk at no extra charge."},
|
||||
{
|
||||
question: "What's the best way to brew?", answer: "We recommend a pour-over for our lighter roasts."},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
tag="Support"
|
||||
title="Frequently Asked"
|
||||
description="Got questions about our roasts or beans?"
|
||||
items={[
|
||||
{ question: "Do you offer subscriptions?", answer: "Yes, we ship fresh beans directly to your door monthly." },
|
||||
{ question: "Are your beans organic?", answer: "We prioritize organic farming for 100% of our supply." },
|
||||
{ question: "Where is your cafe located?", answer: "Visit our shop in the downtown artisanal district." },
|
||||
{ question: "Can I buy brewing gear?", answer: "Yes, we curate professional tools in-shop and online." },
|
||||
{ question: "Do you have dairy alternatives?", answer: "We offer oat, almond, and soy milk at no extra charge." },
|
||||
{ question: "What's the best way to brew?", answer: "We recommend a pour-over for our lighter roasts." },
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<SectionErrorBoundary name="contact">
|
||||
<div id="contact" data-section="contact">
|
||||
<SectionErrorBoundary name="contact">
|
||||
<ContactCta
|
||||
tag="Join Us"
|
||||
text="Start your morning ritual with us today. Visit our store or order online for home brewing."
|
||||
primaryButton={{
|
||||
text: "Order Pickup", href: "#"}}
|
||||
secondaryButton={{
|
||||
text: "Contact Us", href: "mailto:hello@beanbrew.com"}}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
tag="Join Us"
|
||||
text="Start your morning ritual with us today. Visit our store or order online for home brewing."
|
||||
primaryButton={{ text: "Order Pickup", href: "#" }}
|
||||
secondaryButton={{ text: "Contact Us", href: "mailto:hello@beanbrew.com" }}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user