Update src/app/page.tsx

Merge version_4 into main

src/app/page.tsx

@@ -2,11 +2,11 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import { Sparkles, Zap, Shield, Award, Mail, Phone, MapPin, Calendar } from "lucide-react";
+import { Sparkles, Zap, Shield, Award, Calendar } from "lucide-react";
 import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
-import FaqBase from '@/components/sections/faq/FaqBase';
+import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
 import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
-import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
 import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
 import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
@@ -37,6 +37,7 @@ export default function LandingPage() {
         { name: "Services", id: "#services" },
         { name: "Pricing", id: "#pricing" },
         { name: "Testimonials", id: "#testimonials" },
+        { name: "FAQ", id: "#faq" },
         { name: "Contact", id: "#contact" },
       ]}
       brandName="ZaharaEliteDetailing"
@@ -81,7 +82,7 @@ export default function LandingPage() {
       useInvertedBackground={true}
       features={[
         {
-          title: "Interior Deep Clean",          description: "Comprehensive vacuum, steam clean, and leather conditioning for a refreshed cabin.",          imageSrc: "http://img.b2bpic.net/free-photo/car-wash-detailing-station_1303-22315.jpg",          buttonIcon: Sparkles,
+          title: "Interior Deep Clean",          description: "Comprehensive vacuum, steam clean, and leather conditioning for a refreshed cabin.",          imageSrc: "http://img.b2bpic.net/free-photo/car-wash-detailing-station_1303-22315.jpg?_wi=1",          buttonIcon: Sparkles,
         },
         {
           title: "Foam Bath & Wash",          description: "Safe, contact-free wash removing grime while protecting your paintwork.",          imageSrc: "http://img.b2bpic.net/free-photo/young-man-washing-car-carwash-station-outdoor_651396-2787.jpg",          buttonIcon: Zap,
@@ -121,13 +122,13 @@ export default function LandingPage() {
       useInvertedBackground={true}
       plans={[
         {
-          id: "basic",          badge: "Entry",          price: "$150",          subtitle: "Essential maintenance.",          features: ["Exterior Foam Bath", "Window Cleaning", "Interior Vacuum"],
+          id: "basic",          badge: "Entry",          price: "$90 ",          subtitle: "Essential maintenance.",          features: ["Exterior Foam Bath", "Exterior Window Cleaning", "Tire Dressing "],
         },
         {
-          id: "standard",          badge: "Popular",          price: "$250",          subtitle: "Complete renewal.",          features: ["All Basic Services", "Leather Conditioning", "Paint Sealant", "Tire Shine"],
+          id: "standard",          badge: "Popular",          price: "$120",          subtitle: "Intior Package",          features: ["", "Leather Con", "Basic Ceramic Coating ", "Tire Shine"],
         },
         {
-          id: "elite",          badge: "Elite",          price: "$450",          subtitle: "Ultimate preservation.",          features: ["All Standard Services", "Ceramic Coating", "Full Clay Bar", "Headlight Restoration"],
+          id: "elite",          badge: "Elite",          price: "$120",          subtitle: "Ultimate preservation.",          features: ["All Standard Services", "Ceramic Coating", "Full Clay Bar", ""],
         },
       ]}
       title="Transparent Detailing Packages"
@@ -142,9 +143,9 @@ export default function LandingPage() {
       gridVariant="uniform-all-items-equal"
       useInvertedBackground={false}
       metrics={[
-        { id: "m1", value: "500+", description: "Vehicles Detailed" },
+        { id: "m1", value: "+", description: "Vehicles Detailed" },
         { id: "m2", value: "100%", description: "Satisfaction Guarantee" },
-        { id: "m3", value: "5/5", description: "Average Rating" },
+        { id: "m3", value: "", description: "Average Rating" },
       ]}
       title="Results You Can Trust"
       description="We are proud of our commitment to quality."
@@ -164,7 +165,7 @@ export default function LandingPage() {
   </div>
 
   <div id="faq" data-section="faq">
-      <FaqBase
+      <FaqSplitMedia
       faqs={[
         { id: "q1", title: "How long does a detailing take?", content: "Typically between 2 to 6 hours depending on the package selected." },
         { id: "q2", title: "Do you provide your own water and power?", content: "Yes, our vans are fully equipped with water tanks and power generators so we don't need your home's utilities." },
@@ -176,6 +177,7 @@ export default function LandingPage() {
       faqsAnimation="slide-up"
       textboxLayout="split"
       useInvertedBackground={false}
+      imageSrc="http://img.b2bpic.net/free-photo/car-wash-detailing-station_1303-22315.jpg?_wi=2"
     />
   </div>
 
@@ -195,10 +197,13 @@ export default function LandingPage() {
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterLogoReveal
+      <FooterLogoEmphasis
       logoText="ZaharaElite"
-      leftLink={{ text: "Terms of Service", href: "#" }}
-      rightLink={{ text: "Privacy Policy", href: "#" }}
+      columns={[
+        { items: [{ label: "About Us", href: "#about" }, { label: "Services", href: "#services" }] },
+        { items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }] },
+        { items: [{ label: "Contact Support", href: "#contact" }] }
+      ]}
     />
   </div>
       </ReactLenis>

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #ffffff;
-  --card: #f9f9f9;
-  --foreground: #000612e6;
-  --primary-cta: #15479c;
-  --primary-cta-text: #ffffff;
-  --secondary-cta: #f9f9f9;
-  --secondary-cta-text: #000612e6;
-  --accent: #e2e2e2;
-  --background-accent: #c4c4c4;
+  --background: #0a0a0a;
+  --card: #1a1a1a;
+  --foreground: #f5f5f5;
+  --primary-cta: #dfff1c;
+  --primary-cta-text: #0a0a0a;
+  --secondary-cta: #1a1a1a;
+  --secondary-cta-text: #ffffff;
+  --accent: #8b9a1b;
+  --background-accent: #5d6b00;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);