Update src/app/page.tsx

Merge version_3 into main

src/app/page.tsx

@@ -4,14 +4,15 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import ContactSplit from '@/components/sections/contact/ContactSplit';
 import FaqSplitText from '@/components/sections/faq/FaqSplitText';
-import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
-import FooterMedia from '@/components/sections/footer/FooterMedia';
+import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
 import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
-import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
+import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
 import ProductCardThree from '@/components/sections/product/ProductCardThree';
-import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
+import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
 import TextAbout from '@/components/sections/about/TextAbout';
+import { ChefHat, Star, Award } from 'lucide-react';
 
 export default function LandingPage() {
   return (
@@ -31,28 +32,28 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarStyleCentered
       navItems={[
-        { name: "Shop", id: "#products" },
-        { name: "About", id: "#about" },
-        { name: "Benefits", id: "#features" },
+        { name: "Experience", id: "#products" },
+        { name: "Philosophy", id: "#about" },
+        { name: "Cuisine", id: "#features" },
         { name: "FAQ", id: "#faq" },
       ]}
-      brandName="rhode"
+      brandName="CulinaryArt"
     />
   </div>
 
   <div id="hero" data-section="hero">
       <HeroSplitKpi
       background={{ variant: "glowing-orb" }}
-      title="The Glow is in the Details."
-      description="Chic, intentional, and high-performance skincare for your barrier. Experience the Rhode aesthetic."
+      title="Exquisite Dining, Curated for You."
+      description="Professional private chef services bringing Michelin-level culinary artistry directly to your home."
       kpis={[
-        { value: "100%", label: "Pure Ingredients" },
-        { value: "Vegan", label: "Cruelty-Free" },
-        { value: "Chic", label: "Skincare Essential" },
+        { value: "20+", label: "Years Expertise" },
+        { value: "Custom", label: "Seasonal Menus" },
+        { value: "Exclusive", label: "Private Dining" },
       ]}
       enableKpiAnimation={true}
-      imageSrc="http://img.b2bpic.net/free-photo/cosmetic-product-branding-with-neutral-background_23-2149504627.jpg"
-      imageAlt="Rhode luxury skincare"
+      imageSrc="http://img.b2bpic.net/free-photo/chef-preparing-gourmet-dish_23-2149504627.jpg"
+      imageAlt="Private Chef service"
       mediaAnimation="blur-reveal"
     />
   </div>
@@ -60,22 +61,21 @@ export default function LandingPage() {
   <div id="about" data-section="about">
       <TextAbout
       useInvertedBackground={true}
-      title="Effortless beauty, redefined."
+      title="Culinary excellence beyond the restaurant table."
     />
   </div>
 
   <div id="features" data-section="features">
-      <FeatureCardTwelve
-      animationType="blur-reveal"
-      textboxLayout="split"
-      useInvertedBackground={true}
-      title="The Rhode Aesthetic"
-      description="Performance skincare that doubles as a chic accessory."
+      <FeatureCardEight
+      textboxLayout="default"
+      useInvertedBackground={false}
       features={[
-        { id: "f1", label: "01", title: "Glossy Finish", items: ["High-shine lip care", "Elevated look", "Glossy texture"] },
-        { id: "f2", label: "02", title: "Rich Nutrition", items: ["Nutrient-dense", "Healthy skin", "Deep hydration"] },
-        { id: "f3", label: "03", title: "Chic Design", items: ["Sophisticated packaging", "Beautiful design", "Modern aesthetic"] },
+        { title: "Bespoke Menus", description: "Tailored recipes crafted specifically for your palate.", imageSrc: "http://img.b2bpic.net/free-photo/gourmet-plating_23-2149504640.jpg" },
+        { title: "Premium Sourcing", description: "Farm-to-table ingredients selected daily for freshness.", imageSrc: "http://img.b2bpic.net/free-photo/fresh-ingredients-market_23-2149504660.jpg" },
+        { title: "Impeccable Service", description: "White-glove dining experience in your own space.", imageSrc: "http://img.b2bpic.net/free-photo/luxury-dining-setup_23-2149504655.jpg" },
       ]}
+      title="The Art of Private Dining"
+      description="Seamless, elevated culinary experiences designed to impress."
     />
   </div>
 
@@ -86,77 +86,77 @@ export default function LandingPage() {
       gridVariant="three-columns-all-equal-width"
       useInvertedBackground={true}
       products={[
-        { id: "p1", name: "Signature Lip Gloss", price: "$18", imageSrc: "http://img.b2bpic.net/free-photo/lip-gloss-pink-nude_23-2149504680.jpg" },
-        { id: "p2", name: "Glazing Serum", price: "$32", imageSrc: "http://img.b2bpic.net/free-photo/skincare-serum-bottle_23-2149504690.jpg" },
-        { id: "p3", name: "Rich Moisturizer", price: "$35", imageSrc: "http://img.b2bpic.net/free-photo/moisturizing-face-cream_23-2149504700.jpg" },
+        { id: "p1", name: "Degustation Series", price: "$350", imageSrc: "http://img.b2bpic.net/free-photo/degustation-menu-plating_23-2149504680.jpg" },
+        { id: "p2", name: "Private Gala Menu", price: "$500", imageSrc: "http://img.b2bpic.net/free-photo/elegant-dinner-event_23-2149504690.jpg" },
+        { id: "p3", name: "Interactive Cooking Class", price: "$250", imageSrc: "http://img.b2bpic.net/free-photo/cooking-class-instruction_23-2149504700.jpg" },
       ]}
-      title="Curated Essentials"
-      description="Our most loved products, reimagined for your glow."
+      title="Signature Experiences"
+      description="Our most requested culinary services, personalized for your guests."
     />
   </div>
 
   <div id="testimonials" data-section="testimonials">
-      <TestimonialCardTwelve
-      cardAnimation="blur-reveal"
-      useInvertedBackground={true}
-      cardTitle="Loved by the Chic"
-      cardTag="Testimonials"
-      testimonials={[
-        { id: "1", name: "Maya A.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-woman-smiling_23-2149504780.jpg" },
-        { id: "2", name: "Leo S.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-minimal_23-2149504790.jpg" },
-      ]}
+      <TestimonialCardFifteen
+      testimonial="An unforgettable evening. The level of detail and artistic flair in every course was truly world-class."
+      rating={5}
+      author="Sarah & Michael J."
+      ratingAnimation="slide-up"
+      avatarsAnimation="slide-up"
+      avatars={[{ src: "https://avatar.iran.liara.run/public/1", alt: "Guest" }]
+      }
+      useInvertedBackground={false}
     />
   </div>
 
   <div id="metrics" data-section="metrics">
-      <MetricCardTwo
-      animationType="blur-reveal"
-      gridVariant="bento-grid"
+      <MetricCardThree
+      title="Culinary Standards"
       textboxLayout="split"
+      animationType="slide-up"
       useInvertedBackground={false}
-      title="Proven Glow"
-      description="Elevating your daily beauty ritual with proven care."
+      description=""
       metrics={[
-        { id: "m1", value: "98%", description: "Visible radiance improvement" },
-        { id: "m2", value: "100%", description: "Loved for style & performance" },
+        { id: "m1", icon: ChefHat, title: "Courses Delivered", value: "1,500+" },
+        { id: "m2", icon: Award, title: "Satisfied Clients", value: "99%" },
+        { id: "m3", icon: Star, title: "Michelin Experience", value: "10 Years" },
       ]}
     />
   </div>
 
   <div id="faq" data-section="faq">
       <FaqSplitText
-      faqsAnimation="blur-reveal"
-      sideTitle="Glossary"
-      sideDescription="Everything you need to know about our signature glow."
       faqs={[
-        { id: "q1", title: "Are these glosses sticky?", content: "Not at all. Our formula is designed for smooth, glassy comfort." },
-        { id: "q2", title: "Is Rhode dermatologist-tested?", content: "Yes, all our formulas are rigorously tested for your skin barrier." },
+        { id: "q1", title: "How far in advance should I book?", content: "For intimate dinners, 2 weeks notice is preferred. For large events, please reach out 1-2 months prior." },
+        { id: "q2", title: "Do you provide service staff?", content: "Yes, we can provide professional waitstaff to ensure your evening is flawless." },
       ]}
+      sideTitle="Frequently Asked Questions"
+      sideDescription="Answers to common inquiries regarding our private chef services."
+      faqsAnimation="slide-up"
+      useInvertedBackground={false}
     />
   </div>
 
   <div id="contact" data-section="contact">
       <ContactSplit
-      tag="Exclusive Access"
-      title="Join the Rhode Circle"
-      description="Subscribe to the Rhode journal for beauty secrets and exclusive early access."
+      tag="Connect"
+      title="Begin Your Culinary Journey"
+      description="Book a consultation with our executive chef to start crafting your unique menu today."
       background={{ variant: "sparkles-gradient" }}
-      useInvertedBackground={true}
+      useInvertedBackground={false}
     />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterMedia
-      imageSrc="http://img.b2bpic.net/free-photo/skincare-luxury-branding_23-2149504655.jpg"
-      logoText="rhode"
+      <FooterLogoEmphasis
       columns={[
-        { title: "Shop", items: [{ label: "Collection", href: "#products" }, { label: "Journal", href: "#" }] },
-        { title: "Social", items: [{ label: "Instagram", href: "#" }, { label: "TikTok", href: "#" }] },
-        { title: "Legal", items: [{ label: "Privacy", href: "#" }, { label: "Terms", href: "#" }] },
+        { items: [{ label: "Dining", href: "#products" }, { label: "Philosophy", href: "#about" }] },
+        { items: [{ label: "Inquiries", href: "#contact" }, { label: "Careers", href: "#" }] },
+        { items: [{ label: "Privacy", href: "#" }, { label: "Terms", href: "#" }] },
       ]}
+      logoText="CulinaryArt"
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/base.css

@@ -11,7 +11,7 @@ html {
 body {
   background-color: var(--background);
   color: var(--foreground);
-  font-family: var(--font-inter), sans-serif;
+  font-family: var(--font-playfair), sans-serif;
   position: relative;
   min-height: 100vh;
   overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-montserrat), sans-serif;
+  font-family: var(--font-playfair), sans-serif;
 }

src/app/styles/variables.css

@@ -12,13 +12,13 @@
 
   --background: #0a0a0a;
   --card: #1a1a1a;
-  --foreground: #ffffffe6;
-  --primary-cta: #e6e6e6;
+  --foreground: #ffffff;
+  --primary-cta: #d4af37;
   --primary-cta-text: #f5f4ef;
-  --secondary-cta: #1a1a1a;
+  --secondary-cta: #1f1f1f;
   --secondary-cta-text: #2a2928;
-  --accent: #737373;
-  --background-accent: #737373;
+  --accent: #3a3a3a;
+  --background-accent: #262626;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);