Merge version_3 into main

Merge version_3 into main

src/app/page.tsx

@@ -2,9 +2,9 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
-import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
-import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import ContactSplit from '@/components/sections/contact/ContactSplit';
+import FaqSplitText from '@/components/sections/faq/FaqSplitText';
+import FooterCard from '@/components/sections/footer/FooterCard';
 import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
 import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
@@ -12,7 +12,7 @@ import ProductCardFour from '@/components/sections/product/ProductCardFour';
 import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
 import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
 import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
-import { Heart } from "lucide-react";
+import { Heart, Instagram, Facebook, Twitter } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -127,62 +127,48 @@ export default function LandingPage() {
   <div id="socialProof" data-section="socialProof">
       <SocialProofOne
       textboxLayout="default"
-      useInvertedBackground={false}
+      useInvertedBackground={true}
       names={["LuxeWear", "ModaHome", "ElegantKids", "RoyalFabric", "PremiumStyle", "DesignHaus", "ArtisanTextile"]}
       title="Partner Brands"
-      description="We collaborate with industry-leading designers and fabricators to bring you the best."
+      description="Our curated partners representing the pinnacle of quality."
     />
   </div>
 
   <div id="faq" data-section="faq">
-      <FaqSplitMedia
-      title="Common Questions"
-      description="Everything you need to know about our shopping process."
+      <FaqSplitText
+      sideTitle="Common Questions"
+      sideDescription="Everything you need to know about our shopping process."
       faqs={[
         { id: "f1", title: "What is the return policy?", content: "Items can be returned within 14 days in original condition." },
         { id: "f2", title: "Do you offer delivery?", content: "Yes, we offer local delivery services across Qusar." },
         { id: "f3", title: "Can I order online?", content: "Currently, we manage orders through our store and WhatsApp." },
       ]}
       faqsAnimation="slide-up"
-      textboxLayout="split"
-      useInvertedBackground={true}
-      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3E8a3Ar49y2eCQCcbPEZuIvaDHM/uploaded-1779687369727-bi85x9zs.png"
+      useInvertedBackground={false}
     />
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactSplitForm
+      <ContactSplit
+      tag="Contact Us"
       title="Visit Us in Qusar"
       description="Get in touch with our team for exclusive requests or custom orders."
-      inputs={[
-        { name: "name", type: "text", placeholder: "Your Name" },
-        { name: "email", type: "email", placeholder: "Email Address" }
-      ]}
-      useInvertedBackground={false}
       imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3E8a3Ar49y2eCQCcbPEZuIvaDHM/uploaded-1779687369727-wxnedv4l.png"
+      useInvertedBackground={true}
     />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterBaseCard
+      <FooterCard
       logoText="FAMILY"
-      columns={[
-        {
-          title: "Navigation",          items: [
-            { label: "Home", href: "#hero" },
-            { label: "Products", href: "#products" },
-          ],
-        },
-        {
-          title: "Legal",          items: [
-            { label: "Privacy Policy", href: "#" },
-            { label: "Terms", href: "#" },
-          ],
-        },
+      socialLinks={[
+        { icon: Instagram, href: "#", ariaLabel: "Instagram" },
+        { icon: Facebook, href: "#", ariaLabel: "Facebook" },
+        { icon: Twitter, href: "#", ariaLabel: "Twitter" }
       ]}
     />
   </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-mulish), sans-serif;
+  font-family: var(--font-inter), sans-serif;
   position: relative;
   min-height: 100vh;
   overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-mulish), sans-serif;
+  font-family: var(--font-libre-baskerville), serif;
 }

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f5faff;
-  --card: #f1f8ff;
-  --foreground: #001122;
-  --primary-cta: #15479c;
+  --background: #0f0f0d;
+  --card: #1a1a18;
+  --foreground: #f5f5f0;
+  --primary-cta: #d4af37;
   --primary-cta-text: #f5f4ef;
-  --secondary-cta: #ffffff;
+  --secondary-cta: #4a4a48;
   --secondary-cta-text: #2a2928;
-  --accent: #a8cce8;
-  --background-accent: #7ba3cf;
+  --accent: #c5a028;
+  --background-accent: #2a2a28;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);