Merge version_4 into main

Merge version_4 into main

src/app/page.tsx

@@ -2,16 +2,17 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactText from '@/components/sections/contact/ContactText';
-import FaqDouble from '@/components/sections/faq/FaqDouble';
+import ContactSplit from '@/components/sections/contact/ContactSplit';
+import FaqSplitText from '@/components/sections/faq/FaqSplitText';
 import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
 import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
 import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
-import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
+import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
 import ProductCardThree from '@/components/sections/product/ProductCardThree';
-import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
+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,7 +61,7 @@ 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>
 
@@ -69,12 +70,12 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={false}
       features={[
-        { title: "Glossy Finish", description: "High-shine lip care for an elevated look.", imageSrc: "http://img.b2bpic.net/free-photo/lip-gloss-product-beauty-branding_23-2149504640.jpg" },
-        { title: "Rich Nutrition", description: "Nutrient-dense formulas for soft, healthy skin.", imageSrc: "http://img.b2bpic.net/free-photo/skincare-routine-essential_23-2149504660.jpg" },
-        { title: "Chic Design", description: "Sophisticated packaging that looks beautiful anywhere.", imageSrc: "http://img.b2bpic.net/free-photo/skincare-luxury-branding_23-2149504655.jpg" },
+        { 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 Rhode Aesthetic"
-      description="Performance skincare that doubles as a chic accessory."
+      title="The Art of Private Dining"
+      description="Seamless, elevated culinary experiences designed to impress."
     />
   </div>
 
@@ -85,75 +86,74 @@ 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">
-      <TestimonialCardThirteen
-      animationType="blur-reveal"
-      textboxLayout="default"
+      <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}
-      description="Join the global community embracing the glow."
-      testimonials={[
-        { id: "1", name: "Maya A.", handle: "@maya.glow", testimonial: "The lip gloss is absolutely iconic. Chic and nourishing.", rating: 5 },
-        { id: "2", name: "Leo S.", handle: "@leoskin", testimonial: "Perfect routine for that effortless look. Simply expensive.", rating: 5 },
-      ]}
-      showRating={true}
-      title="Loved by the Chic"
     />
   </div>
 
   <div id="metrics" data-section="metrics">
-      <MetricCardEleven
+      <MetricCardThree
+      title="Culinary Standards"
+      textboxLayout="split"
       animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={true}
-      description="Elevating your daily beauty ritual with proven care."
+      useInvertedBackground={false}
+      description=""
       metrics={[
-        { id: "m1", value: "98%", title: "Glow Index", description: "Visible radiance improvement.", imageSrc: "http://img.b2bpic.net/free-photo/skincare-product-splash_23-2149504720.jpg" },
-        { id: "m2", value: "100%", title: "Chic Appeal", description: "Loved for style & performance.", imageSrc: "http://img.b2bpic.net/free-photo/beauty-product-texture_23-2149504730.jpg" },
+        { 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" },
       ]}
-      title="Proven Glow"
     />
   </div>
 
   <div id="faq" data-section="faq">
-      <FaqDouble
-      textboxLayout="default"
-      useInvertedBackground={false}
-      description="Everything you need to know about our signature glow."
+      <FaqSplitText
       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." },
       ]}
-      title="Glossary"
-      faqsAnimation="blur-reveal"
+      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">
-      <ContactText
-      useInvertedBackground={true}
+      <ContactSplit
+      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" }}
-      text="Subscribe to the Rhode journal for beauty secrets and exclusive early access."
-      buttons={[{ text: "Join the Circle", href: "#" }]}
+      useInvertedBackground={false}
     />
   </div>
 
   <div id="footer" data-section="footer">
       <FooterLogoEmphasis
       columns={[
-        { items: [{ label: "Shop", href: "#products" }, { label: "Journal", href: "#" }] },
-        { items: [{ label: "Instagram", href: "#" }, { label: "TikTok", 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="rhode"
+      logoText="CulinaryArt"
     />
   </div>
       </ReactLenis>

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

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #fdf8d9;
-  --card: #fbf2b5;
-  --foreground: #4b3621;
-  --primary-cta: #7a5c37;
+  --background: #0a0a0a;
+  --card: #1a1a1a;
+  --foreground: #ffffff;
+  --primary-cta: #d4af37;
   --primary-cta-text: #f5f4ef;
-  --secondary-cta: #f1e5a0;
+  --secondary-cta: #1f1f1f;
   --secondary-cta-text: #2a2928;
-  --accent: #d4b483;
-  --background-accent: #f3e5ab;
+  --accent: #3a3a3a;
+  --background-accent: #262626;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);