Update src/app/page.tsx

This commit is contained in:
2026-05-12 17:53:42 +00:00
parent 9ddccc2665
commit ff0eaad612

View File

@@ -17,414 +17,182 @@ import { Award, BookOpen, CheckCircle, Clock, Users } from "lucide-react";
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="icon-arrow"
defaultTextAnimation="background-highlight"
borderRadius="pill"
contentWidth="medium"
sizing="large"
background="grid"
cardStyle="inset"
primaryButtonStyle="double-inset"
secondaryButtonStyle="glass"
headingFontWeight="medium"
defaultButtonVariant="icon-arrow"
defaultTextAnimation="background-highlight"
borderRadius="pill"
contentWidth="medium"
sizing="large"
background="grid"
cardStyle="inset"
primaryButtonStyle="double-inset"
secondaryButtonStyle="glass"
headingFontWeight="medium"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
navItems={[
{
name: "About",
id: "#about",
},
{
name: "Features",
id: "#features",
},
{
name: "Menu",
id: "#menu",
},
{
name: "Testimonials",
id: "#testimonials",
},
{
name: "Contact",
id: "#contact",
},
]}
brandName="The Golden Fork"
/>
</div>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
navItems={[
{ name: "About", id: "#about" },
{ name: "Features", id: "#features" },
{ name: "Menu", id: "#menu" },
{ name: "Testimonials", id: "#testimonials" },
{ name: "Contact", id: "#contact" },
]}
brandName="The Golden Fork"
button={{ text: "Reservations", href: "#contact" }}
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitDoubleCarousel
background={{
variant: "radial-gradient",
}}
title="Culinary Excellence at The Golden Fork"
description="Experience fine dining reimagined with seasonal ingredients and world-class service."
leftCarouselItems={[
{
imageSrc: "http://img.b2bpic.net/free-photo/glass-prosecco-with-bottle-around_114579-2141.jpg",
imageAlt: "upscale restaurant table setting",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/dining-room-beige-color-tones-interior-design_114579-2225.jpg",
imageAlt: "restaurant interior warm lighting",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/cutlery-near-twig-leaves_23-2147811214.jpg",
imageAlt: "Cutlery near twig and leaves",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/grilled-vegetables-served-with-lavash-species_114579-2007.jpg",
imageAlt: "Grilled vegetables served with lavash and species",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/romantic-evening-shared-wine-candlelight-generated-by-ai_188544-13728.jpg",
imageAlt: "Romantic evening shared wine and candlelight generated by AI",
},
]}
rightCarouselItems={[
{
imageSrc: "http://img.b2bpic.net/free-photo/luxury-meeting-dining-room-table-multiple-chairs_114579-2067.jpg",
imageAlt: "restaurant interior warm lighting",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/cutting-biscuit-with-whipping-cream-berries-with-cutlery_114579-3648.jpg",
imageAlt: "upscale restaurant table setting",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/man-embracing-with-woman-restaurant_23-2148016783.jpg",
imageAlt: "Man embracing with woman in restaurant",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/middle-age-friends-night-having-dinner_23-2149190934.jpg",
imageAlt: "Middle age friends at night having dinner",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/rendering-elegant-neoclassical-interior_23-2151059653.jpg",
imageAlt: "Rendering of elegant neoclassical interior",
},
]}
buttons={[
{
text: "Book a Table",
href: "#contact",
},
]}
avatars={[
{
src: "http://img.b2bpic.net/free-photo/fashionable-hipster-guy-dressed-denim-shirt-wearing-stylish-glasses_273609-6821.jpg",
alt: "Fashionable hipster guy",
},
{
src: "http://img.b2bpic.net/free-photo/crazy-chef-happy-expression_1194-1321.jpg",
alt: "crazy chef happy expression",
},
{
src: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-holding-glass_23-2148965393.jpg",
alt: "Medium shot smiley woman",
},
{
src: "http://img.b2bpic.net/free-photo/portrait-senior-man-luxurious-restaurant_23-2150517397.jpg",
alt: "Portrait of senior man",
},
{
src: "http://img.b2bpic.net/free-photo/elegant-couple-spend-time-restaurant_1157-20504.jpg",
alt: "Elegant couple",
},
]}
marqueeItems={[
{
type: "image",
src: "http://img.b2bpic.net/free-photo/rendering-elegant-neoclassical-interior_23-2151059652.jpg",
alt: "Neoclassical interior",
},
{
type: "image",
src: "http://img.b2bpic.net/free-photo/comfortable-dining-room-with-modern-rustic-elegance-generated-by-ai_188544-21418.jpg",
alt: "Rustic dining room",
},
{
type: "image",
src: "http://img.b2bpic.net/free-photo/interior-design-neoclassical-style-with-furnishings-decor_23-2151199327.jpg",
alt: "Elegant decor",
},
{
type: "image",
src: "http://img.b2bpic.net/free-photo/grilled-meat-cutlet-with-sauce-spicy-pepper-zucchini-tomatoes_140725-10844.jpg",
alt: "Grilled meat cutlet",
},
{
type: "image",
src: "http://img.b2bpic.net/free-photo/front-view-delicious-food-concept_23-2148510914.jpg",
alt: "Delicious food concept",
},
]}
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitDoubleCarousel
background={{ variant: "radial-gradient" }}
title="Culinary Excellence at The Golden Fork"
description="Experience fine dining reimagined with seasonal ingredients and world-class service."
leftCarouselItems={[
{ imageSrc: "http://img.b2bpic.net/free-photo/glass-prosecco-with-bottle-around_114579-2141.jpg", imageAlt: "upscale restaurant table setting" },
{ imageSrc: "http://img.b2bpic.net/free-photo/dining-room-beige-color-tones-interior-design_114579-2225.jpg", imageAlt: "restaurant interior warm lighting" },
{ imageSrc: "http://img.b2bpic.net/free-photo/cutlery-near-twig-leaves_23-2147811214.jpg", imageAlt: "Cutlery near twig and leaves" },
{ imageSrc: "http://img.b2bpic.net/free-photo/grilled-vegetables-served-with-lavash-species_114579-2007.jpg", imageAlt: "Grilled vegetables served with lavash and species" },
{ imageSrc: "http://img.b2bpic.net/free-photo/romantic-evening-shared-wine-candlelight-generated-by-ai_188544-13728.jpg", imageAlt: "Romantic evening shared wine and candlelight generated by AI" },
]}
rightCarouselItems={[
{ imageSrc: "http://img.b2bpic.net/free-photo/luxury-meeting-dining-room-table-multiple-chairs_114579-2067.jpg", imageAlt: "restaurant interior warm lighting" },
{ imageSrc: "http://img.b2bpic.net/free-photo/cutting-biscuit-with-whipping-cream-berries-with-cutlery_114579-3648.jpg", imageAlt: "upscale restaurant table setting" },
{ imageSrc: "http://img.b2bpic.net/free-photo/man-embracing-with-woman-restaurant_23-2148016783.jpg", imageAlt: "Man embracing with woman in restaurant" },
{ imageSrc: "http://img.b2bpic.net/free-photo/middle-age-friends-night-having-dinner_23-2149190934.jpg", imageAlt: "Middle age friends at night having dinner" },
{ imageSrc: "http://img.b2bpic.net/free-photo/rendering-elegant-neoclassical-interior_23-2151059653.jpg", imageAlt: "Rendering of elegant neoclassical interior" },
]}
buttons={[{ text: "Book a Table", href: "#contact" }]}
avatars={[
{ src: "http://img.b2bpic.net/free-photo/fashionable-hipster-guy-dressed-denim-shirt-wearing-stylish-glasses_273609-6821.jpg", alt: "Fashionable hipster guy" },
{ src: "http://img.b2bpic.net/free-photo/crazy-chef-happy-expression_1194-1321.jpg", alt: "crazy chef happy expression" },
{ src: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-holding-glass_23-2148965393.jpg", alt: "Medium shot smiley woman" },
{ src: "http://img.b2bpic.net/free-photo/portrait-senior-man-luxurious-restaurant_23-2150517397.jpg", alt: "Portrait of senior man" },
{ src: "http://img.b2bpic.net/free-photo/elegant-couple-spend-time-restaurant_1157-20504.jpg", alt: "Elegant couple" },
]}
marqueeItems={[
{ type: "image", src: "http://img.b2bpic.net/free-photo/rendering-elegant-neoclassical-interior_23-2151059652.jpg", alt: "Neoclassical interior" },
{ type: "image", src: "http://img.b2bpic.net/free-photo/comfortable-dining-room-with-modern-rustic-elegance-generated-by-ai_188544-21418.jpg", alt: "Rustic dining room" },
{ type: "image", src: "http://img.b2bpic.net/free-photo/interior-design-neoclassical-style-with-furnishings-decor_23-2151199327.jpg", alt: "Elegant decor" },
{ type: "image", src: "http://img.b2bpic.net/free-photo/grilled-meat-cutlet-with-sauce-spicy-pepper-zucchini-tomatoes_140725-10844.jpg", alt: "Grilled meat cutlet" },
{ type: "image", src: "http://img.b2bpic.net/free-photo/front-view-delicious-food-concept_23-2148510914.jpg", alt: "Delicious food concept" },
]}
/>
</div>
<div id="about" data-section="about">
<AboutMetric
useInvertedBackground={false}
title="Our Culinary Heritage"
metrics={[
{
icon: Award,
label: "Years Experience",
value: "25+",
},
{
icon: Award,
label: "Awards Won",
value: "15",
},
{
icon: Users,
label: "Satisfied Guests",
value: "50k+",
},
]}
metricsAnimation="slide-up"
/>
</div>
<div id="about" data-section="about">
<AboutMetric
useInvertedBackground={false}
title="Our Culinary Heritage"
metrics={[
{ icon: Award, label: "Years Experience", value: "25+" },
{ icon: Award, label: "Awards Won", value: "15" },
{ icon: Users, label: "Satisfied Guests", value: "50k+" },
]}
metricsAnimation="slide-up"
/>
</div>
<div id="features" data-section="features">
<FeatureCardSix
textboxLayout="split"
useInvertedBackground={false}
features={[
{
title: "Fresh Ingredients",
description: "Sourced daily from local farms.",
imageSrc: "http://img.b2bpic.net/free-photo/frame-with-fresh-vegetables_23-2147681612.jpg",
imageAlt: "fresh organic local ingredients",
},
{
title: "Curated Wine List",
description: "Pairings for every palate.",
imageSrc: "http://img.b2bpic.net/free-photo/wine-glass-bottle_181624-59727.jpg",
imageAlt: "wine pairing glass bottle",
},
{
title: "Exceptional Service",
description: "Attentive, professional staff.",
imageSrc: "http://img.b2bpic.net/free-photo/elegant-wedding-dishes_1157-17840.jpg",
imageAlt: "fine dining service restaurant",
},
]}
title="Why Dine With Us"
description="Excellence in every detail."
/>
</div>
<div id="features" data-section="features">
<FeatureCardSix
textboxLayout="split"
useInvertedBackground={false}
features={[
{ title: "Fresh Ingredients", description: "Sourced daily from local farms.", imageSrc: "http://img.b2bpic.net/free-photo/frame-with-fresh-vegetables_23-2147681612.jpg", imageAlt: "fresh organic local ingredients" },
{ title: "Curated Wine List", description: "Pairings for every palate.", imageSrc: "http://img.b2bpic.net/free-photo/wine-glass-bottle_181624-59727.jpg", imageAlt: "wine pairing glass bottle" },
{ title: "Exceptional Service", description: "Attentive, professional staff.", imageSrc: "http://img.b2bpic.net/free-photo/elegant-wedding-dishes_1157-17840.jpg", imageAlt: "fine dining service restaurant" },
]}
title="Why Dine With Us"
description="Excellence in every detail."
/>
</div>
<div id="menu" data-section="menu">
<ProductCardOne
animationType="slide-up"
textboxLayout="default"
gridVariant="two-columns-alternating-heights"
useInvertedBackground={false}
products={[
{
id: "1",
name: "Ribeye Steak",
price: "$45",
imageSrc: "http://img.b2bpic.net/free-photo/creative-assortment-delicious-food_23-2148949025.jpg",
},
{
id: "2",
name: "Sea Bass",
price: "$38",
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-shot-fusion-food-with-sushi-seasonings-plate-wooden-surface_181624-42994.jpg",
},
{
id: "3",
name: "Truffle Pasta",
price: "$32",
imageSrc: "http://img.b2bpic.net/free-photo/vertical-view-delicious-pasta-meal-with-tomato-meat-green-blue-plate-ice-background_140725-143666.jpg",
},
{
id: "4",
name: "Chocolate Soufflé",
price: "$18",
imageSrc: "http://img.b2bpic.net/free-photo/top-view-delicious-creamy-cake-with-chocolate-raisins-light-dark-floor_140725-136347.jpg",
},
{
id: "5",
name: "Wild Mushroom Risotto",
price: "$28",
imageSrc: "http://img.b2bpic.net/free-photo/risotto-with-mushrooms-coriander-leaves_23-2147925970.jpg",
},
{
id: "6",
name: "Duck Confit",
price: "$40",
imageSrc: "http://img.b2bpic.net/free-photo/duck-breast-steak-white-plate_1203-8926.jpg",
},
]}
title="Our Signature Dishes"
description="Handcrafted culinary masterpieces."
/>
</div>
<div id="menu" data-section="menu">
<ProductCardOne
animationType="slide-up"
textboxLayout="default"
gridVariant="two-columns-alternating-heights"
useInvertedBackground={false}
products={[
{ id: "1", name: "Ribeye Steak", price: "$45", imageSrc: "http://img.b2bpic.net/free-photo/creative-assortment-delicious-food_23-2148949025.jpg" },
{ id: "2", name: "Sea Bass", price: "$38", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-shot-fusion-food-with-sushi-seasonings-plate-wooden-surface_181624-42994.jpg" },
{ id: "3", name: "Truffle Pasta", price: "$32", imageSrc: "http://img.b2bpic.net/free-photo/vertical-view-delicious-pasta-meal-with-tomato-meat-green-blue-plate-ice-background_140725-143666.jpg" },
{ id: "4", name: "Chocolate Soufflé", price: "$18", imageSrc: "http://img.b2bpic.net/free-photo/top-view-delicious-creamy-cake-with-chocolate-raisins-light-dark-floor_140725-136347.jpg" },
{ id: "5", name: "Wild Mushroom Risotto", price: "$28", imageSrc: "http://img.b2bpic.net/free-photo/risotto-with-mushrooms-coriander-leaves_23-2147925970.jpg" },
{ id: "6", name: "Duck Confit", price: "$40", imageSrc: "http://img.b2bpic.net/free-photo/duck-breast-steak-white-plate_1203-8926.jpg" },
]}
title="Our Signature Dishes"
description="Handcrafted culinary masterpieces."
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardOne
animationType="slide-up"
textboxLayout="default"
gridVariant="uniform-all-items-equal"
useInvertedBackground={false}
metrics={[
{
id: "m1",
value: "100%",
title: "Satisfaction",
description: "Quality assurance.",
icon: CheckCircle,
},
{
id: "m2",
value: "200+",
title: "Menu Items",
description: "Diverse culinary options.",
icon: BookOpen,
},
{
id: "m3",
value: "24/7",
title: "Support",
description: "Always ready to serve.",
icon: Clock,
},
]}
title="By The Numbers"
description="Crafting unforgettable memories."
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardOne
animationType="slide-up"
textboxLayout="default"
gridVariant="uniform-all-items-equal"
useInvertedBackground={false}
metrics={[
{ id: "m1", value: "100%", title: "Satisfaction", description: "Quality assurance.", icon: CheckCircle },
{ id: "m2", value: "200+", title: "Menu Items", description: "Diverse culinary options.", icon: BookOpen },
{ id: "m3", value: "24/7", title: "Support", description: "Always ready to serve.", icon: Clock },
]}
title="By The Numbers"
description="Crafting unforgettable memories."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardThirteen
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
testimonials={[
{
id: "t1",
name: "Alice M.",
handle: "@alice",
testimonial: "Exquisite dining experience.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/joyful-young-barber-wearing-uniform-glasses-showing-credit-card-looking-camera-showing-ok-sign-isolated-blue-background_141793-138027.jpg",
},
{
id: "t2",
name: "Bob R.",
handle: "@bob",
testimonial: "The best steak in town.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-luxury-restaurant_23-2150598415.jpg",
},
{
id: "t3",
name: "Clara S.",
handle: "@clara",
testimonial: "Sophisticated and delicious.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-eating-enjoying-fresh-sushi_169016-1395.jpg",
},
{
id: "t4",
name: "David L.",
handle: "@david",
testimonial: "Unforgettable anniversary.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/people-having-dinner-luxurious-restaurants_23-2151081849.jpg",
},
{
id: "t5",
name: "Eve W.",
handle: "@eve",
testimonial: "Amazing wine pairings.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/romantic-woman-man-table_23-2148025325.jpg",
},
]}
showRating={true}
title="Guest Reviews"
description="Hear what our patrons say."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardThirteen
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
testimonials={[
{ id: "t1", name: "Alice M.", handle: "@alice", testimonial: "Exquisite dining experience.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/joyful-young-barber-wearing-uniform-glasses-showing-credit-card-looking-camera-showing-ok-sign-isolated-blue-background_141793-138027.jpg" },
{ id: "t2", name: "Bob R.", handle: "@bob", testimonial: "The best steak in town.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-luxury-restaurant_23-2150598415.jpg" },
{ id: "t3", name: "Clara S.", handle: "@clara", testimonial: "Sophisticated and delicious.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-woman-eating-enjoying-fresh-sushi_169016-1395.jpg" },
{ id: "t4", name: "David L.", handle: "@david", testimonial: "Unforgettable anniversary.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/people-having-dinner-luxurious-restaurants_23-2151081849.jpg" },
{ id: "t5", name: "Eve W.", handle: "@eve", testimonial: "Amazing wine pairings.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/romantic-woman-man-table_23-2148025325.jpg" },
]}
showRating={true}
title="Guest Reviews"
description="Hear what our patrons say."
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitText
useInvertedBackground={false}
faqs={[
{
id: "f1",
title: "Do you accept reservations?",
content: "Yes, booking in advance is recommended.",
},
{
id: "f2",
title: "Is there a dress code?",
content: "Smart casual is preferred.",
},
{
id: "f3",
title: "Do you cater for events?",
content: "Yes, we offer bespoke catering.",
},
]}
sideTitle="Questions?"
sideDescription="We have answers."
faqsAnimation="slide-up"
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitText
useInvertedBackground={false}
faqs={[
{ id: "f1", title: "Do you accept reservations?", content: "Yes, booking in advance is recommended." },
{ id: "f2", title: "Is there a dress code?", content: "Smart casual is preferred." },
{ id: "f3", title: "Do you cater for events?", content: "Yes, we offer bespoke catering." },
]}
sideTitle="Questions?"
sideDescription="We have answers."
faqsAnimation="slide-up"
/>
</div>
<div id="contact" data-section="contact">
<ContactCenter
useInvertedBackground={false}
background={{
variant: "plain",
}}
tag="Contact"
title="Book Your Table"
description="Secure your dining reservation today."
/>
</div>
<div id="contact" data-section="contact">
<ContactCenter
useInvertedBackground={false}
background={{ variant: "plain" }}
tag="Contact"
title="Book Your Table"
description="Secure your dining reservation today."
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoEmphasis
columns={[
{
items: [
{
label: "Menu",
href: "#menu",
},
{
label: "Contact",
href: "#contact",
},
],
},
{
items: [
{
label: "Privacy Policy",
href: "#",
},
{
label: "Terms of Use",
href: "#",
},
],
},
]}
logoText="The Golden Fork"
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoEmphasis
columns={[
{ items: [{ label: "Menu", href: "#menu" }, { label: "Contact", href: "#contact" }] },
{ items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Use", href: "#" }] },
]}
logoText="The Golden Fork"
/>
</div>
</ReactLenis>
</ThemeProvider>
);