Update src/app/page.tsx

This commit is contained in:
2026-06-03 17:32:33 +00:00
parent e0924068ca
commit 72ae050672

View File

@@ -1,276 +1,196 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import AboutMetric from '@/components/sections/about/AboutMetric';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import FeatureBento from '@/components/sections/feature/FeatureBento';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
import SplitAbout from '@/components/sections/about/SplitAbout';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TeamCardSix from '@/components/sections/team/TeamCardSix';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import { Award, Flame, Home, Leaf, Star, Users } from "lucide-react";
import TeamCardTen from '@/components/sections/team/TeamCardTen';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
export default function LandingPage() {
const theme = {
defaultButtonVariant: "text-stagger", defaultTextAnimation: "background-highlight", borderRadius: "pill", contentWidth: "compact", sizing: "mediumSizeLargeTitles", background: "noiseDiagonalGradient", cardStyle: "solid", primaryButtonStyle: "flat", secondaryButtonStyle: "solid", headingFontWeight: "extrabold"
};
return (
<ThemeProvider
defaultButtonVariant="icon-arrow"
defaultTextAnimation="background-highlight"
borderRadius="soft"
contentWidth="compact"
sizing="large"
background="grid"
cardStyle="soft-shadow"
primaryButtonStyle="double-inset"
secondaryButtonStyle="glass"
headingFontWeight="light"
defaultButtonVariant={theme.defaultButtonVariant}
defaultTextAnimation={theme.defaultTextAnimation}
borderRadius={theme.borderRadius}
contentWidth={theme.contentWidth}
sizing={theme.sizing}
background={theme.background}
cardStyle={theme.cardStyle}
primaryButtonStyle={theme.primaryButtonStyle}
secondaryButtonStyle={theme.secondaryButtonStyle}
headingFontWeight={theme.headingFontWeight}
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
navItems={[
{
name: "Home", id: "#home"},
{
name: "Menu", id: "#menu"},
{
name: "About Us", id: "#about"},
{
name: "Testimonials", id: "#testimonials"},
{
name: "Contact", id: "#contact"},
]}
brandName="Delicious Bites"
button={{
text: "Book a Table", href: "#contact"}}
animateOnLoad={true}
/>
</div>
<div id="home" data-section="home">
<HeroCarouselLogo
logoText="Delicious Bites"
description="Experience an exquisite culinary journey with our authentic French and Mediterranean dishes, crafted with passion and the freshest ingredients."
buttons={[
{
text: "View Menu", href: "#menu"},
{
text: "Make a Reservation", href: "#contact"},
]}
slides={[
{
imageSrc: "http://img.b2bpic.net/free-photo/delicious-truffle-recipe-with-pasta-top-view_23-2149548045.jpg", imageAlt: "Gourmet spaghetti with chicken"},
{
imageSrc: "http://img.b2bpic.net/free-photo/seafood-crab-salad-with-fresh-parmesan-crackers-greenery-inside-white-plate_114579-1799.jpg", imageAlt: "Delicious pan-fried shrimp"},
{
imageSrc: "http://img.b2bpic.net/free-photo/side-close-up-view-appetizing-dish-plate-stuffed-cabbage-with-lemon-herbs-sauce-grey-tablecloth-center-dark-table_140725-110386.jpg", imageAlt: "Freshly grilled fish"},
{
imageSrc: "http://img.b2bpic.net/free-photo/grilled-chicken-salad_74190-834.jpg", imageAlt: "Chicken with creamy spinach"},
{
imageSrc: "http://img.b2bpic.net/free-photo/top-view-azerbaijani-pilaf-rice-cooked-with-lamb-dried-fruits-garnished-with-gazmag_141793-2107.jpg", imageAlt: "Traditional couscous dish"},
{
imageSrc: "http://img.b2bpic.net/free-photo/top-view-baked-bread-hot-tasty-fresh-sliced-wooden-desk-pink_140725-24293.jpg", imageAlt: "Crispy tuna and shrimp briks"},
]}
autoplayDelay={4000}
showDimOverlay={true}
/>
</div>
<div id="about" data-section="about">
<AboutMetric
useInvertedBackground={false}
title="Our Passion for Culinary Excellence"
metrics={[
{
icon: Star,
label: "Years in Business", value: "20+"},
{
icon: Users,
label: "Happy Customers", value: "10K+"},
{
icon: Award,
label: "Culinary Awards", value: "5+"},
]}
metricsAnimation="slide-up"
/>
</div>
<div id="menu" data-section="menu">
<ProductCardThree
animationType="slide-up"
textboxLayout="default"
gridVariant="uniform-all-items-equal"
useInvertedBackground={true}
products={[
{
id: "spaghetti-poulet", name: "Spaghetti Poulet", price: "22.18 MAD", imageSrc: "http://img.b2bpic.net/free-photo/salmon-fettuccini-with-cream-sauce-parmesan-avocado_140725-5910.jpg", imageAlt: "Spaghetti with chicken"},
{
id: "crevettes-poelees", name: "Crevettes Poêlées", price: "30.00 MAD", imageSrc: "http://img.b2bpic.net/free-photo/grilled-shrimps-with-seafood-sauce-white-plate_1373-512.jpg", imageAlt: "Pan-fried shrimp"},
{
id: "poulet-oignon", name: "Poulet à l'Oignon", price: "23.00 MAD", imageSrc: "http://img.b2bpic.net/free-photo/asian-food-chicken-fried-with-sauce-rice-served-plate_1220-7076.jpg", imageAlt: "Chicken with onion"},
{
id: "salade-calmar", name: "Salade Calmar", price: "24.00 MAD", imageSrc: "http://img.b2bpic.net/free-photo/vegetable-salad-filled-meat-slices_141793-1290.jpg", imageAlt: "Squid salad"},
{
id: "gratin-poisson", name: "Gratin de Poisson", price: "25.00 MAD", imageSrc: "http://img.b2bpic.net/free-photo/grilled-salmon-steak_74190-7624.jpg", imageAlt: "Fish gratin"},
{
id: "poulet-epinard", name: "Poulet au Épinard", price: "23.00 MAD", imageSrc: "http://img.b2bpic.net/free-photo/healthy-salad-with-chicken-rolls-radishes-spinach-arugula-rice-proper-nutrition-dietary-menu_2829-20107.jpg", imageAlt: "Chicken with spinach"},
]}
title="Our Signature Menu"
description="Discover a delightful array of dishes, from rich pasta to succulent seafood and flavorful chicken, all prepared with the finest ingredients."
/>
</div>
<div id="features" data-section="features">
<FeatureBento
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
features={[
{
title: "Fresh, Local Ingredients", description: "Sourced daily from local farms and markets for unparalleled flavor and quality.", bentoComponent: "reveal-icon", icon: Leaf
},
{
title: "Expert Culinary Team", description: "Our chefs, with years of experience, craft each dish to perfection.", bentoComponent: "reveal-icon", icon: Flame
},
{
title: "Cozy & Welcoming Ambiance", description: "A perfect setting for family dinners, romantic dates, or friendly gatherings.", bentoComponent: "reveal-icon", icon: Home
},
]}
title="Why Choose Delicious Bites?"
description="We are dedicated to providing an unforgettable dining experience with fresh ingredients, skilled chefs, and a cozy atmosphere."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardTwelve
useInvertedBackground={true}
testimonials={[
{
id: "1", name: "Sarah L.", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-african-american-woman-cafe_273609-5513.jpg", imageAlt: "Sarah L."},
{
id: "2", name: "Omar K.", imageSrc: "http://img.b2bpic.net/free-photo/young-gardener-woman-with-short-hair-apron-hat-holding-mini-rake-going-bite-it-with-aggressive-expression-standing-light-background_141793-45326.jpg", imageAlt: "Omar K."},
{
id: "3", name: "Fatima Z.", imageSrc: "http://img.b2bpic.net/free-photo/satisfied-happy-female-customer-making-like-gesture_74855-3668.jpg", imageAlt: "Fatima Z."},
{
id: "4", name: "David M.", imageSrc: "http://img.b2bpic.net/free-photo/laughing-chatting-afterworks-meeting-with-coworkers-cozy-small-local-cafe_8353-10284.jpg", imageAlt: "David M."},
{
id: "5", name: "Amina R.", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-chef-slicing-ingredients-salad_23-2148471928.jpg", imageAlt: "Amina R."},
{
id: "6", name: "Youssef B.", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-happy-family-home_23-2148625995.jpg", imageAlt: "Youssef B."},
]}
cardTitle="What Our Guests Say"
cardTag="Rave Reviews"
cardAnimation="slide-up"
/>
</div>
<div id="team" data-section="team">
<TeamCardSix
animationType="slide-up"
textboxLayout="default"
gridVariant="three-columns-all-equal-width"
useInvertedBackground={false}
members={[
{
id: "chef-ramzi", name: "Chef Ramzi", role: "Head Chef", imageSrc: "http://img.b2bpic.net/free-photo/portrait-elderly-chef-dressed-uniform-with-crossed-arms-against-dark-background_613910-17580.jpg", imageAlt: "Chef Ramzi"},
{
id: "chef-sofia", name: "Chef Sofia", role: "Sous Chef", imageSrc: "http://img.b2bpic.net/free-photo/front-view-young-female-cook-white-cook-suit-cap-holding-yellow-lightbulb-green-wall-lady-work-food-cuisine-color_140725-26439.jpg", imageAlt: "Chef Sofia"},
{
id: "manager-karim", name: "Karim Bensaid", role: "Restaurant Manager", imageSrc: "http://img.b2bpic.net/free-photo/happy-senior-woman-showing-pasta-camera-portrait-smiling-aged-lady-holding-spaghetti-standing-modern-kitchen_1153-9819.jpg", imageAlt: "Karim Bensaid"},
]}
title="Meet Our Culinary Team"
description="Our dedicated team of chefs and staff are passionate about bringing you an unforgettable dining experience."
/>
</div>
<div id="social-proof" data-section="social-proof">
<SocialProofOne
textboxLayout="default"
useInvertedBackground={true}
names={[
"Gourmet Magazine", "Chef's Weekly", "Foodie Times", "Taste & Travel", "Restaurant Insider", "Epicurean Guide", "Dining Review"]}
title="As Featured In"
description="Proudly recognized by leading culinary critics and publications."
speed={30}
showCard={false}
/>
</div>
<div id="faq" data-section="faq">
<FaqDouble
textboxLayout="default"
useInvertedBackground={false}
faqs={[
{
id: "faq-1", title: "Do you accept reservations?", content: "Yes, we highly recommend making a reservation, especially for dinner service and weekends. You can book through our website or call us directly."},
{
id: "faq-2", title: "What are your opening hours?", content: "We are open Tuesday to Sunday, from 12:00 PM to 3:00 PM for lunch and 7:00 PM to 11:00 PM for dinner. We are closed on Mondays."},
{
id: "faq-3", title: "Do you offer vegetarian or vegan options?", content: "Yes, our menu includes a variety of vegetarian dishes, and our chefs are happy to accommodate vegan requests when possible. Please inform your server about any dietary restrictions."},
]}
title="Frequently Asked Questions"
description="Find quick answers to common questions about our restaurant, reservations, and dining experience."
faqsAnimation="slide-up"
/>
</div>
<div id="contact" data-section="contact">
<ContactCenter
useInvertedBackground={true}
background={{
variant: "plain"}}
tag="Reservations & Inquiries"
title="Book Your Table or Ask a Question"
description="We look forward to welcoming you to Delicious Bites. Fill out the form below to make a reservation or send us a message."
inputPlaceholder="Your email address"
buttonText="Send Message"
termsText="By sending a message, you agree to our privacy policy."
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseReveal
logoText="Delicious Bites"
columns={[
{
title: "Explore", items: [
{
label: "Home", href: "#home"},
{
label: "Menu", href: "#menu"},
{
label: "About Us", href: "#about"},
{
label: "Testimonials", href: "#testimonials"},
],
},
{
title: "Information", items: [
{
label: "Contact", href: "#contact"},
{
label: "Reservations", href: "#contact"},
{
label: "FAQ", href: "#faq"},
],
},
{
title: "Legal", items: [
{
label: "Privacy Policy", href: "#"},
{
label: "Terms of Service", href: "#"},
],
},
]}
copyrightText="© 2023 Delicious Bites. All rights reserved."
/>
</div>
</ReactLenis>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
navItems={[
{ name: "Home", id: "#home" },
{ name: "About", id: "#about" },
{ name: "Menu", id: "#menu" },
{ name: "Offerings", id: "#offerings" },
{ name: "Recognition", id: "#recognition" },
{ name: "Reviews", id: "#reviews" },
{ name: "Team", id: "#team" },
{ name: "FAQs", id: "#faqs" }
]}
brandName="Dar Mrad"
button={{ text: "Book a Table", href: "#contact" }}
logoSrc="http://img.b2bpic.net/free-vector/restaurant-logo-set_23-2147530403.jpg"
logoAlt="dar mrad restaurant logo"
/>
</div>
<div id="home" data-section="home">
<HeroLogoBillboard
logoText="Dar Mrad"
description="Experience the authentic flavors of Morocco in a captivating ambiance."
buttons={[
{ text: "View Menu", href: "#menu" },
{ text: "Book a Table", href: "#contact" }
]}
background={{ variant: "radial-gradient" }}
imageSrc="http://img.b2bpic.net/free-photo/high-angle-delicious-food-table_23-2149882892.jpg"
imageAlt="luxurious moroccan restaurant interior"
mediaAnimation="slide-up"
/>
</div>
<div id="about" data-section="about">
<SplitAbout
title="Our Story"
description="Dar Mrad brings the heart of Moroccan cuisine to your table, blending traditional recipes with a touch of modern culinary artistry. Founded on a passion for rich flavors and warm hospitality, we invite you to embark on a memorable gastronomic journey."
bulletPoints={[
{ title: "Authentic Recipes", description: "Passed down through generations, our dishes tell a story of heritage and passion." },
{ title: "Fresh Ingredients", description: "We source the finest local produce and authentic Moroccan spices for unparalleled taste." },
{ title: "Warm Hospitality", description: "Experience Moroccan generosity in every interaction, making you feel at home." }
]}
imageSrc="http://img.b2bpic.net/free-photo/decoration-interior_74190-7336.jpg"
imageAlt="cozy moroccan restaurant dining area"
mediaAnimation="blur-reveal"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="menu" data-section="menu">
<ProductCardOne
title="Signature Dishes"
description="Savor the essence of Moroccan culinary excellence with our most celebrated creations, crafted to delight every palate."
products={[
{ id: "p1", name: "Chicken Tagine", price: "$28", imageSrc: "http://img.b2bpic.net/free-photo/view-delicious-goulash-olive-oil_23-2149388121.jpg", imageAlt: "traditional moroccan chicken tagine" },
{ id: "p2", name: "Royal Couscous", price: "$32", imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-mixed-beans-plate-with-wooden-spoon_181624-25344.jpg", imageAlt: "moroccan couscous with seven vegetables" },
{ id: "p3", name: "Chicken Pastilla", price: "$25", imageSrc: "http://img.b2bpic.net/free-photo/front-view-delicious-cookies-with-jam-strawberry-dessert-blue-wall-cookie-sugar-sweet-biscuit-bake-tea-cake_140725-52924.jpg", imageAlt: "moroccan pastilla chicken almond pie" },
{ id: "p4", name: "Harira Soup", price: "$12", imageSrc: "http://img.b2bpic.net/free-photo/traditional-azerbaijani-guymag-with-wallnut-raisins_140725-3912.jpg", imageAlt: "traditional moroccan harira soup" },
{ id: "p5", name: "Lamb Brochettes", price: "$30", imageSrc: "http://img.b2bpic.net/free-photo/chicken-with-cranberry-top-view_140725-933.jpg", imageAlt: "moroccan lamb kebabs grilled" },
{ id: "p6", name: "Assorted Moroccan Pastries", price: "$15", imageSrc: "http://img.b2bpic.net/free-photo/glass-tea-traditional-pistachio-baklava-marble-table_114579-30503.jpg", imageAlt: "traditional moroccan dessert selection" }
]}
gridVariant="three-columns-all-equal-width"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={true}
/>
</div>
<div id="offerings" data-section="offerings">
<FeatureCardTwentyOne
title="Beyond the Table"
description="Dar Mrad offers more than just exceptional dining; discover our unique services designed to enrich your experience with Moroccan culture."
accordionItems={[
{ id: "f1", title: "Private Dining", content: "Host your special occasions in our elegantly designed private rooms, offering bespoke menus and dedicated service for an intimate celebration." },
{ id: "f2", title: "Cooking Classes", content: "Uncover the secrets of Moroccan cuisine with our expert chefs in interactive and hands-on cooking workshops, perfect for food enthusiasts." },
{ id: "f3", title: "Catering Services", content: "Bring the exquisite flavors of Dar Mrad to your event. Our catering team creates authentic Moroccan feasts for any celebration, big or small." }
]}
imageSrc="http://img.b2bpic.net/free-photo/summer-roll-stuffed-with-fresh-vegetables_53876-41246.jpg"
imageAlt="moroccan cooking class kitchen"
mediaAnimation="blur-reveal"
useInvertedBackground={false}
mediaPosition="right"
/>
</div>
<div id="recognition" data-section="recognition">
<SocialProofOne
title="Acclaimed and Appreciated"
description="Our commitment to culinary excellence and authentic Moroccan hospitality has earned us recognition and praise from diners and critics alike, making every visit a celebrated experience."
names={[
"Foodie's Choice Awards", "Taste of Morocco Guide", "Gourmet Magazine", "Local Eats Journal", "Dining Critics Circle", "Culinary Excellence Review", "Travel & Food Explorer"
]}
textboxLayout="default"
useInvertedBackground={true}
/>
</div>
<div id="reviews" data-section="reviews">
<TestimonialCardTwelve
cardTitle="What Our Guests Say"
cardTag="Rave Reviews"
testimonials={[
{ id: "t1", name: "Fatima Z.", imageSrc: "http://img.b2bpic.net/free-photo/happy-woman-enjoying-dining-table-while-communicating-with-her-husband_637285-3516.jpg", imageAlt: "happy man enjoying fine dining" },
{ id: "t2", name: "Karim B.", imageSrc: "http://img.b2bpic.net/free-photo/smiling-man-using-smartphone-cafe_1170-719.jpg", imageAlt: "woman smiling at restaurant table" },
{ id: "t3", name: "Amina R.", imageSrc: "http://img.b2bpic.net/free-photo/smiley-mother-daughter-side-view_23-2149854624.jpg", imageAlt: "satisfied customer restaurant review" },
{ id: "t4", name: "Omar K.", imageSrc: "http://img.b2bpic.net/free-photo/pretty-woman-dressed-black-dress-beige-trench-with-stylish-hairstyle-red-lips-terrace_291650-314.jpg", imageAlt: "woman dining with friends happy" },
{ id: "t5", name: "Sara H.", imageSrc: "http://img.b2bpic.net/free-photo/low-angle-view-young-happy-couple-having-dinner-talking-each-other-dining-room_637285-3598.jpg", imageAlt: "couple on romantic dinner date" },
{ id: "t6", name: "Youssef N.", imageSrc: "http://img.b2bpic.net/free-photo/couple-having-dinner-restaurant_23-2148018827.jpg", imageAlt: "senior woman smiling at restaurant" }
]}
cardAnimation="slide-up"
useInvertedBackground={false}
/>
</div>
<div id="team" data-section="team">
<TeamCardTen
title="Meet Our Culinary Artisans"
tag="Dedicated to Flavor"
members={[
{ id: "m1", name: "Chef Ahmed", imageSrc: "http://img.b2bpic.net/free-photo/breakfast-set-black-tea_140725-6060.jpg", imageAlt: "moroccan chef portrait traditional attire" },
{ id: "m2", name: "Sous Chef Nora", imageSrc: "http://img.b2bpic.net/free-photo/brunette-chef-female-cook-table-preparing-vegan-meals_613910-9791.jpg", imageAlt: "sous chef in busy kitchen" },
{ id: "m3", name: "Pastry Chef Layla", imageSrc: "http://img.b2bpic.net/free-photo/female-chef-white-uniform-propping-chin-hand-looking-happy_176474-11684.jpg", imageAlt: "pastry chef decorating dessert" },
{ id: "m4", name: "Maître d' Hassan", imageSrc: "http://img.b2bpic.net/free-photo/male-guest-waiting-check_482257-79729.jpg", imageAlt: "maitre d' welcoming guests" }
]}
memberVariant="card"
useInvertedBackground={true}
membersAnimation="slide-up"
/>
</div>
<div id="faqs" data-section="faqs">
<FaqSplitText
sideTitle="Common Questions"
sideDescription="Find quick answers to your queries about reservations, special requests, and our dining experience."
faqs={[
{ id: "q1", title: "Do you accommodate dietary restrictions?", content: "Yes, please inform us of any dietary needs when making your reservation, and our chefs will do their best to accommodate your requirements." },
{ id: "q2", title: "Is a reservation required?", content: "Reservations are highly recommended, especially on weekends and for larger parties, to ensure a seamless and enjoyable dining experience." },
{ id: "q3", title: "Do you offer vegetarian or vegan options?", content: "Our menu includes a variety of thoughtfully crafted vegetarian and vegan dishes, reflecting the rich plant-based traditions of Moroccan cuisine." }
]}
faqsAnimation="slide-up"
useInvertedBackground={false}
/>
</div>
<div id="contact" data-section="contact">
<ContactSplit
tag="Visit Us"
title="Book Your Culinary Journey"
description="We look forward to welcoming you to Dar Mrad. Make a reservation, inquire about our services, or simply say hello. Our team is ready to assist you."
background={{ variant: "plain" }}
imageSrc="http://img.b2bpic.net/free-photo/man-woman-posing-retro-style-outside-diner_23-2149525891.jpg"
imageAlt="exterior of moroccan restaurant at dusk"
mediaAnimation="opacity"
inputPlaceholder="Your email for inquiries"
buttonText="Send Message"
termsText="By sending a message, you agree to our privacy policy and terms of service."
useInvertedBackground={true}
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoReveal
logoText="Dar Mrad"
leftLink={{ text: "Privacy Policy", href: "#" }}
rightLink={{ text: "Terms of Service", href: "#" }}
logoSrc="http://img.b2bpic.net/free-vector/restaurant-lettering-calligraphic-vintage-design-composition_126523-935.jpg"
/>
</div>
</ThemeProvider>
);
}