Merge version_1_1776943811053 into main #2
502
src/App.tsx
502
src/App.tsx
@@ -14,365 +14,169 @@ import { Award, Coffee, Flame, MapPin, Users } from "lucide-react";
|
||||
export default function App() {
|
||||
return (
|
||||
<>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarCentered
|
||||
logo="Vasil"
|
||||
navItems={[
|
||||
{
|
||||
name: "About",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
name: "Menu",
|
||||
href: "#products",
|
||||
},
|
||||
{
|
||||
name: "Testimonials",
|
||||
href: "#testimonials",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
ctaButton={{
|
||||
text: "Order Now",
|
||||
href: "#contact",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarCentered
|
||||
logo="Vasil"
|
||||
navItems={[
|
||||
{ name: "About", href: "#about" },
|
||||
{ name: "Menu", href: "#products" },
|
||||
{ name: "Testimonials", href: "#testimonials" },
|
||||
{ name: "Contact", href: "#contact" },
|
||||
]}
|
||||
ctaButton={{
|
||||
text: "Order Now", href: "#contact"}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroCenteredLogos
|
||||
tag="Artisan Coffee"
|
||||
title="Welcome to Vasil Coffeeshop"
|
||||
description="Experience the art of perfectly roasted, small-batch coffee in a cozy and welcoming atmosphere."
|
||||
primaryButton={{
|
||||
text: "View Menu",
|
||||
href: "#products",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "About Us",
|
||||
href: "#about",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroCenteredLogos
|
||||
tag="Artisan Coffee"
|
||||
title="Welcome to Vasil Coffeeshop"
|
||||
description="Experience the art of perfectly roasted, small-batch coffee in a cozy and welcoming atmosphere."
|
||||
primaryButton={{
|
||||
text: "View Menu", href: "#products"}}
|
||||
secondaryButton={{
|
||||
text: "About Us", href: "#about"}}
|
||||
logos={[]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<AboutFeaturesSplit
|
||||
tag="Our Story"
|
||||
title="Crafted with Passion"
|
||||
description="At Vasil, we believe in the philosophy of slow coffee. Sourced from the finest farms globally, we roast our beans daily to capture every note of flavor."
|
||||
items={[
|
||||
{
|
||||
icon: Coffee,
|
||||
title: "Ethical Sourcing",
|
||||
description: "Direct trade beans from sustainable farms.",
|
||||
},
|
||||
{
|
||||
icon: Flame,
|
||||
title: "Artisan Roasting",
|
||||
description: "Small-batch roasting for optimal freshness.",
|
||||
},
|
||||
{
|
||||
icon: Coffee,
|
||||
title: "Perfect Extraction",
|
||||
description: "Expertly trained baristas for the perfect cup.",
|
||||
},
|
||||
]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=0qpzzg&_wi=1"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<AboutFeaturesSplit
|
||||
tag="Our Story"
|
||||
title="Crafted with Passion"
|
||||
description="At Vasil, we believe in the philosophy of slow coffee. Sourced from the finest farms globally, we roast our beans daily to capture every note of flavor."
|
||||
items={[
|
||||
{ icon: "Coffee", title: "Ethical Sourcing", description: "Direct trade beans from sustainable farms." },
|
||||
{ icon: "Flame", title: "Artisan Roasting", description: "Small-batch roasting for optimal freshness." },
|
||||
{ icon: "Coffee", title: "Perfect Extraction", description: "Expertly trained baristas for the perfect cup." },
|
||||
]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=0qpzzg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeaturesBento
|
||||
tag="Our Ritual"
|
||||
title="Why Choose Vasil?"
|
||||
description="More than just caffeine, we provide a ritual for your day."
|
||||
features={[
|
||||
{
|
||||
title: "Freshness Guaranteed",
|
||||
description: "Roast-to-cup within 48 hours for the most intense aromas.",
|
||||
bentoComponent: "animated-bar-chart",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=4wy0vl&_wi=1",
|
||||
imageAlt: "cozy coffee shop interior",
|
||||
},
|
||||
{
|
||||
title: "Expert Community",
|
||||
description: "Join our weekly workshops on brewing techniques.",
|
||||
bentoComponent: "icon-text-marquee",
|
||||
centerIcon: Users,
|
||||
texts: [
|
||||
"Brewing Techniques",
|
||||
"Bean Profiles",
|
||||
"Roasting Basics",
|
||||
],
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=0qpzzg&_wi=2",
|
||||
imageAlt: "cozy coffee shop interior",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductRatingCards
|
||||
tag="The Menu"
|
||||
title="Signature Brews"
|
||||
description="Explore our curated selection of coffees and light refreshments."
|
||||
products={[
|
||||
{
|
||||
brand: "Vasil Roast",
|
||||
name: "Ethiopian Yirgacheffe",
|
||||
price: "$18",
|
||||
rating: 5,
|
||||
reviewCount: "120",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=m9ava2",
|
||||
},
|
||||
{
|
||||
brand: "Vasil Roast",
|
||||
name: "Signature Latte",
|
||||
price: "$5",
|
||||
rating: 5,
|
||||
reviewCount: "250",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=7isv0g",
|
||||
},
|
||||
{
|
||||
brand: "Vasil Roast",
|
||||
name: "Cold Brew",
|
||||
price: "$6",
|
||||
rating: 4,
|
||||
reviewCount: "89",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=h44fs6",
|
||||
},
|
||||
{
|
||||
brand: "Vasil Roast",
|
||||
name: "Double Espresso",
|
||||
price: "$3.50",
|
||||
rating: 5,
|
||||
reviewCount: "150",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=wz2cjm",
|
||||
},
|
||||
{
|
||||
brand: "Bakery",
|
||||
name: "Butter Croissant",
|
||||
price: "$4",
|
||||
rating: 5,
|
||||
reviewCount: "300",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=fikbti",
|
||||
},
|
||||
{
|
||||
brand: "Vasil Roast",
|
||||
name: "Pour Over",
|
||||
price: "$7",
|
||||
rating: 5,
|
||||
reviewCount: "95",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=z6lk1h",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingMediaCards
|
||||
tag="Subscription"
|
||||
title="Fresh Beans at Your Door"
|
||||
description="Keep your home stocked with the best beans from our roastery."
|
||||
plans={[
|
||||
{
|
||||
tag: "Popular",
|
||||
price: "$25",
|
||||
period: "/mo",
|
||||
features: [
|
||||
"1 bag monthly",
|
||||
"Free shipping",
|
||||
"Brew guide",
|
||||
],
|
||||
primaryButton: {
|
||||
text: "Select",
|
||||
href: "#contact",
|
||||
},
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=pqw4l3",
|
||||
},
|
||||
{
|
||||
tag: "Pro",
|
||||
price: "$45",
|
||||
period: "/mo",
|
||||
features: [
|
||||
"2 bags monthly",
|
||||
"Free shipping",
|
||||
"VIP cupping events",
|
||||
],
|
||||
primaryButton: {
|
||||
text: "Select",
|
||||
href: "#contact",
|
||||
},
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=yjixfz",
|
||||
},
|
||||
{
|
||||
tag: "Expert",
|
||||
price: "$80",
|
||||
period: "/mo",
|
||||
features: [
|
||||
"4 bags monthly",
|
||||
"Priority shipping",
|
||||
"Barista consultation",
|
||||
],
|
||||
primaryButton: {
|
||||
text: "Select",
|
||||
href: "#contact",
|
||||
},
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=xkysf6",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricsIconCards
|
||||
tag="Our Impact"
|
||||
title="The Numbers Behind Vasil"
|
||||
description="Dedicated to quality coffee experience for years."
|
||||
metrics={[
|
||||
{
|
||||
icon: Coffee,
|
||||
title: "Cups Served",
|
||||
value: "50K+",
|
||||
},
|
||||
{
|
||||
icon: MapPin,
|
||||
title: "Sourced Origins",
|
||||
value: "12",
|
||||
},
|
||||
{
|
||||
icon: Award,
|
||||
title: "Roasting Years",
|
||||
value: "8",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialQuoteCards
|
||||
tag="Community"
|
||||
title="What Our Coffee Lovers Say"
|
||||
description="Hear the stories from the people who keep our cafe humming."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Elena R.",
|
||||
role: "Creative Writer",
|
||||
quote: "The absolute best coffee in the city. A true haven for inspiration.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=1trd9k",
|
||||
},
|
||||
{
|
||||
name: "Mark S.",
|
||||
role: "Architect",
|
||||
quote: "Consistency in flavor every time I visit. My morning ritual.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=tfiw1r",
|
||||
},
|
||||
{
|
||||
name: "Sophia L.",
|
||||
role: "Marketing Director",
|
||||
quote: "Vasil isn't just coffee; it's a community experience.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=grk9g3",
|
||||
},
|
||||
{
|
||||
name: "David W.",
|
||||
role: "Software Developer",
|
||||
quote: "Perfectly crafted pour-overs. Truly the best roastery around.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=x5abcp",
|
||||
},
|
||||
{
|
||||
name: "Jessica M.",
|
||||
role: "Professor",
|
||||
quote: "Friendly staff and high-quality beans. I never go anywhere else.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=dgxiuq",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqTwoColumn
|
||||
tag="Support"
|
||||
title="Common Questions"
|
||||
description="Answers to the most common coffee questions."
|
||||
items={[
|
||||
{
|
||||
question: "Do you offer wholesale?",
|
||||
answer: "Yes, we partner with local businesses. Please contact us.",
|
||||
},
|
||||
{
|
||||
question: "Can I bring my pet?",
|
||||
answer: "We have outdoor seating for our furry friends.",
|
||||
},
|
||||
{
|
||||
question: "Do you have vegan options?",
|
||||
answer: "Absolutely, we carry oat, soy, and almond milks.",
|
||||
},
|
||||
{
|
||||
question: "Can I order online?",
|
||||
answer: "Yes, use our contact form for large bulk orders.",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
tag="Visit Us"
|
||||
title="Stay Connected"
|
||||
description="Sign up to our newsletter for roastery updates."
|
||||
inputPlaceholder="Enter your email address"
|
||||
buttonText="Subscribe"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimpleMedia
|
||||
brand="Vasil Coffeeshop"
|
||||
columns={[
|
||||
{
|
||||
title: "Menu",
|
||||
items: [
|
||||
<div id="features" data-section="features">
|
||||
<FeaturesBento
|
||||
tag="Our Ritual"
|
||||
title="Why Choose Vasil?"
|
||||
description="More than just caffeine, we provide a ritual for your day."
|
||||
features={[
|
||||
{
|
||||
label: "Espresso",
|
||||
href: "#",
|
||||
title: "Freshness Guaranteed", description: "Roast-to-cup within 48 hours for the most intense aromas.", bentoComponent: "animated-bar-chart"
|
||||
},
|
||||
{
|
||||
label: "Brewed Coffee",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
title: "Expert Community", description: "Join our weekly workshops on brewing techniques.", bentoComponent: "icon-text-marquee", centerIcon: "Users", texts: [
|
||||
"Brewing Techniques", "Bean Profiles", "Roasting Basics"]
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductRatingCards
|
||||
tag="The Menu"
|
||||
title="Signature Brews"
|
||||
description="Explore our curated selection of coffees and light refreshments."
|
||||
products={[
|
||||
{ brand: "Vasil Roast", name: "Ethiopian Yirgacheffe", price: "$18", rating: 5, reviewCount: "120", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=m9ava2" },
|
||||
{ brand: "Vasil Roast", name: "Signature Latte", price: "$5", rating: 5, reviewCount: "250", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=7isv0g" },
|
||||
{ brand: "Vasil Roast", name: "Cold Brew", price: "$6", rating: 4, reviewCount: "89", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=h44fs6" },
|
||||
{ brand: "Vasil Roast", name: "Double Espresso", price: "$3.50", rating: 5, reviewCount: "150", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=wz2cjm" },
|
||||
{ brand: "Bakery", name: "Butter Croissant", price: "$4", rating: 5, reviewCount: "300", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=fikbti" },
|
||||
{ brand: "Vasil Roast", name: "Pour Over", price: "$7", rating: 5, reviewCount: "95", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=z6lk1h" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingMediaCards
|
||||
tag="Subscription"
|
||||
title="Fresh Beans at Your Door"
|
||||
description="Keep your home stocked with the best beans from our roastery."
|
||||
plans={[
|
||||
{
|
||||
label: "About",
|
||||
href: "#about",
|
||||
tag: "Popular", price: "$25", period: "/mo", features: ["1 bag monthly", "Free shipping", "Brew guide"],
|
||||
primaryButton: { text: "Select", href: "#contact" },
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=pqw4l3"
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
tag: "Pro", price: "$45", period: "/mo", features: ["2 bags monthly", "Free shipping", "VIP cupping events"],
|
||||
primaryButton: { text: "Select", href: "#contact" },
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=yjixfz"
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
copyright="© 2024 Vasil Coffeeshop. All rights reserved."
|
||||
links={[
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Terms of Service",
|
||||
href: "#",
|
||||
},
|
||||
]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=4wy0vl&_wi=2"
|
||||
/>
|
||||
</div>
|
||||
{
|
||||
tag: "Expert", price: "$80", period: "/mo", features: ["4 bags monthly", "Priority shipping", "Barista consultation"],
|
||||
primaryButton: { text: "Select", href: "#contact" },
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=xkysf6"
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricsIconCards
|
||||
tag="Our Impact"
|
||||
title="The Numbers Behind Vasil"
|
||||
description="Dedicated to quality coffee experience for years."
|
||||
metrics={[
|
||||
{ icon: "Coffee", title: "Cups Served", value: "50K+" },
|
||||
{ icon: "MapPin", title: "Sourced Origins", value: "12" },
|
||||
{ icon: "Award", title: "Roasting Years", value: "8" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialQuoteCards
|
||||
tag="Community"
|
||||
title="What Our Coffee Lovers Say"
|
||||
description="Hear the stories from the people who keep our cafe humming."
|
||||
testimonials={[
|
||||
{ name: "Elena R.", role: "Creative Writer", quote: "The absolute best coffee in the city. A true haven for inspiration.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=1trd9k" },
|
||||
{ name: "Mark S.", role: "Architect", quote: "Consistency in flavor every time I visit. My morning ritual.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=tfiw1r" },
|
||||
{ name: "Sophia L.", role: "Marketing Director", quote: "Vasil isn't just coffee; it's a community experience.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=grk9g3" },
|
||||
{ name: "David W.", role: "Software Developer", quote: "Perfectly crafted pour-overs. Truly the best roastery around.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=x5abcp" },
|
||||
{ name: "Jessica M.", role: "Professor", quote: "Friendly staff and high-quality beans. I never go anywhere else.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=dgxiuq" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqTwoColumn
|
||||
tag="Support"
|
||||
title="Common Questions"
|
||||
description="Answers to the most common coffee questions."
|
||||
items={[
|
||||
{ question: "Do you offer wholesale?", answer: "Yes, we partner with local businesses. Please contact us." },
|
||||
{ question: "Can I bring my pet?", answer: "We have outdoor seating for our furry friends." },
|
||||
{ question: "Do you have vegan options?", answer: "Absolutely, we carry oat, soy, and almond milks." },
|
||||
{ question: "Can I order online?", answer: "Yes, use our contact form for large bulk orders." },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
tag="Visit Us"
|
||||
title="Stay Connected"
|
||||
description="Sign up to our newsletter for roastery updates."
|
||||
inputPlaceholder="Enter your email address"
|
||||
buttonText="Subscribe"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimpleMedia
|
||||
brand="Vasil Coffeeshop"
|
||||
columns={[
|
||||
{ title: "Menu", items: [{ label: "Espresso", href: "#" }, { label: "Brewed Coffee", href: "#" }] },
|
||||
{ title: "Company", items: [{ label: "About", href: "#about" }, { label: "Contact", href: "#contact" }] },
|
||||
]}
|
||||
copyright="© 2024 Vasil Coffeeshop. All rights reserved."
|
||||
links={[{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=4wy0vl"
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user