Update src/app/page.tsx
This commit is contained in:
429
src/app/page.tsx
429
src/app/page.tsx
@@ -27,323 +27,134 @@ export default function LandingPage() {
|
||||
headingFontWeight="light"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Menu",
|
||||
id: "menu",
|
||||
},
|
||||
{
|
||||
name: "Our Story",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Book a Table",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="Mozambik Harare"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "Menu", id: "menu" },
|
||||
{ name: "Our Story", id: "about" },
|
||||
{ name: "Book a Table", id: "contact" },
|
||||
]}
|
||||
brandName="Mozambik Harare"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroOverlay
|
||||
title="Flame-Grilled. Fresh. Full of Life."
|
||||
description="Mozambik Restaurant Harare – Taste the coast in every bite."
|
||||
buttons={[
|
||||
{
|
||||
text: "View Menu",
|
||||
href: "#menu",
|
||||
},
|
||||
{
|
||||
text: "Book a Table",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/fried-shrimps-with-green-sauce-table_140725-2118.jpg"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-asian-businesswoman-sitting-table-cafe-drinking-coffee-reading-smartphone-app_1258-199407.jpg",
|
||||
alt: "Happy customer at table",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/close-up-portrait-young-stately-ginger-fellow-stylish-navy-t-shirt-smiling-showing-ok-sign-looking-camera-while-posing-blue-studio-background-human-facial-expressions-sincer_639032-2122.jpg",
|
||||
alt: "Satisfied customer",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/beautiful-woman-smiling_93675-133804.jpg",
|
||||
alt: "Happy guest",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/close-up-smiley-man-talking-phone_23-2148230757.jpg",
|
||||
alt: "Diner smiling",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-smiling-woman-looking-photographer_23-2148339179.jpg",
|
||||
alt: "Delighted visitor",
|
||||
},
|
||||
]}
|
||||
avatarText="Join 5,000+ satisfied guests"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroOverlay
|
||||
title="Flame-Grilled. Fresh. Full of Life."
|
||||
description="Mozambik Restaurant Harare – Taste the coast in every bite."
|
||||
buttons={[{ text: "View Menu", href: "#menu" }, { text: "Book a Table", href: "#contact" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/fried-shrimps-with-green-sauce-table_140725-2118.jpg"
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/portrait-asian-businesswoman-sitting-table-cafe-drinking-coffee-reading-smartphone-app_1258-199407.jpg", alt: "Happy customer at table" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/close-up-portrait-young-stately-ginger-fellow-stylish-navy-t-shirt-smiling-showing-ok-sign-looking-camera-while-posing-blue-studio-background-human-facial-expressions-sincer_639032-2122.jpg", alt: "Satisfied customer" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/beautiful-woman-smiling_93675-133804.jpg", alt: "Happy guest" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/close-up-smiley-man-talking-phone_23-2148230757.jpg", alt: "Diner smiling" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/portrait-smiling-woman-looking-photographer_23-2148339179.jpg", alt: "Delighted visitor" },
|
||||
]}
|
||||
avatarText="Join 5,000+ satisfied guests"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<InlineImageSplitTextAbout
|
||||
useInvertedBackground={false}
|
||||
heading={[
|
||||
{
|
||||
type: "text",
|
||||
content: "Coastal flavours of Mozambique in Harare.",
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
src: "http://img.b2bpic.net/free-photo/fried-shrimps-with-garlic_1339-2480.jpg",
|
||||
alt: "Coastal dish",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<InlineImageSplitTextAbout
|
||||
useInvertedBackground={false}
|
||||
heading={[
|
||||
{ type: "text", content: "Coastal flavours of Mozambique in Harare." },
|
||||
{ type: "image", src: "http://img.b2bpic.net/free-photo/fried-shrimps-with-garlic_1339-2480.jpg", alt: "Coastal dish" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="menu" data-section="menu">
|
||||
<ProductCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "1",
|
||||
brand: "Mozambik",
|
||||
name: "Peri-Peri Prawns",
|
||||
price: "$25",
|
||||
rating: 5,
|
||||
reviewCount: "120",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/fried-wings-cutting-board_23-2147717056.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
brand: "Mozambik",
|
||||
name: "Flame-Grilled Chicken",
|
||||
price: "$18",
|
||||
rating: 5,
|
||||
reviewCount: "200",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-chicken-sauce-with-mashed-potato-corn-broccoli_141793-488.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
brand: "Mozambik",
|
||||
name: "Seafood Platter",
|
||||
price: "$45",
|
||||
rating: 5,
|
||||
reviewCount: "85",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-mussels-white-sauce-spices_23-2148234935.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
brand: "Mozambik",
|
||||
name: "Mozambican Combo",
|
||||
price: "$30",
|
||||
rating: 4,
|
||||
reviewCount: "50",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/kebab-set-table_140725-4777.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
brand: "Mozambik",
|
||||
name: "Grilled Calamari",
|
||||
price: "$22",
|
||||
rating: 5,
|
||||
reviewCount: "60",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/calamari-ring_74190-512.jpg",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
brand: "Mozambik",
|
||||
name: "Portuguese Salad",
|
||||
price: "$12",
|
||||
rating: 4,
|
||||
reviewCount: "40",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-variety-pickles-cucumbers-tomatoes-cabbage-plate_140725-11556.jpg",
|
||||
},
|
||||
]}
|
||||
title="Our Signature Dishes"
|
||||
description="Bold taste, fresh ingredients, crafted for you."
|
||||
/>
|
||||
</div>
|
||||
<div id="menu" data-section="menu">
|
||||
<ProductCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{ id: "1", brand: "Mozambik", name: "Peri-Peri Prawns", price: "$25", rating: 5, reviewCount: "120", imageSrc: "http://img.b2bpic.net/free-photo/fried-wings-cutting-board_23-2147717056.jpg" },
|
||||
{ id: "2", brand: "Mozambik", name: "Flame-Grilled Chicken", price: "$18", rating: 5, reviewCount: "200", imageSrc: "http://img.b2bpic.net/free-photo/top-view-chicken-sauce-with-mashed-potato-corn-broccoli_141793-488.jpg" },
|
||||
{ id: "3", brand: "Mozambik", name: "Seafood Platter", price: "$45", rating: 5, reviewCount: "85", imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-mussels-white-sauce-spices_23-2148234935.jpg" },
|
||||
{ id: "4", brand: "Mozambik", name: "Mozambican Combo", price: "$30", rating: 4, reviewCount: "50", imageSrc: "http://img.b2bpic.net/free-photo/kebab-set-table_140725-4777.jpg" },
|
||||
{ id: "5", brand: "Mozambik", name: "Grilled Calamari", price: "$22", rating: 5, reviewCount: "60", imageSrc: "http://img.b2bpic.net/free-photo/calamari-ring_74190-512.jpg" },
|
||||
{ id: "6", brand: "Mozambik", name: "Portuguese Salad", price: "$12", rating: 4, reviewCount: "40", imageSrc: "http://img.b2bpic.net/free-photo/top-view-variety-pickles-cucumbers-tomatoes-cabbage-plate_140725-11556.jpg" },
|
||||
]}
|
||||
title="Our Signature Dishes"
|
||||
description="Bold taste, fresh ingredients, crafted for you."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardEleven
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "15+",
|
||||
title: "Signature Sauces",
|
||||
description: "Authentic recipes.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/homemade-ketchup-mustard-mayonnaise-sauce_114579-44536.jpg",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "200+",
|
||||
title: "Happy Guests",
|
||||
description: "Every weekend.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/laughing-chatting-afterworks-meeting-with-coworkers-cozy-small-local-cafe_8353-10284.jpg",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "100%",
|
||||
title: "Freshness",
|
||||
description: "Guaranteed quality.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/fresh-market_53876-16596.jpg",
|
||||
},
|
||||
]}
|
||||
title="A Social Dining Experience"
|
||||
description="Where coastal traditions meet Harare's vibrant spirit."
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardEleven
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{ id: "m1", value: "15+", title: "Signature Sauces", description: "Authentic recipes.", imageSrc: "http://img.b2bpic.net/free-photo/homemade-ketchup-mustard-mayonnaise-sauce_114579-44536.jpg" },
|
||||
{ id: "m2", value: "200+", title: "Happy Guests", description: "Every weekend.", imageSrc: "http://img.b2bpic.net/free-photo/laughing-chatting-afterworks-meeting-with-coworkers-cozy-small-local-cafe_8353-10284.jpg" },
|
||||
{ id: "m3", value: "100%", title: "Freshness", description: "Guaranteed quality.", imageSrc: "http://img.b2bpic.net/free-photo/fresh-market_53876-16596.jpg" },
|
||||
]}
|
||||
title="A Social Dining Experience"
|
||||
description="Where coastal traditions meet Harare's vibrant spirit."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFive
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Sarah",
|
||||
date: "2024-05-01",
|
||||
title: "Great atmosphere!",
|
||||
quote: "The prawns were delicious.",
|
||||
tag: "Family",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/trend-young-woman-looking-confident_1298-551.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-people-celebrating-engagement_23-2149212184.jpg",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "John",
|
||||
date: "2024-04-20",
|
||||
title: "Best in Harare.",
|
||||
quote: "Peri-peri chicken is a must.",
|
||||
tag: "Regular",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/young-man-funny-expression_1194-2983.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/family-gathering-with-gay-partners_23-2151077650.jpg",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Emily",
|
||||
date: "2024-03-15",
|
||||
title: "Perfect for groups.",
|
||||
quote: "Love the shared platters.",
|
||||
tag: "Friends",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/girl-sitting-table-holding-mobile-phone-indoors_171337-17096.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/people-drinking-kombucha-gathering_23-2150168580.jpg",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
name: "Mike",
|
||||
date: "2024-02-10",
|
||||
title: "Great vibes.",
|
||||
quote: "Coastal feel in the city.",
|
||||
tag: "Family",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/attractive-happy-young-bearded-man-trendy-hat-texting-messages-via-social-networks-browsing-internet-using-free-wifi-his-electronic-device-coffee-break-restaurant_273609-1934.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/two-caucasian-girls-guy-with-face-diry-with-cake-cream-are-laughting-sitting-around-table-outdoors_8353-10365.jpg",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
name: "Linda",
|
||||
date: "2024-01-05",
|
||||
title: "Outstanding.",
|
||||
quote: "Will come back soon.",
|
||||
tag: "Regular",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-green-eyed-brunette-woman-hair-band-white-t-shirt-against-wall-windows-cacti_197531-17042.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/couples-celebrating-birthday_23-2149891007.jpg",
|
||||
},
|
||||
]}
|
||||
title="Loved by Families"
|
||||
description="What our guests in Harare say about Mozambik."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFive
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "t1", name: "Sarah", date: "2024-05-01", title: "Great atmosphere!", quote: "The prawns were delicious.", tag: "Family", avatarSrc: "http://img.b2bpic.net/free-photo/trend-young-woman-looking-confident_1298-551.jpg", imageSrc: "http://img.b2bpic.net/free-photo/close-up-people-celebrating-engagement_23-2149212184.jpg" },
|
||||
{ id: "t2", name: "John", date: "2024-04-20", title: "Best in Harare.", quote: "Peri-peri chicken is a must.", tag: "Regular", avatarSrc: "http://img.b2bpic.net/free-photo/young-man-funny-expression_1194-2983.jpg", imageSrc: "http://img.b2bpic.net/free-photo/family-gathering-with-gay-partners_23-2151077650.jpg" },
|
||||
{ id: "t3", name: "Emily", date: "2024-03-15", title: "Perfect for groups.", quote: "Love the shared platters.", tag: "Friends", avatarSrc: "http://img.b2bpic.net/free-photo/girl-sitting-table-holding-mobile-phone-indoors_171337-17096.jpg", imageSrc: "http://img.b2bpic.net/free-photo/people-drinking-kombucha-gathering_23-2150168580.jpg" },
|
||||
{ id: "t4", name: "Mike", date: "2024-02-10", title: "Great vibes.", quote: "Coastal feel in the city.", tag: "Family", avatarSrc: "http://img.b2bpic.net/free-photo/attractive-happy-young-bearded-man-trendy-hat-texting-messages-via-social-networks-browsing-internet-using-free-wifi-his-electronic-device-coffee-break-restaurant_273609-1934.jpg", imageSrc: "http://img.b2bpic.net/free-photo/two-caucasian-girls-guy-with-face-diry-with-cake-cream-are-laughting-sitting-around-table-outdoors_8353-10365.jpg" },
|
||||
{ id: "t5", name: "Linda", date: "2024-01-05", title: "Outstanding.", quote: "Will come back soon.", tag: "Regular", avatarSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-green-eyed-brunette-woman-hair-band-white-t-shirt-against-wall-windows-cacti_197531-17042.jpg", imageSrc: "http://img.b2bpic.net/free-photo/couples-celebrating-birthday_23-2149891007.jpg" },
|
||||
]}
|
||||
title="Loved by Families"
|
||||
description="What our guests in Harare say about Mozambik."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Do you take bookings?",
|
||||
content: "Yes, we highly recommend booking.",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Is it family-friendly?",
|
||||
content: "Absolutely, we love families!",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Do you deliver?",
|
||||
content: "Yes, via major platforms.",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/rustic-chandelier-made-bulbs-ropes-dining-table-vintage-kitchen_181624-9173.jpg"
|
||||
title="Questions Answered"
|
||||
description="Everything you need to know."
|
||||
faqsAnimation="slide-up"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "f1", title: "Do you take bookings?", content: "Yes, we highly recommend booking." },
|
||||
{ id: "f2", title: "Is it family-friendly?", content: "Absolutely, we love families!" },
|
||||
{ id: "f3", title: "Do you deliver?", content: "Yes, via major platforms." },
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/rustic-chandelier-made-bulbs-ropes-dining-table-vintage-kitchen_181624-9173.jpg"
|
||||
title="Questions Answered"
|
||||
description="Everything you need to know."
|
||||
faqsAnimation="slide-up"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
tag="Contact"
|
||||
title="Book Your Table"
|
||||
description="Reserve a spot in paradise."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/reserved-table-restaurant_53876-147887.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
tag="Contact"
|
||||
title="Book Your Table"
|
||||
description="Reserve a spot in paradise."
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "plain" }}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/reserved-table-restaurant_53876-147887.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
columns={[
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Home",
|
||||
href: "#hero",
|
||||
},
|
||||
{
|
||||
label: "Menu",
|
||||
href: "#menu",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
{
|
||||
label: "About",
|
||||
href: "#about",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoText="Mozambik Harare"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
logoText="Mozambik Harare"
|
||||
columns={[
|
||||
{ items: [{ label: "Home", href: "#hero" }, { label: "Menu", href: "#menu" }] },
|
||||
{ items: [{ label: "Contact", href: "#contact" }, { label: "About", href: "#about" }] },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user