Update src/app/page.tsx
This commit is contained in:
460
src/app/page.tsx
460
src/app/page.tsx
@@ -19,337 +19,155 @@ export default function LandingPage() {
|
||||
defaultButtonVariant="directional-hover"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{
|
||||
name: "Menu",
|
||||
id: "menu",
|
||||
},
|
||||
{
|
||||
name: "Book Table",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="The Urban Grill"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{ name: "Menu", id: "menu" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="The Urban Grill"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitKpi
|
||||
background={{
|
||||
variant: "radial-gradient",
|
||||
}}
|
||||
title="Exquisite Flavors, Unforgettable Memories"
|
||||
description="Experience modern dining in the heart of the city. Open daily for lunch and dinner."
|
||||
kpis={[
|
||||
{
|
||||
value: "100+",
|
||||
label: "Unique Recipes",
|
||||
},
|
||||
{
|
||||
value: "5k+",
|
||||
label: "Satisfied Guests",
|
||||
},
|
||||
{
|
||||
value: "12",
|
||||
label: "Years Excellence",
|
||||
},
|
||||
]}
|
||||
enableKpiAnimation={true}
|
||||
buttons={[
|
||||
{
|
||||
text: "View Full Menu",
|
||||
href: "#menu",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/grey-painted-fancy-restaurant-with-empty-dinner-table_140725-8730.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/high-angle-shot-table-with-elegant-setting-restaurant-hall-evening_181624-24706.jpg",
|
||||
alt: "Diner 1",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/grey-painted-fancy-restaurant-with-empty-dinner-table_140725-8729.jpg",
|
||||
alt: "Diner 2",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/restaurant-with-red-carpet-floor-tables-chairs_140725-8025.jpg",
|
||||
alt: "Diner 3",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/decorated-wedding-reception-venue-with-view-sea-through-windows_637285-1001.jpg",
|
||||
alt: "Diner 4",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/front-view-delicious-food-concept_23-2148510924.jpg",
|
||||
alt: "Diner 5",
|
||||
},
|
||||
]}
|
||||
avatarText="Join 5,000+ satisfied guests"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "Fresh Ingredients",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Sustainable Sourcing",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Modern Techniques",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Exceptional Service",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Urban Atmosphere",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitKpi
|
||||
background={{ variant: "radial-gradient" }}
|
||||
title="Exquisite Flavors, Unforgettable Memories"
|
||||
description="Experience modern dining in the heart of the city. Open daily for lunch and dinner."
|
||||
kpis={[
|
||||
{ value: "100+", label: "Unique Recipes" },
|
||||
{ value: "5k+", label: "Satisfied Guests" },
|
||||
{ value: "12", label: "Years Excellence" },
|
||||
]}
|
||||
enableKpiAnimation={true}
|
||||
buttons={[{ text: "View Full Menu", href: "#menu" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/grey-painted-fancy-restaurant-with-empty-dinner-table_140725-8730.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/high-angle-shot-table-with-elegant-setting-restaurant-hall-evening_181624-24706.jpg", alt: "Diner 1" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/grey-painted-fancy-restaurant-with-empty-dinner-table_140725-8729.jpg", alt: "Diner 2" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/restaurant-with-red-carpet-floor-tables-chairs_140725-8025.jpg", alt: "Diner 3" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/decorated-wedding-reception-venue-with-view-sea-through-windows_637285-1001.jpg", alt: "Diner 4" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/front-view-delicious-food-concept_23-2148510924.jpg", alt: "Diner 5" },
|
||||
]}
|
||||
avatarText="Join 5,000+ satisfied guests"
|
||||
marqueeItems={[
|
||||
{ type: "text", text: "Fresh Ingredients" },
|
||||
{ type: "text", text: "Sustainable Sourcing" },
|
||||
{ type: "text", text: "Modern Techniques" },
|
||||
{ type: "text", text: "Exceptional Service" },
|
||||
{ type: "text", text: "Urban Atmosphere" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="menu" data-section="menu">
|
||||
<ProductCardFour
|
||||
animationType="slide-up"
|
||||
textboxLayout="split-description"
|
||||
gridVariant="asymmetric-60-wide-40-narrow"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "Signature Steak",
|
||||
price: "$48",
|
||||
variant: "Meat",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/gourmet-seared-duck-breast-with-roasted-vegetables-rich-sauce_84443-72273.jpg",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
name: "Truffle Pasta",
|
||||
price: "$32",
|
||||
variant: "Vegetarian",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-fried-meat-sauce-with-cabbage-green-onions_141793-4909.jpg",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
name: "Seared Salmon",
|
||||
price: "$36",
|
||||
variant: "Seafood",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/grilled-salmon-steak_1203-2300.jpg",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
name: "Roasted Asparagus",
|
||||
price: "$12",
|
||||
variant: "Side",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/delicious-green-asparagus-sliced-smoked-salmon-rustic-plate_1150-42437.jpg",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
name: "Garlic Fries",
|
||||
price: "$10",
|
||||
variant: "Side",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/fried-meatball-with-topped-with-white-cheese-with-herbs_141793-1185.jpg",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
name: "House Salad",
|
||||
price: "$14",
|
||||
variant: "Starter",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/vegetarian-dish-with-tagliatelle-mushrooms_2829-14127.jpg",
|
||||
},
|
||||
]}
|
||||
title="Our Specialties"
|
||||
description="Hand-picked ingredients for an authentic urban dining experience."
|
||||
/>
|
||||
</div>
|
||||
<div id="menu" data-section="menu">
|
||||
<ProductCardFour
|
||||
animationType="slide-up"
|
||||
textboxLayout="split-description"
|
||||
gridVariant="asymmetric-60-wide-40-narrow"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{ id: "p1", name: "Signature Steak", price: "$48", variant: "Meat", imageSrc: "http://img.b2bpic.net/free-photo/gourmet-seared-duck-breast-with-roasted-vegetables-rich-sauce_84443-72273.jpg" },
|
||||
{ id: "p2", name: "Truffle Pasta", price: "$32", variant: "Vegetarian", imageSrc: "http://img.b2bpic.net/free-photo/side-view-fried-meat-sauce-with-cabbage-green-onions_141793-4909.jpg" },
|
||||
{ id: "p3", name: "Seared Salmon", price: "$36", variant: "Seafood", imageSrc: "http://img.b2bpic.net/free-photo/grilled-salmon-steak_1203-2300.jpg" },
|
||||
{ id: "p4", name: "Roasted Asparagus", price: "$12", variant: "Side", imageSrc: "http://img.b2bpic.net/free-photo/delicious-green-asparagus-sliced-smoked-salmon-rustic-plate_1150-42437.jpg" },
|
||||
{ id: "p5", name: "Garlic Fries", price: "$10", variant: "Side", imageSrc: "http://img.b2bpic.net/free-photo/fried-meatball-with-topped-with-white-cheese-with-herbs_141793-1185.jpg" },
|
||||
{ id: "p6", name: "House Salad", price: "$14", variant: "Starter", imageSrc: "http://img.b2bpic.net/free-photo/vegetarian-dish-with-tagliatelle-mushrooms_2829-14127.jpg" },
|
||||
]}
|
||||
title="Our Specialties"
|
||||
description="Hand-picked ingredients for an authentic urban dining experience."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<InlineImageSplitTextAbout
|
||||
useInvertedBackground={false}
|
||||
heading={[
|
||||
{
|
||||
type: "text",
|
||||
content: "Crafting Modern Culinary Art",
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
src: "http://img.b2bpic.net/free-photo/high-angle-chef-plating-meal_23-2148794096.jpg",
|
||||
alt: "Kitchen",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<InlineImageSplitTextAbout
|
||||
useInvertedBackground={false}
|
||||
heading={[
|
||||
{ type: "text", content: "Crafting Modern Culinary Art" },
|
||||
{ type: "image", src: "http://img.b2bpic.net/free-photo/high-angle-chef-plating-meal_23-2148794096.jpg", alt: "Kitchen" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="split-description"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Sarah J.",
|
||||
role: "Food Critic",
|
||||
company: "Urban Daily",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-happy-friends-table_23-2149213365.jpg",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Mark D.",
|
||||
role: "Regular",
|
||||
company: "Local Resident",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-curly-haired-woman-sits-outdoors-eats-delicious-sandwich-looks-gladfully-away-prefers-junk-food-dressed-casual-clothes-has-lunch-break-after-strolling-city-people-lifestyle-nutrition_273609-59180.jpg",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Elena R.",
|
||||
role: "Visitor",
|
||||
company: "Tourist",
|
||||
rating: 4,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/couple-having-date-together-luxurious-restaurant_23-2150517442.jpg",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
name: "James L.",
|
||||
role: "Chef",
|
||||
company: "Foodies Inc",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/gorgeous-smiling-blonde-fashion-model-sits-white-suit-soft-armchair_8353-5476.jpg",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
name: "Linda M.",
|
||||
role: "Food Blogger",
|
||||
company: "Dine In",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/low-angle-friends-shaking-hands_23-2148395404.jpg",
|
||||
},
|
||||
]}
|
||||
title="What Guests Say"
|
||||
description="Authentic reviews from our community."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="split-description"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "t1", name: "Sarah J.", role: "Food Critic", company: "Urban Daily", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/close-up-happy-friends-table_23-2149213365.jpg" },
|
||||
{ id: "t2", name: "Mark D.", role: "Regular", company: "Local Resident", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/happy-curly-haired-woman-sits-outdoors-eats-delicious-sandwich-looks-gladfully-away-prefers-junk-food-dressed-casual-clothes-has-lunch-break-after-strolling-city-people-lifestyle-nutrition_273609-59180.jpg" },
|
||||
{ id: "t3", name: "Elena R.", role: "Visitor", company: "Tourist", rating: 4, imageSrc: "http://img.b2bpic.net/free-photo/couple-having-date-together-luxurious-restaurant_23-2150517442.jpg" },
|
||||
{ id: "t4", name: "James L.", role: "Chef", company: "Foodies Inc", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/gorgeous-smiling-blonde-fashion-model-sits-white-suit-soft-armchair_8353-5476.jpg" },
|
||||
{ id: "t5", name: "Linda M.", role: "Food Blogger", company: "Dine In", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/low-angle-friends-shaking-hands_23-2148395404.jpg" },
|
||||
]}
|
||||
title="What Guests Say"
|
||||
description="Authentic reviews from our community."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="split-description"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "15",
|
||||
title: "Head Chefs",
|
||||
description: "Expert culinary team",
|
||||
icon: Flame,
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "24/7",
|
||||
title: "Service Prep",
|
||||
description: "Continuous quality check",
|
||||
icon: Clock,
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "98%",
|
||||
title: "Guest Delight",
|
||||
description: "Our highest KPI",
|
||||
icon: Heart,
|
||||
},
|
||||
]}
|
||||
title="Serving Excellence Daily"
|
||||
description="Our passion drives consistent high-quality dining."
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="split-description"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{ id: "m1", value: "15", title: "Head Chefs", description: "Expert culinary team", icon: Flame },
|
||||
{ id: "m2", value: "24/7", title: "Service Prep", description: "Continuous quality check", icon: Clock },
|
||||
{ id: "m3", value: "98%", title: "Guest Delight", description: "Our highest KPI", icon: Heart },
|
||||
]}
|
||||
title="Serving Excellence Daily"
|
||||
description="Our passion drives consistent high-quality dining."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqBase
|
||||
textboxLayout="split-description"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Do I need a reservation?",
|
||||
content: "Yes, we highly recommend booking in advance, especially during weekends.",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Are there vegetarian options?",
|
||||
content: "Absolutely, our menu includes curated plant-based pasta dishes.",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Is parking available?",
|
||||
content: "Valet parking is available at the front entrance for your convenience.",
|
||||
},
|
||||
]}
|
||||
title="Dining Queries"
|
||||
description="Everything you need to know."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqBase
|
||||
textboxLayout="split-description"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "f1", title: "Do I need a reservation?", content: "Yes, we highly recommend booking in advance, especially during weekends." },
|
||||
{ id: "f2", title: "Are there vegetarian options?", content: "Absolutely, our menu includes curated plant-based pasta dishes." },
|
||||
{ id: "f3", title: "Is parking available?", content: "Valet parking is available at the front entrance for your convenience." },
|
||||
]}
|
||||
title="Dining Queries"
|
||||
description="Everything you need to know."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
tag="Reserve Now"
|
||||
title="Ready to dine with us?"
|
||||
description="Book a table at 123 Flavor Street. Open daily: 11:00 AM - 10:00 PM."
|
||||
buttons={[
|
||||
{
|
||||
text: "Book Now",
|
||||
href: "#",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "plain" }}
|
||||
tag="Reserve Now"
|
||||
title="Ready to dine with us?"
|
||||
description="Book a table at 123 Flavor Street. Open daily: 11:00 AM - 10:00 PM."
|
||||
buttons={[{ text: "Book Now", href: "#" }]}
|
||||
/>
|
||||
</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 Service",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoText="The Urban Grill"
|
||||
/>
|
||||
</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 Service", href: "#" }] },
|
||||
]}
|
||||
logoText="The Urban Grill"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user