Merge version_1_1776718604563 into main #2
477
src/App.tsx
477
src/App.tsx
@@ -12,367 +12,148 @@ import { Clock, Flame, Wheat } from "lucide-react";
|
||||
export default function App() {
|
||||
return (
|
||||
<>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarCentered
|
||||
logo="SweetCrumb"
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
href: "#hero",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
name: "Menu",
|
||||
href: "#products",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
ctaButton={{
|
||||
text: "Order Now",
|
||||
href: "#products",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarCentered
|
||||
logo="SweetCrumb"
|
||||
navItems={[
|
||||
{ name: "Home", href: "#hero" },
|
||||
{ name: "About", href: "#about" },
|
||||
{ name: "Menu", href: "#products" },
|
||||
{ name: "Contact", href: "#contact" },
|
||||
]}
|
||||
ctaButton={{ text: "Order Now", href: "#products" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardTestimonial
|
||||
tag="Since 1985"
|
||||
title="Authentic Artisanal Breads & Pastries"
|
||||
description="Handcrafted daily using organic flour, traditional techniques, and love. Experience the warmth of our ovens in every bite."
|
||||
primaryButton={{
|
||||
text: "View Menu",
|
||||
href: "#products",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Learn About Us",
|
||||
href: "#about",
|
||||
}}
|
||||
testimonials={[
|
||||
{
|
||||
name: "Anna S.",
|
||||
handle: "@anna_bakes",
|
||||
text: "The sourdough here is life-changing!",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/women-eating-sweets-coffee-shop_23-2148263260.jpg?_wi=1",
|
||||
},
|
||||
{
|
||||
name: "Marcus R.",
|
||||
handle: "@marcus_foodie",
|
||||
text: "Best croissants in the city, period.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/authentic-person-eating-fresh-cheese_23-2150220460.jpg",
|
||||
},
|
||||
{
|
||||
name: "Elena P.",
|
||||
handle: "@elena_eats",
|
||||
text: "Such a cozy spot with incredible service.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/charming-young-brunette-holds-pink-donuts-before-her-eyes-posing-pink-room_8353-5592.jpg",
|
||||
},
|
||||
{
|
||||
name: "Julian B.",
|
||||
handle: "@julian_bread",
|
||||
text: "Authentic, warm, and simply delicious.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/view-delicious-baked-bread-pastry-shop_23-2150379551.jpg",
|
||||
},
|
||||
{
|
||||
name: "Sarah K.",
|
||||
handle: "@sarah_pastry",
|
||||
text: "A must-visit for every bread lover.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/view-delicious-baked-bread-pastry-shop_23-2150379538.jpg",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/flat-lay-croissant-bread-basket_23-2148288048.jpg?_wi=1"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardTestimonial
|
||||
tag="Since 1985"
|
||||
title="Authentic Artisanal Breads & Pastries"
|
||||
description="Handcrafted daily using organic flour, traditional techniques, and love. Experience the warmth of our ovens in every bite."
|
||||
primaryButton={{ text: "View Menu", href: "#products" }}
|
||||
secondaryButton={{ text: "Learn About Us", href: "#about" }}
|
||||
testimonials={[
|
||||
{ name: "Anna S.", handle: "@anna_bakes", text: "The sourdough here is life-changing!", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/women-eating-sweets-coffee-shop_23-2148263260.jpg" },
|
||||
{ name: "Marcus R.", handle: "@marcus_foodie", text: "Best croissants in the city, period.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/authentic-person-eating-fresh-cheese_23-2150220460.jpg" },
|
||||
{ name: "Elena P.", handle: "@elena_eats", text: "Such a cozy spot with incredible service.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/charming-young-brunette-holds-pink-donuts-before-her-eyes-posing-pink-room_8353-5592.jpg" },
|
||||
{ name: "Julian B.", handle: "@julian_bread", text: "Authentic, warm, and simply delicious.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/view-delicious-baked-bread-pastry-shop_23-2150379551.jpg" },
|
||||
{ name: "Sarah K.", handle: "@sarah_pastry", text: "A must-visit for every bread lover.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/view-delicious-baked-bread-pastry-shop_23-2150379538.jpg" },
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/flat-lay-croissant-bread-basket_23-2148288048.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<AboutTextSplit
|
||||
title="Our Passion for Baking"
|
||||
descriptions={[
|
||||
"Started in a small kitchen, we've grown into a community staple. We believe that great bread starts with high-quality, simple ingredients.",
|
||||
"Our head baker uses traditional slow-fermentation techniques that ensure every loaf is packed with flavor and easier to digest.",
|
||||
"Visit us every morning for fresh batches right out of the oven. We're proud to serve our neighborhood with quality you can taste.",
|
||||
]}
|
||||
primaryButton={{
|
||||
text: "Visit Us",
|
||||
href: "#contact",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<AboutTextSplit
|
||||
title="Our Passion for Baking"
|
||||
descriptions={[
|
||||
"Started in a small kitchen, we've grown into a community staple. We believe that great bread starts with high-quality, simple ingredients.", "Our head baker uses traditional slow-fermentation techniques that ensure every loaf is packed with flavor and easier to digest.", "Visit us every morning for fresh batches right out of the oven. We're proud to serve our neighborhood with quality you can taste."]}
|
||||
primaryButton={{ text: "Visit Us", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeaturesDualMedia
|
||||
tag="Why Us?"
|
||||
title="The Bakery Difference"
|
||||
description="We don't cut corners. From grain selection to baking time, everything is perfected."
|
||||
items={[
|
||||
{
|
||||
icon: Wheat,
|
||||
title: "Organic Ingredients",
|
||||
description: "Always sourced from local farms.",
|
||||
mediaItems: [
|
||||
<div id="features" data-section="features">
|
||||
<FeaturesDualMedia
|
||||
tag="Why Us?"
|
||||
title="The Bakery Difference"
|
||||
description="We don't cut corners. From grain selection to baking time, everything is perfected."
|
||||
items={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-collection-bread-buns_122409-64.jpg",
|
||||
icon: "Wheat", title: "Organic Ingredients", description: "Always sourced from local farms.", mediaItems: [
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/close-up-collection-bread-buns_122409-64.jpg" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/top-view-female-cook-mixing-up-flour-plate-with-eggs-dark-surface_179666-44577.jpg" },
|
||||
]
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-female-cook-mixing-up-flour-plate-with-eggs-dark-surface_179666-44577.jpg",
|
||||
},
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-croissant-bread-basket_23-2148288048.jpg?_wi=2",
|
||||
imageAlt: "fresh baked goods closeup",
|
||||
},
|
||||
{
|
||||
icon: Clock,
|
||||
title: "Traditional Fermentation",
|
||||
description: "Slow-rising dough for deeper taste.",
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/bread-food-variety-marble-surface_114579-45756.jpg",
|
||||
icon: "Clock", title: "Traditional Fermentation", description: "Slow-rising dough for deeper taste.", mediaItems: [
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/bread-food-variety-marble-surface_114579-45756.jpg" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/close-up-baked-bread-slices-black-backdrop_23-2147975073.jpg" },
|
||||
]
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-baked-bread-slices-black-backdrop_23-2147975073.jpg",
|
||||
icon: "Flame", title: "Stone Baked", description: "Crispy crusts and soft interiors.", mediaItems: [
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-bunch-bagels-covered-sesame-seeds_181624-58886.jpg" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/fresh-egg-wheat-flour-with-whisker-wooden-table_23-2147872753.jpg" },
|
||||
]
|
||||
},
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-photo-croissant-with-ham-cheese-butter-wooden-board-kitchen_613910-6448.jpg?_wi=1",
|
||||
imageAlt: "fresh baked goods closeup",
|
||||
},
|
||||
{
|
||||
icon: Flame,
|
||||
title: "Stone Baked",
|
||||
description: "Crispy crusts and soft interiors.",
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-bunch-bagels-covered-sesame-seeds_181624-58886.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/fresh-egg-wheat-flour-with-whisker-wooden-table_23-2147872753.jpg",
|
||||
},
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/women-eating-sweets-coffee-shop_23-2148263260.jpg?_wi=2",
|
||||
imageAlt: "fresh baked goods closeup",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductQuantityCards
|
||||
tag="Fresh Batch"
|
||||
title="Our Signature Menu"
|
||||
description="Browse our daily selection of artisan goods."
|
||||
products={[
|
||||
{
|
||||
name: "Classic Croissant",
|
||||
price: "$4.50",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-photo-croissant-with-ham-cheese-butter-wooden-board-kitchen_613910-6448.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
name: "Dark Chocolate Tart",
|
||||
price: "$6.00",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-tasty-homemade-bread_23-2148361942.jpg",
|
||||
},
|
||||
{
|
||||
name: "Sourdough Loaf",
|
||||
price: "$9.00",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/traditional-french-bread_1339-2260.jpg",
|
||||
},
|
||||
{
|
||||
name: "Blueberry Muffin",
|
||||
price: "$3.50",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/fresh-baguette-slices-wooden-board-high-quality-photo_114579-20346.jpg",
|
||||
},
|
||||
{
|
||||
name: "Fruit Tart",
|
||||
price: "$5.50",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/homemade-delicious-rustic-summer-berry-tartles_114579-10849.jpg",
|
||||
},
|
||||
{
|
||||
name: "French Baguette",
|
||||
price: "$4.00",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/homemade-delicious-rustic-summer-berry-tartles_114579-20600.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="products" data-section="products">
|
||||
<ProductQuantityCards
|
||||
tag="Fresh Batch"
|
||||
title="Our Signature Menu"
|
||||
description="Browse our daily selection of artisan goods."
|
||||
products={[
|
||||
{ name: "Classic Croissant", price: "$4.50", imageSrc: "http://img.b2bpic.net/free-photo/close-up-photo-croissant-with-ham-cheese-butter-wooden-board-kitchen_613910-6448.jpg" },
|
||||
{ name: "Dark Chocolate Tart", price: "$6.00", imageSrc: "http://img.b2bpic.net/free-photo/close-up-tasty-homemade-bread_23-2148361942.jpg" },
|
||||
{ name: "Sourdough Loaf", price: "$9.00", imageSrc: "http://img.b2bpic.net/free-photo/traditional-french-bread_1339-2260.jpg" },
|
||||
{ name: "Blueberry Muffin", price: "$3.50", imageSrc: "http://img.b2bpic.net/free-photo/fresh-baguette-slices-wooden-board-high-quality-photo_114579-20346.jpg" },
|
||||
{ name: "Fruit Tart", price: "$5.50", imageSrc: "http://img.b2bpic.net/free-photo/homemade-delicious-rustic-summer-berry-tartles_114579-10849.jpg" },
|
||||
{ name: "French Baguette", price: "$4.00", imageSrc: "http://img.b2bpic.net/free-photo/homemade-delicious-rustic-summer-berry-tartles_114579-20600.jpg" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingLayeredCards
|
||||
tag="Daily Boxes"
|
||||
title="Subscription Packs"
|
||||
description="Get your favorite bakes delivered fresh."
|
||||
plans={[
|
||||
{
|
||||
tag: "Starter",
|
||||
price: "$25",
|
||||
description: "Perfect for small households.",
|
||||
primaryButton: {
|
||||
text: "Select",
|
||||
href: "#",
|
||||
},
|
||||
features: [
|
||||
"3 loaves",
|
||||
"Weekly pick-up",
|
||||
],
|
||||
},
|
||||
{
|
||||
tag: "Family",
|
||||
price: "$65",
|
||||
description: "Best for big families.",
|
||||
primaryButton: {
|
||||
text: "Select",
|
||||
href: "#",
|
||||
},
|
||||
features: [
|
||||
"7 loaves",
|
||||
"Daily delivery",
|
||||
"Free pastries",
|
||||
],
|
||||
},
|
||||
{
|
||||
tag: "Party",
|
||||
price: "$120",
|
||||
description: "Great for events.",
|
||||
primaryButton: {
|
||||
text: "Select",
|
||||
href: "#",
|
||||
},
|
||||
features: [
|
||||
"15 loaves",
|
||||
"Event catering",
|
||||
"Custom selection",
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingLayeredCards
|
||||
tag="Daily Boxes"
|
||||
title="Subscription Packs"
|
||||
description="Get your favorite bakes delivered fresh."
|
||||
plans={[
|
||||
{ tag: "Starter", price: "$25", description: "Perfect for small households.", primaryButton: { text: "Select", href: "#" }, features: ["3 loaves", "Weekly pick-up"] },
|
||||
{ tag: "Family", price: "$65", description: "Best for big families.", primaryButton: { text: "Select", href: "#" }, features: ["7 loaves", "Daily delivery", "Free pastries"] },
|
||||
{ tag: "Party", price: "$120", description: "Great for events.", primaryButton: { text: "Select", href: "#" }, features: ["15 loaves", "Event catering", "Custom selection"] },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonial" data-section="testimonial">
|
||||
<TestimonialMetricsCards
|
||||
tag="Love Notes"
|
||||
title="What Neighbors Say"
|
||||
description="Our community is what drives us to bake every day."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Sarah J.",
|
||||
role: "Regular",
|
||||
company: "Local",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/parents-offering-son-plate-muffins_23-2148414956.jpg",
|
||||
},
|
||||
{
|
||||
name: "Mike D.",
|
||||
role: "Foodie",
|
||||
company: "Neighbor",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/tablet-mobile-female-using-phone_1303-2074.jpg",
|
||||
},
|
||||
{
|
||||
name: "Emma W.",
|
||||
role: "Fan",
|
||||
company: "Regular",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-little-yummy-cakes-with-strawberries-white-surface-birthday-celebration-sweet-biscuit-cake-cookie_140725-101979.jpg",
|
||||
},
|
||||
{
|
||||
name: "David L.",
|
||||
role: "Chef",
|
||||
company: "Pro",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-female-baker-giving-wrapped-bread-customer-bakery_23-2148189127.jpg",
|
||||
},
|
||||
{
|
||||
name: "Chloe B.",
|
||||
role: "Customer",
|
||||
company: "Regular",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/sincere-positive-woman-dressed-fashionabe-clothes-feels-very-happy-get-bouquet-flowers-from-beloved-person-makes-face-palm-isolated-blue-wall_273609-47896.jpg",
|
||||
},
|
||||
]}
|
||||
metrics={[
|
||||
{
|
||||
value: "10k+",
|
||||
label: "Loaves Baked",
|
||||
},
|
||||
{
|
||||
value: "5k+",
|
||||
label: "Happy Customers",
|
||||
},
|
||||
{
|
||||
value: "40+",
|
||||
label: "Years Tradition",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonial" data-section="testimonial">
|
||||
<TestimonialMetricsCards
|
||||
tag="Love Notes"
|
||||
title="What Neighbors Say"
|
||||
description="Our community is what drives us to bake every day."
|
||||
testimonials={[
|
||||
{ name: "Sarah J.", role: "Regular", company: "Local", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/parents-offering-son-plate-muffins_23-2148414956.jpg" },
|
||||
{ name: "Mike D.", role: "Foodie", company: "Neighbor", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/tablet-mobile-female-using-phone_1303-2074.jpg" },
|
||||
{ name: "Emma W.", role: "Fan", company: "Regular", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/top-view-little-yummy-cakes-with-strawberries-white-surface-birthday-celebration-sweet-biscuit-cake-cookie_140725-101979.jpg" },
|
||||
{ name: "David L.", role: "Chef", company: "Pro", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/smiling-female-baker-giving-wrapped-bread-customer-bakery_23-2148189127.jpg" },
|
||||
{ name: "Chloe B.", role: "Customer", company: "Regular", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/sincere-positive-woman-dressed-fashionabe-clothes-feels-very-happy-get-bouquet-flowers-from-beloved-person-makes-face-palm-isolated-blue-wall_273609-47896.jpg" },
|
||||
]}
|
||||
metrics={[
|
||||
{ value: "10k+", label: "Loaves Baked" },
|
||||
{ value: "5k+", label: "Happy Customers" },
|
||||
{ value: "40+", label: "Years Tradition" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
tag="Visit Us"
|
||||
title="Join the SweetCrumb Newsletter"
|
||||
description="Get updates on new seasonal bakes and exclusive discounts."
|
||||
inputPlaceholder="Enter your email"
|
||||
buttonText="Subscribe Now"
|
||||
termsText="We respect your inbox. Unsubscribe anytime."
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
tag="Visit Us"
|
||||
title="Join the SweetCrumb Newsletter"
|
||||
description="Get updates on new seasonal bakes and exclusive discounts."
|
||||
inputPlaceholder="Enter your email"
|
||||
buttonText="Subscribe Now"
|
||||
termsText="We respect your inbox. Unsubscribe anytime."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimpleCard
|
||||
brand="SweetCrumb Bakery"
|
||||
columns={[
|
||||
{
|
||||
title: "Bakery",
|
||||
items: [
|
||||
{
|
||||
label: "About",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Menu",
|
||||
href: "#products",
|
||||
},
|
||||
{
|
||||
label: "Location",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Terms of Service",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
copyright="© 2024 SweetCrumb Bakery. All rights reserved."
|
||||
links={[
|
||||
{
|
||||
label: "Instagram",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Facebook",
|
||||
href: "#",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimpleCard
|
||||
brand="SweetCrumb Bakery"
|
||||
columns={[
|
||||
{ title: "Bakery", items: [{ label: "About", href: "#about" }, { label: "Menu", href: "#products" }, { label: "Location", href: "#contact" }] },
|
||||
{ title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }] },
|
||||
]}
|
||||
copyright="© 2024 SweetCrumb Bakery. All rights reserved."
|
||||
links={[
|
||||
{ label: "Instagram", href: "#" },
|
||||
{ label: "Facebook", href: "#" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user