Update src/app/page.tsx

Merge version_1 into main

src/app/page.tsx

@@ -4,212 +4,108 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import ContactCenter from '@/components/sections/contact/ContactCenter';
 import FooterMedia from '@/components/sections/footer/FooterMedia';
-import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
+import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
-import ProductCardThree from '@/components/sections/product/ProductCardThree';
-import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
-import TextAbout from '@/components/sections/about/TextAbout';
-import { Award, CalendarCheck } from "lucide-react";
+import ProductCardFour from '@/components/sections/product/ProductCardFour';
+import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
+import AboutMetric from '@/components/sections/about/AboutMetric';
+import { Award, CalendarCheck, Utensils, Star, MapPin } from "lucide-react";
 
 export default function LandingPage() {
   return (
     <ThemeProvider
         defaultButtonVariant="text-stagger"
         defaultTextAnimation="entrance-slide"
-        borderRadius="soft"
-        contentWidth="smallMedium"
-        sizing="largeSmallSizeMediumTitles"
-        background="noise"
-        cardStyle="gradient-mesh"
-        primaryButtonStyle="diagonal-gradient"
-        secondaryButtonStyle="glass"
-        headingFontWeight="extrabold"
+        borderRadius="pill"
+        contentWidth="mediumLarge"
+        sizing="largeSizeMediumTitles"
+        background="noiseDiagonalGradient"
+        cardStyle="glass-depth"
+        primaryButtonStyle="primary-glow"
+        secondaryButtonStyle="layered"
+        headingFontWeight="semibold"
     >
       <ReactLenis root>
   <div id="nav" data-section="nav">
       <NavbarLayoutFloatingOverlay
       navItems={[
-        {
-          name: "Home",
-          id: "hero",
-        },
-        {
-          name: "About",
-          id: "about",
-        },
-        {
-          name: "Menu",
-          id: "menu",
-        },
-        {
-          name: "Reviews",
-          id: "testimonials",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
+        { name: "Home", id: "hero" },
+        { name: "Our Story", id: "about" },
+        { name: "Menu", id: "menu" },
+        { name: "Testimonials", id: "testimonials" },
+        { name: "Contact", id: "contact" },
       ]}
       brandName="Manor House"
     />
   </div>
 
   <div id="hero" data-section="hero">
-      <HeroBillboardGallery
-      background={{
-        variant: "plain",
-      }}
-      title="Welcome to Manor House Restaurant"
-      description="Experience fine dining at its best. Join us for a journey of culinary excellence in an elegant, cozy atmosphere."
-      mediaItems={[
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/restaurant-elegant-set-dining-lunch_1203-5578.jpg?_wi=1",
-          imageAlt: "Manor House Interior",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/two-men-cafe_23-2147775893.jpg",
-          imageAlt: "Elegant Dining",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-chef-plating-meal_23-2148794096.jpg",
-          imageAlt: "Gourmet Dish",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-safari-party-with-dessert-table_23-2149707844.jpg",
-          imageAlt: "Table Setting",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/restaurant-hall-with-round-table-some-chairs-fireplace-plants_140725-8034.jpg",
-          imageAlt: "Restaurant Ambiance",
-        },
+      <HeroBillboardRotatedCarousel
+      title="Manor House"
+      description="Fine dining redefined in an atmosphere of timeless elegance."
+      background={{ variant: "rotated-rays-static" }}
+      carouselItems={[
+        { id: "1", imageSrc: "http://img.b2bpic.net/free-photo/restaurant-elegant-set-dining-lunch_1203-5578.jpg?_wi=1", imageAlt: "Elegant table" },
+        { id: "2", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-chef-plating-meal_23-2148794096.jpg", imageAlt: "Plating" },
+        { id: "3", imageSrc: "http://img.b2bpic.net/free-photo/restaurant-hall-with-round-table-some-chairs-fireplace-plants_140725-8034.jpg", imageAlt: "Interior" },
+        { id: "4", imageSrc: "http://img.b2bpic.net/free-photo/salmon-steak_74190-5574.jpg?_wi=1", imageAlt: "Dish" },
+        { id: "5", imageSrc: "http://img.b2bpic.net/free-photo/cup-tea-with-ny-cheesecake-with-berry-sauce_114579-2316.jpg", imageAlt: "Dessert" },
+        { id: "6", imageSrc: "http://img.b2bpic.net/free-photo/front-view-pasta-cooked-along-with-green-leafs-inside-white-plate-grey-surface_140725-14462.jpg?_wi=1", imageAlt: "Pasta" },
       ]}
-      mediaAnimation="slide-up"
+      buttons={[{ text: "View Menu", href: "#menu" }, { text: "Reserve", href: "#contact" }]}
     />
   </div>
 
   <div id="about" data-section="about">
-      <TextAbout
-      useInvertedBackground={false}
-      title="About Our Heritage"
-      tag="Our Story"
-      tagIcon={Award}
+      <AboutMetric
+      title="A Legacy of Taste"
+      metrics={[
+        { icon: Award, label: "Years of Excellence", value: "25+" },
+        { icon: Utensils, label: "Signature Recipes", value: "50+" },
+        { icon: MapPin, label: "Locations", value: "1" },
+      ]}
+      useInvertedBackground={true}
     />
   </div>
 
   <div id="menu" data-section="menu">
-      <ProductCardThree
-      animationType="slide-up"
-      textboxLayout="default"
-      gridVariant="uniform-all-items-equal"
+      <ProductCardFour
+      title="Our Selection"
+      description="Hand-picked ingredients prepared to perfection."
+      animationType="blur-reveal"
+      gridVariant="three-columns-all-equal-width"
+      textboxLayout="split-description"
       useInvertedBackground={false}
       products={[
-        {
-          id: "m1",
-          name: "Seared Scallops",
-          price: "$28",
-          imageSrc: "http://img.b2bpic.net/free-photo/side-view-fried-squid-octopus-with-cheese-potatoes-ia-backed-bread_140725-10256.jpg",
-        },
-        {
-          id: "m2",
-          name: "Truffle Risotto",
-          price: "$32",
-          imageSrc: "http://img.b2bpic.net/free-photo/cup-tea-with-ny-cheesecake-with-berry-sauce_114579-2316.jpg",
-        },
-        {
-          id: "m3",
-          name: "Herb Crusted Lamb",
-          price: "$45",
-          imageSrc: "http://img.b2bpic.net/free-photo/pancake-with-rocket-salad_74190-755.jpg",
-        },
-        {
-          id: "m4",
-          name: "Roasted Salmon",
-          price: "$38",
-          imageSrc: "http://img.b2bpic.net/free-photo/side-view-fried-chicken-leg-with-sauce-plate-with-basket-vegetables-spices_140725-13947.jpg",
-        },
-        {
-          id: "m5",
-          name: "Filet Mignon",
-          price: "$52",
-          imageSrc: "http://img.b2bpic.net/free-photo/front-view-pasta-cooked-along-with-green-leafs-inside-white-plate-grey-surface_140725-14462.jpg",
-        },
-        {
-          id: "m6",
-          name: "Dark Chocolate Soufflé",
-          price: "$18",
-          imageSrc: "http://img.b2bpic.net/free-photo/salmon-steak_74190-5574.jpg",
-        },
+        { id: "p1", name: "Seared Scallops", price: "$28", variant: "Appetizer", imageSrc: "http://img.b2bpic.net/free-photo/side-view-fried-squid-octopus-with-cheese-potatoes-ia-backed-bread_140725-10256.jpg" },
+        { id: "p2", name: "Truffle Risotto", price: "$32", variant: "Main", imageSrc: "http://img.b2bpic.net/free-photo/front-view-pasta-cooked-along-with-green-leafs-inside-white-plate-grey-surface_140725-14462.jpg?_wi=2" },
+        { id: "p3", name: "Filet Mignon", price: "$52", variant: "Main", imageSrc: "http://img.b2bpic.net/free-photo/salmon-steak_74190-5574.jpg?_wi=2" },
       ]}
-      title="Our Signature Dishes"
-      description="Crafted with locally sourced ingredients and passion."
     />
   </div>
 
   <div id="testimonials" data-section="testimonials">
-      <TestimonialCardThirteen
+      <TestimonialCardOne
+      title="Guest Reflections"
+      description="Discover what our patrons say about their experience."
       animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
+      gridVariant="uniform-all-items-equal"
+      textboxLayout="split"
+      useInvertedBackground={true}
       testimonials={[
-        {
-          id: "t1",
-          name: "Sarah Miller",
-          handle: "@sarah_m",
-          testimonial: "An absolute gem! The best dining experience in town.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/friendly-waitress-with-cup-hot-drink_23-2147775876.jpg",
-        },
-        {
-          id: "t2",
-          name: "James Anderson",
-          handle: "@j_anderson",
-          testimonial: "Exquisite food and impeccable service. Highly recommend.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/waitress-holding-plate-with-tartines_23-2147830518.jpg",
-        },
-        {
-          id: "t3",
-          name: "Emily Chen",
-          handle: "@emilyc",
-          testimonial: "The atmosphere is perfect for a special occasion.",
-          rating: 4,
-          imageSrc: "http://img.b2bpic.net/free-photo/side-view-friends-enjoying-dinner-party_52683-132626.jpg",
-        },
-        {
-          id: "t4",
-          name: "David Wilson",
-          handle: "@davidw",
-          testimonial: "Incredible culinary journey from start to finish.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-happy-man-with-wine-glass-night-club_23-2148037554.jpg",
-        },
-        {
-          id: "t5",
-          name: "Laura Scott",
-          handle: "@lauras",
-          testimonial: "Exceptional ingredients and beautiful presentation.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-black-american-male-using-laptop-drink-coffee-cafe_613910-8996.jpg",
-        },
+        { id: "t1", name: "Sarah M.", role: "Connoisseur", company: "Food Weekly", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/friendly-waitress-with-cup-hot-drink_23-2147775876.jpg" },
+        { id: "t2", name: "James A.", role: "Regular", company: "Local Business", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-happy-man-with-wine-glass-night-club_23-2148037554.jpg" },
       ]}
-      showRating={true}
-      title="What Our Guests Say"
-      description="Read about the memorable dining experiences our guests have had at Manor House."
     />
   </div>
 
   <div id="contact" data-section="contact">
       <ContactCenter
+      tag="Bookings"
+      title="Reserve Your Table"
+      description="We look forward to serving you. Contact us for private bookings and events."
+      background={{ variant: "sparkles-gradient" }}
       useInvertedBackground={false}
-      background={{
-        variant: "plain",
-      }}
-      tag="Visit Us"
-      title="Ready to dine with us?"
-      description="Reserve your table today."
-      tagIcon={CalendarCheck}
-      inputPlaceholder="Enter your email"
-      buttonText="Book a Reservation"
     />
   </div>
 
@@ -218,32 +114,8 @@ export default function LandingPage() {
       imageSrc="http://img.b2bpic.net/free-photo/restaurant-elegant-set-dining-lunch_1203-5578.jpg?_wi=2"
       logoText="Manor House"
       columns={[
-        {
-          title: "Information",
-          items: [
-            {
-              label: "About",
-              href: "#about",
-            },
-            {
-              label: "Menu",
-              href: "#menu",
-            },
-          ],
-        },
-        {
-          title: "Connect",
-          items: [
-            {
-              label: "Instagram",
-              href: "#",
-            },
-            {
-              label: "Facebook",
-              href: "#",
-            },
-          ],
-        },
+        { title: "Menu", items: [{ label: "Seasonal Specials", href: "#menu" }, { label: "Wine List", href: "#menu" }] },
+        { title: "Contact", items: [{ label: "Reserve Now", href: "#contact" }, { label: "Location", href: "#" }] },
       ]}
     />
   </div>

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f8f8f8;
-  --card: #ffffff;
-  --foreground: #222222;
-  --primary-cta: #000000;
+  --background: #fdfaf6;
+  --card: #f4efe9;
+  --foreground: #1a1614;
+  --primary-cta: #8c6b45;
   --primary-cta-text: #ffffff;
-  --secondary-cta: #ffffff;
+  --secondary-cta: #fdfaf6;
   --secondary-cta-text: #222222;
-  --accent: #e2e2e2;
-  --background-accent: #c4c4c4;
+  --accent: #d4b895;
+  --background-accent: #e6d5be;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);