Merge version_4 into main

Merge version_4 into main

src/app/booking/page.tsx

@@ -25,49 +25,27 @@ export default function LandingPage() {
       <NavbarStyleApple
       navItems={[
         {
-          name: "Home",
+          name: "Home",          id: "/"},
-          id: "/",
-        },
         {
-          name: "About",
+          name: "About",          id: "/about"},
-          id: "/about",
-        },
         {
-          name: "Services",
+          name: "Services",          id: "/services"},
-          id: "/services",
-        },
         {
-          name: "Kids",
+          name: "Kids",          id: "/kids"},
-          id: "/kids",
-        },
         {
-          name: "Groom",
+          name: "Groom",          id: "/groom"},
-          id: "/groom",
-        },
         {
-          name: "Portfolio",
+          name: "Portfolio",          id: "/portfolio"},
-          id: "/portfolio",
-        },
         {
-          name: "Team",
+          name: "Team",          id: "/team"},
-          id: "/team",
-        },
         {
-          name: "Testimonials",
+          name: "Testimonials",          id: "/testimonials"},
-          id: "/testimonials",
-        },
         {
-          name: "Offers",
+          name: "Offers",          id: "/offers"},
-          id: "/offers",
-        },
         {
-          name: "Booking",
+          name: "Booking",          id: "/booking"},
-          id: "/booking",
-        },
         {
-          name: "Contact",
+          name: "Contact",          id: "/contact"},
-          id: "/contact",
-        },
       ]}
       brandName="KOKO Salon"
     />
@@ -80,52 +58,29 @@ export default function LandingPage() {
       description="Experience the KOKO Salon difference. Select your desired service, choose your preferred barber, date, and time to secure your bespoke grooming session. We anticipate your visit and look forward to pampering you."
       inputs={[
         {
-          name: "name",
+          name: "name",          type: "text",          placeholder: "Your Full Name",          required: true,
-          type: "text",
-          placeholder: "Your Full Name",
-          required: true,
         },
         {
-          name: "email",
+          name: "email",          type: "email",          placeholder: "Your Email Address",          required: true,
-          type: "email",
-          placeholder: "Your Email Address",
-          required: true,
         },
         {
-          name: "phone",
+          name: "phone",          type: "tel",          placeholder: "Your Phone Number",          required: false,
-          type: "tel",
-          placeholder: "Your Phone Number",
-          required: false,
         },
         {
-          name: "service",
+          name: "barber",          type: "text",          placeholder: "Preferred Barber (Optional)",          required: false,
-          type: "text",
-          placeholder: "Desired Service (e.g., Skin Fade, Royal Shave)",
-          required: true,
         },
         {
-          name: "barber",
+          name: "date",          type: "date",          placeholder: "Preferred Date",          required: true,
-          type: "text",
-          placeholder: "Preferred Barber (Optional)",
-          required: false,
         },
         {
-          name: "date",
+          name: "time",          type: "time",          placeholder: "Preferred Time",          required: true,
-          type: "date",
-          placeholder: "Preferred Date",
-          required: true,
-        },
-        {
-          name: "time",
-          type: "time",
-          placeholder: "Preferred Time",
-          required: true,
         },
       ]}
+      multiSelect={{
+        name: "serviceInterest",        label: "Service Interest",        options: ['Haircut', 'Shave', 'Kids Haircut', 'Groom Package']
+      }}
       textarea={{
-        name: "notes",
+        name: "notes",        placeholder: "Special Requests or Notes for Your Barber",        rows: 4,
-        placeholder: "Special Requests or Notes for Your Barber",
-        rows: 4,
         required: false,
       }}
       imageSrc="http://img.b2bpic.net/free-photo/young-business-woman-using-tablet_1303-22693.jpg"
@@ -139,87 +94,51 @@ export default function LandingPage() {
       <FooterSimple
       columns={[
         {
-          title: "Services",
+          title: "Services",          items: [
-          items: [
             {
-              label: "Classic Haircut",
+              label: "Classic Haircut",              href: "/services#classic"},
-              href: "/services#classic",
-            },
             {
-              label: "Skin Fade",
+              label: "Skin Fade",              href: "/services#fade"},
-              href: "/services#fade",
-            },
             {
-              label: "Royal Shave",
+              label: "Royal Shave",              href: "/services#shave"},
-              href: "/services#shave",
-            },
             {
-              label: "Hair Treatments",
+              label: "Hair Treatments",              href: "/services#treatment"},
-              href: "/services#treatment",
-            },
           ],
         },
         {
-          title: "About",
+          title: "About",          items: [
-          items: [
             {
-              label: "Our Story",
+              label: "Our Story",              href: "/about"},
-              href: "/about",
-            },
             {
-              label: "Our Team",
+              label: "Our Team",              href: "/team"},
-              href: "/team",
-            },
             {
-              label: "Careers",
+              label: "Careers",              href: "#"},
-              href: "#",
-            },
             {
-              label: "Sitemap",
+              label: "Sitemap",              href: "#"},
-              href: "#",
-            },
           ],
         },
         {
-          title: "Packages",
+          title: "Packages",          items: [
-          items: [
             {
-              label: "Groom Packages",
+              label: "Groom Packages",              href: "/groom"},
-              href: "/groom",
-            },
             {
-              label: "Kids Experience",
+              label: "Kids Experience",              href: "/kids"},
-              href: "/kids",
-            },
             {
-              label: "Special Offers",
+              label: "Special Offers",              href: "/offers"},
-              href: "/offers",
-            },
             {
-              label: "VIP Membership",
+              label: "VIP Membership",              href: "/offers#vip"},
-              href: "/offers#vip",
-            },
           ],
         },
         {
-          title: "Connect",
+          title: "Connect",          items: [
-          items: [
             {
-              label: "Book Appointment",
+              label: "Book Appointment",              href: "/booking"},
-              href: "/booking",
-            },
             {
-              label: "Contact Us",
+              label: "Contact Us",              href: "/contact"},
-              href: "/contact",
-            },
             {
-              label: "WhatsApp",
+              label: "WhatsApp",              href: "https://wa.me/01000000000"},
-              href: "https://wa.me/01000000000",
-            },
             {
-              label: "Instagram",
+              label: "Instagram",              href: "https://instagram.com/kokosalon"},
-              href: "https://instagram.com/kokosalon",
-            },
           ],
         },
       ]}

