Files
1427fb92-b3e6-409b-a16d-ae7…/src/app/page.tsx
2026-06-03 11:21:55 +00:00

216 lines
16 KiB
TypeScript

"use client";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroSplit from '@/components/sections/hero/HeroSplit';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import PricingCardOne from '@/components/sections/pricing/PricingCardOne';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterBase from '@/components/sections/footer/FooterBase';
import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
import { Sparkles, Star, Award } from 'lucide-react';
const ASSET_MAP = [
{"id":"hero-interior","url":"http://img.b2bpic.net/free-photo/people-having-dinner-luxurious-restaurants_23-2151081849.jpg","alt":"elegant restaurant interior fine dining"},
{"id":"about-story","url":"http://img.b2bpic.net/free-photo/female-chef-kitchen-separating-eggs-bowl_23-2149720737.jpg","alt":"chef preparing gourmet meal kitchen"},
{"id":"dish-sea-bass","url":"http://img.b2bpic.net/free-photo/top-view-chicken-with-cheese-plate-bunch-parsley-lemon-cherry-tomatoes-spices-bowls-grey-table-with-copy-place_140725-85348.jpg","alt":"grilled sea bass elegant plating"},
{"id":"dish-lamb-shank","url":"http://img.b2bpic.net/free-photo/fried-chicken-with-herbs-pomegranate_140725-3613.jpg","alt":"braised lamb shank mashed potatoes"},
{"id":"dish-truffle-risotto","url":"http://img.b2bpic.net/free-photo/fettucine-with-cheese-mushrooms_140725-337.jpg","alt":"truffle risotto elegant creamy dish"},
{"id":"product-pasta","url":"http://img.b2bpic.net/free-photo/top-view-chicken-with-dough-pasta-dish-dark-surface-pasta-meal-dough_140725-82188.jpg","alt":"gourmet pasta dish fresh ingredients"},
{"id":"product-steak","url":"http://img.b2bpic.net/free-photo/grilled-beef-steak-served-with-mushroom-sauce-potato-dish_140725-5830.jpg","alt":"perfectly cooked steak plate"},
{"id":"product-dessert","url":"http://img.b2bpic.net/free-photo/top-view-delicious-cheesecake-with-strawberry-chocolate-plate-red-shawl-dark-isolated-background_140725-136688.jpg","alt":"decadent chocolate lava cake"},
{"id":"product-salad","url":"http://img.b2bpic.net/free-photo/top-view-fresh-vegetables-tomato-cucumber-red-onion-herbs-wooden-table_140725-10390.jpg","alt":"fresh garden salad gourmet greens"},
{"id":"product-soup","url":"http://img.b2bpic.net/free-photo/top-view-meat-meal-with-cutlery-table-food-cook-meal-restaurant_140725-28229.jpg","alt":"creamy tomato soup basil croutons"},
{"id":"product-cocktail","url":"http://img.b2bpic.net/free-photo/highend-craft-cocktail-isolated-black-background_181624-58688.jpg","alt":"elegant cocktail glass bar"},
{"id":"avatar-1","url":"http://img.b2bpic.net/free-photo/young-businessman-happy-expression_1194-1613.jpg","alt":"professional male portrait smiling"},
{"id":"avatar-2","url":"http://img.b2bpic.net/free-photo/merry-young-adult-enjoying-christmas-conversation-video-call-room-decorated-festivity-celebration-talking-woman-preparing-drink-wine-kitchen-with-joyful-ornaments_482257-28400.jpg","alt":"professional female portrait smiling"},
{"id":"avatar-3","url":"http://img.b2bpic.net/free-photo/portrait-young-businesswoman-her-own-cafe-manager-standing-near-entrance-inviting-you_1258-198995.jpg","alt":"male chef portrait professional"},
{"id":"avatar-4","url":"http://img.b2bpic.net/free-photo/closeup-smiling-beautiful-adult-businesswoman_1262-1760.jpg","alt":"female sommelier portrait wine"},
{"id":"avatar-5","url":"http://img.b2bpic.net/free-photo/young-caucasian-woman-smiling-confident-looking-side-street_839833-24417.jpg","alt":"diverse person smiling portrait"},
{"id":"faq-chef-cooking","url":"http://img.b2bpic.net/free-photo/female-chef-kitchen-frying-food_23-2149720777.jpg","alt":"chef cooking in professional kitchen"},
{"id":"contact-exterior","url":"http://img.b2bpic.net/free-photo/cinematic-style-view-parent-child-spending-time-together_23-2151587602.jpg","alt":"charming restaurant exterior night"}
];
const getAsset = (id) => ASSET_MAP.find(asset => asset.id === id);
export default function LandingPage() {
const theme = {
defaultButtonVariant: "expand-hover", defaultTextAnimation: "entrance-slide", borderRadius: "pill", contentWidth: "mediumLarge", sizing: "largeSmallSizeMediumTitles", background: "noiseDiagonalGradient", cardStyle: "outline", primaryButtonStyle: "double-inset", secondaryButtonStyle: "layered", headingFontWeight: "bold"
} as const;
return (
<ThemeProvider
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}
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
brandName="Restaurant Francis"
navItems={[
{ name: "Home", id: "#hero" },
{ name: "About", id: "#about" },
{ name: "Menu", id: "#menu" },
{ name: "Specials", id: "#specials" },
{ name: "Testimonials", id: "#testimonials" },
{ name: "Reservations", id: "#contact" }
]}
button={{ text: "Book a Table", href: "#contact" }}
/>
</div>
<div id="hero" data-section="hero">
<HeroSplit
title="Experience Culinary Excellence at Restaurant Francis"
description="Savor exquisite flavors in an elegant setting. Join us for an unforgettable dining experience."
background={{ variant: "radial-gradient" }}
buttons={[
{ text: "View Menu", href: "#menu" },
{ text: "Make a Reservation", href: "#contact" }
]}
imageSrc={getAsset("hero-interior")?.url || ''}
imageAlt={getAsset("hero-interior")?.alt || "Elegant restaurant interior with warm lighting"}
mediaAnimation="slide-up"
imagePosition="right"
fixedMediaHeight={true}
/>
</div>
<div id="about" data-section="about">
<TextSplitAbout
title="Our Story: Passion for Fine Dining"
description={[
"At Restaurant Francis, we believe in crafting more than just meals—we create memories. Our journey began with a simple desire: to share the rich culinary heritage of our family with the community.", "For years, we've dedicated ourselves to sourcing the finest local ingredients, perfecting timeless recipes, and innovating with contemporary techniques. Every dish tells a story, a symphony of flavors designed to delight your palate and warm your soul. Welcome to our table, where every guest is family."
]}
useInvertedBackground={true}
/>
</div>
<div id="specials" data-section="specials">
<FeatureCardTwelve
title="Signature Dishes & Culinary Delights"
description="Discover some of our most celebrated creations, crafted with passion and precision by our award-winning chefs."
features={[
{ id: "1", label: "Seasonal Catch", title: "Grilled Sea Bass", items: ["Fresh, flaky, perfectly seasoned", "Served with asparagus and lemon-butter sauce", "A light yet satisfying choice"] },
{ id: "2", label: "House Specialty", title: "Braised Lamb Shank", items: ["Tender, rich, fall-off-the-bone goodness", "Slow-cooked to perfection with root vegetables", "Paired with creamy polenta"] },
{ id: "3", label: "Vegetarian Indulgence", title: "Truffle Risotto", items: ["Creamy, aromatic, a true indulgence", "Arborio rice cooked with wild mushrooms and truffle oil", "Finished with Parmesan cheese"] }
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="menu" data-section="menu">
<ProductCardTwo
title="Our Curated Seasonal Menu"
description="Explore our diverse offerings, from appetizers to decadent desserts, all prepared with fresh, seasonal ingredients."
products={[
{ id: "prod-1", brand: "Restaurant Francis", name: "Handmade Tagliatelle", price: "$28", rating: 5, reviewCount: "24", imageSrc: getAsset("product-pasta")?.url || '', imageAlt: getAsset("product-pasta")?.alt || "Handmade Tagliatelle" },
{ id: "prod-2", brand: "Restaurant Francis", name: "Dry-Aged Ribeye Steak", price: "$55", rating: 5, reviewCount: "38", imageSrc: getAsset("product-steak")?.url || '', imageAlt: getAsset("product-steak")?.alt || "Dry-Aged Ribeye Steak" },
{ id: "prod-3", brand: "Restaurant Francis", name: "Molten Chocolate Lava Cake", price: "$16", rating: 5, reviewCount: "19", imageSrc: getAsset("product-dessert")?.url || '', imageAlt: getAsset("product-dessert")?.alt || "Molten Chocolate Lava Cake" },
{ id: "prod-4", brand: "Restaurant Francis", name: "Heirloom Tomato Salad", price: "$18", rating: 4, reviewCount: "12", imageSrc: getAsset("product-salad")?.url || '', imageAlt: getAsset("product-salad")?.alt || "Heirloom Tomato Salad" },
{ id: "prod-5", brand: "Restaurant Francis", name: "Cream of Mushroom Soup", price: "$14", rating: 5, reviewCount: "9", imageSrc: getAsset("product-soup")?.url || '', imageAlt: getAsset("product-soup")?.alt || "Cream of Mushroom Soup" },
{ id: "prod-6", brand: "Restaurant Francis", name: "Signature Old Fashioned", price: "$19", rating: 5, reviewCount: "22", imageSrc: getAsset("product-cocktail")?.url || '', imageAlt: getAsset("product-cocktail")?.alt || "Signature Old Fashioned Cocktail" }
]}
gridVariant="uniform-all-items-equal"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={true}
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardFifteen
testimonial="Dining at Restaurant Francis was an absolute delight! Every dish was a masterpiece, beautifully presented and bursting with flavor. The ambiance was perfect for a special occasion, and the service was impeccable. We can't wait to return!"
rating={5}
author="Sophia L., Food Critic"
avatars={[
{ src: getAsset("avatar-1")?.url || '', alt: getAsset("avatar-1")?.alt || "Sophia L." },
{ src: getAsset("avatar-2")?.url || '', alt: getAsset("avatar-2")?.alt || "John P." },
{ src: getAsset("avatar-3")?.url || '', alt: getAsset("avatar-3")?.alt || "Maria G." },
{ src: getAsset("avatar-4")?.url || '', alt: getAsset("avatar-4")?.alt || "David K." },
{ src: getAsset("avatar-5")?.url || '', alt: getAsset("avatar-5")?.alt || "Emily R." }
]}
ratingAnimation="blur-reveal"
avatarsAnimation="slide-up"
useInvertedBackground={false}
/>
</div>
<div id="private-dining" data-section="private-dining">
<PricingCardOne
title="Host Your Special Event"
description="From intimate gatherings to grand celebrations, Restaurant Francis offers bespoke dining experiences and catering services tailored to your needs."
plans={[
{ id: "plan-1", badge: "Exclusive", badgeIcon: Sparkles, price: "Inquire", subtitle: "Intimate Dinner Package", features: ["Private dining room access", "Customizable 3-course menu", "Dedicated service staff", "Sommelier wine pairing option"] },
{ id: "plan-2", badge: "Popular", badgeIcon: Star, price: "Inquire", subtitle: "Celebration Event Package", features: ["Semi-private dining area", "Choice of 4-course prefixed menus", "Complimentary welcome sparkling wine", "Personalized event coordination"] },
{ id: "plan-3", badge: "Signature", badgeIcon: Award, price: "Inquire", subtitle: "Full-Service Catering", features: ["Off-site catering for any occasion", "Tailored menu creation by our Head Chef", "Professional waitstaff and setup", "Premium tableware and decor options"] }
]}
animationType="depth-3d"
textboxLayout="default"
useInvertedBackground={true}
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitMedia
title="Frequently Asked Questions"
description="Find quick answers to common inquiries about reservations, dining, and special requests at Restaurant Francis."
faqs={[
{ id: "faq-1", title: "How do I make a reservation?", content: "Reservations can be made easily through our website's 'Contact' section, or by calling us directly during business hours. We recommend booking in advance, especially for weekend evenings." },
{ id: "faq-2", title: "Do you accommodate dietary restrictions?", content: "Absolutely. Please inform us of any dietary restrictions or allergies when making your reservation, and our chefs will be happy to prepare suitable alternatives. We strive to cater to all our guests' needs." },
{ id: "faq-3", title: "Is there a dress code at Restaurant Francis?", content: "We maintain a smart-casual dress code to ensure a comfortable yet elegant dining experience for all our guests. Jackets are preferred but not required for gentlemen." }
]}
imageSrc={getAsset("faq-chef-cooking")?.url || ''}
imageAlt={getAsset("faq-chef-cooking")?.alt || "Chef preparing a meal in a fine dining kitchen"}
mediaAnimation="slide-up"
mediaPosition="left"
faqsAnimation="blur-reveal"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="contact" data-section="contact">
<ContactSplit
tag="Reservations"
title="Reserve Your Table"
description="Ready for an unforgettable dining experience? Contact us to make a reservation or inquire about private events and catering."
background={{ variant: "downward-rays-static" }}
imageSrc={getAsset("contact-exterior")?.url || ''}
imageAlt={getAsset("contact-exterior")?.alt || "Exterior of Restaurant Francis at twilight"}
mediaAnimation="slide-up"
mediaPosition="right"
inputPlaceholder="Enter your email for updates"
buttonText="Submit Inquiry"
termsText="By submitting, you agree to receive updates and promotions from Restaurant Francis."
useInvertedBackground={true}
/>
</div>
<div id="footer" data-section="footer">
<FooterBase
logoText="Restaurant Francis"
copyrightText="© 2024 Restaurant Francis. All rights reserved."
columns={[
{ title: "Explore", items: [{ label: "Home", href: "#hero" }, { label: "Menu", href: "#menu" }, { label: "About Us", href: "#about" }, { label: "Specials", href: "#specials" }] },
{ title: "Connect", items: [{ label: "Reservations", href: "#contact" }, { label: "Private Events", href: "#private-dining" }, { label: "Contact Us", href: "#contact" }] },
{ title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }] }
]}
/>
</div>
</ThemeProvider>
);
}