215 lines
13 KiB
TypeScript
215 lines
13 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
|
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
|
|
import TextAbout from '@/components/sections/about/TextAbout';
|
|
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
|
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
|
|
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
|
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-magnetic"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="soft"
|
|
contentWidth="smallMedium"
|
|
sizing="mediumSizeLargeTitles"
|
|
background="grid"
|
|
cardStyle="inset"
|
|
primaryButtonStyle="flat"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="semibold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingOverlay
|
|
brandName="Bella Italia"
|
|
navItems={[
|
|
{ name: "Menu", id: "menu" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Testimonials", id: "testimonials" },
|
|
{ name: "FAQ", id: "faq" },
|
|
{ name: "Contact", id: "contact" },
|
|
]}
|
|
button={{ text: "Reserve a Table", href: "#contact" }}
|
|
className="py-4 px-6"
|
|
buttonClassName="px-5 py-2"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitDualMedia
|
|
background={{ variant: "plain" }}
|
|
tag="Authentic Italian Flavors"
|
|
title="Experience the Taste of Italy at Bella Italia"
|
|
description="Savor traditional Italian cuisine crafted with passion and the freshest ingredients. From classic pasta to delectable desserts, every dish tells a story."
|
|
mediaItems={[
|
|
{
|
|
imageSrc: "https://img.b2bpic.net/free-photo/close-up-large-tube-pasta-with-chicken-cherry-tomato-with-chopped-parsley_141793-1840.jpg?_wi=1", imageAlt: "Gourmet Italian pasta dish"},
|
|
{
|
|
imageSrc: "https://img.b2bpic.net/free-photo/wicker-gray-table-with-glass-gray-chairs_140725-3025.jpg", imageAlt: "Cozy Italian restaurant interior"},
|
|
]}
|
|
rating={5}
|
|
ratingText="Loved by Our Guests"
|
|
buttons={[
|
|
{ text: "View Our Menu", href: "#menu" },
|
|
{ text: "Book a Table", href: "#contact" },
|
|
]}
|
|
mediaAnimation="slide-up"
|
|
tagAnimation="blur-reveal"
|
|
buttonAnimation="slide-up"
|
|
className="py-20"
|
|
textBoxClassName="text-center lg:text-left"
|
|
titleClassName="text-4xl md:text-5xl lg:text-6xl leading-tight font-headingFontWeight"
|
|
descriptionClassName="text-lg md:text-xl"
|
|
tagClassName="text-primary-cta font-medium"
|
|
buttonContainerClassName="flex flex-col sm:flex-row justify-center lg:justify-start gap-4 mt-6"
|
|
buttonClassName="min-w-[180px]"
|
|
mediaWrapperClassName="grid grid-cols-1 gap-4 lg:grid-cols-2"
|
|
mediaItemClassName="rounded-lg overflow-hidden shadow-lg"
|
|
ratingClassName="text-accent"
|
|
ratingTextClassName="text-sm text-foreground/70"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TextAbout
|
|
tag="Our Story"
|
|
title="Where Tradition Meets Culinary Excellence"
|
|
buttons={[{ text: "Learn More", href: "#" }]}
|
|
useInvertedBackground={false}
|
|
tagAnimation="blur-reveal"
|
|
buttonAnimation="slide-up"
|
|
className="py-20"
|
|
titleClassName="text-3xl md:text-4xl lg:text-5xl leading-tight font-headingFontWeight text-center"
|
|
buttonContainerClassName="flex justify-center mt-8"
|
|
buttonClassName="min-w-[180px]"
|
|
/>
|
|
<p className="text-lg md:text-xl max-w-3xl mx-auto text-center -mt-12 text-foreground/80">
|
|
At Bella Italia, we're dedicated to bringing the authentic taste of Italy to your table. Our chefs use time-honored recipes passed down through generations, combined with fresh, locally sourced ingredients to create an unforgettable dining experience. Every visit is a journey to the heart of Italy.
|
|
</p>
|
|
</div>
|
|
|
|
<div id="menu" data-section="menu">
|
|
<ProductCardOne
|
|
title="Our Delicious Menu"
|
|
description="Explore a symphony of flavors, from classic pasta dishes to fresh, wood-fired pizzas and decadent desserts."
|
|
products={[
|
|
{
|
|
id: "1", name: "Classic Margherita Pizza", price: "$18.00", imageSrc: "https://img.b2bpic.net/free-photo/homemade-pizza-food-photography-recipe-idea_53876-38.jpg", imageAlt: "Fresh Margherita pizza"},
|
|
{
|
|
id: "2", name: "Homemade Ravioli with Sage Butter", price: "$22.00", imageSrc: "https://img.b2bpic.net/free-photo/top-view-fresh-ingredients-dark-surface_23-2147606593.jpg", imageAlt: "Homemade Ravioli"},
|
|
{
|
|
id: "3", name: "Tiramisu Classico", price: "$10.00", imageSrc: "https://img.b2bpic.net/free-photo/tasty-homemade-tiramisu-cake_114579-43338.jpg", imageAlt: "Classic Tiramisu"},
|
|
{
|
|
id: "4", name: "Spaghetti Carbonara", price: "$20.00", imageSrc: "https://img.b2bpic.net/free-photo/close-up-large-tube-pasta-with-chicken-cherry-tomato-with-chopped-parsley_141793-1840.jpg?_wi=2", imageAlt: "Spaghetti Carbonara"},
|
|
]}
|
|
gridVariant="four-items-2x2-equal-grid"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
className="py-20"
|
|
textBoxClassName="text-center"
|
|
textBoxTitleClassName="text-3xl md:text-4xl lg:text-5xl leading-tight font-headingFontWeight"
|
|
textBoxDescriptionClassName="text-lg md:text-xl max-w-3xl mx-auto mb-10"
|
|
cardClassName="rounded-lg overflow-hidden shadow-md group"
|
|
imageClassName="w-full h-60 object-cover transform transition-transform duration-300 group-hover:scale-105"
|
|
cardNameClassName="text-xl font-medium mt-4 px-4"
|
|
cardPriceClassName="text-lg text-primary-cta font-semibold px-4 pb-4"
|
|
gridClassName="grid gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardThirteen
|
|
title="What Our Guests Say"
|
|
description="Hear from our cherished customers about their dining experiences at Bella Italia."
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Sofia Rossi", handle: "@sofiar", testimonial: "Bella Italia is a true gem! The pasta is divine, and the ambiance makes you feel like you're in Rome. Highly recommend the tiramisu!", rating: 5,
|
|
imageSrc: "https://img.b2bpic.net/free-photo/smiling-african-american-man-posing-library_74855-1619.jpg?_wi=1", imageAlt: "Sofia Rossi avatar"},
|
|
{
|
|
id: "2", name: "Marco Bianchi", handle: "@marcob", testimonial: "An exquisite culinary journey. Every dish was perfectly crafted, and the service was impeccable. My new favorite Italian restaurant!", rating: 5,
|
|
imageSrc: "https://img.b2bpic.net/free-photo/smiling-african-american-man-posing-library_74855-1619.jpg?_wi=2", imageAlt: "Marco Bianchi avatar"},
|
|
{
|
|
id: "3", name: "Elena Ricci", handle: "@elenar", testimonial: "The best authentic Italian food I've had outside of Italy. The flavors are incredible, and the staff are so welcoming. A must-visit!", rating: 5,
|
|
imageSrc: "https://img.b2bpic.net/free-photo/smiling-african-american-man-posing-library_74855-1619.jpg?_wi=3", imageAlt: "Elena Ricci avatar"},
|
|
{
|
|
id: "4", name: "Giovanni Esposito", handle: "@giovannie", testimonial: "From appetizers to dessert, everything was fantastic. The wine selection is superb, and the atmosphere is perfect for a special evening.", rating: 5,
|
|
imageSrc: "https://img.b2bpic.net/free-photo/smiling-african-american-man-posing-library_74855-1619.jpg?_wi=4", imageAlt: "Giovanni Esposito avatar"},
|
|
]}
|
|
showRating={true}
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
useInvertedBackground={false}
|
|
className="py-20 bg-background-accent/20"
|
|
textBoxClassName="text-center"
|
|
textBoxTitleClassName="text-3xl md:text-4xl lg:text-5xl leading-tight font-headingFontWeight"
|
|
textBoxDescriptionClassName="text-lg md:text-xl max-w-3xl mx-auto mb-10"
|
|
cardClassName="bg-card p-6 rounded-lg shadow-lg flex flex-col items-center text-center h-full"
|
|
imageWrapperClassName="w-20 h-20 rounded-full overflow-hidden mb-4 border-2 border-primary-cta"
|
|
imageClassName="w-full h-full object-cover"
|
|
nameClassName="font-semibold text-lg"
|
|
handleClassName="text-sm text-foreground/60 mb-2"
|
|
testimonialClassName="text-foreground/80 italic mb-4"
|
|
ratingClassName="text-accent"
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitText
|
|
sideTitle="Common Questions"
|
|
sideDescription="Find answers to the most frequently asked questions about Bella Italia."
|
|
faqs={[
|
|
{
|
|
id: "1", title: "Do you take reservations?", content: "Yes, we highly recommend making a reservation, especially for weekend evenings. You can book through our website or by calling us directly."},
|
|
{
|
|
id: "2", title: "What are your opening hours?", content: "We are open for dinner from Tuesday to Sunday, 5:00 PM - 10:00 PM. Closed on Mondays."},
|
|
{
|
|
id: "3", title: "Do you offer vegetarian or vegan options?", content: "Absolutely! Our menu includes a variety of vegetarian and vegan dishes, and our chefs are happy to accommodate dietary restrictions. Please inform your server."},
|
|
{
|
|
id: "4", title: "Can you host private events?", content: "Yes, we have private dining options available for special occasions and events. Please contact us for more details and availability."},
|
|
]}
|
|
textPosition="left"
|
|
faqsAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
className="py-20"
|
|
textContainerClassName="pr-4 lg:pr-8"
|
|
faqsContainerClassName="pl-4 lg:pl-8"
|
|
sideTitleClassName="text-3xl md:text-4xl lg:text-5xl leading-tight font-headingFontWeight"
|
|
sideDescriptionClassName="text-lg text-foreground/80 mt-4"
|
|
accordionClassName="rounded-lg shadow-sm border border-border/20"
|
|
accordionTitleClassName="font-semibold text-lg"
|
|
accordionContentClassName="text-foreground/70"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCenter
|
|
tag="Visit Us"
|
|
title="Book Your Table or Send a Message"
|
|
description="We'd love to welcome you to Bella Italia. Make a reservation online or reach out with any questions. We look forward to serving you!"
|
|
background={{ variant: "plain" }}
|
|
inputPlaceholder="Your Email Address"
|
|
buttonText="Send Message"
|
|
termsText="By sending a message, you agree to our privacy policy."
|
|
useInvertedBackground={false}
|
|
tagAnimation="blur-reveal"
|
|
className="py-20 bg-background-accent/20"
|
|
contentClassName="max-w-xl mx-auto text-center"
|
|
tagClassName="text-primary-cta font-medium mb-4"
|
|
titleClassName="text-3xl md:text-4xl lg:text-5xl leading-tight font-headingFontWeight"
|
|
descriptionClassName="text-lg md:text-xl mt-4"
|
|
formWrapperClassName="mt-8"
|
|
formClassName="flex flex-col gap-4 items-center"
|
|
inputClassName="w-full max-w-md p-3 rounded-md border border-accent/50 focus:ring-2 focus:ring-primary-cta focus:border-primary-cta transition-colors"
|
|
buttonClassName="w-full max-w-md p-3 rounded-md text-white font-semibold"
|
|
termsClassName="text-sm text-foreground/60 mt-4"
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|