bender/ebe441b2-abaf-4fe8-bcdb-7eac81cd7d66
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update src/app/page.tsx

Browse Source
This commit is contained in:
bender
2026-05-04 15:52:54 +00:00
parent 7d02771fb8
commit b3c5cfdf12
1 changed files with 131 additions and 290 deletions
Download Patch File Download Diff File Expand all files Collapse all files

421
src/app/page.tsx
View File

@@ -11,7 +11,7 @@ import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboa
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import { Clock, Coffee, Users } from "lucide-react";
import { Clock, Coffee, Users, Leaf, Cake, Heart } from "lucide-react";
export default function LandingPage() {
return (
@@ -28,303 +28,144 @@ export default function LandingPage() {
headingFontWeight="bold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
navItems={[
{
name: "Home",
id: "hero",
},
{
name: "About",
id: "about",
},
{
name: "Menu",
id: "products",
},
{
name: "Contact",
id: "contact",
},
]}
brandName="Kuraru Cafe"
/>
</div>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
navItems={[
{ name: "Home", id: "hero" },
{ name: "About", id: "about" },
{ name: "Menu", id: "products" },
{ name: "Contact", id: "contact" },
]}
brandName="Kuraru Cafe"
button={{ text: "Order Now", href: "#products" }}
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardRotatedCarousel
background={{
variant: "rotated-rays-static",
}}
title="Welcome to Kuraru Cafe"
description="Your cozy corner for artisanal coffee, fresh pastries, and moments of relaxation in the heart of the city."
buttons={[
{
text: "View Menu",
href: "#products",
},
]}
carouselItems={[
{
id: "1",
imageSrc: "http://img.b2bpic.net/free-photo/closeup-barista-making-latte-art_53876-24971.jpg?_wi=1",
imageAlt: "Cafe interior",
},
{
id: "2",
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?_wi=1",
imageAlt: "Barista detail",
},
{
id: "3",
imageSrc: "http://img.b2bpic.net/free-photo/cup-tea-cookies_23-2148832321.jpg?_wi=1",
imageAlt: "Pastry closeup",
},
{
id: "4",
imageSrc: "http://img.b2bpic.net/free-photo/coffee-latte-art-cappuccino-foam-cup-wooden-table_23-2147908327.jpg",
imageAlt: "Morning sun",
},
{
id: "5",
imageSrc: "http://img.b2bpic.net/free-photo/overhead-view-man-sitting-arm-chair-holding-cup-coffee_23-2148164529.jpg",
imageAlt: "Cafe entrance",
},
{
id: "6",
imageSrc: "http://img.b2bpic.net/free-photo/barman-with-cocktail_181624-75.jpg",
imageAlt: "Coffee beans",
},
]}
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardRotatedCarousel
background={{ variant: "rotated-rays-static" }}
title="Welcome to Kuraru Cafe"
description="Your cozy corner for artisanal coffee, fresh pastries, and moments of relaxation in the heart of the city."
buttons={[{ text: "View Menu", href: "#products" }]}
carouselItems={[
{ id: "1", imageSrc: "http://img.b2bpic.net/free-photo/closeup-barista-making-latte-art_53876-24971.jpg", imageAlt: "Cafe interior" },
{ id: "2", 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: "Barista detail" },
{ id: "3", imageSrc: "http://img.b2bpic.net/free-photo/cup-tea-cookies_23-2148832321.jpg", imageAlt: "Pastry closeup" },
{ id: "4", imageSrc: "http://img.b2bpic.net/free-photo/coffee-latte-art-cappuccino-foam-cup-wooden-table_23-2147908327.jpg", imageAlt: "Morning sun" },
{ id: "5", imageSrc: "http://img.b2bpic.net/free-photo/overhead-view-man-sitting-arm-chair-holding-cup-coffee_23-2148164529.jpg", imageAlt: "Cafe entrance" },
{ id: "6", imageSrc: "http://img.b2bpic.net/free-photo/barman-with-cocktail_181624-75.jpg", imageAlt: "Coffee beans" },
]}
/>
</div>
<div id="about" data-section="about">
<AboutMetric
useInvertedBackground={false}
title="Our Passion for Quality"
metrics={[
{
icon: Coffee,
label: "Coffee Varieties",
value: "20+",
},
{
icon: Clock,
label: "Daily Hours",
value: "12hr",
},
{
icon: Users,
label: "Happy Guests",
value: "5000+",
},
]}
metricsAnimation="slide-up"
/>
</div>
<div id="about" data-section="about">
<AboutMetric
useInvertedBackground={false}
title="Our Passion for Quality"
metrics={[
{ icon: Coffee, label: "Coffee Varieties", value: "20+" },
{ icon: Clock, label: "Daily Hours", value: "12hr" },
{ icon: Users, label: "Happy Guests", value: "5000+" },
]}
metricsAnimation="slide-up"
/>
</div>
<div id="products" data-section="products">
<ProductCardOne
animationType="slide-up"
textboxLayout="default"
gridVariant="uniform-all-items-equal"
useInvertedBackground={true}
products={[
{
id: "p1",
name: "Iced Signature Latte",
price: "¥550",
imageSrc: "http://img.b2bpic.net/free-photo/ice-coffee_1339-3417.jpg",
},
{
id: "p2",
name: "Almond Croissant",
price: "¥420",
imageSrc: "http://img.b2bpic.net/free-photo/rollcake-with-eclairs-pie-slices_114579-20806.jpg",
},
{
id: "p3",
name: "Chocolate Ganache Cake",
price: "¥600",
imageSrc: "http://img.b2bpic.net/free-photo/chocolate-fudge-cake_1339-7271.jpg",
},
{
id: "p4",
name: "Strawberry Matcha",
price: "¥650",
imageSrc: "http://img.b2bpic.net/free-photo/glass-strawberry-milkshake-with-whipped-cream-strawberry-top_140725-4879.jpg",
},
{
id: "p5",
name: "Artisan Ham Sandwich",
price: "¥750",
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-salmon-sandwich-with-olives-onions_23-2148640243.jpg",
},
{
id: "p6",
name: "Classic Cappuccino",
price: "¥500",
imageSrc: "http://img.b2bpic.net/free-photo/white-coffee-cup-with-spoon-with-cafe-background_157027-4444.jpg",
},
]}
title="Our Menu Favorites"
description="Explore our selection of handcrafted beverages and delicious artisanal treats."
/>
</div>
<div id="products" data-section="products">
<ProductCardOne
animationType="slide-up"
textboxLayout="default"
gridVariant="uniform-all-items-equal"
useInvertedBackground={true}
products={[
{ id: "p1", name: "Iced Signature Latte", price: "¥550", imageSrc: "http://img.b2bpic.net/free-photo/ice-coffee_1339-3417.jpg" },
{ id: "p2", name: "Almond Croissant", price: "¥420", imageSrc: "http://img.b2bpic.net/free-photo/rollcake-with-eclairs-pie-slices_114579-20806.jpg" },
{ id: "p3", name: "Chocolate Ganache Cake", price: "¥600", imageSrc: "http://img.b2bpic.net/free-photo/chocolate-fudge-cake_1339-7271.jpg" },
{ id: "p4", name: "Strawberry Matcha", price: "¥650", imageSrc: "http://img.b2bpic.net/free-photo/glass-strawberry-milkshake-with-whipped-cream-strawberry-top_140725-4879.jpg" },
{ id: "p5", name: "Artisan Ham Sandwich", price: "¥750", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-salmon-sandwich-with-olives-onions_23-2148640243.jpg" },
{ id: "p6", name: "Classic Cappuccino", price: "¥500", imageSrc: "http://img.b2bpic.net/free-photo/white-coffee-cup-with-spoon-with-cafe-background_157027-4444.jpg" },
]}
title="Our Menu Favorites"
description="Explore our selection of handcrafted beverages and delicious artisanal treats."
/>
</div>
<div id="features" data-section="features">
<FeatureCardTwentySix
textboxLayout="default"
useInvertedBackground={false}
features={[
{
title: "Fresh Ingredients",
description: "We source the finest beans and local produce daily.",
buttonIcon: "Leaf",
imageSrc: "http://img.b2bpic.net/free-photo/barista-is-preparing-coffee-with-milk_140725-8113.jpg",
imageAlt: "Barista is preparing coffee with milk",
},
{
title: "Cozy Ambience",
description: "Perfect for working, reading, or meeting friends.",
buttonIcon: "Coffee",
imageSrc: "http://img.b2bpic.net/free-photo/closeup-barista-making-latte-art_53876-24971.jpg?_wi=2",
imageAlt: "Barista is preparing coffee with milk",
},
{
title: "Artisanal Baking",
description: "Pastries baked fresh every single morning.",
buttonIcon: "Cake",
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?_wi=2",
imageAlt: "Barista is preparing coffee with milk",
},
{
title: "Friendly Service",
description: "Our team makes you feel at home every time.",
buttonIcon: "Heart",
imageSrc: "http://img.b2bpic.net/free-photo/cup-tea-cookies_23-2148832321.jpg?_wi=2",
imageAlt: "Barista is preparing coffee with milk",
},
]}
title="Why Choose Kuraru"
description="We put heart into every cup and care into every interaction."
/>
</div>
<div id="features" data-section="features">
<FeatureCardTwentySix
textboxLayout="default"
useInvertedBackground={false}
features={[
{ title: "Fresh Ingredients", description: "We source the finest beans and local produce daily.", buttonIcon: Leaf, imageSrc: "http://img.b2bpic.net/free-photo/barista-is-preparing-coffee-with-milk_140725-8113.jpg", imageAlt: "Barista is preparing coffee with milk" },
{ title: "Cozy Ambience", description: "Perfect for working, reading, or meeting friends.", buttonIcon: Coffee, imageSrc: "http://img.b2bpic.net/free-photo/closeup-barista-making-latte-art_53876-24971.jpg", imageAlt: "Barista is preparing coffee with milk" },
{ title: "Artisanal Baking", description: "Pastries baked fresh every single morning.", buttonIcon: Cake, 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: "Barista is preparing coffee with milk" },
{ title: "Friendly Service", description: "Our team makes you feel at home every time.", buttonIcon: Heart, imageSrc: "http://img.b2bpic.net/free-photo/cup-tea-cookies_23-2148832321.jpg", imageAlt: "Barista is preparing coffee with milk" },
]}
title="Why Choose Kuraru"
description="We put heart into every cup and care into every interaction."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardTwelve
useInvertedBackground={true}
testimonials={[
{
id: "t1",
name: "Aika S.",
imageSrc: "http://img.b2bpic.net/free-photo/young-blonde-woman-with-glasses-cafe_273609-3908.jpg",
},
{
id: "t2",
name: "Kenji M.",
imageSrc: "http://img.b2bpic.net/free-photo/young-blonde-woman-sitting-cafe-reading_273609-15132.jpg",
},
{
id: "t3",
name: "Hana Y.",
imageSrc: "http://img.b2bpic.net/free-photo/pretty-blonde-woman-sitting-cafe_273609-6715.jpg",
},
{
id: "t4",
name: "Taro I.",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-brunette-hair-businessman-sitting-coffee-shop-reading-newspaper-looking-concentrated-handsome-business-man-holding-open-newspaper-sitting-cafe_1391-594.jpg",
},
{
id: "t5",
name: "Yuki K.",
imageSrc: "http://img.b2bpic.net/free-photo/humorous-talks-with-close-friends-dinner-hot-spring-day-cafe_8353-10001.jpg",
},
]}
cardTitle="Loved by Our Community"
cardTag="Testimonials"
cardAnimation="blur-reveal"
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardTwelve
useInvertedBackground={true}
testimonials={[
{ id: "t1", name: "Aika S.", imageSrc: "http://img.b2bpic.net/free-photo/young-blonde-woman-with-glasses-cafe_273609-3908.jpg" },
{ id: "t2", name: "Kenji M.", imageSrc: "http://img.b2bpic.net/free-photo/young-blonde-woman-sitting-cafe-reading_273609-15132.jpg" },
{ id: "t3", name: "Hana Y.", imageSrc: "http://img.b2bpic.net/free-photo/pretty-blonde-woman-sitting-cafe_273609-6715.jpg" },
{ id: "t4", name: "Taro I.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-brunette-hair-businessman-sitting-coffee-shop-reading-newspaper-looking-concentrated-handsome-business-man-holding-open-newspaper-sitting-cafe_1391-594.jpg" },
{ id: "t5", name: "Yuki K.", imageSrc: "http://img.b2bpic.net/free-photo/humorous-talks-with-close-friends-dinner-hot-spring-day-cafe_8353-10001.jpg" },
]}
cardTitle="Loved by Our Community"
cardTag="Testimonials"
cardAnimation="blur-reveal"
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitText
useInvertedBackground={false}
faqs={[
{
id: "f1",
title: "Do you offer Wi-Fi?",
content: "Yes, we provide complimentary high-speed Wi-Fi for all guests.",
},
{
id: "f2",
title: "Are there vegan options?",
content: "Absolutely! We have plant-based milk alternatives and select vegan snacks.",
},
{
id: "f3",
title: "Can I reserve a table?",
content: "For groups of 5 or more, please call us in advance to reserve.",
},
]}
sideTitle="Frequently Asked"
faqsAnimation="slide-up"
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitText
useInvertedBackground={false}
faqs={[
{ id: "f1", title: "Do you offer Wi-Fi?", content: "Yes, we provide complimentary high-speed Wi-Fi for all guests." },
{ id: "f2", title: "Are there vegan options?", content: "Absolutely! We have plant-based milk alternatives and select vegan snacks." },
{ id: "f3", title: "Can I reserve a table?", content: "For groups of 5 or more, please call us in advance to reserve." },
]}
sideTitle="Frequently Asked"
faqsAnimation="slide-up"
/>
</div>
<div id="contact" data-section="contact">
<ContactSplit
useInvertedBackground={true}
background={{
variant: "plain",
}}
tag="Visit Us"
title="Stay Connected"
description="Sign up for our newsletter to hear about new seasonal drink arrivals."
imageSrc="http://img.b2bpic.net/free-photo/couple-enjoying-coffee-shop_23-2148366675.jpg"
mediaAnimation="slide-up"
/>
</div>
<div id="contact" data-section="contact">
<ContactSplit
useInvertedBackground={true}
background={{ variant: "plain" }}
tag="Visit Us"
title="Stay Connected"
description="Sign up for our newsletter to hear about new seasonal drink arrivals."
imageSrc="http://img.b2bpic.net/free-photo/couple-enjoying-coffee-shop_23-2148366675.jpg"
mediaAnimation="slide-up"
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseCard
logoText="Kuraru Cafe"
columns={[
{
title: "Navigation",
items: [
{
label: "Home",
href: "#hero",
},
{
label: "Menu",
href: "#products",
},
{
label: "Contact",
href: "#contact",
},
],
},
{
title: "Legal",
items: [
{
label: "Privacy Policy",
href: "#",
},
{
label: "Terms of Service",
href: "#",
},
],
},
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseCard
logoText="Kuraru Cafe"
columns={[
{
title: "Navigation", items: [
{ label: "Home", href: "#hero" },
{ label: "Menu", href: "#products" },
{ label: "Contact", href: "#contact" },
],
},
{
title: "Legal", items: [
{ label: "Privacy Policy", href: "#" },
{ label: "Terms of Service", href: "#" },
],
},
]}
/>
</div>
</ReactLenis>
</ThemeProvider>
);