Update src/app/page.tsx

Merge version_1 into main

src/app/page.tsx

@@ -4,155 +4,113 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import ContactCenter from '@/components/sections/contact/ContactCenter';
 import FooterBase from '@/components/sections/footer/FooterBase';
-import HeroLogo from '@/components/sections/hero/HeroLogo';
+import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
-import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
+import ProductCardFour from '@/components/sections/product/ProductCardFour';
-import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
+import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
-import TextAbout from '@/components/sections/about/TextAbout';
+import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
 
 export default function LandingPage() {
   return (
     <ThemeProvider
         defaultButtonVariant="hover-bubble"
-        defaultTextAnimation="background-highlight"
+        defaultTextAnimation="reveal-blur"
-        borderRadius="soft"
+        borderRadius="pill"
         contentWidth="mediumLarge"
-        sizing="largeSmall"
+        sizing="largeSizeMediumTitles"
-        background="floatingGradient"
+        background="noiseDiagonalGradient"
-        cardStyle="inset"
+        cardStyle="glass-elevated"
-        primaryButtonStyle="flat"
+        primaryButtonStyle="primary-glow"
-        secondaryButtonStyle="radial-glow"
+        secondaryButtonStyle="layered"
-        headingFontWeight="semibold"
+        headingFontWeight="bold"
     >
       <ReactLenis root>
   <div id="nav" data-section="nav">
       <NavbarStyleFullscreen
       navItems={[
-        {
+        { name: "Home", id: "hero" },
-          name: "Home",          id: "hero"},
+        { name: "Our Story", id: "about" },
-        {
+        { name: "Dishes", id: "products" },
-          name: "Menu",          id: "products"},
+        { name: "Reviews", id: "testimonials" },
-        {
+        { name: "Contact", id: "contact" },
-          name: "About",          id: "about"},
-        {
-          name: "Reviews",          id: "testimonials"},
-        {
-          name: "Contact",          id: "contact"},
       ]}
-      brandName="Oceanic Fresh"
+      brandName="Oceanic Modern"
     />
   </div>
 
   <div id="hero" data-section="hero">
-      <HeroLogo
+      <HeroBillboardTestimonial
-      logoText="Oceanic Fresh"
+      title="Oceanic Modern Seafood"
-      description="Experience the finest fresh seafood with unmatched taste and world-class service in the heart of the city."
+      description="A refined culinary journey bringing the freshest catch directly from the deep blue to your plate with modern artistry."
-      buttons={[
+      background={{ variant: "rotated-rays-animated" }}
-        {
+      testimonials={[
-          text: "Call Now",          href: "tel:+1234567890"},
+        { name: "Elena Rossi", handle: "@elena_food", testimonial: "The freshness is unparalleled. Truly the best seafood I've ever tasted.", rating: 5 },
-        {
+        { name: "Mark Thompson", handle: "@mark_dines", testimonial: "An elegant ambiance paired with world-class service.", rating: 5 }
-          text: "Reserve Table",          href: "#contact"},
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/delicious-fish-frame-with-lemon-slices_23-2148754824.jpg"
-      showDimOverlay={true}
+      buttons={[{ text: "Discover Menu", href: "#products" }]}
     />
   </div>
 
   <div id="about" data-section="about">
-      <TextAbout
+      <MetricSplitMediaAbout
-      useInvertedBackground={false}
+      useInvertedBackground={true}
-      tag="Our Story"
+      tag="Our Philosophy"
-      title="Freshness From Ocean to Table"
+      title="Modern Coastal Elegance"
-      buttons={[
+      description="We source only sustainable, high-quality seafood, transforming traditional recipes into modern masterpieces."
-        {
+      metrics={[
-          text: "View Full Menu",          href: "#products"},
+        { value: "20+", title: "Daily Fresh Varieties" },
+        { value: "100%", title: "Sustainably Sourced" },
       ]}
+      imageSrc="http://img.b2bpic.net/free-photo/gourmet-seafood-platter-with-fresh-ingredients_23-2148754824.jpg"
     />
   </div>
 
   <div id="products" data-section="products">
-      <ProductCardTwo
+      <ProductCardFour
-      animationType="slide-up"
-      textboxLayout="default"
-      gridVariant="three-columns-all-equal-width"
       useInvertedBackground={false}
+      animationType="blur-reveal"
+      gridVariant="one-large-left-three-stacked-right"
+      title="Our Signature Creations"
+      description="Explore our curated selection of sustainably sourced seafood, prepared with precision and passion."
+      textboxLayout="split"
       products={[
-        {
+        { id: "p1", name: "Signature Lobster", price: "$48", variant: "Wood-Fired", imageSrc: "http://img.b2bpic.net/free-photo/delicious-lobster-gourmet-seafood_23-2151713030.jpg" },
-          id: "p1",          brand: "Signature",          name: "Grilled Lobster",          price: "$45",          rating: 5,
+        { id: "p2", name: "Mediterranean Paella", price: "$42", variant: "Saffron Infused", imageSrc: "http://img.b2bpic.net/free-photo/spanish-seafood-paella-with-mussels-shrimps-etc-steel-paella-pan-canary-islands-cousine-small-family-restaurant_1217-1763.jpg" },
-          reviewCount: "120",          imageSrc: "http://img.b2bpic.net/free-photo/delicious-lobster-gourmet-seafood_23-2151713030.jpg"},
-        {
-          id: "p2",          brand: "Daily Catch",          name: "Seafood Paella",          price: "$38",          rating: 5,
-          reviewCount: "85",          imageSrc: "http://img.b2bpic.net/free-photo/spanish-seafood-paella-with-mussels-shrimps-etc-steel-paella-pan-canary-islands-cousine-small-family-restaurant_1217-1763.jpg"},
-        {
-          id: "p3",          brand: "Premium",          name: "Oyster Platter",          price: "$29",          rating: 5,
-          reviewCount: "95",          imageSrc: "http://img.b2bpic.net/free-photo/chicken-fajitas-with-mayonnaise-sauces_140725-3225.jpg"},
       ]}
-      title="Signature Seafood Dishes"
-      description="Hand-picked daily, served with perfection."
     />
   </div>
 
   <div id="testimonials" data-section="testimonials">
-      <TestimonialCardOne
+      <TestimonialCardFifteen
-      textboxLayout="default"
+      testimonial="The attention to detail and the quality of ingredients at Oceanic Modern is simply unmatched. A true gem!"
-      gridVariant="uniform-all-items-equal"
+      rating={5}
-      animationType="blur-reveal"
+      author="Chef Julian Vane"
-      useInvertedBackground={false}
+      ratingAnimation="blur-reveal"
-      testimonials={[
+      avatarsAnimation="slide-up"
-        {
+      useInvertedBackground={true}
-          id: "1",          name: "Sarah Johnson",          role: "Food Blogger",          company: "Local Eats",          rating: 5,
+      avatars={[{ src: "http://img.b2bpic.net/free-photo/pleased-woman-with-dark-hair-chilling-with-cup-coffee-cozy-cafe-winter-indoor-portrait-amazing-lady-knitted-yellow-cardigan-resting-restaurant-enjoying-ice-cream_197531-1496.jpg", alt: "Guest" }]}
-          imageSrc: "http://img.b2bpic.net/free-photo/pleased-woman-with-dark-hair-chilling-with-cup-coffee-cozy-cafe-winter-indoor-portrait-amazing-lady-knitted-yellow-cardigan-resting-restaurant-enjoying-ice-cream_197531-1496.jpg"},
-        {
-          id: "2",          name: "Michael Chen",          role: "Connoisseur",          company: "Daily Diner",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/man-feeding-woman-with-salad-restaurant_23-2148014502.jpg"},
-        {
-          id: "3",          name: "Emily Rodriguez",          role: "Regular",          company: "Neighborhood Foodies",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/friends-having-fun-their-reunion_23-2149215775.jpg"},
-        {
-          id: "4",          name: "David Kim",          role: "Guest",          company: "City Guides",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/couple-having-date-together-luxurious-restaurant_23-2150517421.jpg"},
-      ]}
-      title="What Our Guests Say"
-      description="Trusted by food lovers across the city."
     />
   </div>
 
   <div id="contact" data-section="contact">
       <ContactCenter
+      tag="Reservations"
+      title="Secure Your Table"
+      description="Join us for an evening of modern coastal dining. Spaces are limited, book ahead to guarantee your spot."
+      background={{ variant: "sparkles-gradient" }}
       useInvertedBackground={false}
-      background={{
+      buttonText="Book Now"
-        variant: "plain"}}
-      tag="Visit Us"
-      title="Book Your Table"
-      description="Join us today for an unforgettable dining experience."
-      buttonText="Reserve Now"
     />
   </div>
 
   <div id="footer" data-section="footer">
       <FooterBase
       columns={[
-        {
+        { title: "Information", items: [{ label: "About Us", href: "#about" }, { label: "Our Team", href: "#" }] },
-          title: "Navigate",          items: [
+        { title: "Support", items: [{ label: "Contact", href: "#contact" }, { label: "Terms", href: "#" }] }
-            {
-              label: "Menu",              href: "#products"},
-            {
-              label: "About",              href: "#about"},
-            {
-              label: "Reviews",              href: "#testimonials"},
-          ],
-        },
-        {
-          title: "Contact",          items: [
-            {
-              label: "Call: (123) 456-7890",              href: "tel:+1234567890"},
-            {
-              label: "123 Ocean Drive",              href: "#"},
-            {
-              label: "Reserve Table",              href: "#contact"},
-          ],
-        },
       ]}
+      logoText="Oceanic Modern"
     />
   </div>
       </ReactLenis>

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #fcf6ec;
+  --background: #fbfbfb;
-  --card: #f3ede2;
+  --card: #ffffff;
-  --foreground: #2e2521;
+  --foreground: #1a2a3a;
-  --primary-cta: #2e2521;
+  --primary-cta: #0a5a70;
   --primary-cta-text: #fcf6ec;
   --secondary-cta: #ffffff;
   --secondary-cta-text: #2e2521;
-  --accent: #b2a28b;
+  --accent: #73c3d5;
-  --background-accent: #b2a28b;
+  --background-accent: #e0f2f5;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);