Update src/app/page.tsx

Merge version_2 into main

src/app/page.tsx

@@ -2,16 +2,15 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactText from '@/components/sections/contact/ContactText';
-import FaqSplitText from '@/components/sections/faq/FaqSplitText';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+import FaqDouble from '@/components/sections/faq/FaqDouble';
 import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
 import FooterBase from '@/components/sections/footer/FooterBase';
 import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
-import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
 import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
-import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
-import TextAbout from '@/components/sections/about/TextAbout';
+import SplitAbout from '@/components/sections/about/SplitAbout';
+import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
 import { Info, Star } from "lucide-react";
 
 export default function LandingPage() {
@@ -32,16 +31,12 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarStyleApple
       navItems={[
-        {
-          name: "Home",          id: "hero"},
-        {
-          name: "About",          id: "about"},
-        {
-          name: "Services",          id: "services"},
-        {
-          name: "Testimonials",          id: "testimonials"},
-        {
-          name: "Pricing",          id: "pricing"},
+        { name: "Home", id: "hero" },
+        { name: "About", id: "about" },
+        { name: "Services", id: "services" },
+        { name: "Pricing", id: "pricing" },
+        { name: "FAQ", id: "faq" },
+        { name: "Contact", id: "contact" },
       ]}
       brandName="Saavi Nails"
     />
@@ -49,16 +44,13 @@ export default function LandingPage() {
 
   <div id="hero" data-section="hero">
       <HeroSplitDualMedia
-      background={{
-        variant: "plain"}}
+      background={{ variant: "plain" }}
       title="Professional Care for Nails, Skin & Makeup"
       description="Experience premium beauty services in a relaxing, professional environment. From expert nail extensions to specialized skin care, we bring out your best."
       tag="4.9 Stars Rating"
       mediaItems={[
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/nail-hygiene-care-drying-polish_23-2148766572.jpg",          imageAlt: "Luxury nail salon interior"},
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/hand-with-colorful-manicure-book_23-2151989342.jpg",          imageAlt: "Close up of nail art"}
+        { imageSrc: "http://img.b2bpic.net/free-photo/nail-hygiene-care-drying-polish_23-2148766572.jpg?_wi=1", imageAlt: "Luxury nail salon interior" },
+        { imageSrc: "http://img.b2bpic.net/free-photo/hand-with-colorful-manicure-book_23-2151989342.jpg", imageAlt: "Close up of nail art" }
       ]}
       mediaAnimation="slide-up"
       rating={5}
@@ -68,11 +60,29 @@ export default function LandingPage() {
   </div>
 
   <div id="about" data-section="about">
-      <TextAbout
-      useInvertedBackground={false}
+      <SplitAbout
       title="Redefining Your Beauty Experience"
+      description="Our studio combines artistry with the highest standards of hygiene and comfort, ensuring you leave feeling refreshed and confident."
       tag="About Us"
       tagIcon={Info}
+      imageSrc="http://img.b2bpic.net/free-photo/woman-having-pedicure-treatment-spa-salon-beauty-concept_176420-11642.jpg?_wi=1"
+      textboxLayout="split"
+      bulletPoints={[
+        { title: "Expert Staff", description: "Certified professionals with years of experience." },
+        { title: "High-End Products", description: "We only use premium, cruelty-free products." },
+        { title: "Hygienic Environment", description: "Strict sterilization protocols for your safety." }
+      ]}
+      useInvertedBackground={false}
+    />
+  </div>
+
+  <div id="socialProof" data-section="socialProof">
+    <SocialProofOne 
+        title="Trusted by Beauty Enthusiasts"
+        description="Join thousands of satisfied clients who choose us for their beauty needs."
+        textboxLayout="default"
+        names={["Mumbai Beauty Club", "Elite Spa Network", "Nail Art Pros", "Wellness Collective", "Style & Grace"]}
+        useInvertedBackground={true}
     />
   </div>
 
@@ -83,140 +93,65 @@ export default function LandingPage() {
       gridVariant="uniform-all-items-equal"
       useInvertedBackground={false}
       features={[
-        {
-          title: "Gel & Acrylic Nails",          description: "Professional extensions and stunning nail art for any occasion.",          imageSrc: "http://img.b2bpic.net/free-photo/woman-with-beautiful-manicure-close-up_23-2149311617.jpg"},
-        {
-          title: "Pedicure & Foot Spa",          description: "Rejuvenate your feet with our specialized massage and care treatments.",          imageSrc: "http://img.b2bpic.net/free-photo/woman-having-pedicure-treatment-spa-salon-beauty-concept_176420-11642.jpg"},
-        {
-          title: "Professional Makeup",          description: "Customized makeup services by our expert artists for events or daily look.",          imageSrc: "http://img.b2bpic.net/free-photo/pastry-bags-with-cream-decorating-gingerbread_169016-20353.jpg"},
+        { title: "Gel & Acrylic Nails", description: "Professional extensions and stunning nail art for any occasion.", imageSrc: "http://img.b2bpic.net/free-photo/woman-with-beautiful-manicure-close-up_23-2149311617.jpg" },
+        { title: "Pedicure & Foot Spa", description: "Rejuvenate your feet with our specialized massage and care treatments.", imageSrc: "http://img.b2bpic.net/free-photo/woman-having-pedicure-treatment-spa-salon-beauty-concept_176420-11642.jpg?_wi=2" },
+        { title: "Professional Makeup", description: "Customized makeup services by our expert artists for events or daily look.", imageSrc: "http://img.b2bpic.net/free-photo/pastry-bags-with-cream-decorating-gingerbread_169016-20353.jpg" },
       ]}
       title="Our Signature Services"
       description="Expert treatments designed to pamper and enhance your natural beauty."
     />
   </div>
 
-  <div id="testimonials" data-section="testimonials">
-      <TestimonialCardFifteen
-      useInvertedBackground={false}
-      testimonial="Amazing experience, very professional service! Loved the ambiance and the meticulous detail to my nails. Truly the best spot for self-care and pampering."
-      rating={5}
-      author="Arpita Shetty"
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/hairdresser-taking-care-her-client_23-2149319771.jpg",          alt: "Happy customer in salon"},
-        {
-          src: "http://img.b2bpic.net/free-photo/woman-beauty-salon-looking-into-mirror_1303-16737.jpg",          alt: "Satisfied salon client portrait"},
-        {
-          src: "http://img.b2bpic.net/free-photo/beautiful-woman-carrying-shopping-bags_23-2148660763.jpg",          alt: "Portrait of happy customer"},
-        {
-          src: "http://img.b2bpic.net/free-photo/side-view-people-getting-massage_23-2151178213.jpg",          alt: "Satisfied woman portrait"},
-        {
-          src: "http://img.b2bpic.net/free-photo/lovely-cheerful-female-with-broad-smile-friendly-look_273609-28437.jpg",          alt: "Happy client beautiful nails"},
-      ]}
-      ratingAnimation="slide-up"
-      avatarsAnimation="slide-up"
-    />
-  </div>
-
   <div id="pricing" data-section="pricing">
       <PricingCardThree
       animationType="slide-up"
       textboxLayout="default"
       useInvertedBackground={false}
       plans={[
-        {
-          id: "basic",          price: "₹1,200",          name: "Manicure & Pedicure",          buttons: [
-            {
-              text: "Book Now",              href: "#"},
-          ],
-          features: [
-            "Classic cleanup",            "Nail shaping",            "Hydration treatment"],
-        },
-        {
-          id: "standard",          price: "₹2,500",          name: "Gel Extension Set",          buttons: [
-            {
-              text: "Book Now",              href: "#"},
-          ],
-          features: [
-            "Full set gel",            "Detailed nail art",            "Lasting finish"],
-        },
-        {
-          id: "premium",          price: "₹4,000",          name: "Bridal Makeup Combo",          buttons: [
-            {
-              text: "Book Now",              href: "#"},
-          ],
-          features: [
-            "Full makeup",            "Hair styling",            "Nail art bonus"],
-        },
+        { id: "basic", price: "₹1,200", name: "Manicure & Pedicure", buttons: [{ text: "Book Now" }], features: ["Classic cleanup", "Nail shaping", "Hydration treatment"] },
+        { id: "standard", price: "₹2,500", name: "Gel Extension Set", buttons: [{ text: "Book Now" }], features: ["Full set gel", "Detailed nail art", "Lasting finish"] },
+        { id: "premium", price: "₹4,000", name: "Bridal Makeup Combo", buttons: [{ text: "Book Now" }], features: ["Full makeup", "Hair styling", "Nail art bonus"] },
       ]}
       title="Beauty Packages"
       description="Affordable luxury tailored to your beauty goals."
     />
   </div>
 
-  <div id="metrics" data-section="metrics">
-      <MetricCardFourteen
-      useInvertedBackground={false}
-      title="Our Studio Impact"
-      tag="Why Choose Us"
-      metrics={[
-        {
-          id: "m1",          value: "244+",          description: "Happy Clients"},
-        {
-          id: "m2",          value: "4.9",          description: "Average Rating"},
-        {
-          id: "m3",          value: "100%",          description: "Professional Service"},
-      ]}
-      metricsAnimation="slide-up"
-    />
-  </div>
-
   <div id="faq" data-section="faq">
-      <FaqSplitText
-      useInvertedBackground={false}
+      <FaqDouble
+      title="Frequently Asked Questions"
+      description="Find answers to common questions about our services and booking process."
       faqs={[
-        {
-          id: "f1",          title: "Do I need an appointment?",          content: "Yes, we highly recommend booking in advance to ensure availability."},
-        {
-          id: "f2",          title: "Do you offer home services?",          content: "Select services can be provided at home. Please contact us to confirm."},
-        {
-          id: "f3",          title: "Are you LGBTQ+ friendly?",          content: "Yes, we are proudly inclusive and welcome everyone."},
+        { id: "f1", title: "Do I need an appointment?", content: "Yes, we highly recommend booking in advance to ensure availability." },
+        { id: "f2", title: "Do you offer home services?", content: "Select services can be provided at home. Please contact us to confirm." },
+        { id: "f3", title: "Are you LGBTQ+ friendly?", content: "Yes, we are proudly inclusive and welcome everyone." },
+        { id: "f4", title: "How do I reschedule?", content: "Simply call our studio at least 24 hours in advance to reschedule your appointment." }
       ]}
-      sideTitle="Frequently Asked Questions"
       faqsAnimation="slide-up"
+      textboxLayout="split"
+      useInvertedBackground={true}
     />
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactText
-      useInvertedBackground={false}
-      background={{
-        variant: "plain"}}
-      text="Visit us at Shop no 9, Rameshwar Tower A, Shimpoli Rd, Borivali West, Mumbai. Call us at 087488 74801."
-      buttons={[
-        {
-          text: "Call Now",          href: "tel:08748874801"},
+      <ContactSplitForm
+      title="Book Your Appointment"
+      description="We look forward to pampering you. Please fill out the form below to book a slot."
+      inputs={[
+        { name: "name", type: "text", placeholder: "Full Name" },
+        { name: "email", type: "email", placeholder: "Email Address" }
       ]}
+      textarea={{ name: "message", placeholder: "Tell us about your requirements" }}
+      imageSrc="http://img.b2bpic.net/free-photo/nail-hygiene-care-drying-polish_23-2148766572.jpg?_wi=2"
+      useInvertedBackground={false}
     />
   </div>
 
   <div id="footer" data-section="footer">
       <FooterBase
       columns={[
-        {
-          title: "Links",          items: [
-            {
-              label: "Services",              href: "#services"},
-            {
-              label: "About",              href: "#about"},
-          ],
-        },
-        {
-          title: "Contact",          items: [
-            {
-              label: "Call: 087488 74801",              href: "tel:08748874801"},
-          ],
-        },
+        { title: "Links", items: [{ label: "Services", href: "#services" }, { label: "About", href: "#about" }] },
+        { title: "Contact", items: [{ label: "Call: 087488 74801", href: "tel:08748874801" }] },
       ]}
       logoText="Saavi Nails"
     />

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f6f0e9;
-  --card: #efe7dd;
-  --foreground: #2b180a;
-  --primary-cta: #2b180a;
-  --primary-cta-text: #f6f0e9;
-  --secondary-cta: #efe7dd;
-  --secondary-cta-text: #2b180a;
-  --accent: #94877c;
-  --background-accent: #afa094;
+  --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;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);