Merge version_1 into main #2

Merged
bender merged 1 commits from version_1 into main 2026-04-18 09:48:13 +00:00

View File

@@ -18,421 +18,183 @@ import { Award, Coffee, Sparkles, Users } from "lucide-react";
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="text-stagger"
defaultTextAnimation="entrance-slide"
borderRadius="pill"
defaultButtonVariant="text-stagger"
defaultTextAnimation="entrance-slide"
borderRadius="pill"
contentWidth="medium"
sizing="medium"
background="circleGradient"
cardStyle="glass-elevated"
primaryButtonStyle="gradient"
secondaryButtonStyle="glass"
headingFontWeight="normal"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={[
{
name: "Home",
id: "hero",
},
{
name: "About",
id: "about",
},
{
name: "Menu",
id: "products",
},
{
name: "Contact",
id: "contact",
},
]}
brandName="LOC Premium Cafe"
/>
</div>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={[
{ name: "Home", id: "hero" },
{ name: "About", id: "about" },
{ name: "Menu", id: "products" },
{ name: "Contact", id: "contact" }
]}
brandName="LOC Premium Cafe"
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitKpi
background={{
variant: "plain",
}}
title="LOC Premium Cafe"
description="Experience the finest artisanal coffee and premium atmosphere. Your daily escape in every cup."
kpis={[
{
value: "15+",
label: "Years Experience",
},
{
value: "100%",
label: "Arabica Beans",
},
{
value: "5k+",
label: "Happy Clients",
},
]}
enableKpiAnimation={true}
imageSrc="http://img.b2bpic.net/free-photo/cafe-with-burning-candles-tables_140725-7784.jpg?_wi=1"
imageAlt="cozy cafe interior premium warm atmosphere"
mediaAnimation="slide-up"
avatars={[
{
src: "http://img.b2bpic.net/free-photo/vertical-shot-empty-cafeteria_181624-29282.jpg",
alt: "Vertical shot of an empty cafeteria",
},
{
src: "http://img.b2bpic.net/free-photo/wedding-hall-with-white-wooden-furniture-interior_114579-2232.jpg",
alt: "Wedding hall with white wooden furniture interior",
},
{
src: "http://img.b2bpic.net/free-photo/dreamy-stylish-girl-with-blonde-hair-pink-lips-sitting-coffee-shop-with-wooden-chairs-table-she-holds-cup-cofee-touches-her-hair_197531-102.jpg",
alt: "Dreamy stylish girl with blonde hair and pink lips sitting in a coffee shop",
},
{
src: "http://img.b2bpic.net/free-photo/portrait-pretty-young-woman-sitting_171337-17103.jpg",
alt: "Portrait of a pretty young woman sitting",
},
{
src: "http://img.b2bpic.net/free-photo/positive-smiling-woman-with-collected-hair-wearing-white-shirt_291650-656.jpg",
alt: "Positive smiling woman with collected hair",
},
]}
avatarText="Join 5,000+ coffee lovers"
marqueeItems={[
{
type: "text",
text: "Locally Roasted",
},
{
type: "text",
text: "Sustainable Sourcing",
},
{
type: "text-icon",
text: "Premium Quality",
icon: Coffee,
},
{
type: "text",
text: "Artisan Brewing",
},
{
type: "text-icon",
text: "Cozy Atmosphere",
icon: Sparkles,
},
]}
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitKpi
background={{ variant: "plain" }}
title="LOC Premium Cafe"
description="Experience the finest artisanal coffee and premium atmosphere. Your daily escape in every cup."
kpis={[
{ value: "15+", label: "Years Experience" },
{ value: "100%", label: "Arabica Beans" },
{ value: "5k+", label: "Happy Clients" }
]}
enableKpiAnimation={true}
imageSrc="http://img.b2bpic.net/free-photo/cafe-with-burning-candles-tables_140725-7784.jpg"
imageAlt="cozy cafe interior premium warm atmosphere"
mediaAnimation="slide-up"
marqueeItems={[
{ type: "text", text: "Locally Roasted" },
{ type: "text", text: "Sustainable Sourcing" },
{ type: "text-icon", text: "Premium Quality", icon: Coffee },
{ type: "text", text: "Artisan Brewing" },
{ type: "text-icon", text: "Cozy Atmosphere", icon: Sparkles }
]}
/>
</div>
<div id="about" data-section="about">
<MediaAbout
useInvertedBackground={false}
title="Crafted with Passion"
description="At LOC Premium Cafe, we believe that every cup tells a story. From selecting the finest beans to our expert brewing techniques, we strive to deliver an unmatched coffee experience in an environment designed for connection."
imageSrc="http://img.b2bpic.net/free-photo/crop-hands-pressing-coffee_23-2147775914.jpg?_wi=1"
imageAlt="barista making specialty coffee focus"
/>
</div>
<div id="about" data-section="about">
<MediaAbout
useInvertedBackground={false}
title="Crafted with Passion"
description="At LOC Premium Cafe, we believe that every cup tells a story. From selecting the finest beans to our expert brewing techniques, we strive to deliver an unmatched coffee experience in an environment designed for connection."
imageSrc="http://img.b2bpic.net/free-photo/crop-hands-pressing-coffee_23-2147775914.jpg"
imageAlt="barista making specialty coffee focus"
/>
</div>
<div id="products" data-section="products">
<ProductCardTwo
animationType="slide-up"
textboxLayout="split"
gridVariant="three-columns-all-equal-width"
useInvertedBackground={false}
products={[
{
id: "p1",
brand: "LOC Special",
name: "Signature Blend Espresso",
price: "$4.50",
rating: 5,
reviewCount: "120",
imageSrc: "http://img.b2bpic.net/free-photo/top-view-cup-coffee-hot-strong-grey-rustic-table-coffee-hot-drink_140725-27966.jpg",
},
{
id: "p2",
brand: "Bakery",
name: "Buttery French Croissant",
price: "$3.75",
rating: 5,
reviewCount: "85",
imageSrc: "http://img.b2bpic.net/free-photo/front-view-yummy-raspberry-cake-with-raisins-grey-background-sugar-tea-biscuit-cake-cookie-sweet-pie_140725-115853.jpg",
},
{
id: "p3",
brand: "LOC Special",
name: "Velvet Art Latte",
price: "$5.25",
rating: 5,
reviewCount: "95",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-hands-preparing-drink-with-milk_23-2148865605.jpg",
},
{
id: "p4",
brand: "LOC Special",
name: "Single Origin Beans",
price: "$18.00",
rating: 5,
reviewCount: "40",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-coffee-beans-container_23-2148523093.jpg",
},
{
id: "p5",
brand: "Tea Selection",
name: "Premium Organic Matcha",
price: "$6.00",
rating: 4,
reviewCount: "60",
imageSrc: "http://img.b2bpic.net/free-photo/front-view-man-disinfecting-his-hands-restaurant_23-2148693095.jpg",
},
{
id: "p6",
brand: "Bakery",
name: "Decadent Chocolate Tart",
price: "$5.50",
rating: 5,
reviewCount: "55",
imageSrc: "http://img.b2bpic.net/free-photo/cake-glass-arrangement-with-copy-space_23-2149030740.jpg",
},
]}
title="Our Signature Menu"
description="Explore our curated selection of premium beverages and artisanal treats, crafted daily for your enjoyment."
/>
</div>
<div id="products" data-section="products">
<ProductCardTwo
animationType="slide-up"
textboxLayout="split"
gridVariant="three-columns-all-equal-width"
useInvertedBackground={false}
title="Our Signature Menu"
description="Explore our curated selection of premium beverages and artisanal treats, crafted daily for your enjoyment."
products={[
{ id: "p1", brand: "LOC Special", name: "Signature Blend Espresso", price: "$4.50", rating: 5, reviewCount: "120", imageSrc: "http://img.b2bpic.net/free-photo/top-view-cup-coffee-hot-strong-grey-rustic-table-coffee-hot-drink_140725-27966.jpg" },
{ id: "p2", brand: "Bakery", name: "Buttery French Croissant", price: "$3.75", rating: 5, reviewCount: "85", imageSrc: "http://img.b2bpic.net/free-photo/front-view-yummy-raspberry-cake-with-raisins-grey-background-sugar-tea-biscuit-cake-cookie-sweet-pie_140725-115853.jpg" },
{ id: "p3", brand: "LOC Special", name: "Velvet Art Latte", price: "$5.25", rating: 5, reviewCount: "95", imageSrc: "http://img.b2bpic.net/free-photo/close-up-hands-preparing-drink-with-milk_23-2148865605.jpg" },
{ id: "p4", brand: "LOC Special", name: "Single Origin Beans", price: "$18.00", rating: 5, reviewCount: "40", imageSrc: "http://img.b2bpic.net/free-photo/close-up-coffee-beans-container_23-2148523093.jpg" },
{ id: "p5", brand: "Tea Selection", name: "Premium Organic Matcha", price: "$6.00", rating: 4, reviewCount: "60", imageSrc: "http://img.b2bpic.net/free-photo/front-view-man-disinfecting-his-hands-restaurant_23-2148693095.jpg" },
{ id: "p6", brand: "Bakery", name: "Decadent Chocolate Tart", price: "$5.50", rating: 5, reviewCount: "55", imageSrc: "http://img.b2bpic.net/free-photo/cake-glass-arrangement-with-copy-space_23-2149030740.jpg" }
]}
/>
</div>
<div id="features" data-section="features">
<FeatureCardNineteen
textboxLayout="split"
useInvertedBackground={true}
features={[
{
tag: "Beans",
title: "Ethically Sourced",
subtitle: "Sustainable",
description: "We partner directly with farmers to ensure high-quality, sustainable beans.",
imageSrc: "http://img.b2bpic.net/free-photo/barista-is-preparing-coffee_140725-8112.jpg",
imageAlt: "Barista is preparing coffee",
},
{
tag: "Brewing",
title: "Expert Craft",
subtitle: "Artisan",
description: "Our baristas are professionally trained to master every brewing technique.",
imageSrc: "http://img.b2bpic.net/free-photo/cafe-with-burning-candles-tables_140725-7784.jpg?_wi=2",
imageAlt: "Barista is preparing coffee",
},
{
tag: "Space",
title: "Premium Vibe",
subtitle: "Elegant",
description: "A comfortable, serene space for work, meetings, or social gatherings.",
imageSrc: "http://img.b2bpic.net/free-photo/crop-hands-pressing-coffee_23-2147775914.jpg?_wi=2",
imageAlt: "Barista is preparing coffee",
},
]}
title="Why Choose LOC?"
description="We don't just serve coffee; we create moments."
/>
</div>
<div id="features" data-section="features">
<FeatureCardNineteen
textboxLayout="split"
useInvertedBackground={true}
title="Why Choose LOC?"
description="We don't just serve coffee; we create moments."
features={[
{ tag: "Beans", title: "Ethically Sourced", subtitle: "Sustainable", description: "We partner directly with farmers to ensure high-quality, sustainable beans.", imageSrc: "http://img.b2bpic.net/free-photo/barista-is-preparing-coffee_140725-8112.jpg", imageAlt: "Barista is preparing coffee" },
{ tag: "Brewing", title: "Expert Craft", subtitle: "Artisan", description: "Our baristas are professionally trained to master every brewing technique.", imageSrc: "http://img.b2bpic.net/free-photo/cafe-with-burning-candles-tables_140725-7784.jpg", imageAlt: "Barista is preparing coffee" },
{ tag: "Space", title: "Premium Vibe", subtitle: "Elegant", description: "A comfortable, serene space for work, meetings, or social gatherings.", imageSrc: "http://img.b2bpic.net/free-photo/crop-hands-pressing-coffee_23-2147775914.jpg", imageAlt: "Barista is preparing coffee" }
]}
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardThree
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
metrics={[
{
id: "m1",
icon: Coffee,
title: "Cups Served",
value: "500k+",
},
{
id: "m2",
icon: Award,
title: "Awards Won",
value: "12",
},
{
id: "m3",
icon: Users,
title: "Community Members",
value: "10k+",
},
]}
title="Our Impact"
description="Numbers behind the LOC experience."
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardThree
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
title="Our Impact"
description="Numbers behind the LOC experience."
metrics={[
{ id: "m1", icon: Coffee, title: "Cups Served", value: "500k+" },
{ id: "m2", icon: Award, title: "Awards Won", value: "12" },
{ id: "m3", icon: Users, title: "Community Members", value: "10k+" }
]}
/>
</div>
<div id="team" data-section="team">
<TeamCardTwo
animationType="slide-up"
textboxLayout="split"
gridVariant="three-columns-all-equal-width"
useInvertedBackground={true}
members={[
{
id: "t1",
name: "Jane Doe",
role: "Head Barista",
description: "Award-winning specialist with 10 years of craft brewing.",
imageSrc: "http://img.b2bpic.net/free-photo/man-hands-working-with-coffee-machine-restaurant-close-up-barista-hands-preparing-making-coffee-coffee-shop_574295-514.jpg",
imageAlt: "Man hands working with coffee machine in restaurant. Close up barista hands preparing making coffee in coffee shop",
},
{
id: "t2",
name: "John Smith",
role: "Founder",
description: "Coffee enthusiast focused on sustainable community growth.",
imageSrc: "http://img.b2bpic.net/free-photo/cafe-with-burning-candles-tables_140725-7784.jpg?_wi=3",
imageAlt: "Man hands working with coffee machine in restaurant. Close up barista hands preparing making coffee in coffee shop",
},
{
id: "t3",
name: "Alice Wong",
role: "Pastry Chef",
description: "Artisan baker specializing in French-style treats.",
imageSrc: "http://img.b2bpic.net/free-photo/crop-hands-pressing-coffee_23-2147775914.jpg?_wi=3",
imageAlt: "Man hands working with coffee machine in restaurant. Close up barista hands preparing making coffee in coffee shop",
},
]}
title="Meet Our Experts"
description="The friendly faces behind your morning ritual."
/>
</div>
<div id="team" data-section="team">
<TeamCardTwo
animationType="slide-up"
textboxLayout="split"
gridVariant="three-columns-all-equal-width"
useInvertedBackground={true}
title="Meet Our Experts"
description="The friendly faces behind your morning ritual."
members={[
{ id: "t1", name: "Jane Doe", role: "Head Barista", description: "Award-winning specialist with 10 years of craft brewing.", imageSrc: "http://img.b2bpic.net/free-photo/man-hands-working-with-coffee-machine-restaurant-close-up-barista-hands-preparing-making-coffee-coffee-shop_574295-514.jpg", imageAlt: "Head Barista" },
{ id: "t2", name: "John Smith", role: "Founder", description: "Coffee enthusiast focused on sustainable community growth.", imageSrc: "http://img.b2bpic.net/free-photo/cafe-with-burning-candles-tables_140725-7784.jpg", imageAlt: "Founder" },
{ id: "t3", name: "Alice Wong", role: "Pastry Chef", description: "Artisan baker specializing in French-style treats.", imageSrc: "http://img.b2bpic.net/free-photo/crop-hands-pressing-coffee_23-2147775914.jpg", imageAlt: "Pastry Chef" }
]}
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardOne
animationType="slide-up"
textboxLayout="split"
gridVariant="three-columns-all-equal-width"
useInvertedBackground={false}
testimonials={[
{
id: "test1",
name: "Sarah J.",
role: "Regular",
company: "Local Resident",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/modern-smiling-man-sunglasses-is-drinking-coffee-while-standing-outside-coffeeshop_613910-20822.jpg",
},
{
id: "test2",
name: "Mark L.",
role: "Freelancer",
company: "Remote Worker",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-enjoying-coffee-cup_23-2148756305.jpg",
},
{
id: "test3",
name: "Emily P.",
role: "Regular",
company: "Student",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/pretty-young-woman-enjoying-coffee-break_23-2148756294.jpg",
},
{
id: "test4",
name: "David W.",
role: "Executive",
company: "Business",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/portrait-waitress-standing-with-cup-coffee_107420-12309.jpg",
},
{
id: "test5",
name: "Lisa K.",
role: "Regular",
company: "Designer",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/successful-young-man-stylish-hat-relaxing-alone-cozy-cafeteria-lunch-break-looking-with-happy-expression_273609-1935.jpg",
},
]}
title="Community Love"
description="Hear what our regulars say about LOC Premium Cafe."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardOne
animationType="slide-up"
textboxLayout="split"
gridVariant="three-columns-all-equal-width"
useInvertedBackground={false}
title="Community Love"
description="Hear what our regulars say about LOC Premium Cafe."
testimonials={[
{ id: "test1", name: "Sarah J.", role: "Regular", company: "Local Resident", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/modern-smiling-man-sunglasses-is-drinking-coffee-while-standing-outside-coffeeshop_613910-20822.jpg" },
{ id: "test2", name: "Mark L.", role: "Freelancer", company: "Remote Worker", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-woman-enjoying-coffee-cup_23-2148756305.jpg" },
{ id: "test3", name: "Emily P.", role: "Regular", company: "Student", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/pretty-young-woman-enjoying-coffee-break_23-2148756294.jpg" },
{ id: "test4", name: "David W.", role: "Executive", company: "Business", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-waitress-standing-with-cup-coffee_107420-12309.jpg" },
{ id: "test5", name: "Lisa K.", role: "Regular", company: "Designer", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/successful-young-man-stylish-hat-relaxing-alone-cozy-cafeteria-lunch-break-looking-with-happy-expression_273609-1935.jpg" }
]}
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitMedia
textboxLayout="split"
useInvertedBackground={true}
faqs={[
{
id: "f1",
title: "Do you offer vegan options?",
content: "Yes, we have a selection of plant-based milks and vegan pastries available daily.",
},
{
id: "f2",
title: "Is there free Wi-Fi?",
content: "Absolutely! We provide high-speed internet perfect for working or studying.",
},
{
id: "f3",
title: "Can I reserve space?",
content: "Yes, for larger groups we recommend booking in advance.",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/dinner-table-daylight_1150-11126.jpg"
title="Common Queries"
description="Everything you need to know about us."
faqsAnimation="slide-up"
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitMedia
textboxLayout="split"
useInvertedBackground={true}
title="Common Queries"
description="Everything you need to know about us."
faqsAnimation="slide-up"
imageSrc="http://img.b2bpic.net/free-photo/dinner-table-daylight_1150-11126.jpg"
faqs={[
{ id: "f1", title: "Do you offer vegan options?", content: "Yes, we have a selection of plant-based milks and vegan pastries available daily." },
{ id: "f2", title: "Is there free Wi-Fi?", content: "Absolutely! We provide high-speed internet perfect for working or studying." },
{ id: "f3", title: "Can I reserve space?", content: "Yes, for larger groups we recommend booking in advance." }
]}
/>
</div>
<div id="contact" data-section="contact">
<ContactCenter
useInvertedBackground={false}
background={{
variant: "plain",
}}
tag="Visit Us"
title="Join Our Community"
description="Subscribe for exclusive news and cafe events."
/>
</div>
<div id="contact" data-section="contact">
<ContactCenter
useInvertedBackground={false}
background={{ variant: "plain" }}
tag="Visit Us"
title="Join Our Community"
description="Subscribe for exclusive news and cafe events."
/>
</div>
<div id="footer" data-section="footer">
<FooterMedia
imageSrc="http://img.b2bpic.net/free-photo/portrait-young-young-woman-sitting-modern-cafe_171337-17123.jpg"
logoText="LOC Premium Cafe"
columns={[
{
title: "Navigate",
items: [
{
label: "Home",
href: "#hero",
},
{
label: "About",
href: "#about",
},
{
label: "Menu",
href: "#products",
},
],
},
{
title: "Support",
items: [
{
label: "Contact Us",
href: "#contact",
},
{
label: "Privacy Policy",
href: "#",
},
],
},
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterMedia
imageSrc="http://img.b2bpic.net/free-photo/portrait-young-young-woman-sitting-modern-cafe_171337-17123.jpg"
logoText="LOC Premium Cafe"
columns={[
{ title: "Navigate", items: [{ label: "Home", href: "#hero" }, { label: "About", href: "#about" }, { label: "Menu", href: "#products" }] },
{ title: "Support", items: [{ label: "Contact Us", href: "#contact" }, { label: "Privacy Policy", href: "#" }] }
]}
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}
}