Merge version_1_1776937100288 into main #1
392
src/App.tsx
392
src/App.tsx
@@ -12,277 +12,139 @@ import TestimonialAvatarCard from '@/components/sections/testimonial/Testimonial
|
||||
export default function App() {
|
||||
return (
|
||||
<>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarCentered
|
||||
logo="Diodema"
|
||||
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="Diodema"
|
||||
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">
|
||||
<HeroSplit
|
||||
tag="Artisanal Coffee"
|
||||
title="Diodema: A Gold Standard in Every Cup"
|
||||
description="Experience hand-crafted brews in our elegant, blush-toned sanctuary. Your daily ritual, elevated."
|
||||
primaryButton={{
|
||||
text: "Visit Us",
|
||||
href: "#contact",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Explore Menu",
|
||||
href: "#products",
|
||||
}}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/ordered-composition-baking-tools_23-2150096566.jpg"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplit
|
||||
tag="Artisanal Coffee"
|
||||
title="Diodema: A Gold Standard in Every Cup"
|
||||
description="Experience hand-crafted brews in our elegant, blush-toned sanctuary. Your daily ritual, elevated."
|
||||
primaryButton={{ text: "Visit Us", href: "#contact" }}
|
||||
secondaryButton={{ text: "Explore Menu", href: "#products" }}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/ordered-composition-baking-tools_23-2150096566.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<AboutMediaOverlay
|
||||
tag="Our Story"
|
||||
title="Passion Brewed to Perfection"
|
||||
description="Diodema was founded on the belief that coffee is more than just a drink—it's a moment of clarity, a touch of elegance, and a warm embrace in a busy world."
|
||||
primaryButton={{
|
||||
text: "Our Roots",
|
||||
href: "#",
|
||||
}}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/high-angle-coffee-shop-equipment_23-2148366540.jpg"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<AboutMediaOverlay
|
||||
tag="Our Story"
|
||||
title="Passion Brewed to Perfection"
|
||||
description="Diodema was founded on the belief that coffee is more than just a drink—it's a moment of clarity, a touch of elegance, and a warm embrace in a busy world."
|
||||
primaryButton={{ text: "Our Roots", href: "#" }}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/high-angle-coffee-shop-equipment_23-2148366540.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeaturesProfileCards
|
||||
tag="Our Craft"
|
||||
title="Why Choose Diodema"
|
||||
description="Quality isn't just a buzzword; it's our philosophy."
|
||||
items={[
|
||||
{
|
||||
title: "Ethical Sourcing",
|
||||
description: "Sustainably harvested beans from premier family farms.",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/woman-taking-coffee_329181-11917.jpg",
|
||||
buttonText: "Read More",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/anonymous-person-holding-mixed-berries_1220-1758.jpg",
|
||||
},
|
||||
{
|
||||
title: "Expert Roasting",
|
||||
description: "Small-batch roasting for optimal depth of flavor.",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-man-having-coffee_1170-2019.jpg",
|
||||
buttonText: "Learn More",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/barista-preparing-beverage_23-2149458072.jpg",
|
||||
},
|
||||
{
|
||||
title: "Artisan Brewing",
|
||||
description: "Hand-poured perfection by our master baristas.",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/happy-lovely-pretty-young-female-model-with-bobbed-hairstyle-shining-smile-being-good-mood-after-successful-shopping-dressed-casual-loose-t-shirt_273609-3588.jpg",
|
||||
buttonText: "Learn More",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/business-owner-working-coffee-shop_23-2148366578.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductVariantCards
|
||||
tag="Menu"
|
||||
title="Signature Brews"
|
||||
description="Indulge in our curated selection of fine coffee drinks."
|
||||
products={[
|
||||
{
|
||||
name: "Golden Latte",
|
||||
variant: "Signature",
|
||||
price: "$6.50",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/coffee-cup-wooden-table_1252-869.jpg",
|
||||
},
|
||||
{
|
||||
name: "Velvet Rose Mocha",
|
||||
variant: "Special",
|
||||
price: "$7.00",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-latte-art_23-2151942576.jpg",
|
||||
},
|
||||
{
|
||||
name: "Classic Espresso",
|
||||
variant: "Original",
|
||||
price: "$4.00",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/aerial-view-hot-coffee_53876-33551.jpg",
|
||||
},
|
||||
{
|
||||
name: "Iced Vanilla Bean",
|
||||
variant: "Cold",
|
||||
price: "$6.00",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/refreshing-iced-coffee-with-condensation-dark-background_84443-83807.jpg",
|
||||
},
|
||||
{
|
||||
name: "Diodema Drip",
|
||||
variant: "House",
|
||||
price: "$3.50",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-coffee-beans-powder-container_23-2148453588.jpg",
|
||||
},
|
||||
{
|
||||
name: "Matcha Gold",
|
||||
variant: "Tea",
|
||||
price: "$6.50",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/hot-matcha-latte_1339-4135.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialAvatarCard
|
||||
tag="Social Proof"
|
||||
title="Beloved by the Community"
|
||||
primaryButton={{
|
||||
text: "Write a Review",
|
||||
href: "#contact",
|
||||
}}
|
||||
avatars={[
|
||||
{
|
||||
name: "Sophia L.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-redhead-female-barista-small-coffee-shop_613910-10448.jpg",
|
||||
},
|
||||
{
|
||||
name: "James M.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/older-woman-with-thumb-up_1149-1162.jpg",
|
||||
},
|
||||
{
|
||||
name: "Chloe B.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/stylish-happy-young-european-woman-with-ginger-hair-charming-smile-looking_273609-661.jpg",
|
||||
},
|
||||
{
|
||||
name: "Marcus R.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-happy-young-man-wearing-eyeglasses-holding-cup_1262-14304.jpg",
|
||||
},
|
||||
{
|
||||
name: "Elena K.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cheerful-longhaired-brunette-woman-bright-beret-red-dress-smiles-widely-sits-beautiful-cafe-young-asian-lady-eyeglasses-holds-white-coffee-cup_197531-29276.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricsSimpleCards
|
||||
tag="Our Growth"
|
||||
title="By the Numbers"
|
||||
description="Our passion has reached thousands of hearts."
|
||||
metrics={[
|
||||
{
|
||||
value: "12k+",
|
||||
description: "Cups Poured",
|
||||
},
|
||||
{
|
||||
value: "5k+",
|
||||
description: "Happy Patrons",
|
||||
},
|
||||
{
|
||||
value: "20+",
|
||||
description: "Local Partners",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSimple
|
||||
tag="Help"
|
||||
title="Common Questions"
|
||||
items={[
|
||||
{
|
||||
question: "Where is Diodema located?",
|
||||
answer: "We are located at 123 Coffee Lane, downtown.",
|
||||
},
|
||||
{
|
||||
question: "Do you offer vegan options?",
|
||||
answer: "Yes! We have a variety of plant-based milks and snacks.",
|
||||
},
|
||||
{
|
||||
question: "Can I reserve space for events?",
|
||||
answer: "Absolutely, email us for private hire inquiries.",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
tag="Visit Us"
|
||||
title="Get in Touch"
|
||||
description="We'd love to host you soon."
|
||||
inputs={[
|
||||
{
|
||||
name: "name",
|
||||
type: "text",
|
||||
placeholder: "Your Name",
|
||||
},
|
||||
{
|
||||
name: "email",
|
||||
type: "email",
|
||||
placeholder: "Your Email",
|
||||
},
|
||||
]}
|
||||
textarea={{
|
||||
name: "message",
|
||||
placeholder: "How can we help?",
|
||||
}}
|
||||
buttonText="Send Message"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/billboard-template-urban-environment_23-2148197244.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBasic
|
||||
columns={[
|
||||
{
|
||||
title: "Diodema",
|
||||
items: [
|
||||
<div id="features" data-section="features">
|
||||
<FeaturesProfileCards
|
||||
tag="Our Craft"
|
||||
title="Why Choose Diodema"
|
||||
description="Quality isn't just a buzzword; it's our philosophy."
|
||||
items={[
|
||||
{
|
||||
label: "About",
|
||||
href: "#about",
|
||||
},
|
||||
title: "Ethical Sourcing", description: "Sustainably harvested beans from premier family farms.", avatarSrc: "http://img.b2bpic.net/free-photo/woman-taking-coffee_329181-11917.jpg", buttonText: "Read More", imageSrc: "http://img.b2bpic.net/free-photo/anonymous-person-holding-mixed-berries_1220-1758.jpg"},
|
||||
{
|
||||
label: "Menu",
|
||||
href: "#products",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support",
|
||||
items: [
|
||||
title: "Expert Roasting", description: "Small-batch roasting for optimal depth of flavor.", avatarSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-man-having-coffee_1170-2019.jpg", buttonText: "Learn More", imageSrc: "http://img.b2bpic.net/free-photo/barista-preparing-beverage_23-2149458072.jpg"},
|
||||
{
|
||||
label: "FAQ",
|
||||
href: "#faq",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
leftText="© 2024 Diodema. All rights reserved."
|
||||
rightText="Designed with love."
|
||||
/>
|
||||
</div>
|
||||
title: "Artisan Brewing", description: "Hand-poured perfection by our master baristas.", avatarSrc: "http://img.b2bpic.net/free-photo/happy-lovely-pretty-young-female-model-with-bobbed-hairstyle-shining-smile-being-good-mood-after-successful-shopping-dressed-casual-loose-t-shirt_273609-3588.jpg", buttonText: "Learn More", imageSrc: "http://img.b2bpic.net/free-photo/business-owner-working-coffee-shop_23-2148366578.jpg"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductVariantCards
|
||||
tag="Menu"
|
||||
title="Signature Brews"
|
||||
description="Indulge in our curated selection of fine coffee drinks."
|
||||
products={[
|
||||
{ name: "Golden Latte", variant: "Signature", price: "$6.50", imageSrc: "http://img.b2bpic.net/free-photo/coffee-cup-wooden-table_1252-869.jpg" },
|
||||
{ name: "Velvet Rose Mocha", variant: "Special", price: "$7.00", imageSrc: "http://img.b2bpic.net/free-photo/close-up-latte-art_23-2151942576.jpg" },
|
||||
{ name: "Classic Espresso", variant: "Original", price: "$4.00", imageSrc: "http://img.b2bpic.net/free-photo/aerial-view-hot-coffee_53876-33551.jpg" },
|
||||
{ name: "Iced Vanilla Bean", variant: "Cold", price: "$6.00", imageSrc: "http://img.b2bpic.net/free-photo/refreshing-iced-coffee-with-condensation-dark-background_84443-83807.jpg" },
|
||||
{ name: "Diodema Drip", variant: "House", price: "$3.50", imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-coffee-beans-powder-container_23-2148453588.jpg" },
|
||||
{ name: "Matcha Gold", variant: "Tea", price: "$6.50", imageSrc: "http://img.b2bpic.net/free-photo/hot-matcha-latte_1339-4135.jpg" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialAvatarCard
|
||||
tag="Social Proof"
|
||||
title="Beloved by the Community"
|
||||
primaryButton={{ text: "Write a Review", href: "#contact" }}
|
||||
avatars={[
|
||||
{ name: "Sophia L.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-redhead-female-barista-small-coffee-shop_613910-10448.jpg" },
|
||||
{ name: "James M.", imageSrc: "http://img.b2bpic.net/free-photo/older-woman-with-thumb-up_1149-1162.jpg" },
|
||||
{ name: "Chloe B.", imageSrc: "http://img.b2bpic.net/free-photo/stylish-happy-young-european-woman-with-ginger-hair-charming-smile-looking_273609-661.jpg" },
|
||||
{ name: "Marcus R.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-happy-young-man-wearing-eyeglasses-holding-cup_1262-14304.jpg" },
|
||||
{ name: "Elena K.", imageSrc: "http://img.b2bpic.net/free-photo/cheerful-longhaired-brunette-woman-bright-beret-red-dress-smiles-widely-sits-beautiful-cafe-young-asian-lady-eyeglasses-holds-white-coffee-cup_197531-29276.jpg" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricsSimpleCards
|
||||
tag="Our Growth"
|
||||
title="By the Numbers"
|
||||
description="Our passion has reached thousands of hearts."
|
||||
metrics={[
|
||||
{ value: "12k+", description: "Cups Poured" },
|
||||
{ value: "5k+", description: "Happy Patrons" },
|
||||
{ value: "20+", description: "Local Partners" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSimple
|
||||
tag="Help"
|
||||
title="Common Questions"
|
||||
description="Everything you need to know about our cafe."
|
||||
items={[
|
||||
{ question: "Where is Diodema located?", answer: "We are located at 123 Coffee Lane, downtown." },
|
||||
{ question: "Do you offer vegan options?", answer: "Yes! We have a variety of plant-based milks and snacks." },
|
||||
{ question: "Can I reserve space for events?", answer: "Absolutely, email us for private hire inquiries." },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
tag="Visit Us"
|
||||
title="Get in Touch"
|
||||
description="We'd love to host you soon."
|
||||
inputs={[
|
||||
{ name: "name", type: "text", placeholder: "Your Name" },
|
||||
{ name: "email", type: "email", placeholder: "Your Email" },
|
||||
]}
|
||||
textarea={{ name: "message", placeholder: "How can we help?" }}
|
||||
buttonText="Send Message"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/billboard-template-urban-environment_23-2148197244.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBasic
|
||||
columns={[
|
||||
{ title: "Diodema", items: [{ label: "About", href: "#about" }, { label: "Menu", href: "#products" }] },
|
||||
{ title: "Support", items: [{ label: "FAQ", href: "#faq" }, { label: "Contact", href: "#contact" }] },
|
||||
]}
|
||||
leftText="© 2024 Diodema. All rights reserved."
|
||||
rightText="Designed with love."
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user