Merge version_4 into main

Merge version_4 into main

src/app/page.tsx

@@ -2,12 +2,14 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactCenter from '@/components/sections/contact/ContactCenter';
+import ContactCTA from '@/components/sections/contact/ContactCTA';
+import FaqDouble from '@/components/sections/faq/FaqDouble';
 import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
 import FooterSimple from '@/components/sections/footer/FooterSimple';
 import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
 import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
 import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
 import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
 
@@ -35,6 +37,10 @@ export default function LandingPage() {
           name: "About Us",          id: "about"},
         {
           name: "Testimonials",          id: "testimonials"},
+        {
+          name: "Pricing",          id: "pricing"},
+        {
+          name: "FAQs",          id: "faq"},
         {
           name: "Contact",          id: "contact"},
       ]}
@@ -142,17 +148,59 @@ export default function LandingPage() {
     />
   </div>
 
+  <div id="pricing" data-section="pricing">
+      <PricingCardNine
+      animationType="slide-up"
+      textboxLayout="default"
+      useInvertedBackground={false}
+      title="Flexible Pricing Plans"
+      description="Choose the perfect cleaning plan that fits your lifestyle and needs. Quality service, transparent pricing."
+      plans={[
+        {
+          id: "basic",          title: "Basic Home Cleaning",          price: "$120",          period: "/visit",          features: ["Kitchen cleaning", "Bathroom sanitization", "Floor vacuuming/mopping", "Dusting surfaces"],
+          button: { text: "Select Basic", href: "#contact" }
+        },
+        {
+          id: "premium",          title: "Premium Home Cleaning",          price: "$180",          period: "/visit",          features: ["Includes Basic +", "Deep clean bathrooms", "Inside window cleaning", "Cabinet exterior wipe down", "Bed making"],
+          button: { text: "Select Premium", href: "#contact" }
+        },
+        {
+          id: "elite",          title: "Elite Home Cleaning",          price: "$250",          period: "/visit",          features: ["Includes Premium +", "Appliance exterior cleaning", "Wall spot cleaning", "Patio sweep", "Organization assistance"],
+          button: { text: "Select Elite", href: "#contact" }
+        }
+      ]}
+    />
+  </div>
+
+  <div id="faq" data-section="faq">
+      <FaqDouble
+      faqsAnimation="slide-up"
+      textboxLayout="default"
+      useInvertedBackground={false}
+      title="Frequently Asked Questions"
+      description="Have questions about our luxury cleaning services? Find answers to common inquiries below."
+      faqs={[
+        { id: "1", title: "What areas do you serve?", content: "We proudly serve the greater Phoenix, AZ area, including Scottsdale, Paradise Valley, and Tempe." },
+        { id: "2", title: "Are your cleaners background-checked?", content: "Yes, all our cleaning professionals undergo thorough background checks and rigorous training to ensure your peace of mind." },
+        { id: "3", title: "Do I need to be home during cleaning?", content: "No, you don't need to be home. Many of our clients provide us with access, and we ensure your home is securely locked before we leave." },
+        { id: "4", title: "What cleaning products do you use?", content: "We primarily use high-quality, eco-friendly, and non-toxic cleaning products to ensure a safe environment for your family and pets." },
+        { id: "5", title: "How do I book a service?", content: "You can easily book a service through our website by filling out a contact form, or by calling us directly at (602) 765-3080." }
+      ]}
+    />
+  </div>
+
   <div id="contact" data-section="contact">
-      <ContactCenter
+      <ContactCTA
       useInvertedBackground={false}
       background={{
         variant: "radial-gradient"}}
       tag="Contact Us"
       title="Ready for a Sparkling Home?"
       description="Whether you need recurring home cleaning or a trusted team to keep your space looking its best, Sparkle Clean is here to provide a service experience that feels polished from start to finish. We are located at 3104 E Camelback Rd #556, Phoenix, AZ 85016, and you can reach us at (602) 765-3080."
-      inputPlaceholder="Your Email Address"
+      buttons={[
-      buttonText="Get a Quote"
+        {
-      termsText="By submitting your request, you agree to our privacy policy and terms of service."
+          text: "Get a Quote",          href: "#contact"}
+      ]}
     />
   </div>
 
@@ -175,6 +223,10 @@ export default function LandingPage() {
               label: "About Us",              href: "#about"},
             {
               label: "Testimonials",              href: "#testimonials"},
+            {
+              label: "Pricing",              href: "#pricing"},
+            {
+              label: "FAQs",              href: "#faq"},
             {
               label: "Contact Us",              href: "#contact"},
           ],

src/app/styles/base.css

@@ -11,7 +11,7 @@ html {
 body {
   background-color: var(--background);
   color: var(--foreground);
-  font-family: var(--font-inter-tight), 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-inter-tight), sans-serif;
+  font-family: var(--font-dm-sans), sans-serif;
 }

src/app/styles/variables.css

@@ -12,13 +12,13 @@
 
   --background: #ffffff;
   --card: #f9f9f9;
-  --foreground: #120a00e6;
+  --foreground: #000612e6;
-  --primary-cta: #E34400;
+  --primary-cta: #106EFB;
   --primary-cta-text: #ffffff;
   --secondary-cta: #f9f9f9;
   --secondary-cta-text: #120a00e6;
   --accent: #e2e2e2;
-  --background-accent: #E34400;
+  --background-accent: #106EFB;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);