Merge version_5 into main

Merge version_5 into main

src/app/page.tsx

@@ -2,17 +2,17 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactCTA from '@/components/sections/contact/ContactCTA';
-import FaqBase from '@/components/sections/faq/FaqBase';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+import FaqSplitText from '@/components/sections/faq/FaqSplitText';
 import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
-import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
 import HeroSplitDoubleCarousel from '@/components/sections/hero/HeroSplitDoubleCarousel';
 import MediaAbout from '@/components/sections/about/MediaAbout';
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
 import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
 import ProductCardThree from '@/components/sections/product/ProductCardThree';
-import TeamCardFive from '@/components/sections/team/TeamCardFive';
-import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
+import TeamCardTwo from '@/components/sections/team/TeamCardTwo';
+import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
 
 export default function LandingPage() {
   return (
@@ -33,25 +33,15 @@ export default function LandingPage() {
       <NavbarStyleCentered
       navItems={[
         {
-          name: "Home",
-          id: "hero",
-        },
+          name: "Home",          id: "hero"},
         {
-          name: "Services",
-          id: "features",
-        },
+          name: "Services",          id: "features"},
         {
-          name: "Pricing",
-          id: "pricing",
-        },
+          name: "Pricing",          id: "pricing"},
         {
-          name: "Team",
-          id: "team",
-        },
+          name: "Team",          id: "team"},
         {
-          name: "Contact",
-          id: "contact",
-        },
+          name: "Contact",          id: "contact"},
       ]}
       brandName="Fashion Zone"
     />
@@ -59,105 +49,22 @@ export default function LandingPage() {
 
   <div id="hero" data-section="hero">
       <HeroSplitDoubleCarousel
-      background={{
-        variant: "gradient-bars",
-      }}
       title="Book Your Perfect Look Today"
       description="Fashion Zone Family Saloon brings premium grooming services to your fingertips. Realtime booking, trusted reviews, and expert stylists—all in one app."
+      background={{ variant: "gradient-bars" }}
       leftCarouselItems={[
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/customer-standing-front-mirror-barbershop_23-2148181953.jpg",
-          imageAlt: "Luxury salon interior",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/spa-equipments-with-soap-cotton-flower_23-2147844979.jpg",
-          imageAlt: "Skincare treatment",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/top-view-hairstyle-tools-arrangement_23-2149552392.jpg",
-          imageAlt: "Modern interior",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-couch-with-man-holding-her-head_23-2148857584.jpg",
-          imageAlt: "Beauty therapy",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/smiling-african-american-woman-talking-smartphone-armchair-office_23-2148042626.jpg",
-          imageAlt: "Professional salon",
-        },
+        { imageSrc: "http://img.b2bpic.net/free-photo/customer-standing-front-mirror-barbershop_23-2148181953.jpg", imageAlt: "Luxury salon interior" },
+        { imageSrc: "http://img.b2bpic.net/free-photo/spa-equipments-with-soap-cotton-flower_23-2147844979.jpg", imageAlt: "Skincare treatment" },
+        { imageSrc: "http://img.b2bpic.net/free-photo/top-view-hairstyle-tools-arrangement_23-2149552392.jpg", imageAlt: "Modern interior" },
+        { imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-couch-with-man-holding-her-head_23-2148857584.jpg", imageAlt: "Beauty therapy" },
+        { imageSrc: "http://img.b2bpic.net/free-photo/smiling-african-american-woman-talking-smartphone-armchair-office_23-2148042626.jpg", imageAlt: "Professional salon" },
       ]}
       rightCarouselItems={[
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-getting-cosmetic-treatment-spa_23-2148825294.jpg",
-          imageAlt: "Treatment scene",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/smartphone-skincare-supplies_23-2147710697.jpg",
-          imageAlt: "Styling tools",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-getting-skincare-procedure_23-2148825332.jpg",
-          imageAlt: "Aesthetic studio",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/woman-posing-hairdressing-salon_23-2147737029.jpg",
-          imageAlt: "Salon workplace",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/spa-composition-with-candles-towel-top-view_169016-20529.jpg",
-          imageAlt: "Skincare focus",
-        },
-      ]}
-      buttons={[
-        {
-          text: "Book Appointment Now",
-          href: "#contact",
-        },
-      ]}
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/top-view-stylist-tools-laptop_23-2148352916.jpg",
-          alt: "Client 1",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/hair-dryer-brushes-top-view_23-2148352864.jpg",
-          alt: "Client 2",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/professional-hairdressing-supplies-flat-lay_23-2148352954.jpg",
-          alt: "Client 3",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/flat-lay-hairstyle-tools-arrangement_23-2149552391.jpg",
-          alt: "Client 4",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/beautiful-woman-taking-care-her-face-extreme-close-up_23-2148287362.jpg",
-          alt: "Client 5",
-        },
-      ]}
-      avatarText="Over 5,000+ satisfied clients"
-      marqueeItems={[
-        {
-          type: "text",
-          text: "Hair Styling",
-        },
-        {
-          type: "text",
-          text: "Skincare Therapy",
-        },
-        {
-          type: "text",
-          text: "Professional Manicure",
-        },
-        {
-          type: "text",
-          text: "Bridal Makeup",
-        },
-        {
-          type: "text",
-          text: "Premium Products",
-        },
+        { imageSrc: "http://img.b2bpic.net/free-photo/young-woman-getting-cosmetic-treatment-spa_23-2148825294.jpg", imageAlt: "Treatment scene" },
+        { imageSrc: "http://img.b2bpic.net/free-photo/smartphone-skincare-supplies_23-2147710697.jpg", imageAlt: "Styling tools" },
+        { imageSrc: "http://img.b2bpic.net/free-photo/young-woman-getting-skincare-procedure_23-2148825332.jpg", imageAlt: "Aesthetic studio" },
+        { imageSrc: "http://img.b2bpic.net/free-photo/woman-posing-hairdressing-salon_23-2147737029.jpg", imageAlt: "Salon workplace" },
+        { imageSrc: "http://img.b2bpic.net/free-photo/spa-composition-with-candles-towel-top-view_169016-20529.jpg", imageAlt: "Skincare focus" },
       ]}
     />
   </div>
