Update src/app/page.tsx

This commit is contained in:
2026-04-19 04:41:33 +00:00
parent 8e57c5cb9b
commit 4d2bdb0b49

View File

@@ -16,367 +16,169 @@ import TextAbout from '@/components/sections/about/TextAbout';
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="text-shift"
defaultTextAnimation="entrance-slide"
borderRadius="pill"
defaultButtonVariant="text-shift"
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">
<NavbarStyleCentered
navItems={[
{
name: "Home",
id: "hero",
},
{
name: "About",
id: "about",
},
{
name: "Menu",
id: "menu",
},
{
name: "Contact",
id: "contact",
},
]}
brandName="Saivali Kebab & Cafe"
/>
</div>
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={[
{ name: "Home", id: "hero" },
{ name: "About", id: "about" },
{ name: "Menu", id: "menu" },
{ name: "Contact", id: "contact" },
]}
brandName="Saivali Kebab & Cafe"
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboard
background={{
variant: "gradient-bars",
}}
title="Authentic Flavors in the Heart of Saivali"
description="Experience the perfect blend of traditional kebabs and cozy cafe vibes. Fresh ingredients, handmade recipes, and a welcoming atmosphere for everyone."
buttons={[
{
text: "View Menu",
href: "#menu",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/top-view-food-banquet_23-2149893455.jpg"
imageAlt="Authentic Kebab and Cafe spread"
mediaAnimation="slide-up"
avatars={[
{
src: "http://img.b2bpic.net/free-photo/appetizer-set-with-salads-olives-pickles-chopped-beetroot-tomatoes-cheese-yogurt_140725-8341.jpg",
alt: "Customer profile 1",
},
{
src: "http://img.b2bpic.net/free-photo/traditional-kebab-set-top-view_140725-5551.jpg",
alt: "Customer profile 2",
},
{
src: "http://img.b2bpic.net/free-photo/azeri-set-mangal-cheese-vegetables-olives-pickles-top-view_141793-2322.jpg",
alt: "Customer profile 3",
},
{
src: "http://img.b2bpic.net/free-photo/ramadan-celebration-with-delicious-food_23-2151404326.jpg",
alt: "Customer profile 4",
},
{
src: "http://img.b2bpic.net/free-photo/delicious-grilled-chicken-wrap_123827-36145.jpg",
alt: "Customer profile 5",
},
]}
avatarText="Loved by our locals"
marqueeItems={[
{
type: "image",
src: "http://img.b2bpic.net/free-photo/smiley-women-having-coffee-meeting_23-2148817110.jpg",
alt: "Cafe icon",
},
{
type: "text",
text: "Freshly Grilled",
},
{
type: "image",
src: "http://img.b2bpic.net/free-photo/people-looking-day-menu_52683-113115.jpg",
alt: "Menu icon",
},
{
type: "text",
text: "Locally Sourced",
},
{
type: "image",
src: "http://img.b2bpic.net/free-photo/people-drinking-coffee-spacious-cafeteria_23-2150424007.jpg",
alt: "Coffee icon",
},
]}
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboard
background={{ variant: "gradient-bars" }}
title="Authentic Flavors in the Heart of Saivali"
description="Experience the perfect blend of traditional kebabs and cozy cafe vibes. Fresh ingredients, handmade recipes, and a welcoming atmosphere for everyone."
buttons={[{ text: "View Menu", href: "#menu" }]}
imageSrc="http://img.b2bpic.net/free-photo/top-view-food-banquet_23-2149893455.jpg"
imageAlt="Authentic Kebab and Cafe spread"
mediaAnimation="slide-up"
avatars={[
{ src: "http://img.b2bpic.net/free-photo/appetizer-set-with-salads-olives-pickles-chopped-beetroot-tomatoes-cheese-yogurt_140725-8341.jpg", alt: "Customer profile 1" },
{ src: "http://img.b2bpic.net/free-photo/traditional-kebab-set-top-view_140725-5551.jpg", alt: "Customer profile 2" },
{ src: "http://img.b2bpic.net/free-photo/azeri-set-mangal-cheese-vegetables-olives-pickles-top-view_141793-2322.jpg", alt: "Customer profile 3" },
{ src: "http://img.b2bpic.net/free-photo/ramadan-celebration-with-delicious-food_23-2151404326.jpg", alt: "Customer profile 4" },
{ src: "http://img.b2bpic.net/free-photo/delicious-grilled-chicken-wrap_123827-36145.jpg", alt: "Customer profile 5" },
]}
avatarText="Loved by our locals"
marqueeItems={[
{ type: "image", src: "http://img.b2bpic.net/free-photo/smiley-women-having-coffee-meeting_23-2148817110.jpg", alt: "Cafe icon" },
{ type: "text", text: "Freshly Grilled" },
{ type: "image", src: "http://img.b2bpic.net/free-photo/people-looking-day-menu_52683-113115.jpg", alt: "Menu icon" },
{ type: "text", text: "Locally Sourced" },
{ type: "image", src: "http://img.b2bpic.net/free-photo/people-drinking-coffee-spacious-cafeteria_23-2150424007.jpg", alt: "Coffee icon" },
]}
/>
</div>
<div id="about" data-section="about">
<TextAbout
useInvertedBackground={false}
title="Our Passion for Local Freshness"
buttons={[
{
text: "Learn More",
href: "#",
},
]}
/>
</div>
<div id="about" data-section="about">
<TextAbout
useInvertedBackground={false}
title="Our Passion for Local Freshness"
buttons={[{ text: "Learn More", href: "#" }]}
/>
</div>
<div id="menu" data-section="menu">
<ProductCardOne
animationType="slide-up"
textboxLayout="split-description"
gridVariant="three-columns-all-equal-width"
useInvertedBackground={false}
products={[
{
id: "1",
name: "Classic Kebab Wrap",
price: "$9.50",
imageSrc: "http://img.b2bpic.net/free-photo/tortilla-wrap-with-falafel-fresh-salad-vegan-tacos-vegetarian-healthy-food_2829-14400.jpg",
},
{
id: "2",
name: "Grilled Meat Platter",
price: "$15.00",
imageSrc: "http://img.b2bpic.net/free-photo/fried-meat-vegetables-stick_140725-1268.jpg",
},
{
id: "3",
name: "Traditional Hummus",
price: "$6.00",
imageSrc: "http://img.b2bpic.net/free-photo/steak-potato-zuccini-eggplant-pepper-side-view_141793-2482.jpg",
},
{
id: "4",
name: "Fresh Salad Bowl",
price: "$8.50",
imageSrc: "http://img.b2bpic.net/free-photo/kebab-wrap-with-meat-vegetables-plate_23-2148632649.jpg",
},
{
id: "5",
name: "Falafel Plate",
price: "$11.00",
imageSrc: "http://img.b2bpic.net/free-photo/delicious-grilled-chicken-wrap_123827-36140.jpg",
},
{
id: "6",
name: "Vegetable Skewers",
price: "$9.00",
imageSrc: "http://img.b2bpic.net/free-photo/tortilla-with-chicken-bell-peppers_2829-8661.jpg",
},
]}
title="Freshly Prepared Daily"
/>
</div>
<div id="menu" data-section="menu">
<ProductCardOne
animationType="slide-up"
textboxLayout="split-description"
gridVariant="three-columns-all-equal-width"
useInvertedBackground={false}
description="Our curated selection of fresh, authentic dishes prepared daily with locally sourced ingredients."
products={[
{ id: "1", name: "Classic Kebab Wrap", price: "$9.50", imageSrc: "http://img.b2bpic.net/free-photo/tortilla-wrap-with-falafel-fresh-salad-vegan-tacos-vegetarian-healthy-food_2829-14400.jpg" },
{ id: "2", name: "Grilled Meat Platter", price: "$15.00", imageSrc: "http://img.b2bpic.net/free-photo/fried-meat-vegetables-stick_140725-1268.jpg" },
{ id: "3", name: "Traditional Hummus", price: "$6.00", imageSrc: "http://img.b2bpic.net/free-photo/steak-potato-zuccini-eggplant-pepper-side-view_141793-2482.jpg" },
{ id: "4", name: "Fresh Salad Bowl", price: "$8.50", imageSrc: "http://img.b2bpic.net/free-photo/kebab-wrap-with-meat-vegetables-plate_23-2148632649.jpg" },
{ id: "5", name: "Falafel Plate", price: "$11.00", imageSrc: "http://img.b2bpic.net/free-photo/delicious-grilled-chicken-wrap_123827-36140.jpg" },
{ id: "6", name: "Vegetable Skewers", price: "$9.00", imageSrc: "http://img.b2bpic.net/free-photo/tortilla-with-chicken-bell-peppers_2829-8661.jpg" },
]}
title="Freshly Prepared Daily"
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardTwo
animationType="slide-up"
textboxLayout="split-description"
gridVariant="bento-grid"
useInvertedBackground={false}
metrics={[
{
id: "m1",
value: "10k+",
description: "Satisfied Customers",
},
{
id: "m2",
value: "5+",
description: "Years in Saivali",
},
{
id: "m3",
value: "20+",
description: "Fresh Menu Items",
},
]}
title="Serving Smiles Daily"
description="Building a community through great food and memories."
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardTwo
animationType="slide-up"
textboxLayout="split-description"
gridVariant="bento-grid"
useInvertedBackground={false}
metrics={[
{ id: "m1", value: "10k+", description: "Satisfied Customers" },
{ id: "m2", value: "5+", description: "Years in Saivali" },
{ id: "m3", value: "20+", description: "Fresh Menu Items" },
]}
title="Serving Smiles Daily"
description="Building a community through great food and memories."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardSixteen
animationType="slide-up"
textboxLayout="split-description"
useInvertedBackground={false}
testimonials={[
{
id: "1",
name: "Alex R.",
role: "Local Resident",
company: "Saivali",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-with-kebab_23-2148773545.jpg",
},
{
id: "2",
name: "Sarah M.",
role: "Food Blogger",
company: "Saivali",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/couple-having-date-together-luxurious-restaurant_23-2150517424.jpg",
},
{
id: "3",
name: "David L.",
role: "Teacher",
company: "Saivali",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/roommates-spending-time-together_23-2149359320.jpg",
},
{
id: "4",
name: "Elena K.",
role: "Designer",
company: "Saivali",
rating: 4,
imageSrc: "http://img.b2bpic.net/free-photo/woman-eating-seafood-dish-with-salmon_23-2150463267.jpg",
},
{
id: "5",
name: "Mark S.",
role: "Regular",
company: "Saivali",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/adult-enjoying-cocktail_52683-107593.jpg",
},
]}
kpiItems={[
{
value: "4.9/5",
label: "Google Rating",
},
{
value: "1.2k+",
label: "Local Reviews",
},
{
value: "98%",
label: "Freshness Rate",
},
]}
title="What Our Neighbors Say"
description="See why Saivali keeps coming back."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardSixteen
animationType="slide-up"
textboxLayout="split-description"
useInvertedBackground={false}
testimonials={[
{ id: "1", name: "Alex R.", role: "Local Resident", company: "Saivali", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-with-kebab_23-2148773545.jpg" },
{ id: "2", name: "Sarah M.", role: "Food Blogger", company: "Saivali", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/couple-having-date-together-luxurious-restaurant_23-2150517424.jpg" },
{ id: "3", name: "David L.", role: "Teacher", company: "Saivali", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/roommates-spending-time-together_23-2149359320.jpg" },
{ id: "4", name: "Elena K.", role: "Designer", company: "Saivali", rating: 4, imageSrc: "http://img.b2bpic.net/free-photo/woman-eating-seafood-dish-with-salmon_23-2150463267.jpg" },
{ id: "5", name: "Mark S.", role: "Regular", company: "Saivali", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/adult-enjoying-cocktail_52683-107593.jpg" },
]}
kpiItems={[
{ value: "4.9/5", label: "Google Rating" },
{ value: "1.2k+", label: "Local Reviews" },
{ value: "98%", label: "Freshness Rate" },
]}
title="What Our Neighbors Say"
description="See why Saivali keeps coming back."
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitText
useInvertedBackground={false}
faqs={[
{
id: "f1",
title: "Do you offer delivery?",
content: "Yes, we deliver across all of Saivali.",
},
{
id: "f2",
title: "Are there vegan options?",
content: "Absolutely! Try our fresh falafel or salads.",
},
{
id: "f3",
title: "Is the meat Halal?",
content: "Yes, all our meat selections are certified Halal.",
},
]}
sideTitle="Frequently Asked Questions"
faqsAnimation="slide-up"
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitText
useInvertedBackground={false}
faqs={[
{ id: "f1", title: "Do you offer delivery?", content: "Yes, we deliver across all of Saivali." },
{ id: "f2", title: "Are there vegan options?", content: "Absolutely! Try our fresh falafel or salads." },
{ id: "f3", title: "Is the meat Halal?", content: "Yes, all our meat selections are certified Halal." },
]}
sideTitle="Frequently Asked Questions"
faqsAnimation="slide-up"
/>
</div>
<div id="socialProof" data-section="socialProof">
<SocialProofOne
textboxLayout="split-description"
useInvertedBackground={false}
names={[
"Delivery App",
"City Guide",
"Local Press",
"Business Chamber",
"Food Assoc",
"City Awards",
"Tourism Board",
]}
title="Proudly Serving Saivali"
description="Recognized by local organizations for our commitment to quality."
/>
</div>
<div id="socialProof" data-section="socialProof">
<SocialProofOne
textboxLayout="split-description"
useInvertedBackground={false}
names={["Delivery App", "City Guide", "Local Press", "Business Chamber", "Food Assoc", "City Awards", "Tourism Board"]}
title="Proudly Serving Saivali"
description="Recognized by local organizations for our commitment to quality."
/>
</div>
<div id="contact" data-section="contact">
<ContactSplitForm
useInvertedBackground={false}
title="Visit or Get in Touch"
description="Have questions or want to place a catering order?"
inputs={[
{
name: "name",
type: "text",
placeholder: "Name",
required: true,
},
{
name: "email",
type: "email",
placeholder: "Email",
required: true,
},
]}
textarea={{
name: "message",
placeholder: "Your message here...",
rows: 4,
required: true,
}}
imageSrc="http://img.b2bpic.net/free-photo/young-woman-new-york-city-daytime_23-2149488519.jpg"
/>
</div>
<div id="contact" data-section="contact">
<ContactSplitForm
useInvertedBackground={false}
title="Visit or Get in Touch"
description="Have questions or want to place a catering order?"
inputs={[
{ name: "name", type: "text", placeholder: "Name", required: true },
{ name: "email", type: "email", placeholder: "Email", required: true },
]}
textarea={{ name: "message", placeholder: "Your message here...", rows: 4, required: true }}
imageSrc="http://img.b2bpic.net/free-photo/young-woman-new-york-city-daytime_23-2149488519.jpg"
/>
</div>
<div id="footer" data-section="footer">
<FooterSimple
columns={[
{
title: "Quick Links",
items: [
{
label: "Menu",
href: "#menu",
},
{
label: "About",
href: "#about",
},
{
label: "Contact",
href: "#contact",
},
],
},
{
title: "Legal",
items: [
{
label: "Privacy Policy",
href: "#",
},
{
label: "Terms of Service",
href: "#",
},
],
},
]}
bottomLeftText="© 2024 Saivali Kebab & Cafe"
bottomRightText="All rights reserved."
/>
</div>
<div id="footer" data-section="footer">
<FooterSimple
columns={[
{ title: "Quick Links", items: [{ label: "Menu", href: "#menu" }, { label: "About", href: "#about" }, { label: "Contact", href: "#contact" }] },
{ title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }] },
]}
bottomLeftText="© 2024 Saivali Kebab & Cafe"
bottomRightText="All rights reserved."
/>
</div>
</ReactLenis>
</ThemeProvider>
);