Merge version_4 into main #7
@@ -4,48 +4,38 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
||||
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
||||
import FooterCard from '@/components/sections/footer/FooterCard';
|
||||
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
||||
|
||||
export default function ContactPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="soft"
|
||||
contentWidth="compact"
|
||||
sizing="largeSmall"
|
||||
background="blurBottom"
|
||||
cardStyle="glass-depth"
|
||||
primaryButtonStyle="primary-glow"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ThemeProvider>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Our Story", id: "/about" },
|
||||
{ name: "Menu", id: "/menu" },
|
||||
{ name: "Events", id: "/events" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
]}
|
||||
brandName="The Table"
|
||||
button={{ text: "Order Now", href: "/menu" }}
|
||||
/>
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Menu", id: "/menu" },
|
||||
{ name: "Events", id: "/events" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
]}
|
||||
brandName="The Table"
|
||||
button={{ text: "Order Now", href: "/menu" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
tag="Get In Touch"
|
||||
title="We'd Love to Hear From You"
|
||||
description="Whether you have questions about our menu, want to book a private event, or just want to say hi, we're here to help."
|
||||
buttons={[{ text: "Call Us", href: "tel:+1234567890" }, { text: "Email Us", href: "mailto:hello@thetable.com" }]}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
/>
|
||||
<ContactCTA
|
||||
tag="Get In Touch"
|
||||
title="We'd Love to Hear From You"
|
||||
description="Whether you have questions about our menu, want to book a private event, or just want to say hi, we're here to help."
|
||||
buttons={[{ text: "Call Us", href: "tel:+1234567890" }, { text: "Email Us", href: "mailto:hello@thetable.com" }]}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard logoText="The Table" copyrightText="© 2025 The Table Restaurant" />
|
||||
<FooterBaseReveal logoText="The Table" columns={[{ title: "Links", items: [{ label: "Home", href: "/" }] }]} />
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
|
||||
@@ -3,35 +3,39 @@
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
||||
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
|
||||
import FooterCard from '@/components/sections/footer/FooterCard';
|
||||
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
|
||||
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
||||
|
||||
export default function EventsPage() {
|
||||
return (
|
||||
<ThemeProvider>
|
||||
<ReactLenis root>
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Menu", id: "/menu" },
|
||||
{ name: "Events", id: "/events" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
]}
|
||||
brandName="The Table"
|
||||
/>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Menu", id: "/menu" },
|
||||
{ name: "Events", id: "/events" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
]}
|
||||
brandName="The Table"
|
||||
button={{ text: "Order Now", href: "/menu" }}
|
||||
/>
|
||||
</div>
|
||||
<div className="pt-24">
|
||||
<MetricCardEleven
|
||||
<MetricCardSeven
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
title="Upcoming Events"
|
||||
description="Join us for exclusive dining events, tastings, and community gatherings."
|
||||
metrics={[
|
||||
{ id: "e1", value: "Wine Tasting", title: "Friday, 7:00 PM", description: "RSVP for an evening of fine wine and cheese pairings.", imageSrc: "https://images.unsplash.com/photo-1506377330807-133501a5202e?q=80&w=600" },
|
||||
{ id: "e2", value: "Coffee Workshop", title: "Saturday, 10:00 AM", description: "Learn the art of brewing the perfect cup from our head barista.", imageSrc: "https://images.unsplash.com/photo-1509042239860-f550ce710b93?q=80&w=600" },
|
||||
{ id: "e1", value: "Wine Tasting", title: "Friday, 7:00 PM", items: ["Fine wine", "Cheese pairings"] },
|
||||
{ id: "e2", value: "Coffee Workshop", title: "Saturday, 10:00 AM", items: ["Learn to brew", "Expert tips"] },
|
||||
]}
|
||||
buttons={[{ text: "RSVP Now", href: "/contact" }]}
|
||||
/>
|
||||
</div>
|
||||
<FooterCard logoText="The Table" />
|
||||
<FooterBaseReveal logoText="The Table" columns={[{ title: "Links", items: [{ label: "Home", href: "/" }] }]} />
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
@@ -4,37 +4,40 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
||||
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
||||
import FooterCard from '@/components/sections/footer/FooterCard';
|
||||
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
||||
|
||||
export default function MenuPage() {
|
||||
return (
|
||||
<ThemeProvider>
|
||||
<ReactLenis root>
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Menu", id: "/menu" },
|
||||
{ name: "Events", id: "/events" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
]}
|
||||
brandName="The Table"
|
||||
/>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Menu", id: "/menu" },
|
||||
{ name: "Events", id: "/events" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
]}
|
||||
brandName="The Table"
|
||||
button={{ text: "Order Now", href: "/menu" }}
|
||||
/>
|
||||
</div>
|
||||
<div className="pt-24">
|
||||
<ProductCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
title="Our Menu"
|
||||
description="Discover our curated selection of fine coffees and exquisite wines."
|
||||
products={[
|
||||
{ id: "c1", name: "Signature Espresso", price: "$4", imageSrc: "https://images.unsplash.com/photo-1510707577719-ae7c14805e3a?q=80&w=600" },
|
||||
{ id: "c2", name: "Pour Over Coffee", price: "$6", imageSrc: "https://images.unsplash.com/photo-1544716278-ca5e3f4abd8c?q=80&w=600" },
|
||||
{ id: "w1", name: "Pinot Noir", price: "$12/glass", imageSrc: "https://images.unsplash.com/photo-1553361371-9b22f780351d?q=80&w=600" },
|
||||
{ id: "w2", name: "Chardonnay", price: "$14/glass", imageSrc: "https://images.unsplash.com/photo-1586375300773-8384e3e4916f?q=80&w=600" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<FooterCard logoText="The Table" />
|
||||
<FooterBaseReveal logoText="The Table" columns={[{ title: "Links", items: [{ label: "Home", href: "/" }] }]} />
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
255
src/app/page.tsx
255
src/app/page.tsx
@@ -7,166 +7,137 @@ import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
||||
import FeatureCardTwentyEight from '@/components/sections/feature/FeatureCardTwentyEight';
|
||||
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
||||
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
|
||||
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
|
||||
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
||||
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
||||
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
|
||||
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
|
||||
import ContactForm from '@/components/form/ContactForm';
|
||||
import { Sparkles, Mail, Instagram, CalendarCheck, ShoppingBag } from "lucide-react";
|
||||
import { Sparkles, Mail } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="soft"
|
||||
contentWidth="compact"
|
||||
sizing="largeSmall"
|
||||
background="blurBottom"
|
||||
cardStyle="glass-depth"
|
||||
primaryButtonStyle="primary-glow"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ThemeProvider>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Our Story", id: "about" },
|
||||
{ name: "Menu", id: "menu" },
|
||||
{ name: "Events", id: "events" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="The Table"
|
||||
button={{
|
||||
text: "Order Now", href: "#menu"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Menu", id: "/menu" },
|
||||
{ name: "Events", id: "/events" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
]}
|
||||
brandName="The Table"
|
||||
button={{ text: "Order Now", href: "/menu" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDualMedia
|
||||
background={{
|
||||
variant: "gradient-bars"}}
|
||||
title="A Tableside Tradition"
|
||||
description="Experience fine dining reimagined with fresh local ingredients and a warm, welcoming atmosphere in the heart of the city."
|
||||
tag="Voted Best in Town"
|
||||
buttons={[
|
||||
{ text: "Book Table", href: "#contact" },
|
||||
{ text: "View Menu", href: "#menu" },
|
||||
]}
|
||||
mediaItems={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/restaurant-hall-with-round-square-tables-some-chairs-plants_140725-8031.jpg", imageAlt: "Restaurant Interior" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/steamed-bao-bun-with-braised-pork-belly-fresh-asian-slaw_84443-85877.jpg", imageAlt: "Chef Plating Dish" }
|
||||
]}
|
||||
mediaAnimation="slide-up"
|
||||
rating={5}
|
||||
ratingText="Based on 500+ glowing reviews"
|
||||
tagIcon={Sparkles}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDualMedia
|
||||
title="A Tableside Tradition"
|
||||
description="Fine dining reimagined."
|
||||
tag="Voted Best in Town"
|
||||
rating={5}
|
||||
ratingText="Based on 500+ reviews"
|
||||
mediaItems={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/restaurant-hall-with-round-square-tables-some-chairs-plants_140725-8031.jpg" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/steamed-bao-bun-with-braised-pork-belly-fresh-asian-slaw_84443-85877.jpg" }
|
||||
]}
|
||||
tagIcon={Sparkles}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TextSplitAbout
|
||||
useInvertedBackground={true}
|
||||
title="Our Philosophy"
|
||||
description={[
|
||||
"Founded on a love for community, our kitchen celebrates the journey of fresh, seasonal ingredients from local farms directly to your table.", "Every dish is crafted with purpose, passion, and a touch of modern culinary magic."
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<TextSplitAbout
|
||||
useInvertedBackground={true}
|
||||
title="Our Philosophy"
|
||||
description={["Fresh ingredients.", "Modern culinary magic."]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentyEight
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ id: "f1", title: "Mobile Responsive", subtitle: "Seamless experience across all devices.", category: "Design", value: "Smooth", buttons: [{text: "Learn More"}] },
|
||||
{ id: "f2", title: "Online Ordering", subtitle: "Order meals ahead with one click.", category: "Convenience", value: "Quick", buttons: [{text: "Order Now"}] },
|
||||
{ id: "f3", title: "Event RSVP", subtitle: "Register for special dining events.", category: "Booking", value: "Open", buttons: [{text: "RSVP Now"}] },
|
||||
{ id: "f4", title: "Newsletter", subtitle: "Stay updated with special perks.", category: "Community", value: "Join", buttons: [{text: "Sign Up"}] },
|
||||
{ id: "f5", title: "Social Feed", subtitle: "Check out our live Instagram gallery.", category: "Social", value: "Live", buttons: [{text: "View Feed"}] },
|
||||
]}
|
||||
title="Modern Restaurant Experience"
|
||||
description="Designed for your comfort, our digital-first approach ensures a seamless connection from reservation to the last bite."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentyEight
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
title="Modern Restaurant Experience"
|
||||
description="Designed for your comfort."
|
||||
features={[
|
||||
{ id: "f1", title: "Mobile Responsive", subtitle: "Seamless.", category: "Design", value: "Smooth" },
|
||||
{ id: "f2", title: "Online Ordering", subtitle: "Quick.", category: "Ordering", value: "Fast" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="menu" data-section="menu">
|
||||
<ProductCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{ id: "p1", name: "Artisan Bread Basket", price: "$12", imageSrc: "http://img.b2bpic.net/free-photo/sliced-greenery-vegetables-pomegranate-arils-plate_114579-86474.jpg" },
|
||||
{ id: "p2", name: "Seared Prime Steak", price: "$48", imageSrc: "http://img.b2bpic.net/free-photo/fried-eggplant-with-tomatoes-sesame-seeds-plate_140725-9191.jpg" },
|
||||
{ id: "p3", name: "Homemade Basil Pasta", price: "$28", imageSrc: "http://img.b2bpic.net/free-photo/vegan-pasta-white-plate_23-2148305758.jpg" },
|
||||
]}
|
||||
title="Seasonal Menu"
|
||||
description="Carefully crafted dishes using locally sourced produce."
|
||||
/>
|
||||
</div>
|
||||
<div id="menu" data-section="menu">
|
||||
<ProductCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={true}
|
||||
title="Seasonal Menu"
|
||||
description="Carefully crafted dishes."
|
||||
products={[
|
||||
{ id: "p1", name: "Bread", price: "$12", imageSrc: "http://img.b2bpic.net/free-photo/sliced-greenery-vegetables-pomegranate-arils-plate_114579-86474.jpg" },
|
||||
{ id: "p2", name: "Steak", price: "$48", imageSrc: "http://img.b2bpic.net/free-photo/fried-eggplant-with-tomatoes-sesame-seeds-plate_140725-9191.jpg" },
|
||||
{ id: "p3", name: "Pasta", price: "$28", imageSrc: "http://img.b2bpic.net/free-photo/vegan-pasta-white-plate_23-2148305758.jpg" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="newsletter" data-section="newsletter">
|
||||
<ContactForm
|
||||
tag="Join Us"
|
||||
tagIcon={Mail}
|
||||
title="Stay Connected"
|
||||
description="Join our newsletter to receive weekly specials and exclusive invitations to our events."
|
||||
inputPlaceholder="Enter your email address"
|
||||
buttonText="Sign Up"
|
||||
/>
|
||||
</div>
|
||||
<div id="newsletter" data-section="newsletter">
|
||||
<ContactForm
|
||||
title="Stay Connected"
|
||||
description="Join our newsletter."
|
||||
tag="Join Us"
|
||||
tagIcon={Mail}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFifteen
|
||||
useInvertedBackground={true}
|
||||
testimonial="An absolute treasure in the city! Every visit feels like coming home. The service, the food, and the vibe are unmatched."
|
||||
rating={5}
|
||||
author="Samantha W."
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/women-eating-traditional-italian-pizza-together_52683-110888.jpg", alt: "Customer" },
|
||||
]}
|
||||
ratingAnimation="slide-up"
|
||||
avatarsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFifteen
|
||||
testimonial="An absolute treasure!"
|
||||
rating={5}
|
||||
author="Samantha W."
|
||||
avatars={[{ src: "http://img.b2bpic.net/free-photo/women-eating-traditional-italian-pizza-together_52683-110888.jpg", alt: "Customer" }]}
|
||||
ratingAnimation="slide-up"
|
||||
avatarsAnimation="slide-up"
|
||||
useInvertedBackground={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "q1", title: "Do you take reservations?", content: "Yes, please book online." },
|
||||
{ id: "q2", title: "How do I RSVP for events?", content: "Use the RSVP links on our events section." },
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/side-view-woman-working-service-industry_23-2150722790.jpg"
|
||||
title="FAQ"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "q1", title: "Do you take reservations?", content: "Yes, book online." },
|
||||
{ id: "q2", title: "How do I RSVP?", content: "Use the website." },
|
||||
]}
|
||||
title="FAQ"
|
||||
description="Common questions."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
tag="Visit Us"
|
||||
title="Reserve Your Seat"
|
||||
description="We are ready to welcome you for an unforgettable dining experience."
|
||||
buttons={[{ text: "Call to Book" }, { text: "Directions" }]}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
tag="Visit Us"
|
||||
title="Reserve Your Seat"
|
||||
description="We are ready for you."
|
||||
buttons={[{ text: "Book" }]}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
logoText="The Table"
|
||||
columns={[
|
||||
{ title: "Navigation", items: [{label: "About", href: "#about"}, {label: "Menu", href: "#menu"}] },
|
||||
{ title: "Connect", items: [{label: "Newsletter", href: "#newsletter"}, {label: "Instagram", href: "#"}] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
logoText="The Table"
|
||||
columns={[{ title: "Links", items: [{ label: "Home", href: "/" }] }]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user