Merge version_1_1776956005937 into main #1

Merged
bender merged 3 commits from version_1_1776956005937 into main 2026-04-23 14:55:59 +00:00
3 changed files with 325 additions and 318 deletions

View File

@@ -1,304 +1,12 @@
import AboutMediaOverlay from '@/components/sections/about/AboutMediaOverlay';
import ContactSplitEmail from '@/components/sections/contact/ContactSplitEmail';
import FaqSimple from '@/components/sections/faq/FaqSimple';
import FeaturesComparison from '@/components/sections/features/FeaturesComparison';
import FooterSimpleCard from '@/components/sections/footer/FooterSimpleCard';
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
import NavbarCentered from '@/components/ui/NavbarCentered';
import PricingLayeredCards from '@/components/sections/pricing/PricingLayeredCards';
import ProductMediaCards from '@/components/sections/product/ProductMediaCards';
import TestimonialDetailedCards from '@/components/sections/testimonial/TestimonialDetailedCards';
import { Routes, Route } from 'react-router-dom';
import HomePage from './pages/HomePage';
import BlogPage from './pages/BlogPage';
export default function App() {
return (
<>
<div id="nav" data-section="nav">
<NavbarCentered
logo="Brew & Bean"
navItems={[
{
name: "Home",
href: "#hero",
},
{
name: "About",
href: "#about",
},
{
name: "Menu",
href: "#menu",
},
{
name: "Contact",
href: "#contact",
},
]}
ctaButton={{
text: "Visit Us",
href: "#contact",
}}
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitKpi
tag="Crafted with love"
title="Your Daily Brew, Perfected."
description="Experience artisan coffee in a cozy, welcoming atmosphere designed for the community."
primaryButton={{
text: "View Menu",
href: "#menu",
}}
secondaryButton={{
text: "Our Story",
href: "#about",
}}
kpis={[
{
value: "12+",
label: "Coffee Origins",
},
{
value: "200+",
label: "Daily Cups",
},
{
value: "5k+",
label: "Happy Guests",
},
]}
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ot8dba"
/>
</div>
<div id="about" data-section="about">
<AboutMediaOverlay
tag="Since 2012"
title="More Than Just Coffee"
description="We believe coffee is a catalyst for conversation and connection. From ethically sourced beans to our hand-crafted pastries, every detail is considered."
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=qovlji"
/>
</div>
<div id="features" data-section="features">
<FeaturesComparison
tag="The Quality Difference"
title="Better Beans, Better Mornings"
description="We carefully select our roast profiles to ensure every cup is consistent, vibrant, and delicious."
negativeItems={[
"Mass-produced bitter beans",
"Over-roasted grounds",
"Artificial flavorings",
]}
positiveItems={[
"Single-origin ethically sourced",
"Small batch artisan roast",
"Fresh organic dairy",
]}
/>
</div>
<div id="menu" data-section="menu">
<ProductMediaCards
tag="Our Favorites"
title="Signature Menu"
description="Hand-crafted drinks prepared by our award-winning baristas."
products={[
{
name: "Classic Espresso",
price: "$3.50",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=6m02ty",
},
{
name: "Butter Croissant",
price: "$4.00",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=6vcpld",
},
{
name: "Pour Over",
price: "$5.00",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ujtwfh",
},
{
name: "Velvet Latte",
price: "$4.50",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ypy5jk",
},
{
name: "Macchiato",
price: "$4.00",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=t8rxll",
},
{
name: "Mocha Bliss",
price: "$5.50",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=nud249",
},
]}
/>
</div>
<div id="pricing" data-section="pricing">
<PricingLayeredCards
tag="Membership"
title="Coffee Club Plans"
description="Join our community and enjoy perks every time you visit."
plans={[
{
tag: "Casual",
price: "$29/mo",
description: "Perfect for the daily sipper.",
primaryButton: {
text: "Join Now",
href: "#",
},
features: [
"10% discount on orders",
"Free birthday drink",
"Monthly beans sample",
],
},
{
tag: "Pro",
price: "$59/mo",
description: "Unlimited caffeine for the pros.",
primaryButton: {
text: "Join Now",
href: "#",
},
features: [
"20% discount on orders",
"Free birthday drink",
"Priority seating",
"Exclusive merch",
],
},
]}
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialDetailedCards
tag="Hear from us"
title="Community Stories"
description="What our guests say about their daily ritual."
testimonials={[
{
title: "Great Vibe!",
quote: "The best place in town to get some work done.",
name: "John D.",
role: "Designer",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=7u2r1n",
},
{
title: "Lovely Coffee",
quote: "Consistently excellent coffee and very friendly baristas.",
name: "Sarah L.",
role: "Student",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=7j4shy",
},
{
title: "Cozy Home",
quote: "My favorite place to catch up with friends every Sunday.",
name: "Mike R.",
role: "Engineer",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=91duye",
},
{
title: "Quality Beans",
quote: "You can truly taste the difference in their roast.",
name: "Emily P.",
role: "Chef",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=avcu0e",
},
{
title: "Top Notch",
quote: "I travel 20 minutes just to grab a cup here.",
name: "David K.",
role: "Consultant",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=3a3xym",
},
]}
/>
</div>
<div id="faq" data-section="faq">
<FaqSimple
tag="Questions?"
title="Frequently Asked"
description="Everything you need to know about our cafe."
items={[
{
question: "Are you pet friendly?",
answer: "Yes! Well-behaved pets are welcome on our patio.",
},
{
question: "Do you offer vegan options?",
answer: "We offer oat, almond, and soy milk alternatives.",
},
{
question: "Can I reserve space?",
answer: "We accept bookings for events outside of peak hours.",
},
]}
/>
</div>
<div id="contact" data-section="contact">
<ContactSplitEmail
tag="Join the list"
title="Stay in the loop"
description="Get updates on new seasonal roasts and community events."
inputPlaceholder="Email address"
buttonText="Subscribe"
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=dk7mnc"
/>
</div>
<div id="footer" data-section="footer">
<FooterSimpleCard
brand="Brew & Bean"
columns={[
{
title: "Cafe",
items: [
{
label: "About",
href: "#about",
},
{
label: "Menu",
href: "#menu",
},
],
},
{
title: "Community",
items: [
{
label: "Events",
href: "#",
},
{
label: "Careers",
href: "#",
},
],
},
]}
copyright="© 2024 Brew & Bean. All rights reserved."
links={[
{
label: "Privacy",
href: "#",
},
{
label: "Terms",
href: "#",
},
]}
/>
</div>
</>
<Routes>
<Route path="/" element={<HomePage />} />
<Route path="/blog" element={<BlogPage />} />
</Routes>
);
}

