Merge version_2 into main

Merge version_2 into main

src/app/page.tsx

@@ -10,9 +10,9 @@ import HeroCentered from '@/components/sections/hero/HeroCentered';
 import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
 import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
-import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
+import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
 import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
-import { Building2, CheckCircle, Palette, Scissors, Sparkles, User } from "lucide-react";
+import { Building2, CheckCircle, Palette, Scissors, Sparkles, User, Calendar, Tag as TagIcon } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -54,38 +54,22 @@ export default function LandingPage() {
       title="Professional Cuts for Every Style"
       description="Expert styling, precision haircuts, and the perfect look designed just for you. Visit your neighborhood Supercuts today."
       avatars={[
-        {
+        { src: "http://img.b2bpic.net/free-photo/young-black-people-taking-care-afro-hair_23-2149575478.jpg", alt: "Client 1"},
-          src: "http://img.b2bpic.net/free-photo/young-black-people-taking-care-afro-hair_23-2149575478.jpg",          alt: "Client 1"},
+        { src: "http://img.b2bpic.net/free-photo/front-view-smiley-woman-getting-haircut_23-2148817196.jpg", alt: "Client 2"},
-        {
+        { src: "http://img.b2bpic.net/free-photo/beautiful-woman-pink-sweater-smiling-vintage-lights_114579-81359.jpg", alt: "Client 3"},
-          src: "http://img.b2bpic.net/free-photo/front-view-smiley-woman-getting-haircut_23-2148817196.jpg",          alt: "Client 2"},
+        { src: "http://img.b2bpic.net/free-photo/female-wedding-planner-working-with-client_23-2150167196.jpg", alt: "Client 4"},
-        {
+        { src: "http://img.b2bpic.net/free-photo/young-beautiful-girl-laughing-sitting-floor-white-wall_176420-8539.jpg", alt: "Client 5"},
-          src: "http://img.b2bpic.net/free-photo/beautiful-woman-pink-sweater-smiling-vintage-lights_114579-81359.jpg",          alt: "Client 3"},
-        {
-          src: "http://img.b2bpic.net/free-photo/female-wedding-planner-working-with-client_23-2150167196.jpg",          alt: "Client 4"},
-        {
-          src: "http://img.b2bpic.net/free-photo/young-beautiful-girl-laughing-sitting-floor-white-wall_176420-8539.jpg",          alt: "Client 5"},
       ]}
       avatarText="Trusted by 1M+ customers"
       buttons={[
-        {
+        { text: "Book Appointment", href: "#contact" },
-          text: "Book Appointment",          href: "#contact"},
       ]}
       marqueeItems={[
-        {
+        { type: "text-icon", text: "Precision Styling", icon: Scissors },
-          type: "text-icon",          text: "Precision Styling",          icon: Scissors,
+        { type: "text-icon", text: "Expert Technicians", icon: User },
-        },
+        { type: "text-icon", text: "Affordable Quality", icon: Sparkles },
-        {
+        { type: "text-icon", text: "Modern Atmosphere", icon: Building2 },
-          type: "text-icon",          text: "Expert Technicians",          icon: User,
+        { type: "text-icon", text: "Consistent Results", icon: CheckCircle },
-        },
-        {
-          type: "text-icon",          text: "Affordable Quality",          icon: Sparkles,
-        },
-        {
-          type: "text-icon",          text: "Modern Atmosphere",          icon: Building2,
-        },
-        {
-          type: "text-icon",          text: "Consistent Results",          icon: CheckCircle,
-        },
       ]}
     />
   </div>
@@ -94,14 +78,11 @@ export default function LandingPage() {
       <InlineImageSplitTextAbout
       useInvertedBackground={true}
       heading={[
-        {
+        { type: "text", content: "The Supercuts Difference"},
-          type: "text",          content: "The Supercuts Difference"},
+        { type: "image", src: "http://img.b2bpic.net/free-photo/various-hairdressing-equipment-white-background_23-2147711631.jpg", alt: "Salon expertise"},
-        {
-          type: "image",          src: "http://img.b2bpic.net/free-photo/various-hairdressing-equipment-white-background_23-2147711631.jpg",          alt: "Salon expertise"},
       ]}
       buttons={[
-        {
+        { text: "Learn More" },
-          text: "Learn More"},
       ]}
     />
   </div>
@@ -112,15 +93,9 @@ export default function LandingPage() {
       textboxLayout="split"
       useInvertedBackground={false}
       features={[
-        {
+        { title: "Precision Cuts", description: "Classic and trendy cuts for everyone.", bentoComponent: "reveal-icon", icon: Scissors },
-          title: "Precision Cuts",          description: "Classic and trendy cuts for everyone.",          bentoComponent: "reveal-icon",          icon: Scissors
+        { title: "Color Services", description: "Vibrant and natural color treatments.", bentoComponent: "reveal-icon", icon: Palette },
-        },
+        { title: "Style Refresh", description: "Look your best with our professional styling.", bentoComponent: "reveal-icon", icon: Sparkles },
-        {
-          title: "Color Services",          description: "Vibrant and natural color treatments.",          bentoComponent: "reveal-icon",          icon: Palette
-        },
-        {
-          title: "Style Refresh",          description: "Look your best with our professional styling.",          bentoComponent: "reveal-icon",          icon: Sparkles
-        },
       ]}
       title="Services You'll Love"
       description="We offer a range of professional styling services tailored to your needs."
@@ -128,38 +103,30 @@ export default function LandingPage() {
   </div>
 
   <div id="pricing" data-section="pricing">
-      <PricingCardEight
+      <PricingCardFive
       animationType="slide-up"
-      textboxLayout="default"
+      textboxLayout="split"
       useInvertedBackground={true}
+      tag="Service Booking"
+      tagIcon={Calendar}
+      title="Choose Your Style"
+      description="Select the service that fits your needs and book your session directly."
       plans={[
         {
-          id: "1",          badge: "Popular",          price: "$25",          subtitle: "Basic Cut & Style",          buttons: [
+          id: "basic",          tag: "Essentials",          price: "$25",          period: "per session",          description: "Precision cut, shampoo, and style.",          button: { text: "Book Now", href: "#contact" },
-            {
+          featuresTitle: "Included",          features: ["Consultation", "Precision Cut", "Shampoo & Blow-dry"],
-              text: "Book"},
-          ],
-          features: [
-            "Precision cut",            "Shampoo",            "Quick style"],
         },
         {
-          id: "2",          badge: "Value",          price: "$45",          subtitle: "Cut & Color",          buttons: [
+          id: "color",          tag: "Color & Style",          tagIcon: TagIcon,
-            {
+          price: "$45",          period: "per session",          description: "Full color treatment with professional finish.",          button: { text: "Book Now", href: "#contact" },
-              text: "Book"},
+          featuresTitle: "Included",          features: ["Root Color", "Precision Trim", "Deep Conditioning"],
-          ],
-          features: [
-            "Precision cut",            "Root color",            "Full style"],
         },
         {
-          id: "3",          badge: "Elite",          price: "$60",          subtitle: "Total Transformation",          buttons: [
+          id: "premium",          tag: "Elite Experience",          tagIcon: Sparkles,
-            {
+          price: "$60",          period: "per session",          description: "Total transformation for complete satisfaction.",          button: { text: "Book Now", href: "#contact" },
-              text: "Book"},
+          featuresTitle: "Included",          features: ["Full Highlight", "Restorative Treatment", "Professional Styling"],
-          ],
-          features: [
-            "Precision cut",            "Full highlight",            "Deep conditioning"],
         },
       ]}
-      title="Simple Pricing"
-      description="Transparent and affordable pricing for our professional services."
     />
   </div>
 
@@ -169,12 +136,9 @@ export default function LandingPage() {
       textboxLayout="split"
       useInvertedBackground={false}
       metrics={[
-        {
+        { id: "m1", value: "1M+", title: "Happy Clients", description: "Served this year", imageSrc: "http://img.b2bpic.net/free-photo/abstract-dynamic-textured-wave-background_1048-10491.jpg"},
-          id: "m1",          value: "1M+",          title: "Happy Clients",          description: "Served this year",          imageSrc: "http://img.b2bpic.net/free-photo/abstract-dynamic-textured-wave-background_1048-10491.jpg"},
+        { id: "m2", value: "5k+", title: "Stylists", description: "Across the nation", imageSrc: "http://img.b2bpic.net/free-photo/filling-beer-glass_23-2148111236.jpg"},
-        {
+        { id: "m3", value: "98%", title: "Satisfaction", description: "Highly rated service", imageSrc: "http://img.b2bpic.net/free-photo/top-view-arrangement-with-smiley-emoji-card_23-2148860322.jpg"},
-          id: "m2",          value: "5k+",          title: "Stylists",          description: "Across the nation",          imageSrc: "http://img.b2bpic.net/free-photo/filling-beer-glass_23-2148111236.jpg"},
-        {
-          id: "m3",          value: "98%",          title: "Satisfaction",          description: "Highly rated service",          imageSrc: "http://img.b2bpic.net/free-photo/top-view-arrangement-with-smiley-emoji-card_23-2148860322.jpg"},
       ]}
       title="By The Numbers"
       description="Serving millions with professional excellence."
@@ -188,21 +152,9 @@ export default function LandingPage() {
       gridVariant="three-columns-all-equal-width"
       useInvertedBackground={true}
       testimonials={[
-        {
+        { id: "1", name: "Jane D.", role: "Client", company: "Local", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/family-car-salon-woman-buying-thecar-seat-little-african-girl-with-mther_1157-45043.jpg"},
-          id: "1",          name: "Jane D.",          role: "Client",          company: "Local",          rating: 5,
+        { id: "2", name: "Mark S.", role: "Client", company: "Local", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/closeup-satisfied-bearded-guy-white-shirt-showing-thumbs-up-approval-like-agree-positiv_1258-113975.jpg"},
-          imageSrc: "http://img.b2bpic.net/free-photo/family-car-salon-woman-buying-thecar-seat-little-african-girl-with-mther_1157-45043.jpg"},
+        { id: "3", name: "Alice M.", role: "Client", company: "Local", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/woman-having-fun-morning-indoor-shot-spectacular-blonde-woman-red-silk-sleepwear_197531-20967.jpg"},
-        {
-          id: "2",          name: "Mark S.",          role: "Client",          company: "Local",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/closeup-satisfied-bearded-guy-white-shirt-showing-thumbs-up-approval-like-agree-positiv_1258-113975.jpg"},
-        {
-          id: "3",          name: "Alice M.",          role: "Client",          company: "Local",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/woman-having-fun-morning-indoor-shot-spectacular-blonde-woman-red-silk-sleepwear_197531-20967.jpg"},
-        {
-          id: "4",          name: "Sam K.",          role: "Client",          company: "Local",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/women-posing-together-medium-shot_23-2149883718.jpg"},
-        {
-          id: "5",          name: "Laura B.",          role: "Client",          company: "Local",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-girl-laughing-sitting-floor-white-wall_176420-8539.jpg"},
       ]}
       title="Hear From Clients"
       description="Real experiences from real people."
@@ -214,12 +166,9 @@ export default function LandingPage() {
       textboxLayout="split"
       useInvertedBackground={false}
       faqs={[
-        {
+        { id: "f1", title: "Do I need an appointment?", content: "While walk-ins are welcome, we recommend booking online for shorter wait times."},
-          id: "f1",          title: "Do I need an appointment?",          content: "While walk-ins are welcome, we recommend booking online for shorter wait times."},
+        { id: "f2", title: "What services do you offer?", content: "We offer haircuts, styling, color services, and deep conditioning treatments."},
-        {
+        { id: "f3", title: "Is my consultation free?", content: "Yes, all stylists provide a free style consultation before every cut."},
-          id: "f2",          title: "What services do you offer?",          content: "We offer haircuts, styling, color services, and deep conditioning treatments."},
-        {
-          id: "f3",          title: "Is my consultation free?",          content: "Yes, all stylists provide a free style consultation before every cut."},
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/woman-posing-hairdressing-salon_23-2147737029.jpg"
       mediaAnimation="slide-up"
@@ -235,13 +184,11 @@ export default function LandingPage() {
       title="Get In Touch"
       description="Ready for your next cut? Book now or send us a message."
       inputs={[
-        {
+        { name: "name", type: "text", placeholder: "Your Name"},
-          name: "name",          type: "text",          placeholder: "Your Name"},
+        { name: "email", type: "email", placeholder: "Your Email"},
-        {
-          name: "email",          type: "email",          placeholder: "Your Email"},
       ]}
-      textarea={{
+      multiSelect={{ name: "service", label: "Select Service", options: ["Precision Cut", "Color & Style", "Total Transformation"] }}
-        name: "message",        placeholder: "Your message here..."}}
+      textarea={{ name: "message", placeholder: "Your message here..."}}
       imageSrc="http://img.b2bpic.net/free-photo/elderly-couple-talk-about-vacation-plans_482257-81671.jpg"
     />
   </div>
@@ -249,22 +196,8 @@ export default function LandingPage() {
   <div id="footer" data-section="footer">
       <FooterBase
       columns={[
-        {
+        { title: "Company", items: [{ label: "About Us", href: "#about" }, { label: "Careers", href: "#" }] },
-          title: "Company",          items: [
+        { title: "Support", items: [{ label: "FAQ", href: "#faq" }, { label: "Contact", href: "#contact" }] },
-            {
-              label: "About Us",              href: "#about"},
-            {
-              label: "Careers",              href: "#"},
-          ],
-        },
-        {
-          title: "Support",          items: [
-            {
-              label: "FAQ",              href: "#faq"},
-            {
-              label: "Contact",              href: "#contact"},
-          ],
-        },
       ]}
       logoText="Supercuts"
     />
@@ -272,4 +205,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}