Update src/app/styles/variables.css

Merge version_3 into main

src/app/page.tsx

@@ -2,15 +2,15 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+import ContactText from '@/components/sections/contact/ContactText';
-import FaqSplitText from '@/components/sections/faq/FaqSplitText';
+import FaqDouble from '@/components/sections/faq/FaqDouble';
-import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+import FooterMedia from '@/components/sections/footer/FooterMedia';
 import HeroOverlayTestimonial from '@/components/sections/hero/HeroOverlayTestimonial';
 import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
 import ProductCardOne from '@/components/sections/product/ProductCardOne';
 import SplitAbout from '@/components/sections/about/SplitAbout';
-import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
+import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
 
 export default function LandingPage() {
   return (
@@ -129,65 +129,50 @@ export default function LandingPage() {
   </div>
 
   <div id="testimonials" data-section="testimonials">
-      <TestimonialCardSixteen
+      <TestimonialCardFifteen
-      animationType="scale-rotate"
+      testimonial="Obsessed with my order! Packaging so cute literally felt like a gift."
-      textboxLayout="split"
+      rating={5}
+      author="Aima"
+      avatars={[{ src: "http://img.b2bpic.net/free-photo/happy-woman-applying-moisturizer-face-morning_329181-1364.jpg", alt: "Customer" }]}
+      ratingAnimation="blur-reveal"
+      avatarsAnimation="blur-reveal"
       useInvertedBackground={true}
-      title="Our Happy Customers"
-      description="See why everyone is obsessed with their sparkles."
-      kpiItems={[
-        { value: "5k+", label: "Reviews" },
-        { value: "115k", label: "Followers" },
-        { value: "4.9/5", label: "Avg Rating" }
-      ]}
-      testimonials={[
-        { id: "t1", name: "Aima", role: "Customer", company: "Sparkle Fan", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/happy-woman-applying-moisturizer-face-morning_329181-1364.jpg" },
-        { id: "t2", name: "Zara", role: "Customer", company: "Sparkle Fan", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/stylish-woman-hat-pink-red-wall_343596-5526.jpg" },
-        { id: "t3", name: "Sana", role: "Customer", company: "Sparkle Fan", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-happy-young-fit-woman-doing-sports-exercises-home-drinks-water-from-bottle-sm_1258-182451.jpg" },
-      ]}
     />
   </div>
 
   <div id="faq" data-section="faq">
-      <FaqSplitText
+      <FaqDouble
-      sideTitle="Help Corner"
+      title="Help Corner"
-      sideDescription="Need assistance? We're here to help you out."
+      description="Need assistance? We're here to help you out."
       faqs={[
         { id: "f1", title: "What are the delivery charges?", content: "Our delivery charges are Rs. 299 all over Pakistan." },
         { id: "f2", title: "How long does shipping take?", content: "Standard delivery takes 3-5 business days." },
         { id: "f3", title: "Can I return items?", content: "We offer returns for damaged products reported within 24 hours of delivery." },
       ]}
       faqsAnimation="blur-reveal"
+      textboxLayout="split"
       useInvertedBackground={false}
-      textPosition="left"
     />
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactSplitForm
+      <ContactText
-      title="Get in Touch"
+      text="Have questions or just want to say hi? We're here for you."
-      description="Have questions or just want to say hi? We're here for you."
+      buttons={[{ text: "Get in Touch", href: "#contact" }]}
-      inputs={[
+      background={{ variant: "sparkles-gradient" }}
-        { name: "name", type: "text", placeholder: "Your Name", required: true },
-        { name: "email", type: "email", placeholder: "Your Email", required: true }
-      ]}
-      textarea={{ name: "message", placeholder: "Your Message", rows: 4 }}
       useInvertedBackground={true}
-      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DgdNtGIvAAViwQ4RVcbE9fmxQw/uploaded-1778707963086-1h79p8sg.jpg"
     />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterLogoEmphasis
+      <FooterMedia
+      imageSrc="http://img.b2bpic.net/free-photo/brushes-cosmetics-near-flowers-bag_23-2147778983.jpg?_wi=2"
       logoText="SparklesByAsh"
       columns={[
-        { items: [
+        { title: "Links", items: [
             { label: "New Arrivals", href: "#featured" },
             { label: "Best Sellers", href: "#best-selling" },
-        ] },
-        { items: [
             { label: "FAQ", href: "#faq" },
-            { label: "Contact Us", href: "#contact" },
         ] },
       ]}
     />
@@ -195,4 +180,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #fdf7f7;
+  --background: #ffffff;
-  --card: #ffffff;
+  --card: #fbfbfb;
-  --foreground: #2d1b24;
+  --foreground: #1a1a1a;
-  --primary-cta: #ff7a8a;
+  --primary-cta: #2a2a2a;
   --primary-cta-text: #ffffff;
-  --secondary-cta: #ffffff;
+  --secondary-cta: #f1f1f1;
   --secondary-cta-text: #2d1b24;
-  --accent: #fccdd3;
+  --accent: #e5e5e5;
-  --background-accent: #fbcfe8;
+  --background-accent: #f5f5f5;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);