15
src/pages/BlogPage.tsx Normal file
View File

@@ -0,0 +1,15 @@
import BlogSimpleCards from "@/components/sections/blog/BlogSimpleCards";
import NavbarCentered from '@/components/ui/NavbarCentered';
import FooterSimpleCard from '@/components/sections/footer/FooterSimpleCard';
const BlogPage = () => {
return (
<BlogSimpleCards
tag="Blog"
title="Latest Articles"
description="Stay updated with our latest insights and news"
/>
);
};
export default BlogPage;

View File

@@ -1,22 +1,306 @@
import NavbarCentered from "@/components/ui/NavbarCentered";
import { routes } from "@/routes";
import AboutMediaOverlay from '@/components/sections/about/AboutMediaOverlay';
import ContactSplitEmail from '@/components/sections/contact/ContactSplitEmail';
import FaqSimple from '@/components/sections/faq/FaqSimple';
import FeaturesComparison from '@/components/sections/features/FeaturesComparison';
import FooterSimpleCard from '@/components/sections/footer/FooterSimpleCard';
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
import NavbarCentered from '@/components/ui/NavbarCentered';
import PricingLayeredCards from '@/components/sections/pricing/PricingLayeredCards';
import ProductMediaCards from '@/components/sections/product/ProductMediaCards';
import TestimonialDetailedCards from '@/components/sections/testimonial/TestimonialDetailedCards';
const HomePage = () => {
export default function HomePage() {
return (
<div className="min-h-screen bg-background">
<NavbarCentered
logo="Logo"
navItems={routes.map((r) => ({ name: r.label, href: r.path }))}
ctaButton={{ text: "Get Started", href: "#" }}
/>
<main className="pt-20 flex flex-col items-center justify-center min-h-[80vh] px-4">
<h1 className="text-4xl font-bold text-foreground mb-4">Welcome</h1>
<p className="text-lg text-muted-foreground max-w-xl text-center">
Your website content will appear here.
</p>
</main>
</div>
);
};
export default HomePage;
<>
<div id="nav" data-section="nav">
<NavbarCentered
logo="Brew & Bean"
navItems={[
{
name: "Home",
href: "#hero",
},
{
name: "About",
href: "#about",
},
{
name: "Menu",
href: "#menu",
},
{
name: "Contact",
href: "#contact",
},
]}
ctaButton={{
text: "Visit Us",
href: "#contact",
}}
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitKpi
tag="Crafted with love"
title="Your Daily Brew, Perfected."
description="Experience artisan coffee in a cozy, welcoming atmosphere designed for the community."
primaryButton={{
text: "View Menu",
href: "#menu",
}}
secondaryButton={{
text: "Our Story",
href: "#about",
}}
kpis={[
{
value: "12+",
label: "Coffee Origins",
},
{
value: "200+",
label: "Daily Cups",
},
{
value: "5k+",
label: "Happy Guests",
},
]}
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ot8dba"
/>
</div>
<div id="about" data-section="about">
<AboutMediaOverlay
tag="Since 2012"
title="More Than Just Coffee"
description="We believe coffee is a catalyst for conversation and connection. From ethically sourced beans to our hand-crafted pastries, every detail is considered."
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=qovlji"
/>
</div>
<div id="features" data-section="features">
<FeaturesComparison
tag="The Quality Difference"
title="Better Beans, Better Mornings"
description="We carefully select our roast profiles to ensure every cup is consistent, vibrant, and delicious."
negativeItems={[
"Mass-produced bitter beans",
"Over-roasted grounds",
"Artificial flavorings",
]}
positiveItems={[
"Single-origin ethically sourced",
"Small batch artisan roast",
"Fresh organic dairy",
]}
/>
</div>
<div id="menu" data-section="menu">
<ProductMediaCards
tag="Our Favorites"
title="Signature Menu"
description="Hand-crafted drinks prepared by our award-winning baristas."
products={[
{
name: "Classic Espresso",
price: "$3.50",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=6m02ty",
},
{
name: "Butter Croissant",
price: "$4.00",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=6vcpld",
},
{
name: "Pour Over",
price: "$5.00",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ujtwfh",
},
{
name: "Velvet Latte",
price: "$4.50",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ypy5jk",
},
{
name: "Macchiato",
price: "$4.00",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=t8rxll",
},
{
name: "Mocha Bliss",
price: "$5.50",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=nud249",
},
]}
/>
</div>
<div id="pricing" data-section="pricing">
<PricingLayeredCards
tag="Membership"
title="Coffee Club Plans"
description="Join our community and enjoy perks every time you visit."
plans={[
{
tag: "Casual",
price: "$29/mo",
description: "Perfect for the daily sipper.",
primaryButton: {
text: "Join Now",
href: "#",
},
features: [
"10% discount on orders",
"Free birthday drink",
"Monthly beans sample",
],
},
{
tag: "Pro",
price: "$59/mo",
description: "Unlimited caffeine for the pros.",
primaryButton: {
text: "Join Now",
href: "#",
},
features: [
"20% discount on orders",
"Free birthday drink",
"Priority seating",
"Exclusive merch",
],
},
]}
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialDetailedCards
tag="Hear from us"
title="Community Stories"
description="What our guests say about their daily ritual."
testimonials={[
{
title: "Great Vibe!",
quote: "The best place in town to get some work done.",
name: "John D.",
role: "Designer",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=7u2r1n",
},
{
title: "Lovely Coffee",
quote: "Consistently excellent coffee and very friendly baristas.",
name: "Sarah L.",
role: "Student",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=7j4shy",
},
{
title: "Cozy Home",
quote: "My favorite place to catch up with friends every Sunday.",
name: "Mike R.",
role: "Engineer",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=91duye",
},
{
title: "Quality Beans",
quote: "You can truly taste the difference in their roast.",
name: "Emily P.",
role: "Chef",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=avcu0e",
},
{
title: "Top Notch",
quote: "I travel 20 minutes just to grab a cup here.",
name: "David K.",
role: "Consultant",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=3a3xym",
},
]}
/>
</div>
<div id="faq" data-section="faq">
<FaqSimple
tag="Questions?"
title="Frequently Asked"
description="Everything you need to know about our cafe."
items={[
{
question: "Are you pet friendly?",
answer: "Yes! Well-behaved pets are welcome on our patio.",
},
{
question: "Do you offer vegan options?",
answer: "We offer oat, almond, and soy milk alternatives.",
},
{
question: "Can I reserve space?",
answer: "We accept bookings for events outside of peak hours.",
},
]}
/>
</div>
<div id="contact" data-section="contact">
<ContactSplitEmail
tag="Join the list"
title="Stay in the loop"
description="Get updates on new seasonal roasts and community events."
inputPlaceholder="Email address"
buttonText="Subscribe"
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=dk7mnc"
/>
</div>
<div id="footer" data-section="footer">
<FooterSimpleCard
brand="Brew & Bean"
columns={[
{
title: "Cafe",
items: [
{
label: "About",
href: "#about",
},
{
label: "Menu",
href: "#menu",
},
],
},
{
title: "Community",
items: [
{
label: "Events",
href: "#",
},
{
label: "Careers",
href: "#",
},
],
},
]}
copyright="© 2024 Brew & Bean. All rights reserved."
links={[
{
label: "Privacy",
href: "#",
},
{
label: "Terms",
href: "#",
},
]}
/>
</div>
</>
);
}