src/app/page.tsx

@@ -61,7 +61,7 @@ export default function LandingPage() {
   <div id="hero" data-section="hero">
       <HeroCarouselLogo
       logoText="KOKO"
-      description="Luxury Men's Grooming Experience\\\nأفضل تجربة حلاقة رجالية وأطفال في السويس"
+      description="Luxury Men's Grooming Experience\\nأفضل تجربة حلاقة رجالية وأطفال في السويس"
       buttons={[
         {
           text: "Book Appointment",          href: "/booking"},
@@ -70,17 +70,17 @@ export default function LandingPage() {
       ]}
       slides={[
         {
-          videoSrc: "http://img.b2bpic.net/free-photo/side-view-barber-styling-beard-man_23-2147778888.jpg",          imageAlt: "Cinematic barber cutting hair",          videoAriaLabel: "Luxury haircutting sequence",          imageSrc: "http://img.b2bpic.net/free-photo/side-view-barber-styling-beard-man_23-2147778888.jpg"},
+          videoSrc: "https://assets.mixkit.co/videos/preview/mixkit-man-gets-a-haircut-20836-large.mp4",          imageAlt: "Cinematic barber cutting hair",          videoAriaLabel: "Luxury haircutting sequence, man getting a precision haircut",          imageSrc: "http://img.b2bpic.net/free-photo/side-view-barber-styling-beard-man_23-2147778888.jpg"},
         {
-          videoSrc: "http://img.b2bpic.net/free-photo/high-angle-sensitive-man-posing-studio_23-2149518242.jpg",          imageAlt: "Barber tools close-up",          videoAriaLabel: "Barber tools and grooming",          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-sensitive-man-posing-studio_23-2149518242.jpg"},
+          videoSrc: "https://assets.mixkit.co/videos/preview/mixkit-barber-trimming-a-mans-beard-32533-large.mp4",          imageAlt: "Barber tools close-up",          videoAriaLabel: "Close-up of barber trimming a man's beard",          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-sensitive-man-posing-studio_23-2149518242.jpg"},
         {
-          videoSrc: "http://img.b2bpic.net/free-photo/interior-design-neoclassical-style-with-furnishings-decor_23-2151199304.jpg",          imageAlt: "Luxury men's salon interior",          videoAriaLabel: "Luxury salon ambiance",          imageSrc: "http://img.b2bpic.net/free-photo/interior-design-neoclassical-style-with-furnishings-decor_23-2151199304.jpg"},
+          videoSrc: "https://assets.mixkit.co/videos/preview/mixkit-interior-of-a-hairdressing-salon-32549-large.mp4",          imageAlt: "Luxury men's salon interior",          videoAriaLabel: "Tour of luxurious salon interior with modern design",          imageSrc: "http://img.b2bpic.net/free-photo/interior-design-neoclassical-style-with-furnishings-decor_23-2151199304.jpg"},
         {
-          videoSrc: "http://img.b2bpic.net/free-photo/portrait-man-getting-haircut_23-2148224419.jpg",          imageAlt: "Kids haircut stylish slow motion",          videoAriaLabel: "Kids haircut experience",          imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-getting-haircut_23-2148224419.jpg"},
+          videoSrc: "https://assets.mixkit.co/videos/preview/mixkit-a-boy-is-getting-a-haircut-at-a-barbershop-44933-large.mp4",          imageAlt: "Kids haircut stylish slow motion",          videoAriaLabel: "Happy child getting a stylish haircut at the barbershop",          imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-getting-haircut_23-2148224419.jpg"},
         {
-          videoSrc: "http://img.b2bpic.net/free-photo/unrecognizable-barber-cutting-hair-man_23-2147737060.jpg",          imageAlt: "Slow-motion beard grooming",          videoAriaLabel: "Slow motion beard grooming",          imageSrc: "http://img.b2bpic.net/free-photo/unrecognizable-barber-cutting-hair-man_23-2147737060.jpg"},
+          videoSrc: "https://assets.mixkit.co/videos/preview/mixkit-barber-shaving-a-mans-beard-32532-large.mp4",          imageAlt: "Slow-motion beard grooming",          videoAriaLabel: "Barber performing a traditional hot towel shave",          imageSrc: "http://img.b2bpic.net/free-photo/unrecognizable-barber-cutting-hair-man_23-2147737060.jpg"},
         {
-          videoSrc: "http://img.b2bpic.net/free-photo/close-up-hands-shaving-man_23-2147778911.jpg",          imageAlt: "High-end grooming close-up",          videoAriaLabel: "High-end grooming process",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-hands-shaving-man_23-2147778911.jpg"},
+          videoSrc: "https://assets.mixkit.co/videos/preview/mixkit-woman-applying-a-moisturizer-on-a-mans-face-32537-large.mp4",          imageAlt: "High-end grooming close-up",          videoAriaLabel: "Close-up of luxury facial care and grooming process",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-hands-shaving-man_23-2147778911.jpg"},
       ]}
     />
   </div>
@@ -141,7 +141,7 @@ export default function LandingPage() {
       useInvertedBackground={false}
       products={[
         {
-          id: "kids-1",          name: "Trendy Styles",          price: "Starting from $30",          imageSrc: "http://img.b2bpic.net/free-photo/child-getting-haircut-salon_23-2150462518.jpg",          imageAlt: "Trendy kid hairstyle"},
+          id: "kids-1",          name: "Trendy Styles",          price: "Starting from 30 EGP",          imageSrc: "http://img.b2bpic.net/free-photo/child-getting-haircut-salon_23-2150462518.jpg",          imageAlt: "Trendy kid hairstyle"},
         {
           id: "kids-2",          name: "Comfortable Environment",          price: "Always included",          imageSrc: "http://img.b2bpic.net/free-photo/girl-helping-her-father-shave_23-2147624074.jpg",          imageAlt: "Comfortable kids barbershop"},
         {
@@ -163,15 +163,24 @@ export default function LandingPage() {
       plans={[
         {
           id: "wedding-package",          badge: "Elite",          badgeIcon: Crown,
-          price: "$500",          subtitle: "Your Perfect Wedding Day Prep",          buttons: [
+          price: "500 EGP",          subtitle: "Your Perfect Wedding Day Prep",          buttons: [
             {
-              text: "Book Your Royal Groom",              href: "/groom"},
+              text: "Book Your Royal Groom",          href: "/groom"},
           ],
           features: [
             "Precision Haircut & Style",            "Premium Skin Fade",            "Expert Beard Styling",            "Luxury Facial Care",            "Exclusive Hair Treatment",            "VIP Service & Private Suite"],
         },
+        {
+          id: "premium-package",          badge: "Premium",          badgeIcon: Award,
+          price: "250 EGP",          subtitle: "Elevate Your Everyday Look",          buttons: [
+            {
+              text: "Choose Premium Plan",          href: "/groom"},
+          ],
+          features: [
+            "Precision Haircut",            "Classic Shave or Beard Trim",            "Hair Styling",            "Invigorating Face Mask"],
+        }
       ]}
-      title="The Royal Groom Package"
+      title="Achieve Your Perfect Wedding Day Look"
       description="Indulge in the ultimate luxury with our exclusive Wedding Groom Package. Every detail is perfected to ensure you look your absolute best for your special day."
       buttons={[
         {
@@ -198,7 +207,7 @@ export default function LandingPage() {
         {
           id: "5",          name: "Sara Ali",          handle: "@SaraMomLife",          testimonial: "As a parent, I appreciate the comfort and skill for kids' haircuts. My little one always leaves with a smile and a trendy cut. Thank you, KOKO!",          imageSrc: "http://img.b2bpic.net/free-photo/professional-barber-working-with-client-hairdressing-salon-styling-beard-with-trimmer_613910-5073.jpg",          imageAlt: "Sara Ali"},
       ]}
-      title="What Our Valued Clients Say"
+      title="Hear Their KOKO Salon Transformations" 
       description="Hear from gentlemen and parents who have experienced the KOKO Salon difference. Exceptional service and impeccable style, consistently delivered."
       buttons={[
         {

src/app/reviews/page.tsx

@@ -88,7 +88,7 @@ export default function LandingPage() {
         {
           id: "faq-4",          title: "What is included in the Royal Groom Package?",          content: "The Royal Groom Package is our exclusive wedding preparation service, including a precision haircut, skin fade, beard styling, luxury facial care, hair treatment, and VIP service in a private suite."},
       ]}
-      imageSrc="http://img.b2bpic.net/free-photo/barber-shop-tools-arrangement_23-2149167462.jpg"
+      imageSrc="http://img.b2bpic.net/free-photo/barber-shop-tools-arrangement_23-2149167462.jpg?_wi=1"
       imageAlt="Luxury barbershop interior"
       mediaAnimation="opacity"
       title="Common Questions About KOKO Salon"

src/app/testimonials/page.tsx

@@ -152,7 +152,7 @@ export default function LandingPage() {
           content: "The Royal Groom Package is our exclusive wedding preparation service, including a precision haircut, skin fade, beard styling, luxury facial care, hair treatment, and VIP service in a private suite.",
         },
       ]}
-      imageSrc="http://img.b2bpic.net/free-photo/barber-shop-tools-arrangement_23-2149167462.jpg"
+      imageSrc="http://img.b2bpic.net/free-photo/barber-shop-tools-arrangement_23-2149167462.jpg?_wi=2"
       imageAlt="Luxury barbershop interior"
       mediaAnimation="opacity"
       title="Common Questions About KOKO Salon"

src/i18n.ts

@@ -0,0 +1,6 @@
+export const i18n = {
+  defaultLocale: 'en',
+  locales: ['en', 'ar'],
+} as const;
+
+export type Locale = (typeof i18n)['locales'][number];