@@ -178,36 +85,9 @@ export default function LandingPage() {
       textboxLayout="split"
       useInvertedBackground={false}
       features={[
-        {
-          id: "s1",
-          label: "Hair",
-          title: "Precision Styling",
-          items: [
-            "Advanced Haircuts",
-            "Expert Coloring",
-            "Keratin Smoothing",
-          ],
-        },
-        {
-          id: "s2",
-          label: "Skin",
-          title: "Radiant Facials",
-          items: [
-            "Anti-aging Therapy",
-            "Deep Cleaning",
-            "Hydration Mask",
-          ],
-        },
-        {
-          id: "s3",
-          label: "Nails",
-          title: "Expert Manicures",
-          items: [
-            "Gel Polish",
-            "Nail Extension",
-            "Spa Pedicure",
-          ],
-        },
+        { id: "s1", label: "Hair", title: "Precision Styling", items: ["Advanced Haircuts", "Expert Coloring", "Keratin Smoothing"] },
+        { id: "s2", label: "Skin", title: "Radiant Facials", items: ["Anti-aging Therapy", "Deep Cleaning", "Hydration Mask"] },
+        { id: "s3", label: "Nails", title: "Expert Manicures", items: ["Gel Polish", "Nail Extension", "Spa Pedicure"] },
       ]}
       title="Our Expert Services"
       description="Comprehensive grooming and beauty treatments tailored to you."
@@ -221,42 +101,12 @@ export default function LandingPage() {
       gridVariant="three-columns-all-equal-width"
       useInvertedBackground={false}
       products={[
-        {
-          id: "p1",
-          name: "Professional Shampoo",
-          price: "$25",
-          imageSrc: "http://img.b2bpic.net/free-photo/arrangement-zero-waste-products_23-2148491199.jpg",
-        },
-        {
-          id: "p2",
-          name: "Luxury Night Cream",
-          price: "$45",
-          imageSrc: "http://img.b2bpic.net/free-photo/levitating-cosmetic-cream-display_23-2149817639.jpg",
-        },
-        {
-          id: "p3",
-          name: "Hair Repair Mask",
-          price: "$30",
-          imageSrc: "http://img.b2bpic.net/free-photo/hair-treatment-coronavirus-epidemic_637285-9013.jpg",
-        },
-        {
-          id: "p4",
-          name: "Styling Pomade",
-          price: "$20",
-          imageSrc: "http://img.b2bpic.net/free-photo/still-life-with-razor-blade_23-2151102213.jpg",
-        },
-        {
-          id: "p5",
-          name: "Hydrating Lotion",
-          price: "$35",
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-floating-water_23-2150963077.jpg",
-        },
-        {
-          id: "p6",
-          name: "Aromatherapy Oil",
-          price: "$50",
-          imageSrc: "http://img.b2bpic.net/free-photo/hemp-oil-that-is-paired-with-hemp-brown-wooden-floor_1150-18450.jpg",
-        },
+        { id: "p1", name: "Professional Shampoo", price: "$25", imageSrc: "http://img.b2bpic.net/free-photo/arrangement-zero-waste-products_23-2148491199.jpg" },
+        { id: "p2", name: "Luxury Night Cream", price: "$45", imageSrc: "http://img.b2bpic.net/free-photo/levitating-cosmetic-cream-display_23-2149817639.jpg" },
+        { id: "p3", name: "Hair Repair Mask", price: "$30", imageSrc: "http://img.b2bpic.net/free-photo/hair-treatment-coronavirus-epidemic_637285-9013.jpg" },
+        { id: "p4", name: "Styling Pomade", price: "$20", imageSrc: "http://img.b2bpic.net/free-photo/still-life-with-razor-blade_23-2151102213.jpg" },
+        { id: "p5", name: "Hydrating Lotion", price: "$35", imageSrc: "http://img.b2bpic.net/free-photo/close-up-floating-water_23-2150963077.jpg" },
+        { id: "p6", name: "Aromatherapy Oil", price: "$50", imageSrc: "http://img.b2bpic.net/free-photo/hemp-oil-that-is-paired-with-hemp-brown-wooden-floor_1150-18450.jpg" },
       ]}
       title="Premium Salon Products"
       description="Take the salon experience home with our professional range."
@@ -269,57 +119,9 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={false}
       plans={[
-        {
-          id: "plan1",
-          badge: "Essential",
-          price: "$30",
-          subtitle: "Basic maintenance care",
-          features: [
-            "Haircut",
-            "Wash",
-            "Style",
-          ],
-          buttons: [
-            {
-              text: "Book",
-              href: "#contact",
-            },
-          ],
-        },
-        {
-          id: "plan2",
-          badge: "Premium",
-          price: "$75",
-          subtitle: "Full salon treatment",
-          features: [
-            "Premium Cut",
-            "Facial",
-            "Manicure",
-          ],
-          buttons: [
-            {
-              text: "Book",
-              href: "#contact",
-            },
-          ],
-        },
-        {
-          id: "plan3",
-          badge: "Luxury",
-          price: "$120",
-          subtitle: "Ultimate relaxation suite",
-          features: [
-            "Complete Restyle",
-            "Treatment",
-            "Massage",
-          ],
-          buttons: [
-            {
-              text: "Book",
-              href: "#contact",
-            },
-          ],
-        },
+        { id: "plan1", badge: "Essential Refresh", price: "$30", subtitle: "Basic maintenance care", features: ["Haircut", "Wash", "Style"], buttons: [{ text: "Book", href: "#contact" }] },
+        { id: "plan2", badge: "Premium Glow", price: "$75", subtitle: "Full salon treatment", features: ["Premium Cut", "Facial", "Manicure"], buttons: [{ text: "Book", href: "#contact" }] },
+        { id: "plan3", badge: "Luxury Elite", price: "$120", subtitle: "Ultimate relaxation suite", features: ["Complete Restyle", "Treatment", "Massage"], buttons: [{ text: "Book", href: "#contact" }] },
       ]}
       title="Service Packages"
       description="Affordable luxury for every member of the family."
@@ -327,29 +129,15 @@ export default function LandingPage() {
   </div>
 
   <div id="team" data-section="team">
-      <TeamCardFive
+      <TeamCardTwo
       animationType="slide-up"
       textboxLayout="default"
+      gridVariant="three-columns-all-equal-width"
       useInvertedBackground={false}
-      team={[
-        {
-          id: "t1",
-          name: "Aria Singh",
-          role: "Senior Stylist",
-          imageSrc: "http://img.b2bpic.net/free-photo/pleased-young-beautiful-female-barber-uniform-showing-timeout-gesture-isolated-green-wall_141793-106149.jpg",
-        },
-        {
-          id: "t2",
-          name: "Rajiv Bose",
-          role: "Makeup Artist",
-          imageSrc: "http://img.b2bpic.net/free-photo/crop-makeup-artist-with-palette-working-with-model_23-2147783935.jpg",
-        },
-        {
-          id: "t3",
-          name: "Priya Sen",
-          role: "Esthetician",
-          imageSrc: "http://img.b2bpic.net/free-photo/smiling-girl-white-doctor-uniform_141793-261.jpg",
-        },
+      members={[
+        { id: "t1", name: "Aria Singh", role: "Senior Stylist", description: "Expert in modern styling.", imageSrc: "http://img.b2bpic.net/free-photo/pleased-young-beautiful-female-barber-uniform-showing-timeout-gesture-isolated-green-wall_141793-106149.jpg" },
+        { id: "t2", name: "Rajiv Bose", role: "Makeup Artist", description: "Master of bridal looks.", imageSrc: "http://img.b2bpic.net/free-photo/crop-makeup-artist-with-palette-working-with-model_23-2147783935.jpg" },
+        { id: "t3", name: "Priya Sen", role: "Esthetician", description: "Skincare specialist.", imageSrc: "http://img.b2bpic.net/free-photo/smiling-girl-white-doctor-uniform_141793-261.jpg" },
       ]}
       title="Meet Your Stylists"
       description="Our dedicated experts are here to deliver your perfect look."
@@ -357,52 +145,14 @@ export default function LandingPage() {
   </div>
 
   <div id="testimonials" data-section="testimonials">
-      <TestimonialCardOne
+      <TestimonialCardTwo
       animationType="slide-up"
       textboxLayout="default"
-      gridVariant="asymmetric-60-wide-40-narrow"
       useInvertedBackground={false}
       testimonials={[
-        {
-          id: "1",
-          name: "Sonia Roy",
-          role: "Professional",
-          company: "Ranaghat",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-studio-portrait_1303-2284.jpg",
-        },
-        {
-          id: "2",
-          name: "Ananya Ghosh",
-          role: "Doctor",
-          company: "Ranaghat",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-woman-applying-cream_23-2148389885.jpg",
-        },
-        {
-          id: "3",
-          name: "Maya Das",
-          role: "Teacher",
-          company: "Ranaghat",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-blonde-model-bride_627829-12097.jpg",
-        },
-        {
-          id: "4",
-          name: "Kiran Deb",
-          role: "Manager",
-          company: "Ranaghat",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-getting-ready-client_23-2149319757.jpg",
-        },
-        {
-          id: "5",
-          name: "Rohit Shaw",
-          role: "Designer",
-          company: "Ranaghat",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/charming-woman-with-shiny-ginger-hair-posing-with-her-pet-good-humoured-girl-pink-jacket-holding-little-dog_197531-11032.jpg",
-        },
+        { id: "1", name: "Sonia Roy", role: "Professional", testimonial: "Amazing service!", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-studio-portrait_1303-2284.jpg" },
+        { id: "2", name: "Ananya Ghosh", role: "Doctor", testimonial: "Loved my facial.", imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-woman-applying-cream_23-2148389885.jpg" },
+        { id: "3", name: "Maya Das", role: "Teacher", testimonial: "Best haircut ever.", imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-blonde-model-bride_627829-12097.jpg" },
       ]}
       title="What Our Clients Say"
       description="Building trust through beautiful results every day."
@@ -410,85 +160,40 @@ export default function LandingPage() {
   </div>
 
   <div id="faq" data-section="faq">
-      <FaqBase
-      textboxLayout="default"
+      <FaqSplitText
       useInvertedBackground={false}
       faqs={[
-        {
-          id: "q1",
-          title: "What are your hours?",
-          content: "We are open Monday–Sunday, 10:00 AM–8:30 PM.",
-        },
-        {
-          id: "q2",
-          title: "How do I book?",
-          content: "You can book easily through our website using the appointment portal.",
-        },
-        {
-          id: "q3",
-          title: "Can I request a stylist?",
-          content: "Yes, you can select your preferred stylist during the booking process.",
-        },
+        { id: "q1", title: "What are your hours?", content: "We are open Monday–Sunday, 10:00 AM–8:30 PM." },
+        { id: "q2", title: "How do I book?", content: "You can book your session through our Online Booking Portal." },
+        { id: "q3", title: "Can I request a stylist?", content: "Yes, you can select your preferred stylist during the booking process." },
       ]}
-      title="Frequently Asked"
-      description="Have questions? We have answers."
+      sideTitle="Frequently Asked"
+      sideDescription="Have questions? We have answers."
       faqsAnimation="slide-up"
     />
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactCTA
+      <ContactSplitForm
       useInvertedBackground={false}
-      background={{
-        variant: "sparkles-gradient",
-      }}
-      tag="Booking"
       title="Ready for a transformation?"
       description="Book your appointment in minutes via our simple online portal."
-      buttons={[
-        {
-          text: "Book Appointment Now",
-          href: "#",
-        },
+      inputs={[
+        { name: "name", type: "text", placeholder: "Full Name", required: true },
+        { name: "email", type: "email", placeholder: "Email", required: true }
       ]}
+      buttonText="Book Appointment"
     />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterBaseReveal
+      <FooterLogoReveal
       logoText="Fashion Zone"
-      columns={[
-        {
-          title: "Services",
-          items: [
-            {
-              label: "Haircuts",
-              href: "#",
-            },
-            {
-              label: "Facials",
-              href: "#",
-            },
-          ],
-        },
-        {
-          title: "Company",
-          items: [
-            {
-              label: "About Us",
-              href: "#",
-            },
-            {
-              label: "Contact",
-              href: "#",
-            },
-          ],
-        },
-      ]}
-      copyrightText="© 2024 Fashion Zone Family Saloon. All rights reserved."
+      leftLink={{ text: "© 2024 Fashion Zone Family Saloon. All rights reserved.", href: "#" }}
+      rightLink={{ text: "Privacy Policy", href: "#" }}
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f5f4ef;
-  --card: #dad6cd;
-  --foreground: #2a2928;
-  --primary-cta: #2a2928;
-  --primary-cta-text: #f5f4ef;
-  --secondary-cta: #ecebea;
-  --secondary-cta-text: #2a2928;
-  --accent: #ffffff;
-  --background-accent: #c6b180;
+  --background: #ffffff;
+  --card: #f9f9f9;
+  --foreground: #000612e6;
+  --primary-cta: #106EFB;
+  --primary-cta-text: #ffffff;
+  --secondary-cta: #f9f9f9;
+  --secondary-cta-text: #000612e6;
+  --accent: #e2e2e2;
+  --background-accent: #106EFB;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);