Update src/app/styles/variables.css

src/app/page.tsx

@@ -8,7 +8,7 @@ import ProductCardFour from "@/components/sections/product/ProductCardFour";
 import TestimonialCardTen from "@/components/sections/testimonial/TestimonialCardTen";
 import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
 import FeatureCardTwentyThree from "@/components/sections/feature/FeatureCardTwentyThree";
-import FaqBase from "@/components/sections/faq/FaqBase";
+import FaqSplitText from "@/components/sections/faq/FaqSplitText";
 import ContactCenter from "@/components/sections/contact/ContactCenter";
 import FooterMedia from "@/components/sections/footer/FooterMedia";
 import { Award, Shield, Star } from "lucide-react";
@@ -130,16 +130,16 @@ export default function Page() {
       </div>
 
       <div id="faq" data-section="faq">
-        <FaqBase
+        <FaqSplitText
-          title="Legacy Inquiries"
+          sideTitle="Legacy Inquiries"
-          description="Common questions about our curation."
+          sideDescription="Answers to the most distinguished questions about our curation."
           faqs={[
             { id: "q1", title: "Do you ship worldwide?", content: "Yes, we ship globally to ensure our legacy reaches your doorstep." },
             { id: "q2", title: "Are items limited edition?", content: "Our collections are curated in small batches for exclusive quality." },
             { id: "q3", title: "How to care for garments?", content: "Each garment comes with detailed artisan care instructions." }
           ]}
           faqsAnimation="slide-up"
-          textboxLayout="split"
+          textPosition="left"
           useInvertedBackground={false}
         />
       </div>
@@ -168,4 +168,4 @@ export default function Page() {
       </div>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #fcfaf7;
+  --background: #f5f4ef;
-  --card: #f4efe9;
+  --card: #dad6cd;
-  --foreground: #1a1614;
+  --foreground: #2a2928;
-  --primary-cta: #8b7355;
+  --primary-cta: #2a2928;
   --primary-cta-text: #ffffff;
-  --secondary-cta: #ffffff;
+  --secondary-cta: #ecebea;
   --secondary-cta-text: #1a1614;
-  --accent: #d4af37;
+  --accent: #ffffff;
-  --background-accent: #e6e0d8;
+  --background-accent: #c6b180;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);