Update src/app/styles/variables.css

Merge version_2 into main

src/app/page.tsx

@@ -2,10 +2,10 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactCTA from '@/components/sections/contact/ContactCTA';
-import FaqSplitText from '@/components/sections/faq/FaqSplitText';
+import ContactSplit from '@/components/sections/contact/ContactSplit';
+import FaqBase from '@/components/sections/faq/FaqBase';
 import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
-import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
+import FooterMedia from '@/components/sections/footer/FooterMedia';
 import HeroSplitTestimonial from '@/components/sections/hero/HeroSplitTestimonial';
 import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
@@ -265,7 +265,7 @@ export default function LandingPage() {
   </div>
 
   <div id="faq" data-section="faq">
-      <FaqSplitText
+      <FaqBase
       useInvertedBackground={true}
       faqs={[
         {
@@ -279,30 +279,34 @@ export default function LandingPage() {
         {
           id: "q5",          title: "ما هو الفرق بين الخطط المختلفة؟",          content: "تختلف الخطط في عدد المستخدمين، ميزات تتبع المخزون والمشاريع، ومستوى التقارير المتاحة. يمكنك مراجعة قسم الأسعار لمعرفة التفاصيل الكاملة."},
       ]}
-      sideTitle="أسئلة شائعة"
-      sideDescription="ابحث عن إجابات لاستفساراتك حول QuickBooks واشتراكاتها."
+      title="أسئلة شائعة"
+      description="ابحث عن إجابات لاستفساراتك حول QuickBooks واشتراكاتها."
       faqsAnimation="slide-up"
-      textPosition="left"
+      textboxLayout="default"
+      showCard={true}
     />
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactCTA
+      <ContactSplit
       useInvertedBackground={false}
       background={{
         variant: "sparkles-gradient"}}
       tag="جاهز للبدء؟"
       title="تواصل معنا اليوم"
-      description="دع فريق الخبراء لدينا يساعدك في اختيار خطة QuickBooks المثالية لنمو عملك."
-      buttons={[
-        {
-          text: "احصل على استشارة مجانية",          href: "#"},
-      ]}
+      description="إذا كان لديك أي استفسارات أو تحتاج إلى مساعدة، تواصل معنا اليوم وسيسعد فريق الخبراء لدينا بمساعدتك في اختيار خطة QuickBooks المثالية لنمو عملك."
+      imageSrc="http://img.b2bpic.net/free-photo/financial-analyst-working-with-data_23-2150461309.jpg"
+      imageAlt="شخص يعمل على بيانات مالية"
+      mediaAnimation="opacity"
+      inputPlaceholder="أدخل بريدك الإلكتروني"
+      buttonText="أرسل استفسارك الآن"
+      termsText="بالضغط على 'أرسل استفسارك الآن'، أنت توافق على الشروط والأحكام."
+      onSubmit={() => alert('Submitted!')}
     />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterBaseReveal
+      <FooterMedia
       logoSrc="http://img.b2bpic.net/free-vector/initials-letter-s-g-logo-design_474888-7384.jpg"
       logoAlt="شعار QuickBooks"
       logoText="QuickBooks"
@@ -343,6 +347,8 @@ export default function LandingPage() {
         },
       ]}
       copyrightText="QuickBooks © 2024. جميع الحقوق محفوظة."
+      imageSrc="http://img.b2bpic.net/free-photo/blurred-abstract-background-interior-view-looking-out-toward-city-view-with-light-bokeh_1187-1721.jpg"
+      imageAlt="خلفية مكتب حديثة"
     />
   </div>
       </ReactLenis>

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #fcf6ec;
-  --card: #f3ede2;
-  --foreground: #2e2521;
-  --primary-cta: #2e2521;
-  --primary-cta-text: #fcf6ec;
+  --background: #fafffb;
+  --card: #f7fffa;
+  --foreground: #001a0a;
+  --primary-cta: #0a7039;
+  --primary-cta-text: #fafffb;
   --secondary-cta: #ffffff;
-  --secondary-cta-text: #2e2521;
-  --accent: #b2a28b;
-  --background-accent: #b2a28b;
+  --secondary-cta-text: #001a0a;
+  --accent: #a8d9be;
+  --background-accent: #6bbf8e;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);