266 lines
14 KiB
TypeScript
266 lines
14 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
|
|
import HeroSplitTestimonial from "@/components/sections/hero/HeroSplitTestimonial";
|
|
import MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout";
|
|
import ProductCardFour from "@/components/sections/product/ProductCardFour";
|
|
import FeatureCardTwentySix from "@/components/sections/feature/FeatureCardTwentySix";
|
|
import TestimonialCardTwelve from "@/components/sections/testimonial/TestimonialCardTwelve";
|
|
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
|
|
import ContactText from "@/components/sections/contact/ContactText";
|
|
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
|
|
import { Flame, History, ChefHat, UtensilsCrossed, Star, Award, ArrowRight } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="elastic-effect"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="rounded"
|
|
contentWidth="small"
|
|
sizing="mediumLargeSizeLargeTitles"
|
|
background="none"
|
|
cardStyle="subtle-shadow"
|
|
primaryButtonStyle="flat"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="medium"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingOverlay
|
|
brandName="Zaatar & Zahle"
|
|
navItems={[
|
|
{ name: "Home", id: "hero" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Menu", id: "menu" },
|
|
{ name: "Dishes", id: "dishes" },
|
|
{ name: "Reviews", id: "testimonials" },
|
|
]}
|
|
button={{
|
|
text: "Reserve Table", href: "#contact"
|
|
}}
|
|
className="floating-navbar"
|
|
buttonClassName="reserve-button"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitTestimonial
|
|
title="Welcome to Zaatar & Zahle"
|
|
description="Experience authentic Lebanese cuisine crafted with traditional recipes and the finest Mediterranean ingredients. From aromatic mezze to succulent grilled specialties, every dish celebrates the rich culinary heritage of the Levantine region."
|
|
tag="Authentic Lebanese"
|
|
tagIcon={Flame}
|
|
tagAnimation="slide-up"
|
|
buttons={[
|
|
{ text: "Explore Menu", href: "#menu" },
|
|
{ text: "Reserve Now", href: "#contact" },
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
imageSrc="http://img.b2bpic.net/free-photo/tea-set-with-baklava-jams-dried-fruits_140725-8094.jpg"
|
|
imageAlt="Authentic Lebanese Kitchen"
|
|
mediaAnimation="blur-reveal"
|
|
imagePosition="right"
|
|
background={{ variant: "radial-gradient" }}
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
name: "Sarah Khalil", handle: "Food Critic", testimonial: "The most authentic Lebanese dining experience I've had in years!", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/positive-excited-young-woman-showing-thumbs-up-having-fun_1262-14331.jpg?_wi=1"
|
|
},
|
|
{
|
|
name: "Marcus Reid", handle: "Restaurant Enthusiast", testimonial: "Every dish tells a story of tradition and excellence.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/proud-businessman-with-his-company_1098-2864.jpg?_wi=1"
|
|
},
|
|
]}
|
|
testimonialRotationInterval={5000}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<MetricSplitMediaAbout
|
|
tag="Our Story"
|
|
tagIcon={History}
|
|
tagAnimation="slide-up"
|
|
title="Bringing Levantine Heritage to Your Table"
|
|
description="Zaatar & Zahle is a culinary celebration of Lebanese traditions. Founded by Chef Nassim Khalil, our restaurant honors generations of family recipes while maintaining the highest standards of ingredient quality and preparation. We source directly from trusted Mediterranean suppliers to ensure every bite reflects our commitment to authenticity."
|
|
metrics={[
|
|
{ value: "25+", title: "Years of Culinary Experience" },
|
|
{ value: "100%", title: "Authentic Traditional Recipes" },
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/cheese-plate-with-cheddar-smoked-white-cheese-walnut-grape-honey_140725-229.jpg"
|
|
imageAlt="Restaurant Interior"
|
|
mediaAnimation="slide-up"
|
|
metricsAnimation="slide-up"
|
|
useInvertedBackground={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="dishes" data-section="dishes">
|
|
<ProductCardFour
|
|
title="Signature Dishes"
|
|
description="Handcrafted specialties that define authentic Lebanese cuisine"
|
|
tag="Chef's Selection"
|
|
tagIcon={ChefHat}
|
|
tagAnimation="slide-up"
|
|
products={[
|
|
{
|
|
id: "1", name: "Mixed Mezze Platter", price: "$24.99", variant: "Hummus, Baba Ghanoush, Tabbouleh", imageSrc: "http://img.b2bpic.net/free-photo/top-view-hummus-with-different-vegetables_23-2148562748.jpg?_wi=1", imageAlt: "Mixed Mezze"
|
|
},
|
|
{
|
|
id: "2", name: "Premium Shawarma", price: "$18.99", variant: "Beef or Chicken, Tahini Sauce", imageSrc: "http://img.b2bpic.net/free-photo/top-view-meat-sandwich-sandwich-made-meat-grilled-spit-with-vegetables-dark-blue-desk-sandwich-burger-meal-lunch-meat-photo_140725-64957.jpg?_wi=1", imageAlt: "Shawarma Specialty"
|
|
},
|
|
{
|
|
id: "3", name: "Fresh Tabbouleh Salad", price: "$14.99", variant: "Parsley, Tomato, Bulgur, Lemon", imageSrc: "http://img.b2bpic.net/free-photo/side-view-capital-salad-lettuce-board_140725-13923.jpg?_wi=1", imageAlt: "Tabbouleh Salad"
|
|
},
|
|
{
|
|
id: "4", name: "Fattoush Garden Salad", price: "$15.99", variant: "Mixed Greens, Pita Chips, Tahini", imageSrc: "http://img.b2bpic.net/free-photo/greek-salad-table_140725-7345.jpg?_wi=1", imageAlt: "Fattoush Salad"
|
|
},
|
|
]}
|
|
gridVariant="uniform-all-items-equal"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
buttons={[{ text: "View Full Menu", href: "#menu" }]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="menu" data-section="menu">
|
|
<FeatureCardTwentySix
|
|
title="Culinary Journey"
|
|
description="Explore our complete menu organized by traditional Lebanese categories"
|
|
tag="Full Menu"
|
|
tagIcon={UtensilsCrossed}
|
|
tagAnimation="blur-reveal"
|
|
features={[
|
|
{
|
|
title: "Cold Mezze", description: "Traditional Lebanese appetizers served cold with olive oil and fresh herbs", imageSrc: "http://img.b2bpic.net/free-photo/top-view-hummus-with-different-vegetables_23-2148562748.jpg?_wi=2", imageAlt: "Cold Mezze Selection", buttonIcon: ArrowRight,
|
|
buttonHref: "#contact"
|
|
},
|
|
{
|
|
title: "Hot Mezze", description: "Warm appetizers including fried cheese and roasted vegetables", imageSrc: "http://img.b2bpic.net/free-photo/top-view-meat-sandwich-sandwich-made-meat-grilled-spit-with-vegetables-dark-blue-desk-sandwich-burger-meal-lunch-meat-photo_140725-64957.jpg?_wi=2", imageAlt: "Hot Mezze Specialties", buttonIcon: ArrowRight,
|
|
buttonHref: "#contact"
|
|
},
|
|
{
|
|
title: "Grilled Specialties", description: "Charcoal-grilled meats seasoned with traditional spices and marinades", imageSrc: "http://img.b2bpic.net/free-photo/side-view-capital-salad-lettuce-board_140725-13923.jpg?_wi=2", imageAlt: "Grilled Selection", buttonIcon: ArrowRight,
|
|
buttonHref: "#contact"
|
|
},
|
|
{
|
|
title: "Fresh Salads", description: "Vibrant salads featuring crisp vegetables and authentic dressings", imageSrc: "http://img.b2bpic.net/free-photo/greek-salad-table_140725-7345.jpg?_wi=2", imageAlt: "Fresh Salad Options", buttonIcon: ArrowRight,
|
|
buttonHref: "#contact"
|
|
},
|
|
{
|
|
title: "Desserts & Pastries", description: "Sweet treats including baklava, knafeh, and traditional Lebanese sweets", imageSrc: "http://img.b2bpic.net/free-photo/top-view-hummus-with-different-vegetables_23-2148562748.jpg?_wi=3", imageAlt: "Dessert Selection", buttonIcon: ArrowRight,
|
|
buttonHref: "#contact"
|
|
},
|
|
{
|
|
title: "Beverages", description: "Traditional drinks including fresh juices, coffee, and Lebanese tea", imageSrc: "http://img.b2bpic.net/free-photo/top-view-meat-sandwich-sandwich-made-meat-grilled-spit-with-vegetables-dark-blue-desk-sandwich-burger-meal-lunch-meat-photo_140725-64957.jpg?_wi=3", imageAlt: "Beverage Collection", buttonIcon: ArrowRight,
|
|
buttonHref: "#contact"
|
|
},
|
|
]}
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTwelve
|
|
cardTitle="Join thousands of satisfied diners who celebrate authentic Lebanese flavors with us"
|
|
cardTag="Customer Reviews"
|
|
cardTagIcon={Star}
|
|
cardAnimation="slide-up"
|
|
useInvertedBackground={true}
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Layla Mansour", imageSrc: "http://img.b2bpic.net/free-photo/positive-excited-young-woman-showing-thumbs-up-having-fun_1262-14331.jpg?_wi=2"
|
|
},
|
|
{
|
|
id: "2", name: "Hassan Khalil", imageSrc: "http://img.b2bpic.net/free-photo/proud-businessman-with-his-company_1098-2864.jpg?_wi=2"
|
|
},
|
|
{
|
|
id: "3", name: "Amira Saab", imageSrc: "http://img.b2bpic.net/free-photo/man-presents-girl-ring_1398-4220.jpg"
|
|
},
|
|
{
|
|
id: "4", name: "Rashid Hayek", imageSrc: "http://img.b2bpic.net/free-photo/proud-businessman-with-his-company_1098-2864.jpg?_wi=3"
|
|
},
|
|
{
|
|
id: "5", name: "Nadia Zahab", imageSrc: "http://img.b2bpic.net/free-photo/side-view-friends-eating-restaurant_23-2150491782.jpg"
|
|
},
|
|
{
|
|
id: "6", name: "Ali Wazzan", imageSrc: "http://img.b2bpic.net/free-photo/young-male-holding-glasses-white-shirt-pants-looking-handsome_176474-17167.jpg"
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="social-proof" data-section="social-proof">
|
|
<SocialProofOne
|
|
title="Recognized & Celebrated"
|
|
description="Award-winning restaurant trusted by food enthusiasts and culinary experts worldwide"
|
|
tag="Certified Excellence"
|
|
tagIcon={Award}
|
|
tagAnimation="slide-up"
|
|
names={[
|
|
"Culinary Excellence Award", "Authentic Cuisine Certification", "Five-Star Dining Recognition", "Fresh Ingredients Quality Seal", "Sustainable Restaurant Award", "Family Favorite Award", "Innovation in Cuisine Award"
|
|
]}
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
speed={40}
|
|
showCard={true}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactText
|
|
text="Ready to experience authentic Lebanese cuisine? Make your reservation today and join us for an unforgettable culinary journey through the flavors of the Levantine coast."
|
|
animationType="entrance-slide"
|
|
buttons={[
|
|
{ text: "Reserve Your Table", href: "tel:+1234567890" },
|
|
{ text: "Get Directions", href: "#" },
|
|
]}
|
|
background={{ variant: "gradient-bars" }}
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoEmphasis
|
|
logoText="Zaatar & Zahle"
|
|
columns={[
|
|
{
|
|
items: [
|
|
{ label: "Home", href: "#hero" },
|
|
{ label: "About", href: "#about" },
|
|
{ label: "Menu", href: "#menu" },
|
|
],
|
|
},
|
|
{
|
|
items: [
|
|
{ label: "Dishes", href: "#dishes" },
|
|
{ label: "Reviews", href: "#testimonials" },
|
|
{ label: "Contact", href: "#contact" },
|
|
],
|
|
},
|
|
{
|
|
items: [
|
|
{ label: "Hours: Mon-Sun 11AM-10PM", href: "#" },
|
|
{ label: "Phone: (555) 123-4567", href: "tel:+5551234567" },
|
|
{ label: "Location: Downtown District", href: "#" },
|
|
],
|
|
},
|
|
{
|
|
items: [
|
|
{ label: "Privacy Policy", href: "#" },
|
|
{ label: "Terms of Service", href: "#" },
|
|
{ label: "Contact Us", href: "mailto:info@zaatarandZahle.com" },
|
|
],
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|