267 lines
14 KiB
TypeScript
267 lines
14 KiB
TypeScript
"use client";
|
||
|
||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||
import ReactLenis from "lenis/react";
|
||
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
||
import FaqBase from '@/components/sections/faq/FaqBase';
|
||
import FeatureBento from '@/components/sections/feature/FeatureBento';
|
||
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
||
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
|
||
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
|
||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
||
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
|
||
import { Car, Star, Users, Smile } from "lucide-react";
|
||
|
||
export default function LandingPage() {
|
||
return (
|
||
<ThemeProvider
|
||
defaultButtonVariant="directional-hover"
|
||
defaultTextAnimation="reveal-blur"
|
||
borderRadius="rounded"
|
||
contentWidth="mediumLarge"
|
||
sizing="largeSmallSizeMediumTitles"
|
||
background="grid"
|
||
cardStyle="gradient-bordered"
|
||
primaryButtonStyle="shadow"
|
||
secondaryButtonStyle="layered"
|
||
headingFontWeight="extrabold"
|
||
>
|
||
<ReactLenis root>
|
||
<div id="nav" data-section="nav">
|
||
<NavbarStyleCentered
|
||
navItems={[
|
||
{
|
||
name: "Home", id: "hero"},
|
||
{
|
||
name: "Menu", id: "menu"},
|
||
{
|
||
name: "About", id: "about"},
|
||
{
|
||
name: "Reviews", id: "reviews"},
|
||
{
|
||
name: "Contact", id: "contact"},
|
||
]}
|
||
button={{
|
||
text: "Order Online", href: "#"}}
|
||
brandName="Creme & Butter"
|
||
/>
|
||
</div>
|
||
|
||
<div id="hero" data-section="hero">
|
||
<HeroBillboardRotatedCarousel
|
||
background={{
|
||
variant: "radial-gradient"}}
|
||
title="Experience Exquisite Flavors at Creme & Butter"
|
||
description="Discover a delightful blend of artisanal coffee, delectable pastries, and savory dishes in the heart of West Walk, Doha. We're open until 11 PM daily."
|
||
tag="Premium Coffee & Bites"
|
||
buttons={[
|
||
{
|
||
text: "View Menu", href: "#menu"},
|
||
{
|
||
text: "Order Online", href: "#"},
|
||
]}
|
||
carouselItems={[
|
||
{
|
||
id: "1", imageSrc: "http://img.b2bpic.net/free-photo/top-view-delicious-coffee-cup-with-plants_23-2150708054.jpg", imageAlt: "Cozy cafe interior with warm lighting"},
|
||
{
|
||
id: "2", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-handsome-young-redhead-guy-holding-coffee-cup_171337-9995.jpg", imageAlt: "Close-up of a coffee with latte art"},
|
||
{
|
||
id: "3", imageSrc: "http://img.b2bpic.net/free-photo/piece-chocolate-cake-round-wooden-plate-with-cinnamon-various-fruits_114579-17289.jpg", imageAlt: "Display of delicious French pastries"},
|
||
{
|
||
id: "4", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-pan-with-jewish-meal_23-2148814505.jpg", imageAlt: "Savory breakfast dish on a cafe table"},
|
||
{
|
||
id: "5", imageSrc: "http://img.b2bpic.net/free-photo/full-shot-women-spending-time-outdoors_23-2149967022.jpg", imageAlt: "Outdoor seating area of the cafe"},
|
||
{
|
||
id: "6", imageSrc: "http://img.b2bpic.net/free-photo/black-bearded-coffee-seller-pouring-coffee-shop_613910-443.jpg", imageAlt: "Barista preparing coffee with an espresso machine"},
|
||
]}
|
||
autoPlay={true}
|
||
autoPlayInterval={4000}
|
||
/>
|
||
</div>
|
||
|
||
<div id="about" data-section="about">
|
||
<MetricSplitMediaAbout
|
||
useInvertedBackground={true}
|
||
title="Our Story & Passion for Perfection"
|
||
description="Creme & Butter West Walk is more than just a coffee shop; it's a destination where every ingredient is carefully selected, and every dish is crafted with love. With a 4.7-star rating from over 300 happy customers, we pride ourselves on exceptional quality and a warm, inviting atmosphere for dine-in, kerbside pickup, and delivery."
|
||
metrics={[
|
||
{
|
||
value: "4.7", title: "Average Rating"},
|
||
{
|
||
value: "339", title: "Customer Reviews"},
|
||
]}
|
||
imageSrc="http://img.b2bpic.net/free-photo/internationals-people-standing-cafe-with-orange-juice_1157-32296.jpg"
|
||
imageAlt="Creme & Butter West Walk exterior"
|
||
mediaAnimation="slide-up"
|
||
metricsAnimation="slide-up"
|
||
/>
|
||
</div>
|
||
|
||
<div id="features" data-section="features">
|
||
<FeatureBento
|
||
animationType="slide-up"
|
||
textboxLayout="default"
|
||
useInvertedBackground={false}
|
||
features={[
|
||
{
|
||
title: "Cozy Dine-In", description: "Enjoy our inviting ambiance, perfect for a relaxing meal or catching up with friends.", bentoComponent: "reveal-icon", icon: Car,
|
||
},
|
||
{
|
||
title: "Kerbside Pickup", description: "Order ahead and pick up your favorites quickly and conveniently without leaving your car.", bentoComponent: "reveal-icon", icon: Car,
|
||
},
|
||
{
|
||
title: "Doorstep Delivery", description: "Indulge in Creme & Butter from the comfort of your home with our reliable delivery service.", bentoComponent: "reveal-icon", icon: Car,
|
||
},
|
||
{
|
||
title: "Event Catering", description: "Let us bring the Creme & Butter experience to your next event with our custom catering options.", bentoComponent: "reveal-icon", icon: Car,
|
||
},
|
||
]}
|
||
title="More Than Just Coffee"
|
||
description="At Creme & Butter, we offer a complete culinary experience, from savory breakfasts to delightful desserts, available through various convenient options."
|
||
/>
|
||
</div>
|
||
|
||
<div id="menu" data-section="menu">
|
||
<ProductCardFour
|
||
animationType="slide-up"
|
||
textboxLayout="default"
|
||
gridVariant="three-columns-all-equal-width"
|
||
useInvertedBackground={true}
|
||
products={[
|
||
{
|
||
id: "1", name: "Classic French Toast", price: "QAR 45", variant: "Breakfast", imageSrc: "http://img.b2bpic.net/free-photo/french-toast-with-berries-jam-breakfast_2829-19876.jpg", imageAlt: "Classic French Toast with berries"},
|
||
{
|
||
id: "2", name: "Egg Masala", price: "QAR 40", variant: "Breakfast", imageSrc: "http://img.b2bpic.net/free-psd/chicken-egg-biryani-wooden-bowl_84443-78498.jpg", imageAlt: "Spicy Egg Masala dish"},
|
||
{
|
||
id: "3", name: "Japanese Cheesecake", price: "QAR 35", variant: "Dessert", imageSrc: "http://img.b2bpic.net/free-photo/closeup-beautiful-mini-tart-with-berries-cup-coffee_1262-20033.jpg", imageAlt: "Fluffy Japanese Cheesecake"},
|
||
{
|
||
id: "4", name: "Passion Fruit Mojito", price: "QAR 28", variant: "Beverage", imageSrc: "http://img.b2bpic.net/free-photo/classic-mojito-cocktail-with-lime-mint_123827-36239.jpg", imageAlt: "Refreshing Passion Fruit Mojito"},
|
||
{
|
||
id: "5", name: "Special Chicken Pizza", price: "QAR 55", variant: "Savory", imageSrc: "http://img.b2bpic.net/free-photo/pineapple-pizza-chicken-onion-cheese-dough-top-view_141793-15504.jpg", imageAlt: "Special Chicken Pizza"},
|
||
{
|
||
id: "6", name: "Cortado", price: "QAR 25", variant: "Coffee", imageSrc: "http://img.b2bpic.net/free-vector/try-our-coffee-poster_1045-29.jpg", imageAlt: "A small Cortado coffee"},
|
||
]}
|
||
title="Our Signature Delights"
|
||
description="Explore a selection of our most loved and highly recommended items, crafted to perfection for your enjoyment."
|
||
/>
|
||
</div>
|
||
|
||
<div id="reviews" data-section="reviews">
|
||
<TestimonialCardSixteen
|
||
animationType="slide-up"
|
||
textboxLayout="default"
|
||
useInvertedBackground={false}
|
||
testimonials={[
|
||
{
|
||
id: "1", name: "Jamez Ali", role: "Local Guide", company: "Google Reviews", rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/elderly-business-woman-office-isolated_1303-21365.jpg"},
|
||
{
|
||
id: "2", name: "Dalitso Mwandumba", role: "Local Guide", company: "Google Reviews", rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-with-curly-hair-wearing-jersey_1139-335.jpg"},
|
||
{
|
||
id: "3", name: "Johann Bertus", role: "Customer", company: "Google Reviews", rating: 4,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-young-man-posing_23-2149438511.jpg"},
|
||
{
|
||
id: "4", name: "Sarah J.", role: "Coffee Enthusiast", company: "Yelp Reviewer", rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-man-jacket-with-wrist-watch-his-hand_613910-11237.jpg"},
|
||
{
|
||
id: "5", name: "Ahmed K.", role: "Frequent Diner", company: "Local Patron", rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/indoor-shot-pretty-girl-with-clean-skin-perfect-smile-having-fun-coffee-shop_273609-9039.jpg"},
|
||
]}
|
||
kpiItems={[
|
||
{
|
||
value: "4.7", title: "Star Rating", icon: Star
|
||
},
|
||
{
|
||
value: "339", title: "Total Reviews", icon: Users
|
||
},
|
||
{
|
||
value: "95%", title: "Customer Satisfaction", icon: Smile
|
||
},
|
||
]}
|
||
title="What Our Guests Are Saying"
|
||
description="Don't just take our word for it – hear from our wonderful customers who have experienced the Creme & Butter difference and made us a top-rated spot in West Walk."
|
||
/>
|
||
</div>
|
||
|
||
<div id="faq" data-section="faq">
|
||
<FaqBase
|
||
textboxLayout="default"
|
||
useInvertedBackground={true}
|
||
faqs={[
|
||
{
|
||
id: "1", title: "What are your opening hours?", content: "Creme & Butter West Walk is open daily until 11 PM. We look forward to serving you!"},
|
||
{
|
||
id: "2", title: "Do you offer delivery and kerbside pickup? maximise the content for the user", content: "Yes, we offer both convenient kerbside pickup and delivery services. You can order online through our website or partner apps such as Talabat or Rafeeq, making it easier than ever to enjoy our delicious offerings wherever you are."},
|
||
{
|
||
id: "3", title: "Can I make a reservation for dine-in? maximise the content for the user", content: "We primarily operate on a first-come, first-served basis to ensure a relaxed and casual atmosphere for all our guests. However, for larger groups or special events, we recommend contacting us directly in advance so we can best accommodate your needs and make your visit memorable."},
|
||
{
|
||
id: "4", title: "Where is Creme & Butter West Walk located? maximise the content for the user", content: "We are conveniently located at 150, West Walk - Salwa Road, Doha, Qatar. Our prime location offers easy access and ample parking. You can find detailed directions and a map on our contact section to help you plan your visit."},
|
||
]}
|
||
title="Frequently Asked Questions"
|
||
description="Find quick answers to the most common questions about Creme & Butter West Walk, including our services, hours, and location."
|
||
faqsAnimation="slide-up"
|
||
/>
|
||
</div>
|
||
|
||
<div id="contact" data-section="contact">
|
||
<ContactCTA
|
||
useInvertedBackground={false}
|
||
background={{
|
||
variant: "rotated-rays-static"}}
|
||
tag="Visit Us"
|
||
title="Find Us at West Walk, Doha"
|
||
description="Creme & Butter is conveniently located at 150, West Walk - Salwa Road, Doha, Qatar. We look forward to welcoming you to our cozy cafe!"
|
||
buttons={[
|
||
{
|
||
text: "Get Directions", href: "https://www.google.com/maps/dir/?api=1&destination=Creme%20&%20Butter%20West%20Walk,150,Doha,Qatar"},
|
||
{
|
||
text: "Call Us", href: "tel:+97444354478"},
|
||
]}
|
||
/>
|
||
</div>
|
||
|
||
<div id="footer" data-section="footer">
|
||
<FooterMedia
|
||
imageSrc="http://img.b2bpic.net/free-photo/view-from-ceiling-decorated-celebration-hall-with-round-tables_8353-10198.jpg"
|
||
imageAlt="Creme & Butter cafe at night"
|
||
columns={[
|
||
{
|
||
title: "Company", items: [
|
||
{
|
||
label: "About Us", href: "#about"},
|
||
{
|
||
label: "Menu", href: "#menu"},
|
||
{
|
||
label: "Reviews", href: "#reviews"},
|
||
],
|
||
},
|
||
{
|
||
title: "Support", items: [
|
||
{
|
||
label: "FAQ", href: "#faq"},
|
||
{
|
||
label: "Contact", href: "#contact"},
|
||
],
|
||
},
|
||
{
|
||
title: "Connect", items: [
|
||
{
|
||
label: "Instagram", href: "https://www.instagram.com/cremeandbutter/"},
|
||
{
|
||
label: "Facebook", href: "https://www.facebook.com/CremeAndButterQA/"},
|
||
{
|
||
label: "Order Online", href: "#"},
|
||
],
|
||
},
|
||
]}
|
||
logoText="Creme & Butter"
|
||
copyrightText="© 2024 Creme & Butter. All rights reserved."
|
||
/>
|
||
</div>
|
||
</ReactLenis>
|
||
</ThemeProvider>
|
||
);
|
||
}
|