2 Commits

Author SHA1 Message Date
f90b79f95f Update src/app/page.tsx 2025-12-26 15:49:08 +00:00
83deee7eaa Update src/app/layout.tsx 2025-12-26 15:49:07 +00:00
2 changed files with 288 additions and 253 deletions

View File

@@ -1261,4 +1261,4 @@ export default function RootLayout({
</ServiceWrapper> </ServiceWrapper>
</html> </html>
); );
} }

View File

@@ -1,7 +1,15 @@
"use client"; "use client"
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { Linkedin } from 'lucide-react'; import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroLogoCarousel from '@/components/sections/hero/HeroLogoCarousel';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
import PricingCardSix from '@/components/sections/pricing/PricingCardSix';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
import ContactText from '@/components/sections/contact/ContactText';
import FooterBase from '@/components/sections/footer/FooterBase';
import TeamCardOne from '@/components/sections/team/TeamCardOne';
export default function LandingPage() { export default function LandingPage() {
return ( return (
@@ -18,280 +26,307 @@ export default function LandingPage() {
headingFontWeight="normal" headingFontWeight="normal"
> >
<div id="nav" data-section="nav"> <div id="nav" data-section="nav">
<div className="p-4 text-center bg-gray-900 text-white"> <NavbarStyleApple
<h1 className="text-2xl font-bold">Big Eat</h1> brandName="Big Eat"
<nav className="mt-4 space-x-4"> navItems={[
<a href="#menu" className="hover:underline">Menu</a> { name: "Menu", id: "menu" },
<a href="#about" className="hover:underline">About</a> { name: "About", id: "about" },
<a href="#contact" className="hover:underline">Reserve</a> { name: "Reserve", id: "contact" },
<a href="#contact" className="hover:underline">Contact</a> { name: "Contact", id: "#" }
</nav> ]}
</div> />
</div> </div>
<div id="hero" data-section="hero"> <div id="hero" data-section="hero">
<div className="min-h-screen flex items-center justify-center bg-gray-800 text-white"> <HeroLogoCarousel
<div className="text-center max-w-4xl px-6"> logoText="Big Eat"
<h1 className="text-6xl font-bold mb-6">Big Eat</h1> description="Bold flavors. Unforgettable moments. Discover exceptional cuisine in an environment designed for genuine connection."
<p className="text-xl mb-8">Bold flavors. Unforgettable moments. Discover exceptional cuisine in an environment designed for genuine connection.</p> mediaItems={[
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 mt-8"> {
<img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766762598685-ne2ej38m.jpg" alt="Signature Burger" className="w-full h-48 object-cover rounded" /> imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766762598685-ne2ej38m.jpg",
<img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766416786074-ne49srjf.jpg" alt="Fresh Pasta" className="w-full h-48 object-cover rounded" /> imageAlt: "Signature Burger"
<img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766762599651-d4jtg5xa.jpg" alt="Premium Steak" className="w-full h-48 object-cover rounded" /> },
<img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766762602538-hxlfutb0.jpg" alt="Fresh Salad" className="w-full h-48 object-cover rounded" /> {
</div> imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766416786074-ne49srjf.jpg",
</div> imageAlt: "Fresh Pasta"
</div> },
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766762599651-d4jtg5xa.jpg",
imageAlt: "Premium Steak"
},
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766762602538-hxlfutb0.jpg",
imageAlt: "Fresh Salad"
}
]}
/>
</div> </div>
<div id="about" data-section="about"> <div id="about" data-section="about">
<div className="py-16 px-6 bg-gray-100 text-gray-900"> <TextSplitAbout
<div className="max-w-6xl mx-auto"> title="About Big Eat"
<h2 className="text-4xl font-bold text-center mb-8">About Big Eat</h2> description={[
<div className="grid md:grid-cols-2 gap-8"> "Big Eat was born from a passion for authentic cuisine and a commitment to elevating the dining experience. We believe food brings people together, and every dish tells a story.",
<p className="text-lg">Big Eat was born from a passion for authentic cuisine and a commitment to elevating the dining experience. We believe food brings people together, and every dish tells a story.</p> "Our kitchen combines traditional techniques with fresh, locally-sourced ingredients. From casual appetizers to refined entrees, each plate reflects our dedication to quality and flavor."
<p className="text-lg">Our kitchen combines traditional techniques with fresh, locally-sourced ingredients. From casual appetizers to refined entrees, each plate reflects our dedication to quality and flavor.</p> ]}
</div> useInvertedBackground="noInvert"
<div className="text-center mt-8 space-x-4"> showBorder={false}
<a href="#menu" className="bg-red-600 text-white px-6 py-3 rounded hover:bg-red-700">View Menu</a> buttons={[
<a href="#contact" className="bg-transparent border border-red-600 text-red-600 px-6 py-3 rounded hover:bg-red-600 hover:text-white">Reserve a Table</a> { text: "View Menu", href: "menu" },
</div> { text: "Reserve a Table", href: "contact" }
</div> ]}
</div> />
</div> </div>
<div id="menu" data-section="menu"> <div id="menu" data-section="menu">
<div className="py-16 px-6 bg-white text-gray-900"> <FeatureCardTwelve
<div className="max-w-6xl mx-auto"> title="Explore Our Menu"
<h2 className="text-4xl font-bold text-center mb-4">Explore Our Menu</h2> description="Carefully curated selections that celebrate quality ingredients and bold flavors"
<p className="text-lg text-center mb-12">Carefully curated selections that celebrate quality ingredients and bold flavors</p> animationType="opacity"
<div className="grid md:grid-cols-3 gap-8"> textboxLayout="default"
<div className="bg-gray-50 p-6 rounded"> useInvertedBackground="noInvert"
<h3 className="text-2xl font-semibold mb-2">Starters</h3> features={[
<p className="text-gray-600 mb-4">Begin your journey with our hand-crafted appetizers</p> {
<ul className="space-y-2 mb-4"> id: "appetizers",
<li>Crispy calamari with aioli</li> label: "Starters",
<li>Burrata and heirloom tomato salad</li> title: "Begin your journey with our hand-crafted appetizers",
<li>Pan-seared scallops</li> items: [
<li>House-made bread and cultured butter</li> "Crispy calamari with aioli",
</ul> "Burrata and heirloom tomato salad",
<a href="#" className="text-red-600 hover:underline">Learn More</a> "Pan-seared scallops",
</div> "House-made bread and cultured butter"
<div className="bg-gray-50 p-6 rounded"> ],
<h3 className="text-2xl font-semibold mb-2">Mains</h3> buttons: [
<p className="text-gray-600 mb-4">Signature dishes that showcase our culinary expertise</p> { text: "Learn More", href: "#" }
<ul className="space-y-2 mb-4"> ]
<li>Grilled prime steak with seasonal vegetables</li> },
<li>Fresh catch of the day</li> {
<li>Handmade pasta with house pesto</li> id: "mains",
<li>Herb-roasted chicken with truffle jus</li> label: "Mains",
</ul> title: "Signature dishes that showcase our culinary expertise",
<a href="#" className="text-red-600 hover:underline">Discover</a> items: [
</div> "Grilled prime steak with seasonal vegetables",
<div className="bg-gray-50 p-6 rounded"> "Fresh catch of the day",
<h3 className="text-2xl font-semibold mb-2">Desserts</h3> "Handmade pasta with house pesto",
<p className="text-gray-600 mb-4">Sweet endings crafted with precision and passion</p> "Herb-roasted chicken with truffle jus"
<ul className="space-y-2 mb-4"> ],
<li>Dark chocolate torte with berry compote</li> buttons: [
<li>Vanilla bean panna cotta</li> { text: "Discover", href: "#" }
<li>House-made gelato selection</li> ]
<li>Seasonal fruit tart</li> },
</ul> {
<a href="#" className="text-red-600 hover:underline">Indulge</a> id: "desserts",
</div> label: "Desserts",
</div> title: "Sweet endings crafted with precision and passion",
</div> items: [
</div> "Dark chocolate torte with berry compote",
"Vanilla bean panna cotta",
"House-made gelato selection",
"Seasonal fruit tart"
],
buttons: [
{ text: "Indulge", href: "#" }
]
}
]}
/>
</div> </div>
<div id="pricing" data-section="pricing"> <div id="pricing" data-section="pricing">
<div className="py-16 px-6 bg-gray-100 text-gray-900"> <PricingCardSix
<div className="max-w-6xl mx-auto"> title="Dining Experiences"
<h2 className="text-4xl font-bold text-center mb-4">Dining Experiences</h2> description="Choose the perfect occasion for your Big Eat experience"
<p className="text-lg text-center mb-12">Choose the perfect occasion for your Big Eat experience</p> animationType="slide-up"
<div className="grid md:grid-cols-3 gap-8"> textboxLayout="default"
<div className="bg-white p-6 rounded shadow"> useInvertedBackground="noInvert"
<h3 className="text-2xl font-semibold mb-2">Walk-In</h3> plans={[
<p className="text-gray-600 mb-4">Spontaneous dining at its finest. No reservations needed.</p> {
<ul className="space-y-2 mb-6"> id: "casual",
<li>Seating available as-is</li> price: "Walk-In",
<li>Full menu access</li> subtitle: "Spontaneous dining at its finest. No reservations needed.",
<li>Casual atmosphere</li> features: [
<li>Quick service</li> "Seating available as-is",
</ul> "Full menu access",
<a href="#" className="bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700">Check Hours</a> "Casual atmosphere",
</div> "Quick service"
<div className="bg-white p-6 rounded shadow border-2 border-red-600"> ],
<h3 className="text-2xl font-semibold mb-2">Reservation</h3> buttons: [
<p className="text-gray-600 mb-4">Secure your perfect table for special occasions.</p> { text: "Check Hours", href: "#" }
<ul className="space-y-2 mb-6"> ]
<li>Guaranteed seating</li> },
<li>Full menu preview</li> {
<li>Special preparations</li> id: "reserved",
<li>Personalized service</li> price: "Reservation",
</ul> subtitle: "Secure your perfect table for special occasions.",
<a href="#contact" className="bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700">Reserve Now</a> features: [
<div className="mt-4 text-sm text-gray-500"> "Guaranteed seating",
<p>Available 7 days a week</p> "Full menu preview",
<p>Call or book online</p> "Special preparations",
</div> "Personalized service"
</div> ],
<div className="bg-white p-6 rounded shadow"> buttons: [
<h3 className="text-2xl font-semibold mb-2">Events</h3> { text: "Reserve Now", href: "contact" }
<p className="text-gray-600 mb-4">Host your celebration in our private dining spaces.</p> ],
<ul className="space-y-2 mb-6"> bottomNotes: [
<li>Custom menus available</li> "Available 7 days a week",
<li>Full venue control</li> "Call or book online"
<li>Event coordinator</li> ]
<li>Flexible packages</li> },
</ul> {
<a href="#contact" className="bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700">Plan Event</a> id: "private",
<div className="mt-4 text-sm text-gray-500"> price: "Events",
<p>Groups of 12+</p> subtitle: "Host your celebration in our private dining spaces.",
<p>Custom catering options</p> features: [
</div> "Custom menus available",
</div> "Full venue control",
</div> "Event coordinator",
</div> "Flexible packages"
</div> ],
buttons: [
{ text: "Plan Event", href: "contact" }
],
bottomNotes: [
"Groups of 12+",
"Custom catering options"
]
}
]}
/>
</div> </div>
<div id="testimonials" data-section="testimonials"> <div id="testimonials" data-section="testimonials">
<div className="py-16 px-6 bg-white text-gray-900"> <TestimonialCardSix
<div className="max-w-6xl mx-auto"> title="Guest Stories"
<h2 className="text-4xl font-bold text-center mb-4">Guest Stories</h2> description="Hear what diners love about Big Eat"
<p className="text-lg text-center mb-12">Hear what diners love about Big Eat</p> animationType="slide-up"
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> textboxLayout="default"
<div className="bg-gray-50 p-6 rounded"> useInvertedBackground="noInvert"
<p className="mb-4">"The steak was perfectly cooked and the service was impeccable. Big Eat has become our favorite spot for special occasions."</p> testimonials={[
<div> {
<p className="font-semibold">Marcus Johnson</p> id: "1",
<p className="text-sm text-gray-600">@foodlover_city</p> name: "Marcus Johnson",
</div> handle: "@foodlover_city",
</div> testimonial: "The steak was perfectly cooked and the service was impeccable. Big Eat has become our favorite spot for special occasions."
<div className="bg-gray-50 p-6 rounded"> },
<p className="mb-4">"As someone who cooks professionally, I'm impressed by the technique and quality. Every dish is executed with care."</p> {
<div> id: "2",
<p className="font-semibold">Elena Rodriguez</p> name: "Elena Rodriguez",
<p className="text-sm text-gray-600">Chef, Local Studio</p> handle: "Chef, Local Studio",
</div> testimonial: "As someone who cooks professionally, I'm impressed by the technique and quality. Every dish is executed with care."
</div> },
<div className="bg-gray-50 p-6 rounded"> {
<p className="mb-4">"Walked in without a reservation and had an amazing experience. The team made us feel welcome and the pasta was divine."</p> id: "3",
<div> name: "David Chen",
<p className="font-semibold">David Chen</p> handle: "@weekendexplorer",
<p className="text-sm text-gray-600">@weekendexplorer</p> testimonial: "Walked in without a reservation and had an amazing experience. The team made us feel welcome and the pasta was divine."
</div> },
</div> {
<div className="bg-gray-50 p-6 rounded"> id: "4",
<p className="mb-4">"We hosted our company dinner at Big Eat. Custom menu was fantastic and the private space was perfect for our needs."</p> name: "Sarah Williams",
<div> handle: "Event Planner",
<p className="font-semibold">Sarah Williams</p> testimonial: "We hosted our company dinner at Big Eat. Custom menu was fantastic and the private space was perfect for our needs."
<p className="text-sm text-gray-600">Event Planner</p> },
</div> {
</div> id: "5",
<div className="bg-gray-50 p-6 rounded"> name: "James Park",
<p className="mb-4">"Consistently excellent. The chef clearly understands flavor balance and respects ingredient quality. Highly recommend."</p> handle: "@food_critic_mag",
<div> testimonial: "Consistently excellent. The chef clearly understands flavor balance and respects ingredient quality. Highly recommend."
<p className="font-semibold">James Park</p> },
<p className="text-sm text-gray-600">@food_critic_mag</p> {
</div> id: "6",
</div> name: "Lisa Thompson",
<div className="bg-gray-50 p-6 rounded"> handle: "Blogger & Photographer",
<p className="mb-4">"Beautiful plating, incredible flavors, and an ambiance that makes every meal feel special. Big Eat delivers."</p> testimonial: "Beautiful plating, incredible flavors, and an ambiance that makes every meal feel special. Big Eat delivers."
<div> }
<p className="font-semibold">Lisa Thompson</p> ]}
<p className="text-sm text-gray-600">Blogger & Photographer</p> />
</div>
</div>
</div>
</div>
</div>
</div> </div>
<div id="team" data-section="team"> <div id="team" data-section="team">
<div className="py-16 px-6 bg-gray-100 text-gray-900"> <TeamCardOne
<div className="max-w-6xl mx-auto"> title="Meet Our Team"
<h2 className="text-4xl font-bold text-center mb-4">Meet Our Team</h2> description="The talented professionals who bring Big Eat to life"
<p className="text-lg text-center mb-12">The talented professionals who bring Big Eat to life</p> textboxLayout="default"
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8"> animationType="slide-up"
<div className="text-center"> useInvertedBackground="noInvert"
<img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766762598685-ne2ej38m.jpg" alt="Chef Marcus" className="w-full h-64 object-cover rounded mb-4" /> members={[
<h3 className="text-xl font-semibold">Chef Marcus</h3> {
<p className="text-gray-600">Executive Chef</p> id: "1",
</div> name: "Chef Marcus",
<div className="text-center"> role: "Executive Chef",
<img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766416786074-ne49srjf.jpg" alt="Elena Rossi" className="w-full h-64 object-cover rounded mb-4" /> imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766762598685-ne2ej38m.jpg",
<h3 className="text-xl font-semibold">Elena Rossi</h3> imageAlt: "Chef Marcus"
<p className="text-gray-600">Head Sommelier</p> },
</div> {
<div className="text-center"> id: "2",
<img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766762599651-d4jtg5xa.jpg" alt="James Park" className="w-full h-64 object-cover rounded mb-4" /> name: "Elena Rossi",
<h3 className="text-xl font-semibold">James Park</h3> role: "Head Sommelier",
<p className="text-gray-600">Sous Chef</p> imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766416786074-ne49srjf.jpg",
</div> imageAlt: "Elena Rossi"
<div className="text-center"> },
<img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766762601318-yy4m1lhd.jpg" alt="Sarah Chen" className="w-full h-64 object-cover rounded mb-4" /> {
<h3 className="text-xl font-semibold">Sarah Chen</h3> id: "3",
<p className="text-gray-600">Pastry Chef</p> name: "James Park",
</div> role: "Sous Chef",
</div> imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766762599651-d4jtg5xa.jpg",
</div> imageAlt: "James Park"
</div> },
{
id: "4",
name: "Sarah Chen",
role: "Pastry Chef",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766762601318-yy4m1lhd.jpg",
imageAlt: "Sarah Chen"
}
]}
gridVariant="four-items-2x2-equal-grid"
/>
</div> </div>
<div id="contact" data-section="contact"> <div id="contact" data-section="contact">
<div className="py-16 px-6 bg-white text-gray-900"> <ContactText
<div className="max-w-4xl mx-auto text-center"> text="Ready to experience Big Eat? Reserve your table or reach out with questions. We look forward to welcoming you."
<p className="text-xl mb-8">Ready to experience Big Eat? Reserve your table or reach out with questions. We look forward to welcoming you.</p> animationType="entrance-slide"
<div className="space-x-4"> useInvertedBackground="noInvert"
<a href="#" className="bg-red-600 text-white px-6 py-3 rounded hover:bg-red-700">Reserve Now</a> buttons={[
<a href="#" className="bg-transparent border border-red-600 text-red-600 px-6 py-3 rounded hover:bg-red-600 hover:text-white">Get in Touch</a> { text: "Reserve Now", href: "#" },
<a href="https://www.linkedin.com/company/big-eat/" className="inline-flex items-center bg-transparent border border-red-600 text-red-600 px-6 py-3 rounded hover:bg-red-600 hover:text-white"> { text: "Get in Touch", href: "#" }
<Linkedin className="w-5 h-5 mr-2" /> ]}
LinkedIn />
</a>
</div>
</div>
</div>
</div> </div>
<div id="footer" data-section="footer"> <div id="footer" data-section="footer">
<div className="bg-gray-900 text-white py-12 px-6"> <FooterBase
<div className="max-w-6xl mx-auto"> logoText="Big Eat"
<div className="grid md:grid-cols-4 gap-8"> copyrightText="© 2025 Big Eat Restaurant. All rights reserved."
<div> columns={[
<h3 className="text-2xl font-bold mb-4">Big Eat</h3> {
<p className="text-gray-400">© 2025 Big Eat Restaurant. All rights reserved.</p> title: "Restaurant",
</div> items: [
<div> { label: "Menu", href: "menu" },
<h4 className="font-semibold mb-4">Restaurant</h4> { label: "Hours", href: "#" },
<ul className="space-y-2"> { label: "Location", href: "#" }
<li><a href="#menu" className="text-gray-400 hover:text-white">Menu</a></li> ]
<li><a href="#" className="text-gray-400 hover:text-white">Hours</a></li> },
<li><a href="#" className="text-gray-400 hover:text-white">Location</a></li> {
</ul> title: "Experience",
</div> items: [
<div> { label: "Reservations", href: "contact" },
<h4 className="font-semibold mb-4">Experience</h4> { label: "Private Events", href: "contact" },
<ul className="space-y-2"> { label: "Gift Cards", href: "#" }
<li><a href="#contact" className="text-gray-400 hover:text-white">Reservations</a></li> ]
<li><a href="#contact" className="text-gray-400 hover:text-white">Private Events</a></li> },
<li><a href="#" className="text-gray-400 hover:text-white">Gift Cards</a></li> {
</ul> title: "Connect",
</div> items: [
<div> { label: "Contact Us", href: "#" },
<h4 className="font-semibold mb-4">Connect</h4> { label: "Instagram", href: "#" },
<ul className="space-y-2"> { label: "Newsletter", href: "#" }
<li><a href="#" className="text-gray-400 hover:text-white">Contact Us</a></li> ]
<li><a href="#" className="text-gray-400 hover:text-white">Instagram</a></li> }
<li><a href="#" className="text-gray-400 hover:text-white">Newsletter</a></li> ]}
</ul> />
</div>
</div>
</div>
</div>
</div> </div>
</ThemeProvider> </ThemeProvider>
); );
} }