443 lines
12 KiB
TypeScript
443 lines
12 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
|
import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
|
|
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
|
import HeroOverlayTestimonial from '@/components/sections/hero/HeroOverlayTestimonial';
|
|
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
|
|
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
|
|
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
|
import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
|
|
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
|
import { Car, Clock, MapPin } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="text-stagger"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="rounded"
|
|
contentWidth="medium"
|
|
sizing="mediumLargeSizeLargeTitles"
|
|
background="aurora"
|
|
cardStyle="gradient-mesh"
|
|
primaryButtonStyle="gradient"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="medium"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingOverlay
|
|
navItems={[
|
|
{
|
|
name: "Home",
|
|
id: "hero",
|
|
},
|
|
{
|
|
name: "About",
|
|
id: "about",
|
|
},
|
|
{
|
|
name: "Menu",
|
|
id: "menu",
|
|
},
|
|
{
|
|
name: "Reservations",
|
|
id: "reservations",
|
|
},
|
|
{
|
|
name: "Events",
|
|
id: "events",
|
|
},
|
|
{
|
|
name: "Gallery",
|
|
id: "gallery",
|
|
},
|
|
{
|
|
name: "Location",
|
|
id: "location",
|
|
},
|
|
{
|
|
name: "Contact",
|
|
id: "contact",
|
|
},
|
|
]}
|
|
brandName="Kladi Cafe"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroOverlayTestimonial
|
|
title="Baghdad's Premier Fine Dining Destination"
|
|
description="Experience unparalleled hospitality and exquisite culinary artistry in the heart of Baghdad."
|
|
buttons={[
|
|
{
|
|
text: "Reserve a Table",
|
|
href: "#reservations",
|
|
},
|
|
{
|
|
text: "Explore Menu",
|
|
href: "#menu",
|
|
},
|
|
]}
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=eet5ru&_wi=1"
|
|
imageAlt="Luxurious Kladi Cafe interior view"
|
|
testimonials={[
|
|
{
|
|
name: "Layla A.",
|
|
handle: "@layla_travels",
|
|
testimonial: "The atmosphere is unmatched in Baghdad. Truly a world-class experience.",
|
|
rating: 5,
|
|
imageSrc: "asset://hero-avatar-1",
|
|
},
|
|
{
|
|
name: "Omar K.",
|
|
handle: "@omar_gourmet",
|
|
testimonial: "Exquisite culinary artistry. The saffron risotto was divine.",
|
|
rating: 5,
|
|
imageSrc: "asset://hero-avatar-2",
|
|
},
|
|
{
|
|
name: "Sara H.",
|
|
handle: "@sara_luxury",
|
|
testimonial: "Perfect for our anniversary. The service was impeccable.",
|
|
rating: 5,
|
|
imageSrc: "asset://hero-avatar-3",
|
|
},
|
|
{
|
|
name: "Zaid M.",
|
|
handle: "@zaid_business",
|
|
testimonial: "The best spot for high-end business dinners in the city.",
|
|
rating: 5,
|
|
imageSrc: "asset://hero-avatar-4",
|
|
},
|
|
{
|
|
name: "Fatima N.",
|
|
handle: "@fatima_cuisine",
|
|
testimonial: "A breath of fresh air in fine dining. Simply exceptional.",
|
|
rating: 5,
|
|
imageSrc: "asset://hero-avatar-5",
|
|
},
|
|
]}
|
|
avatars={[
|
|
{
|
|
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=eet5ru",
|
|
alt: "Customer Review",
|
|
},
|
|
{
|
|
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ieh0v0",
|
|
alt: "Customer Review",
|
|
},
|
|
{
|
|
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=4obed5",
|
|
alt: "Customer Review",
|
|
},
|
|
{
|
|
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=qmuu71",
|
|
alt: "Customer Review",
|
|
},
|
|
{
|
|
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=7lxd51",
|
|
alt: "Customer Review",
|
|
},
|
|
]}
|
|
avatarText="Loved by 1000+ patrons"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<InlineImageSplitTextAbout
|
|
useInvertedBackground={false}
|
|
heading={[
|
|
{
|
|
type: "text",
|
|
content: "The Essence of Luxury Dining",
|
|
},
|
|
{
|
|
type: "image",
|
|
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ieh0v0",
|
|
alt: "Signature Dish",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="menu" data-section="menu">
|
|
<ProductCardTwo
|
|
textboxLayout="split"
|
|
gridVariant="bento-grid"
|
|
useInvertedBackground={false}
|
|
products={[
|
|
{
|
|
id: "1",
|
|
brand: "Starters",
|
|
name: "Saffron Infused Risotto",
|
|
price: "45,000 IQD",
|
|
rating: 5,
|
|
reviewCount: "120",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=4obed5&_wi=1",
|
|
},
|
|
{
|
|
id: "2",
|
|
brand: "Grills",
|
|
name: "Dry Aged Angus Tenderloin",
|
|
price: "85,000 IQD",
|
|
rating: 5,
|
|
reviewCount: "205",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=qmuu71",
|
|
},
|
|
{
|
|
id: "3",
|
|
brand: "Seafood",
|
|
name: "Mediterranean Seabass",
|
|
price: "75,000 IQD",
|
|
rating: 5,
|
|
reviewCount: "98",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=7lxd51",
|
|
},
|
|
{
|
|
id: "4",
|
|
brand: "Desserts",
|
|
name: "Cardamom Crème Brûlée",
|
|
price: "25,000 IQD",
|
|
rating: 5,
|
|
reviewCount: "150",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=zvxyta",
|
|
},
|
|
{
|
|
id: "5",
|
|
brand: "VIP Specials",
|
|
name: "Chef's Tasting Menu",
|
|
price: "150,000 IQD",
|
|
rating: 5,
|
|
reviewCount: "85",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=dx6ft9",
|
|
},
|
|
{
|
|
id: "6",
|
|
brand: "Drinks",
|
|
name: "Signature Gold Latte",
|
|
price: "15,000 IQD",
|
|
rating: 5,
|
|
reviewCount: "300",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=hvc7fy",
|
|
},
|
|
]}
|
|
title="Signature Culinary Collection"
|
|
description="A refined journey through flavors, curated by our expert chefs."
|
|
/>
|
|
</div>
|
|
|
|
<div id="gallery" data-section="gallery">
|
|
<FeatureCardTwelve
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
id: "g1",
|
|
label: "Ambiance",
|
|
title: "Golden Hour Interiors",
|
|
items: [
|
|
"Mood Lighting",
|
|
"Designer Decor",
|
|
"Private Atmosphere",
|
|
],
|
|
},
|
|
{
|
|
id: "g2",
|
|
label: "Hospitality",
|
|
title: "Elite Service Standards",
|
|
items: [
|
|
"Personalized Care",
|
|
"Attentive Staff",
|
|
"Luxury Comfort",
|
|
],
|
|
},
|
|
{
|
|
id: "g3",
|
|
label: "Occasions",
|
|
title: "Bespoke Event Hosting",
|
|
items: [
|
|
"Engagements",
|
|
"Business Dinners",
|
|
"Special Anniversaries",
|
|
],
|
|
},
|
|
]}
|
|
title="Visual Atmosphere"
|
|
description="A glimpse into the luxurious ambiance of Baghdad's finest establishment."
|
|
/>
|
|
</div>
|
|
|
|
<div id="events" data-section="events">
|
|
<PricingCardNine
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
plans={[
|
|
{
|
|
id: "e1",
|
|
title: "Boutique Celebration",
|
|
price: "From 500k IQD",
|
|
period: " per event",
|
|
features: [
|
|
"Decoration Included",
|
|
"Custom Menu",
|
|
"Private Staff",
|
|
],
|
|
button: {
|
|
text: "Book Occasion",
|
|
},
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=eet5ru&_wi=2",
|
|
imageAlt: "luxury restaurant cinematic interior",
|
|
},
|
|
{
|
|
id: "e2",
|
|
title: "Corporate Gala",
|
|
price: "From 1.2M IQD",
|
|
period: " per event",
|
|
features: [
|
|
"AV Equipment",
|
|
"Full Catering",
|
|
"VIP Access",
|
|
],
|
|
button: {
|
|
text: "Inquire Corporate",
|
|
},
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ieh0v0",
|
|
imageAlt: "luxury restaurant cinematic interior",
|
|
},
|
|
{
|
|
id: "e3",
|
|
title: "Engagements",
|
|
price: "Custom Pricing",
|
|
period: " upon request",
|
|
features: [
|
|
"Floral Styling",
|
|
"Music Selection",
|
|
"Private Lounge",
|
|
],
|
|
button: {
|
|
text: "Consult Planner",
|
|
},
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=4obed5&_wi=2",
|
|
imageAlt: "luxury restaurant cinematic interior",
|
|
},
|
|
]}
|
|
title="Host Your Private Event"
|
|
description="Create lasting memories in our exclusive event spaces."
|
|
/>
|
|
</div>
|
|
|
|
<div id="location" data-section="location">
|
|
<MetricCardOne
|
|
textboxLayout="split"
|
|
gridVariant="bento-grid"
|
|
useInvertedBackground={false}
|
|
metrics={[
|
|
{
|
|
id: "m1",
|
|
value: "Baghdad",
|
|
title: "City Centre",
|
|
description: "Located in the heart of Al Mansour",
|
|
icon: MapPin,
|
|
},
|
|
{
|
|
id: "m2",
|
|
value: "12PM-2AM",
|
|
title: "Operating Hours",
|
|
description: "Open Daily for your pleasure",
|
|
icon: Clock,
|
|
},
|
|
{
|
|
id: "m3",
|
|
value: "Valet",
|
|
title: "Parking Available",
|
|
description: "Complimentary service for VIPs",
|
|
icon: Car,
|
|
},
|
|
]}
|
|
title="Find Us in Baghdad"
|
|
description="Centrally located for your convenience."
|
|
/>
|
|
</div>
|
|
|
|
<div id="reservations" data-section="reservations">
|
|
<ContactCTA
|
|
useInvertedBackground={false}
|
|
background={{
|
|
variant: "sparkles-gradient",
|
|
}}
|
|
tag="Secure Your Table"
|
|
title="Private Fine Dining"
|
|
description="Book your exclusive dining experience at Kladi Cafe."
|
|
buttons={[
|
|
{
|
|
text: "Book via WhatsApp",
|
|
href: "https://wa.me/yournumber",
|
|
},
|
|
{
|
|
text: "Confirm Reservation",
|
|
href: "#",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterMedia
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=bxs8fw"
|
|
logoText="KLADI CAFE"
|
|
columns={[
|
|
{
|
|
title: "Navigation",
|
|
items: [
|
|
{
|
|
label: "Menu",
|
|
href: "#menu",
|
|
},
|
|
{
|
|
label: "Reservations",
|
|
href: "#reservations",
|
|
},
|
|
{
|
|
label: "Location",
|
|
href: "#location",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "Legal",
|
|
items: [
|
|
{
|
|
label: "Privacy Policy",
|
|
href: "#",
|
|
},
|
|
{
|
|
label: "Terms of Service",
|
|
href: "#",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "Connect",
|
|
items: [
|
|
{
|
|
label: "Instagram",
|
|
href: "https://instagram.com/kladi_cafe",
|
|
},
|
|
{
|
|
label: "WhatsApp",
|
|
href: "#",
|
|
},
|
|
],
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|