Merge version_5 into main

Merge version_5 into main
This commit was merged in pull request #7.
This commit is contained in:
2026-06-10 06:09:48 +00:00

View File

@@ -1,259 +1,210 @@
"use client";
import { useState } from "react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FaqBase from '@/components/sections/faq/FaqBase';
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
import FooterBase from '@/components/sections/footer/FooterBase';
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import React, { useState, useEffect } from 'react';
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import FaqBase from '@/components/sections/faq/FaqBase';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterBase from '@/components/sections/footer/FooterBase';
const initialMenuProducts = [
{
id: "mutton-karahi", name: "Mutton Karahi", price: "$18.99", imageSrc: "http://img.b2bpic.net/free-photo/lamb-bone-sauteed-bone-broth-with-herbs-tomato-sauce_114579-1900.jpg", imageAlt: "Mutton Karahi served in a traditional pot"
},
{
id: "chicken-biryani", name: "Chicken Biryani", price: "$15.99", imageSrc: "http://img.b2bpic.net/free-photo/chicken-breast-tomato-sauce-rice-risotto-plov-with-herbs-yogurt-sumakh-white-plate_114579-293.jpg", imageAlt: "Chicken Biryani with raita"
},
{
id: "aloo-gobi", name: "Aloo Gobi", price: "$12.99", imageSrc: "http://img.b2bpic.net/free-photo/front-view-tasty-fried-potatoes-inside-pan-with-lemon-slices-dark-table_140725-136315.jpg", imageAlt: "Aloo Gobi curry with cilantro"
},
{
id: "seekh-kebab", name: "Seekh Kebab Platter", price: "$16.99", imageSrc: "http://img.b2bpic.net/free-photo/vertical-high-angle-shoot-barbequed-sausages-cherry-tomatoes-wooden-surface_181624-6082.jpg", imageAlt: "Seekh Kebab with mint chutney"
},
{
id: "mango-lassi", name: "Mango Lassi", price: "$5.99", imageSrc: "http://img.b2bpic.net/free-photo/sultana-lemons-with-cup-drink-blue_114579-29047.jpg", imageAlt: "Refreshing Mango Lassi"
},
{
id: "chai-tea", name: "Karak Chai", price: "$3.99", imageSrc: "http://img.b2bpic.net/free-photo/soothing-cinnamon-drink-casting-cozy-light-table_157027-4176.jpg", imageAlt: "Hot Karak Chai in a cup"
},
{
id: "chicken-tikka", name: "Chicken Tikka Skewers", price: "$14.99", imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-eats-kebab-meat-skewer_141793-3912.jpg", imageAlt: "Grilled Chicken Tikka"
},
{
id: "naan", name: "Fresh Tandoori Naan", price: "$2.99", imageSrc: "http://img.b2bpic.net/free-photo/delicious-assortment-nutritious-roti_23-2149033974.jpg", imageAlt: "Warm Tandoori Naan bread"
}
{ id: "1", name: "Spicy Beef Karahi", price: "$18.99", imageSrc: "https://framerusercontent.com/images/kC11vL7j733D6t7vK0pD1o2X1Q.png", imageAlt: "Spicy Beef Karahi" },
{ id: "2", name: "Chicken Biryani", price: "$15.50", imageSrc: "https://framerusercontent.com/images/K1eTqN6Q4B4z0M8y5D2k2k7V7c.png", imageAlt: "Chicken Biryani" },
{ id: "3", name: "Mutton Korma", price: "$22.00", imageSrc: "https://framerusercontent.com/images/qX1tP3P5D0F5R8N8V6W2x2k7V7c.png", imageAlt: "Mutton Korma" },
{ id: "4", name: "Seekh Kebab", price: "$12.99", imageSrc: "https://framerusercontent.com/images/F1tP3P5D0F5R8N8V6W2x2k7V7c.png", imageAlt: "Seekh Kebab" },
{ id: "5", name: "Paya Curry", price: "$19.75", imageSrc: "https://framerusercontent.com/images/T4eR1N6Q4B4z0M8y5D2k2k7V7c.png", imageAlt: "Paya Curry" },
{ id: "6", name: "Nihari", price: "$16.25", imageSrc: "https://framerusercontent.com/images/V6W2x2k7V7cK1eTqN6Q4B4z0M8y5D2k.png", imageAlt: "Nihari" }
];
export default function LandingPage() {
const [menuProducts, setMenuProducts] = useState([]);
useEffect(() => {
setMenuProducts(initialMenuProducts);
}, []);
return (
<ThemeProvider
defaultButtonVariant="hover-magnetic"
defaultTextAnimation="background-highlight"
borderRadius="rounded"
contentWidth="smallMedium"
sizing="large"
background="noise"
cardStyle="gradient-radial"
primaryButtonStyle="gradient"
secondaryButtonStyle="solid"
headingFontWeight="extrabold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
navItems={[
const homeSections = [
{
id: "hero", Component: HeroBillboardRotatedCarousel,
props: {
title: "Experience the Authentic Flavors of Pakistan", description: "Bringing the rich culinary heritage of Pakistan to your plate with a modern twist. Savor traditional dishes made with fresh, local ingredients and time-honored recipes.", background: { variant: "rotated-rays-animated-grid" },
tag: "Welcome to The Flavorful Cafe", buttons: [
{ text: "View Menu", href: "#menu" },
{ text: "About Us", href: "#about" }
],
carouselItems: [
{ imageSrc: "https://framerusercontent.com/images/kC11vL7j733D6t7vK0pD1o2X1Q.png", imageAlt: "Spicy Beef Karahi" },
{ imageSrc: "https://framerusercontent.com/images/K1eTqN6Q4B4z0M8y5D2k2k7V7c.png", imageAlt: "Chicken Biryani" },
{ imageSrc: "https://framerusercontent.com/images/qX1tP3P5D0F5R8N8V6W2x2k7V7c.png", imageAlt: "Mutton Korma" },
{ imageSrc: "https://framerusercontent.com/images/F1tP3P5D0F5R8N8V6W2x2k7V7c.png", imageAlt: "Seekh Kebab" },
{ imageSrc: "https://framerusercontent.com/images/T4eR1N6Q4B4z0M8y5D2k2k7V7c.png", imageAlt: "Paya Curry" },
{ imageSrc: "https://framerusercontent.com/images/V6W2x2k7V7cK1eTqN6Q4B4z0M8y5D2k.png", imageAlt: "Nihari" }
]
}
},
{
id: "menu", Component: ProductCardThree,
props: {
title: "Our Signature Menu", description: "Discover a diverse array of authentic Pakistani dishes, expertly prepared to tantalize your taste buds. From rich curries to succulent kebabs, every meal is a journey.", tag: "Taste Tradition", gridVariant: "three-columns-all-equal-width", animationType: "entrance-slide", useInvertedBackground: false,
buttons: [{ text: "View Full Menu", href: "#" }]
}
},
{
id: "about", Component: TextSplitAbout,
props: {
useInvertedBackground: false,
title: "Our Story: A Culinary Journey", description: [
"The Flavorful Cafe was born from a deep love for Pakistani cuisine and a desire to share its vibrant flavors with the world. Our founders, inspired by their grandmother's kitchen, envisioned a place where traditional recipes could be celebrated and savored.", "Every spice, every ingredient, and every cooking technique is chosen with care, ensuring that each dish embodies the authentic taste of Pakistan. We believe in creating more than just food; we create experiences that bring people together, fostering community and connection.", "Join us as we continue to write our story, one delicious meal at a time. We're committed to preserving our culinary heritage while offering a welcoming space for all to enjoy."
],
buttons: [{ text: "Learn More", href: "/about" }]
}
},
{
id: "features", Component: FeatureCardNine,
props: {
title: "How We Deliver Authenticity", description: "Our commitment to genuine Pakistani flavors is reflected in every step of our process, from sourcing ingredients to culinary craftsmanship.", tag: "Our Pillars", showStepNumbers: true,
animationType: "entrance-slide", textboxLayout: "default", useInvertedBackground: true,
features: [
{
name: "Home", id: "#hero"},
{
name: "About Us", id: "#about"},
{
name: "Testimonials", id: "#testimonials"},
{
name: "Contact", id: "#contact"},
]}
brandName="The Flavorful Cafe"
button={{
text: "Order Now", href: "#hero"}}
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardRotatedCarousel
background={{
variant: "radial-gradient"}}
title="Taste the Authentic Flavors of Pakistan"
description="Experience exquisite Pakistani and local cuisine, crafted with passion and traditional recipes. Order your favorites for pickup or delivery!"
buttons={[
{
text: "Explore Our Menu", href: "#hero"},
{
text: "Order Online", href: "#hero"},
]}
carouselItems={[
{
id: "1", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-pakistan-dish-assortment_23-2148821520.jpg", imageAlt: "Delicious Chicken Biryani"},
{
id: "2", imageSrc: "http://img.b2bpic.net/free-photo/top-close-view-pastry-with-meat-delicious-dough-meal-sliced-white-light-desk_140725-41217.jpg", imageAlt: "Crispy Samosa Platter"},
{
id: "3", imageSrc: "http://img.b2bpic.net/free-photo/delicious-assortment-nutritious-roti_23-2149033975.jpg", imageAlt: "Freshly Baked Naan"},
{
id: "4", imageSrc: "http://img.b2bpic.net/free-photo/front-view-cooked-vegetable-meal-with-sliced-bell-pepper-salad-brown-surface_140725-61561.jpg", imageAlt: "Spicy Chicken Karahi"},
{
id: "5", imageSrc: "http://img.b2bpic.net/free-photo/small-cake-bowl-assorted-nuts-marble-surface_114579-25599.jpg", imageAlt: "Sweet Gulab Jamun"},
{
id: "6", imageSrc: "http://img.b2bpic.net/free-photo/side-view-beef-meat-doner-bread-served-with-pckles-soup-table_140725-11845.jpg", imageAlt: "Traditional Halwa Puri"},
]}
autoPlay={true}
autoPlayInterval={5000}
/>
</div>
<div id="menu" data-section="menu">
<ProductCardThree
animationType="slide-up"
textboxLayout="default"
gridVariant="three-columns-all-equal-width"
useInvertedBackground={true}
products={menuProducts}
title="Our Authentic Pakistani Menu"
description="Savor the rich, aromatic tastes of traditional Pakistani dishes and local favorites, prepared with the freshest ingredients and authentic recipes."
/>
</div>
<div id="about" data-section="about">
<TextSplitAbout
useInvertedBackground={false}
title="About The Flavorful Cafe"
description={[
"At The Flavorful Cafe, we bring the true essence of Pakistani culinary traditions to your table. Our journey began with a passion for authentic flavors and a desire to share the warmth of Pakistani hospitality.", "Every dish is a celebration of our heritage, prepared with hand-picked spices and locally sourced ingredients. From the bustling streets of Lahore to the vibrant markets of Karachi, we've carefully curated a menu that reflects the diversity and richness of our food culture.", "Join us for an unforgettable dining experience where every bite tells a story. We're more than just a cafe; we're a community hub where food, culture, and friendship intertwine."]}
/>
</div>
<div id="features" data-section="features">
<FeatureCardNine
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={true}
features={[
{
title: "Cozy Ambiance", description: "Enjoy your meal in a warm, inviting setting that blends traditional Pakistani decor with modern comfort, perfect for family dinners or casual meetups.", phoneOne: {
imageSrc: "http://img.b2bpic.net/free-photo/laptop-digital-tablet-book-pot-plant-wooden-table-restaurant_23-2147936091.jpg", imageAlt: "Cozy cafe interior with traditional Pakistani decor"},
phoneTwo: {
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-eating-fresh-cheese_23-2150267639.jpg", imageAlt: "Chef preparing Pakistani dishes in a clean kitchen"}
title: "Hand-Picked Spices", description: "We source the finest spices directly from local markets in Pakistan, ensuring unparalleled aroma and flavor in every dish.", phoneOne: { imageSrc: "https://framerusercontent.com/images/0g0U4pQWf64sC15vW2f2x4y3z1Q.png", imageAlt: "Hand-picked spices" },
phoneTwo: { imageSrc: "https://framerusercontent.com/images/R9eTqN6Q4B4z0M8y5D2k2k7V7c.png", imageAlt: "Spice market" }
},
{
title: "Effortless Online Ordering", description: "Browse our full menu and place your order with ease through our user-friendly online platform. Choose between convenient pickup or reliable delivery straight to your door.", phoneOne: {
imageSrc: "http://img.b2bpic.net/free-photo/positive-delivery-woman-holding-pizza-coffee-cups-gray-wall_114579-30995.jpg", imageAlt: "Food delivery person on a scooter"},
phoneTwo: {
imageSrc: "http://img.b2bpic.net/free-photo/traditional-mexican-food-world-tourism-day_23-2149114018.jpg", imageAlt: "Mobile phone displaying online food ordering app"}
title: "Traditional Recipes", description: "Our chefs adhere strictly to age-old family recipes passed down through generations, preserving the true essence of Pakistani cuisine.", phoneOne: { imageSrc: "https://framerusercontent.com/images/X1eTqN6Q4B4z0M8y5D2k2k7V7c.png", imageAlt: "Traditional recipe book" },
phoneTwo: { imageSrc: "https://framerusercontent.com/images/W2x2k7V7cV6T4eR1N6Q4B4z0M8y5D2k.png", imageAlt: "Chef preparing food traditionally" }
},
{
title: "Catering for Every Occasion", description: "Let us bring the taste of Pakistan to your special events. We offer customizable catering menus for gatherings of all sizes, ensuring a memorable culinary experience for your guests.", phoneOne: {
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-women-with-delicious-food_23-2150215553.jpg", imageAlt: "Group of friends dining together at the cafe"},
phoneTwo: {
imageSrc: "http://img.b2bpic.net/free-photo/business-people-serving-themselves-buffet_1262-1698.jpg", imageAlt: "A vibrant catering spread for an event"}
title: "Fresh Local Ingredients", description: "We complement our imported spices with fresh, locally sourced ingredients to ensure quality and support our community.", phoneOne: { imageSrc: "https://framerusercontent.com/images/D1o2X1QkC11vL7j733D6t7vK0pD.png", imageAlt: "Fresh vegetables" },
phoneTwo: { imageSrc: "https://framerusercontent.com/images/M8y5D2k2k7V7cK1eTqN6Q4B4z0.png", imageAlt: "Farm-fresh produce" }
}
]}
showStepNumbers={true}
title="Why Choose The Flavorful Cafe?"
description="Discover what makes us the preferred destination for authentic Pakistani and local cuisine, from our delightful ambiance to our convenient services."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardTwelve
useInvertedBackground={false}
testimonials={[
]
}
},
{
id: "testimonials", Component: TestimonialCardTwelve,
props: {
cardTitle: "What Our Guests Say", cardTag: "Satisfied Palates", cardAnimation: "entrance-slide", useInvertedBackground: false,
testimonials: [
{ id: "1", name: "Aisha Khan", imageSrc: "https://framerusercontent.com/images/L9eTqN6Q4B4z0M8y5D2k2k7V7c.png", imageAlt: "Aisha Khan" },
{ id: "2", name: "Omar Malik", imageSrc: "https://framerusercontent.com/images/K2x2k7V7cV6T4eR1N6Q4B4z0M8y5D.png", imageAlt: "Omar Malik" },
{ id: "3", name: "Fatima Ali", imageSrc: "https://framerusercontent.com/images/R9eTqN6Q4B4z0M8y5D2k2k7V7c.png", imageAlt: "Fatima Ali" }
]
}
},
{
id: "faq", Component: FaqBase,
props: {
title: "Frequently Asked Questions", description: "Find answers to common questions about our cafe, menu, and services.", tag: "Your Queries Answered", faqsAnimation: "entrance-slide", textboxLayout: "default", useInvertedBackground: true,
faqs: [
{
id: "1", name: "Ayesha Khan", imageSrc: "http://img.b2bpic.net/free-photo/girl-sitting-table-holding-mobile-phone-indoors_171337-17097.jpg", imageAlt: "Ayesha Khan"},
id: "1", title: "What are your most popular dishes?", content: "Our Chicken Biryani, Beef Karahi, and Mutton Korma are highly recommended by our regulars. Don't forget to try our freshly baked Naan!"
},
{
id: "2", name: "Ahmed Raza", imageSrc: "http://img.b2bpic.net/free-photo/smiling-man-having-coffee-pastry-coffee-shop_1170-2321.jpg", imageAlt: "Ahmed Raza"},
id: "2", title: "Do you offer catering services?", content: "Yes, we offer catering for events of all sizes. Please contact us directly for customized menus and pricing."
},
{
id: "3", name: "Zara Tariq", imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-young-woman-watching-tv-show-headphones-eating-breakfast-looking_1258-281780.jpg", imageAlt: "Zara Tariq"},
id: "3", title: "Are there vegetarian or vegan options?", content: "We have a selection of delicious vegetarian dishes, and we can often adapt certain items to be vegan-friendly. Please inquire with our staff."
},
{
id: "4", name: "Imran Butt", imageSrc: "http://img.b2bpic.net/free-photo/young-friends-having-good-time_23-2148395391.jpg", imageAlt: "Imran Butt"},
{
id: "5", name: "Nadia Malik", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-old-woman-with-beverage_23-2148695445.jpg", imageAlt: "Nadia Malik"}
]}
cardTitle="Absolutely delicious!"
cardTag="Customer Review"
cardAnimation="slide-up"
/>
</div>
<div id="faq" data-section="faq">
<FaqBase
textboxLayout="default"
useInvertedBackground={true}
faqs={[
{
id: "faq-1", title: "Do you offer vegetarian options?", content: "Yes, we have a wide range of delicious vegetarian dishes, including Aloo Gobi, Daal Fry, and various vegetable curries. Please check our menu for more details."},
{
id: "faq-2", title: "What are your operating hours?", content: "We are open from 11:00 AM to 10:00 PM, seven days a week. Holiday hours may vary, so please check our website or call us for special occasions."},
{
id: "faq-3", title: "Do you provide catering services?", content: "Absolutely! We offer catering for all types of events, from small family gatherings to large corporate functions. Please contact us to discuss your specific needs and customize a menu."},
{
id: "faq-4", title: "Is online ordering available for delivery?", content: "Yes, you can conveniently place your order online for both pickup and delivery through our website or preferred food delivery partners. Delivery charges may apply."}
]}
title="Frequently Asked Questions"
description="Find quick answers to common questions about our menu, services, and cafe."
faqsAnimation="slide-up"
/>
</div>
<div id="contact" data-section="contact">
<ContactCenter
useInvertedBackground={false}
background={{
variant: "plain"}}
tag="Get in Touch"
title="Contact The Flavorful Cafe"
description="Have questions, special requests, or want to book catering? Reach out to us!"
inputPlaceholder="Your Email Address"
buttonText="Send Message"
termsText="By sending a message, you're confirming that you agree with our Privacy Policy."
/>
</div>
<div id="footer" data-section="footer">
<FooterBase
columns={[
id: "4", title: "What are your operating hours?", content: "We are open from 11 AM to 10 PM, Monday through Saturday. We are closed on Sundays."
}
]
}
},
{
id: "contact", Component: ContactCenter,
props: {
tag: "Get in Touch", title: "Contact Us", description: "Have questions or want to make a reservation? Reach out to us!", background: { variant: "radial-gradient" },
useInvertedBackground: false,
inputPlaceholder: "Your email address", buttonText: "Send Message", termsText: "By sending a message, you agree to our Privacy Policy."
}
},
{
id: "footer", Component: FooterBase,
props: {
logoText: "The Flavorful Cafe", copyrightText: "© 2024 The Flavorful Cafe. All rights reserved.", columns: [
{
title: "Explore", items: [
{
label: "Home", href: "#hero"},
{
label: "About Us", href: "#about"},
{
label: "Catering", href: "#features"}
{ label: "Home", href: "/" },
{ label: "Menu", href: "#menu" },
{ label: "About Us", href: "/about" },
{ label: "Features", href: "#features" },
{ label: "Testimonials", href: "#testimonials" }
]
},
{
title: "Support", items: [
{
label: "Contact Us", href: "#contact"},
{
label: "FAQs", href: "#faq"}
{ label: "FAQ", href: "#faq" },
{ label: "Contact", href: "#contact" },
{ label: "Privacy Policy", href: "#" },
{ label: "Terms of Service", href: "#" }
]
},
{
title: "Connect", items: [
{
label: "Facebook", href: "#"},
{
label: "Instagram", href: "#"},
{
label: "Twitter", href: "#"}
{ label: "Facebook", href: "#" },
{ label: "Instagram", href: "#" },
{ label: "Twitter", href: "#" }
]
}
]}
logoText="The Flavorful Cafe"
copyrightText="© 2024 The Flavorful Cafe | All rights reserved."
/>
</div>
]
}
}
];
export default function Home() {
const [menuProducts] = useState(initialMenuProducts);
const Navbar = NavbarLayoutFloatingInline;
const navItems = [
{ name: "Home", id: "/" },
{ name: "Menu", id: "#menu" },
{ name: "About Us", id: "/about" },
{ name: "Features", id: "#features" },
{ name: "Testimonials", id: "#testimonials" },
{ name: "FAQ", id: "#faq" },
{ name: "Contact", id: "#contact" }
];
return (
<ThemeProvider
defaultButtonVariant="hover-magnetic"
defaultTextAnimation="background-highlight"
borderRadius="rounded"
contentWidth="smallMedium"
sizing="large"
background="noise"
cardStyle="gradient-radial"
primaryButtonStyle="gradient"
secondaryButtonStyle="solid"
headingFontWeight="extrabold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<Navbar
navItems={navItems}
brandName="The Flavorful Cafe"
button={{
text: "Order Now", href: "#menu"
}}
/>
</div>
{homeSections.map((section, index) => {
const SectionComponent = section.Component;
if (section.id === "menu") {
return (
<div key={index} id={section.id} data-section={section.id}>
<SectionComponent {...section.props} products={menuProducts} />
</div>
);
}
return (
<div key={index} id={section.id} data-section={section.id}>
<SectionComponent {...section.props} />
</div>
);
})}
</ReactLenis>
</ThemeProvider>
);
}
}