Update src/app/styles/variables.css

Merge version_2 into main

src/app/page.tsx

@@ -2,15 +2,13 @@
 
 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 FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
-import FooterCard from '@/components/sections/footer/FooterCard';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+import FaqSplitText from '@/components/sections/faq/FaqSplitText';
+import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
 import HeroOverlay from '@/components/sections/hero/HeroOverlay';
-import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
 import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
-import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
+import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
 import TextAbout from '@/components/sections/about/TextAbout';
 
 export default function LandingPage() {
@@ -27,32 +25,18 @@ export default function LandingPage() {
         secondaryButtonStyle="solid"
         headingFontWeight="medium"
     >
-      <ReactLenis root>
+      <ReactLenis root options={{ lerp: 0.1, duration: 1.5, smoothWheel: true }}>
   <div id="nav" data-section="nav">
       <NavbarLayoutFloatingInline
       navItems={[
-        {
-          name: "About",
-          id: "about",
-        },
-        {
-          name: "Services",
-          id: "features",
-        },
-        {
-          name: "Testimonials",
-          id: "testimonials",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
+        { name: "About", id: "about" },
+        { name: "Testimonials", id: "testimonials" },
+        { name: "FAQ", id: "faq" },
+        { name: "Contact", id: "contact" },
       ]}
       brandName="AR Marketing"
       button={{
-        text: "Get Started",
-        href: "#contact",
-      }}
+        text: "Get Started",        href: "#contact"}}
     />
   </div>
 
@@ -62,41 +46,11 @@ export default function LandingPage() {
       description="AR Marketing delivers unparalleled growth strategies through precision data and high-end creative execution."
       tag="PREMIUM DIGITAL AGENCY"
       buttons={[
-        {
-          text: "Get Started",
-          href: "#contact",
-        },
-        {
-          text: "Explore Services",
-          href: "#features",
-        },
+        { text: "Get Started", href: "#contact" },
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/3d-render-abstract-landscape-flowing-dots_1048-13342.jpg?_wi=1"
       imageAlt="Futuristic 3D digital landscape"
       showBlur={true}
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/confident-african-american-businessman-brown-classic-jacket-thinking-about-business-while-holding-hand-chin-isolated-dark-background_613910-17781.jpg",
-          alt: "Client 1",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/portrait-confident-young-woman-with-eyeglasses_23-2148452693.jpg",
-          alt: "Client 2",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/close-up-labor-union-member_23-2150969905.jpg",
-          alt: "Client 3",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/serious-beautiful-middle-aged-business-woman_1262-3072.jpg",
-          alt: "Client 4",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/businessman-wearing-glasses-using-digital-tablet_329181-740.jpg",
-          alt: "Client 5",
-        },
-      ]}
-      avatarText="Trusted by 100+ global brands"
     />
   </div>
 
@@ -107,197 +61,72 @@ export default function LandingPage() {
     />
   </div>
 
-  <div id="features" data-section="features">
-      <FeatureCardSix
-      textboxLayout="default"
-      useInvertedBackground={false}
-      features={[
-        {
-          title: "Data Analytics",
-          description: "Precision tracking to fuel your growth.",
-          imageSrc: "http://img.b2bpic.net/free-photo/3d-graph-computer-illustration_23-2151884892.jpg?_wi=1",
-          imageAlt: "Analytics icon",
-        },
-        {
-          title: "Digital Strategy",
-          description: "Comprehensive roadmaps for global scale.",
-          imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-arrow-hitting-target_23-2151266491.jpg?_wi=1",
-          imageAlt: "Strategy globe",
-        },
-        {
-          title: "Brand Growth",
-          description: "Elevating your brand presence worldwide.",
-          imageSrc: "http://img.b2bpic.net/free-photo/digital-art-light-lamp-design_23-2151124309.jpg?_wi=1",
-          imageAlt: "Growth curves",
-        },
-      ]}
-      title="Strategic Excellence"
-      description="Our expertise spans across all facets of modern digital marketing."
-    />
-  </div>
-
-  <div id="metrics" data-section="metrics">
-      <MetricCardTwo
-      animationType="depth-3d"
-      textboxLayout="default"
-      gridVariant="bento-grid"
-      useInvertedBackground={true}
-      metrics={[
-        {
-          id: "m1",
-          value: "500%",
-          description: "Average ROI Increase",
-        },
-        {
-          id: "m2",
-          value: "120+",
-          description: "Global Projects",
-        },
-        {
-          id: "m3",
-          value: "10k+",
-          description: "Leads Generated",
-        },
-      ]}
-      title="Proven Performance"
-      description="Quantifiable results that speak for themselves."
-    />
-  </div>
-
   <div id="testimonials" data-section="testimonials">
-      <TestimonialCardFive
-      textboxLayout="default"
-      useInvertedBackground={false}
-      testimonials={[
-        {
-          id: "t1",
-          name: "Sarah J.",
-          date: "Jan 2024",
-          title: "CEO, TechCorp",
-          quote: "AR Marketing transformed our entire digital presence.",
-          tag: "Excellent",
-          avatarSrc: "http://img.b2bpic.net/free-photo/confident-african-american-businessman-brown-classic-jacket-thinking-about-business-while-holding-hand-chin-isolated-dark-background_613910-17781.jpg",
-          imageSrc: "http://img.b2bpic.net/free-photo/3d-render-abstract-landscape-flowing-dots_1048-13342.jpg?_wi=2",
-          imageAlt: "corporate leader portrait",
-        },
-        {
-          id: "t2",
-          name: "Marcus C.",
-          date: "Feb 2024",
-          title: "Founder, LabInc",
-          quote: "Strategic genius combined with flawless execution.",
-          tag: "Brilliant",
-          avatarSrc: "http://img.b2bpic.net/free-photo/portrait-confident-young-woman-with-eyeglasses_23-2148452693.jpg",
-          imageSrc: "http://img.b2bpic.net/free-photo/view-modern-futuristic-work-space-with-furniture_23-2151797694.jpg",
-          imageAlt: "corporate leader portrait",
-        },
-        {
-          id: "t3",
-          name: "Elena R.",
-          date: "Mar 2024",
-          title: "CMO, GrowthCo",
-          quote: "Unmatched precision and ROI driven results.",
-          tag: "Outstanding",
-          avatarSrc: "http://img.b2bpic.net/free-photo/close-up-labor-union-member_23-2150969905.jpg",
-          imageSrc: "http://img.b2bpic.net/free-photo/3d-graph-computer-illustration_23-2151884892.jpg?_wi=2",
-          imageAlt: "corporate leader portrait",
-        },
-        {
-          id: "t4",
-          name: "David W.",
-          date: "Apr 2024",
-          title: "Director, StartUp",
-          quote: "The best investment we've made this year.",
-          tag: "Top-tier",
-          avatarSrc: "http://img.b2bpic.net/free-photo/serious-beautiful-middle-aged-business-woman_1262-3072.jpg",
-          imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-arrow-hitting-target_23-2151266491.jpg?_wi=2",
-          imageAlt: "corporate leader portrait",
-        },
-        {
-          id: "t5",
-          name: "Linda P.",
-          date: "May 2024",
-          title: "Product VP",
-          quote: "Seamless experience and world-class insights.",
-          tag: "Professional",
-          avatarSrc: "http://img.b2bpic.net/free-photo/businessman-wearing-glasses-using-digital-tablet_329181-740.jpg",
-          imageSrc: "http://img.b2bpic.net/free-photo/digital-art-light-lamp-design_23-2151124309.jpg?_wi=2",
-          imageAlt: "corporate leader portrait",
-        },
-      ]}
+      <TestimonialCardSixteen
       title="Client Success Stories"
-      description="Trusted by industry leaders worldwide."
+      description="Real-world impact through our luxury strategy framework."
+      testimonials={[
+        { id: "t1", name: "Sarah J.", role: "CEO", company: "TechCorp", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/confident-african-american-businessman-brown-classic-jacket-thinking-about-business-while-holding-hand-chin-isolated-dark-background_613910-17781.jpg" },
+        { id: "t2", name: "Marcus C.", role: "Founder", company: "LabInc", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-confident-young-woman-with-eyeglasses_23-2148452693.jpg" }
+      ]}
+      kpiItems={[
+        { value: "500%", label: "ROI Growth" },
+        { value: "120+", label: "Global Projects" },
+        { value: "10k+", label: "Leads" }
+      ]}
+      animationType="depth-3d"
+      textboxLayout="split"
+      useInvertedBackground={false}
     />
   </div>
 
   <div id="socialProof" data-section="socialProof">
       <SocialProofOne
-      textboxLayout="default"
+      names={["Microsoft", "Google", "Apple", "Amazon", "Salesforce"]}
+      title="Case Studies & Highlights"
+      description="Proven results for world-class industry partners."
       useInvertedBackground={true}
-      names={[
-        "Microsoft",
-        "Google",
-        "Apple",
-        "Amazon",
-        "Salesforce",
-        "Adobe",
-        "Shopify",
-      ]}
-      title="Industry Partners"
-      description="Collaborating with visionaries."
+      textboxLayout="default"
     />
   </div>
 
   <div id="faq" data-section="faq">
-      <FaqDouble
-      textboxLayout="default"
-      useInvertedBackground={false}
+      <FaqSplitText
+      sideTitle="Need Clarity?"
+      sideDescription="Explore our high-end luxury services and methodologies."
       faqs={[
-        {
-          id: "q1",
-          title: "What makes AR Marketing unique?",
-          content: "Our proprietary 3D-driven strategy framework ensures precision.",
-        },
-        {
-          id: "q2",
-          title: "How do we get started?",
-          content: "Schedule an initial discovery session with our team.",
-        },
-        {
-          id: "q3",
-          title: "What is the typical timeline?",
-          content: "Project timelines are tailored to your specific goals.",
-        },
+        { id: "q1", title: "What defines our luxury approach?", content: "Seamless 3D-driven strategy execution." },
+        { id: "q2", title: "Why choose AR Marketing?", content: "World-class design meets data-driven precision." }
       ]}
-      title="Frequently Asked Questions"
-      description="Answers to help you get started."
       faqsAnimation="slide-up"
+      useInvertedBackground={false}
     />
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactText
-      useInvertedBackground={true}
-      background={{
-        variant: "sparkles-gradient",
-      }}
-      text="Ready to redefine your digital presence? Let's begin the conversation."
-      buttons={[
-        {
-          text: "Contact Us",
-          href: "mailto:hello@armarketing.com",
-        },
+      <ContactSplitForm
+      title="Let's Redefine Your Brand"
+      description="Secure your exclusive consultation today."
+      inputs={[
+        { name: "name", type: "text", placeholder: "Full Name", required: true },
+        { name: "email", type: "email", placeholder: "Email Address", required: true }
       ]}
+      textarea={{ name: "message", placeholder: "Describe your project vision..." }}
+      useInvertedBackground={true}
     />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterCard
+      <FooterBaseReveal
       logoText="AR Marketing"
+      columns={[
+        { title: "Agency", items: [{ label: "About", href: "#about" }, { label: "Contact", href: "#contact" }] },
+        { title: "Services", items: [{ label: "Strategy", href: "#" }, { label: "Branding", href: "#" }] }
+      ]}
       copyrightText="© 2025 AR Marketing. All rights reserved."
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #000000;
-  --card: #0c0c0c;
-  --foreground: #ffffff;
-  --primary-cta: #cee7ff;
+  --background: #0a0a0a;
+  --card: #141414;
+  --foreground: #f5f5f5;
+  --primary-cta: #ffdf7d;
   --primary-cta-text: #000000;
-  --secondary-cta: #000000;
+  --secondary-cta: #1a1a1a;
   --secondary-cta-text: #ffffff;
-  --accent: #535353;
-  --background-accent: #CEE7FF;
+  --accent: #b8860b;
+  --background-accent: #8b6914;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);