@harshit-wander/component-lib 1.1.14 → 1.1.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import { forwardRef, useId, useState, useRef, useEffect, useCallback } from 'react';
1
+ import { forwardRef, useId, useState, useRef, useEffect, useCallback, useMemo, Fragment as Fragment$1 } from 'react';
2
2
  import { clsx } from 'clsx';
3
3
  import { twMerge } from 'tailwind-merge';
4
4
  import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -604,6 +604,127 @@ var GalleryPhoto = forwardRef(
604
604
  )
605
605
  );
606
606
  GalleryPhoto.displayName = "GalleryPhoto";
607
+ var useInViewOnce = (ref, { disabled = false, rootMargin = "200px" } = {}) => {
608
+ const [inView, setInView] = useState(disabled);
609
+ useEffect(() => {
610
+ if (disabled || inView) return;
611
+ const el = ref.current;
612
+ if (!el || typeof IntersectionObserver === "undefined") {
613
+ setInView(true);
614
+ return;
615
+ }
616
+ const observer = new IntersectionObserver(
617
+ (entries) => {
618
+ for (const entry of entries) {
619
+ if (entry.isIntersecting) {
620
+ setInView(true);
621
+ observer.disconnect();
622
+ break;
623
+ }
624
+ }
625
+ },
626
+ { rootMargin }
627
+ );
628
+ observer.observe(el);
629
+ return () => observer.disconnect();
630
+ }, [ref, disabled, inView, rootMargin]);
631
+ return inView;
632
+ };
633
+ var DEFAULT_HEIGHTS = [200, 260, 264];
634
+ var DEFAULT_WIDTHS = [148, 220, 176];
635
+ var DEFAULT_EAGER_COUNT = 6;
636
+ var Slide = ({
637
+ item,
638
+ index,
639
+ size,
640
+ eagerCount
641
+ }) => {
642
+ const ref = useRef(null);
643
+ const lazy = index >= eagerCount;
644
+ const visible = useInViewOnce(ref, { disabled: !lazy });
645
+ return /* @__PURE__ */ jsx(
646
+ "div",
647
+ {
648
+ ref,
649
+ className: "shrink-0 relative rounded-sm overflow-hidden bg-track",
650
+ style: { width: size.width, height: size.height },
651
+ children: visible ? /* @__PURE__ */ jsx(
652
+ "img",
653
+ {
654
+ src: item.src,
655
+ alt: item.alt ?? "",
656
+ loading: "eager",
657
+ decoding: "async",
658
+ className: "w-full h-full object-cover object-center block pointer-events-none select-none"
659
+ }
660
+ ) : null
661
+ }
662
+ );
663
+ };
664
+ var ImageMarquee = ({
665
+ images,
666
+ durationSec = 45,
667
+ gap = 16,
668
+ fixedWidth,
669
+ alternatingHeights,
670
+ eagerImageCount = DEFAULT_EAGER_COUNT,
671
+ className
672
+ }) => {
673
+ const sizes = useMemo(() => {
674
+ const useFixed = typeof fixedWidth === "number" && fixedWidth > 0 && Array.isArray(alternatingHeights) && alternatingHeights.length > 0;
675
+ return images.map((_, i) => {
676
+ if (useFixed) {
677
+ const heights = alternatingHeights;
678
+ return { width: fixedWidth, height: heights[i % heights.length] };
679
+ }
680
+ const v = i % 3;
681
+ return { width: DEFAULT_WIDTHS[v], height: DEFAULT_HEIGHTS[v] };
682
+ });
683
+ }, [images, fixedWidth, alternatingHeights]);
684
+ if (!images.length) return null;
685
+ const renderStrip = (keyPrefix, hidden = false) => /* @__PURE__ */ jsx(
686
+ "div",
687
+ {
688
+ className: "flex flex-row items-center shrink-0",
689
+ style: { gap, paddingRight: gap },
690
+ "aria-hidden": hidden || void 0,
691
+ children: images.map((item, i) => {
692
+ const slideKey = `${keyPrefix}-${i}-${item.src}`;
693
+ return /* @__PURE__ */ jsx(
694
+ Slide,
695
+ {
696
+ item,
697
+ index: i,
698
+ size: sizes[i],
699
+ eagerCount: eagerImageCount
700
+ },
701
+ slideKey
702
+ );
703
+ })
704
+ }
705
+ );
706
+ return /* @__PURE__ */ jsx(
707
+ "div",
708
+ {
709
+ className: cn(
710
+ "w-full relative overflow-hidden max-md:overflow-x-auto max-md:[scrollbar-width:none]",
711
+ className
712
+ ),
713
+ children: /* @__PURE__ */ jsxs(
714
+ "div",
715
+ {
716
+ className: "flex flex-row items-center w-max will-change-transform animate-marquee",
717
+ style: { animationDuration: `${durationSec}s` },
718
+ children: [
719
+ renderStrip("a"),
720
+ renderStrip("b", true)
721
+ ]
722
+ }
723
+ )
724
+ }
725
+ );
726
+ };
727
+ ImageMarquee.displayName = "ImageMarquee";
607
728
  var LocationCard = forwardRef(
608
729
  ({ location, address, logo, className, ...rest }, ref) => /* @__PURE__ */ jsxs(
609
730
  "article",
@@ -631,6 +752,55 @@ var LocationCard = forwardRef(
631
752
  )
632
753
  );
633
754
  LocationCard.displayName = "LocationCard";
755
+ var ClockSvg = () => /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [
756
+ /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "1.5" }),
757
+ /* @__PURE__ */ jsx("path", { d: "M12 6.5V12l4 2", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
758
+ ] });
759
+ var cardClass3 = "group relative flex flex-col justify-end shrink-0 w-[275px] h-[416px] overflow-hidden bg-lux-ink-card border-[3.5px] border-lux-gold-light no-underline text-inherit focus-visible:outline-2 focus-visible:outline-lux-gold focus-visible:outline-offset-2";
760
+ var LuxuryTripCard = forwardRef(
761
+ ({ image, alt, title, duration, href, className, ...rest }, ref) => {
762
+ const content = /* @__PURE__ */ jsxs(Fragment, { children: [
763
+ /* @__PURE__ */ jsx(
764
+ "img",
765
+ {
766
+ src: image,
767
+ alt,
768
+ loading: "lazy",
769
+ decoding: "async",
770
+ className: "absolute inset-0 w-full h-full object-cover object-center pointer-events-none"
771
+ }
772
+ ),
773
+ /* @__PURE__ */ jsx(
774
+ "span",
775
+ {
776
+ "aria-hidden": "true",
777
+ className: "absolute inset-0 pointer-events-none bg-[linear-gradient(to_top,rgba(0,0,0,0.85)_0%,rgba(0,0,0,0.45)_45%,transparent_72%)]"
778
+ }
779
+ ),
780
+ /* @__PURE__ */ jsxs("div", { className: "relative z-10 flex flex-col gap-sm px-[14px] pt-md pb-[14px]", children: [
781
+ /* @__PURE__ */ jsx("h3", { className: "m-0 font-luxury text-md font-medium leading-[18.879px] text-lux-on-dark break-words", children: title }),
782
+ duration ? /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-xs text-[11px] font-medium text-lux-on-dark", children: [
783
+ /* @__PURE__ */ jsx("span", { className: "inline-flex items-center justify-center text-lux-gold", children: /* @__PURE__ */ jsx(ClockSvg, {}) }),
784
+ duration
785
+ ] }) : null
786
+ ] })
787
+ ] });
788
+ if (href) {
789
+ return /* @__PURE__ */ jsx(
790
+ "a",
791
+ {
792
+ ref,
793
+ href,
794
+ className: cn(cardClass3, className),
795
+ ...rest,
796
+ children: content
797
+ }
798
+ );
799
+ }
800
+ return /* @__PURE__ */ jsx("div", { ref, className: cn(cardClass3, className), ...rest, children: content });
801
+ }
802
+ );
803
+ LuxuryTripCard.displayName = "LuxuryTripCard";
634
804
  var tabBase = "shrink-0 inline-flex items-center h-[34px] py-[5px] px-[17px] rounded-full font-[inherit] text-xs font-normal leading-4 whitespace-nowrap cursor-pointer transition-colors duration-150 ease-in focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2";
635
805
  var tabActive = "bg-tab-active-bg border border-text-emphasis text-text-emphasis";
636
806
  var tabInactive = "bg-transparent border border-tab-inactive-border text-text-faded";
@@ -662,7 +832,7 @@ var MonthTabs = forwardRef(
662
832
  ] })
663
833
  );
664
834
  MonthTabs.displayName = "MonthTabs";
665
- var ClockSvg = () => /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 18 18", fill: "none", "aria-hidden": "true", children: [
835
+ var ClockSvg2 = () => /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 18 18", fill: "none", "aria-hidden": "true", children: [
666
836
  /* @__PURE__ */ jsx("circle", { cx: "9", cy: "9", r: "6.5", stroke: "currentColor", strokeWidth: "1.4" }),
667
837
  /* @__PURE__ */ jsx(
668
838
  "path",
@@ -697,7 +867,7 @@ var CalendarSvg = () => /* @__PURE__ */ jsxs("svg", { width: "16", height: "16",
697
867
  }
698
868
  )
699
869
  ] });
700
- var cardClass3 = "relative flex flex-col justify-between shrink-0 w-[264px] h-[392px] py-[12px] px-md rounded-md overflow-hidden no-underline text-inherit snap-start focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2 max-md:w-[320px]";
870
+ var cardClass4 = "relative flex flex-col justify-between shrink-0 w-[264px] h-[392px] py-[12px] px-md rounded-md overflow-hidden no-underline text-inherit snap-start focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2 max-md:w-[320px]";
701
871
  var infoItemClass = "flex items-center gap-xs min-w-0 text-xs font-medium leading-5 text-info-on-dark";
702
872
  var infoIconClass = "inline-flex items-center justify-center w-[18px] h-[18px] shrink-0";
703
873
  var PackageCard = forwardRef(
@@ -743,7 +913,7 @@ var PackageCard = forwardRef(
743
913
  /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-xs min-w-0", children: [
744
914
  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-xl min-w-0", children: [
745
915
  /* @__PURE__ */ jsxs("span", { className: cn(infoItemClass, "shrink-0"), children: [
746
- /* @__PURE__ */ jsx("span", { className: infoIconClass, children: /* @__PURE__ */ jsx(ClockSvg, {}) }),
916
+ /* @__PURE__ */ jsx("span", { className: infoIconClass, children: /* @__PURE__ */ jsx(ClockSvg2, {}) }),
747
917
  /* @__PURE__ */ jsx("span", { className: "truncate", children: duration })
748
918
  ] }),
749
919
  /* @__PURE__ */ jsxs("span", { className: cn(infoItemClass, "flex-1"), children: [
@@ -764,13 +934,13 @@ var PackageCard = forwardRef(
764
934
  {
765
935
  ref,
766
936
  href,
767
- className: cn(cardClass3, className),
937
+ className: cn(cardClass4, className),
768
938
  ...rest,
769
939
  children: content
770
940
  }
771
941
  );
772
942
  }
773
- return /* @__PURE__ */ jsx("div", { ref, className: cn(cardClass3, className), ...rest, children: content });
943
+ return /* @__PURE__ */ jsx("div", { ref, className: cn(cardClass4, className), ...rest, children: content });
774
944
  }
775
945
  );
776
946
  PackageCard.displayName = "PackageCard";
@@ -899,7 +1069,7 @@ var TestimonialCard = forwardRef(
899
1069
  }
900
1070
  );
901
1071
  TestimonialCard.displayName = "TestimonialCard";
902
- var cardClass4 = "relative flex flex-col justify-end shrink-0 w-[200px] h-[316px] p-[20px] border-2 border-surface rounded-lg overflow-hidden no-underline text-inherit snap-start focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2";
1072
+ var cardClass5 = "relative flex flex-col justify-end shrink-0 w-[200px] h-[316px] p-[20px] border-2 border-surface rounded-lg overflow-hidden no-underline text-inherit snap-start focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2";
903
1073
  var TripCategoryCard = forwardRef(
904
1074
  ({ image, mobileImage, alt, destination, startingPrice, href, className, ...rest }, ref) => {
905
1075
  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -934,13 +1104,13 @@ var TripCategoryCard = forwardRef(
934
1104
  {
935
1105
  ref,
936
1106
  href,
937
- className: cn(cardClass4, className),
1107
+ className: cn(cardClass5, className),
938
1108
  ...rest,
939
1109
  children: content
940
1110
  }
941
1111
  );
942
1112
  }
943
- return /* @__PURE__ */ jsx("div", { ref, className: cn(cardClass4, className), ...rest, children: content });
1113
+ return /* @__PURE__ */ jsx("div", { ref, className: cn(cardClass5, className), ...rest, children: content });
944
1114
  }
945
1115
  );
946
1116
  TripCategoryCard.displayName = "TripCategoryCard";
@@ -2408,6 +2578,579 @@ var HomeHero = forwardRef(
2408
2578
  }
2409
2579
  );
2410
2580
  HomeHero.displayName = "HomeHero";
2581
+ var navClass = "sticky top-0 z-30 flex w-full flex-col border-b border-lux-gold bg-white/60 backdrop-blur-[2px]";
2582
+ var scrollClass = "flex flex-1 flex-row flex-nowrap items-end justify-start gap-0 overflow-x-auto overflow-y-hidden px-md pt-3 [-webkit-overflow-scrolling:touch] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden md:justify-center md:px-lg";
2583
+ var dotClass = "block size-1 shrink-0 self-center rounded-full bg-lux-gold-strong opacity-85";
2584
+ var itemClass = "shrink-0 cursor-pointer whitespace-nowrap border-b-2 px-2.5 pt-3 pb-3.5 text-center text-sm font-medium uppercase leading-button tracking-[0.12em] focus-visible:outline-2 focus-visible:outline-lux-gold md:px-3.5 md:pt-2.5 md:pb-3 md:text-xs";
2585
+ var activeItemClass = "border-lux-gold-strong text-lux-gold-strong";
2586
+ var inactiveItemClass = "border-transparent text-lux-text";
2587
+ var LuxuryCategoryNav = ({
2588
+ items,
2589
+ defaultActiveId,
2590
+ onActiveChange,
2591
+ className,
2592
+ ...rest
2593
+ }) => {
2594
+ const [activeId, setActiveId] = useState(defaultActiveId);
2595
+ const select = useCallback(
2596
+ (id) => {
2597
+ setActiveId(id);
2598
+ onActiveChange?.(id);
2599
+ },
2600
+ [onActiveChange]
2601
+ );
2602
+ if (!items.length) {
2603
+ return null;
2604
+ }
2605
+ return /* @__PURE__ */ jsx("nav", { "aria-label": "Luxury experience categories", className: cn(navClass, className), ...rest, children: /* @__PURE__ */ jsx("div", { role: "tablist", className: scrollClass, children: items.map((item, index) => {
2606
+ const isActive = activeId === item.id;
2607
+ return /* @__PURE__ */ jsxs(Fragment$1, { children: [
2608
+ index > 0 ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: dotClass }) : null,
2609
+ /* @__PURE__ */ jsx(
2610
+ "button",
2611
+ {
2612
+ type: "button",
2613
+ role: "tab",
2614
+ "aria-selected": isActive,
2615
+ onClick: () => select(item.id),
2616
+ className: cn(itemClass, isActive ? activeItemClass : inactiveItemClass),
2617
+ children: item.label
2618
+ }
2619
+ )
2620
+ ] }, item.id);
2621
+ }) }) });
2622
+ };
2623
+ LuxuryCategoryNav.displayName = "LuxuryCategoryNav";
2624
+ var sectionClass = "relative flex w-full flex-col overflow-hidden bg-lux-ink md:mx-auto md:max-w-[1162px] md:bg-background md:px-[30px] md:pt-[64px] md:pb-[26px]";
2625
+ var innerClass = "relative z-[3] md:mx-auto md:w-full md:max-w-[1200px]";
2626
+ var badgeClass = "mb-[14px] inline-block self-start rounded-full border border-lux-gold-strong px-md py-[6px] text-2xs font-semibold uppercase leading-button tracking-[0.16em] text-lux-gold-strong md:mx-auto md:mb-[20px] md:self-center md:text-xs md:tracking-[0.14em]";
2627
+ var titleClass = "m-0 mb-sm font-luxury text-xl font-medium leading-[1.2] tracking-[0.03em] text-lux-on-dark md:mx-auto md:mb-[28px] md:text-center md:text-[40px] md:font-regular md:tracking-[0.02em] md:text-lux-heading";
2628
+ var descriptionWrapClass = "flex flex-col gap-md md:mb-[60px]";
2629
+ var paragraphClass = "m-0 text-md font-regular leading-body text-lux-on-dark md:text-justify md:text-lux-text";
2630
+ var scrollerClass = "flex flex-row flex-nowrap items-stretch gap-md overflow-x-auto overflow-y-hidden overscroll-x-contain px-[16px] pt-[12px] pb-[80px] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden md:gap-[18px] md:px-0 md:pt-[4px] md:pb-md";
2631
+ var LuxuryDestinationSection = forwardRef(
2632
+ ({ badge, title, description, heroImage, heroVideo, trips, className, ...rest }, ref) => {
2633
+ const paragraphs = description ? description.split("\n").filter((p) => p.trim() !== "") : [];
2634
+ const showHeroFrame = Boolean(heroVideo?.src || heroImage?.src);
2635
+ const heroPoster = heroVideo?.poster ?? heroImage?.src;
2636
+ const wrapperRef = useRef(null);
2637
+ const mobileVideoRef = useRef(null);
2638
+ const desktopVideoRef = useRef(null);
2639
+ useEffect(() => {
2640
+ const src = heroVideo?.src;
2641
+ if (!src || typeof window === "undefined") return;
2642
+ const wrapper = wrapperRef.current;
2643
+ if (!wrapper) return;
2644
+ const assign = () => {
2645
+ const isDesktop = typeof window.matchMedia === "function" && window.matchMedia("(min-width: 768px)").matches;
2646
+ const target = isDesktop ? desktopVideoRef.current : mobileVideoRef.current;
2647
+ if (target && !target.src) target.src = src;
2648
+ };
2649
+ if (typeof IntersectionObserver === "undefined") {
2650
+ assign();
2651
+ return;
2652
+ }
2653
+ const io = new IntersectionObserver(
2654
+ (entries) => {
2655
+ if (entries[0]?.isIntersecting) {
2656
+ assign();
2657
+ io.disconnect();
2658
+ }
2659
+ },
2660
+ { rootMargin: "200px" }
2661
+ );
2662
+ io.observe(wrapper);
2663
+ return () => io.disconnect();
2664
+ }, [heroVideo?.src]);
2665
+ return /* @__PURE__ */ jsxs("section", { ref, className: cn(sectionClass, className), ...rest, children: [
2666
+ /* @__PURE__ */ jsxs(
2667
+ "div",
2668
+ {
2669
+ ref: wrapperRef,
2670
+ className: "absolute inset-x-0 top-0 bottom-[40vh] z-0 overflow-hidden md:hidden",
2671
+ "aria-hidden": "true",
2672
+ children: [
2673
+ heroVideo?.src ? /* @__PURE__ */ jsx(
2674
+ "video",
2675
+ {
2676
+ ref: mobileVideoRef,
2677
+ autoPlay: true,
2678
+ muted: true,
2679
+ loop: true,
2680
+ playsInline: true,
2681
+ poster: heroVideo.poster ?? heroImage?.src,
2682
+ preload: "none",
2683
+ className: "absolute inset-0 h-full w-full object-cover object-center"
2684
+ }
2685
+ ) : heroPoster ? /* @__PURE__ */ jsx(
2686
+ "img",
2687
+ {
2688
+ src: heroPoster,
2689
+ alt: "",
2690
+ loading: "lazy",
2691
+ decoding: "async",
2692
+ className: "absolute inset-0 h-full w-full object-cover object-center"
2693
+ }
2694
+ ) : null,
2695
+ /* @__PURE__ */ jsx("span", { className: "absolute inset-0 bg-[linear-gradient(to_bottom,rgba(0,0,0,0)_0%,rgba(0,0,0,0.2)_30%,rgba(0,0,0,0.4)_50%,rgba(0,0,0,0.7)_70%,rgba(0,0,0,1)_100%)]" })
2696
+ ]
2697
+ }
2698
+ ),
2699
+ /* @__PURE__ */ jsxs("div", { className: innerClass, children: [
2700
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start px-[20px] pt-[20px] md:items-stretch md:px-0 md:pt-0", children: [
2701
+ /* @__PURE__ */ jsx("span", { className: badgeClass, children: badge }),
2702
+ /* @__PURE__ */ jsx("h2", { className: titleClass, children: title }),
2703
+ showHeroFrame ? /* @__PURE__ */ jsx("div", { className: "relative mx-auto mb-[28px] hidden w-full max-w-[1162px] border border-lux-gold bg-background md:block", children: heroVideo?.src ? /* @__PURE__ */ jsx(
2704
+ "video",
2705
+ {
2706
+ ref: desktopVideoRef,
2707
+ autoPlay: true,
2708
+ muted: true,
2709
+ loop: true,
2710
+ playsInline: true,
2711
+ poster: heroVideo.poster ?? heroImage?.src,
2712
+ preload: "none",
2713
+ className: "block max-h-[626px] w-full object-cover object-center align-middle"
2714
+ }
2715
+ ) : heroImage?.src ? /* @__PURE__ */ jsx(
2716
+ "img",
2717
+ {
2718
+ src: heroImage.src,
2719
+ alt: heroImage.alt ?? "",
2720
+ loading: "lazy",
2721
+ decoding: "async",
2722
+ className: "block h-[625px] w-full object-cover object-center"
2723
+ }
2724
+ ) : null }) : null,
2725
+ paragraphs.length > 0 ? /* @__PURE__ */ jsx("div", { className: descriptionWrapClass, children: paragraphs.map((paragraph) => /* @__PURE__ */ jsx("p", { className: paragraphClass, children: paragraph }, paragraph)) }) : null
2726
+ ] }),
2727
+ trips.length > 0 ? /* @__PURE__ */ jsx("ul", { className: cn(scrollerClass, "m-0 list-none"), children: trips.map((trip, index) => /* @__PURE__ */ jsx("li", { className: "shrink-0", children: /* @__PURE__ */ jsx(LuxuryTripCard, { ...trip }) }, trip.href ?? `${trip.title}-${index}`)) }) : null
2728
+ ] })
2729
+ ] });
2730
+ }
2731
+ );
2732
+ LuxuryDestinationSection.displayName = "LuxuryDestinationSection";
2733
+ var rootClass = "relative flex flex-col w-full min-h-[calc(100dvh-60px)] overflow-hidden bg-lux-ink";
2734
+ var ctaClass = "appearance-none cursor-pointer uppercase tracking-[0.14em] rounded-full px-[28px] py-md text-sm font-semibold leading-[22.154px] text-center text-[#2C2C2C] bg-lux-gold-gradient shadow-[0_0_18.461px_1.846px_rgba(153,91,18,0.3)_inset] transition-[opacity,transform] duration-200 ease-out hover:opacity-[0.92] active:scale-[0.98] focus-visible:outline-2 focus-visible:outline-lux-gold focus-visible:outline-offset-2 md:bg-none md:bg-transparent md:shadow-none md:text-lux-gold md:border md:border-lux-gold md:text-[13px] md:py-[18px] md:px-[36px] md:hover:bg-[rgba(197,160,89,0.08)] md:hover:opacity-100";
2735
+ var LuxuryHero = forwardRef(
2736
+ ({
2737
+ videoSrc,
2738
+ videoPoster,
2739
+ videoType: _videoType = "video/mp4",
2740
+ title = "WanderOn Experiences",
2741
+ subline1,
2742
+ subline2,
2743
+ ctaLabel = "Connect with Concierge",
2744
+ onCtaClick,
2745
+ homeHref = "/",
2746
+ logoSrc,
2747
+ showLogo = true,
2748
+ className,
2749
+ ...rest
2750
+ }, ref) => {
2751
+ const videoRef = useRef(null);
2752
+ useEffect(() => {
2753
+ const video = videoRef.current;
2754
+ if (!video || !videoSrc) return;
2755
+ video.src = videoSrc;
2756
+ }, [videoSrc]);
2757
+ return /* @__PURE__ */ jsxs("section", { ref, className: cn(rootClass, className), ...rest, children: [
2758
+ /* @__PURE__ */ jsx(
2759
+ "div",
2760
+ {
2761
+ className: "absolute inset-0 z-0 overflow-hidden pointer-events-none",
2762
+ "aria-hidden": "true",
2763
+ children: /* @__PURE__ */ jsx(
2764
+ "video",
2765
+ {
2766
+ ref: videoRef,
2767
+ autoPlay: true,
2768
+ muted: true,
2769
+ loop: true,
2770
+ playsInline: true,
2771
+ poster: videoPoster,
2772
+ preload: "metadata",
2773
+ className: "absolute top-0 left-0 w-full h-full object-cover object-center"
2774
+ }
2775
+ )
2776
+ }
2777
+ ),
2778
+ /* @__PURE__ */ jsx(
2779
+ "div",
2780
+ {
2781
+ "aria-hidden": "true",
2782
+ className: "absolute inset-0 z-[1] bg-[linear-gradient(180deg,rgba(12,6,14,0.55)_0%,rgba(12,6,14,0.65)_45%,rgba(12,6,14,0.75)_100%)]"
2783
+ }
2784
+ ),
2785
+ showLogo ? /* @__PURE__ */ jsx("div", { className: "relative z-[2] flex shrink-0 items-start justify-start px-[20px] pt-lg md:px-[48px] md:pt-xl", children: /* @__PURE__ */ jsx(
2786
+ "a",
2787
+ {
2788
+ href: homeHref,
2789
+ "aria-label": "WanderOn home",
2790
+ className: "flex flex-col items-center no-underline cursor-pointer focus-visible:outline-2 focus-visible:outline-lux-gold focus-visible:outline-offset-2",
2791
+ children: /* @__PURE__ */ jsx("span", { className: "relative block w-[44px] h-[44px] md:w-[52px] md:h-[52px]", children: logoSrc ? /* @__PURE__ */ jsx(
2792
+ "img",
2793
+ {
2794
+ src: logoSrc,
2795
+ alt: "",
2796
+ loading: "lazy",
2797
+ decoding: "async",
2798
+ className: "w-full h-full object-contain"
2799
+ }
2800
+ ) : null })
2801
+ }
2802
+ ) }) : null,
2803
+ /* @__PURE__ */ jsxs("div", { className: "relative z-[2] flex flex-1 flex-col items-center justify-center text-center min-h-0 px-[20px] pt-lg pb-xl md:px-[48px] md:pt-[40px] md:pb-[48px]", children: [
2804
+ /* @__PURE__ */ jsx("h1", { className: "m-0 font-luxury text-2xl font-medium leading-[38px] tracking-[0.02em] text-center text-[#F1F5F9] [text-shadow:2px_4px_15px_rgba(0,0,0,0.4)]", children: title }),
2805
+ /* @__PURE__ */ jsx("div", { className: "lux-gold-rule w-[160px] mx-auto mt-[20px] md:w-[96px] md:mt-lg" }),
2806
+ subline1 ? /* @__PURE__ */ jsx("p", { className: "m-0 mt-md text-center text-sm font-regular leading-6 text-lux-on-dark md:mt-[20px]", children: subline1 }) : null,
2807
+ subline2 ? /* @__PURE__ */ jsx("p", { className: "m-0 mt-sm text-center text-sm font-regular leading-6 text-lux-on-dark", children: subline2 }) : null
2808
+ ] }),
2809
+ /* @__PURE__ */ jsx("div", { className: "relative z-[2] flex shrink-0 justify-center px-[20px] pb-[40px] md:px-[48px] md:pb-[48px]", children: /* @__PURE__ */ jsx("button", { type: "button", onClick: () => onCtaClick?.(), className: ctaClass, children: ctaLabel }) })
2810
+ ] });
2811
+ }
2812
+ );
2813
+ LuxuryHero.displayName = "LuxuryHero";
2814
+ var DEFAULT_DIAL = "+91";
2815
+ var DEFAULT_DIAL_CODES = [
2816
+ { code: "+91", label: "India (+91)" },
2817
+ { code: "+1", label: "USA (+1)" },
2818
+ { code: "+44", label: "UK (+44)" },
2819
+ { code: "+971", label: "UAE (+971)" }
2820
+ ];
2821
+ var sectionClass2 = "relative w-full min-w-0 bg-transparent";
2822
+ var cardClass6 = "mx-auto max-w-[1040px] rounded-sm bg-lux-on-dark px-[clamp(20px,4vw,56px)] py-[clamp(28px,5vw,52px)] text-lux-text shadow-[0_1px_0_rgba(0,0,0,0.04),0_12px_40px_rgba(0,0,0,0.12)]";
2823
+ var layoutClass = "flex min-w-0 flex-col gap-[28px] md:flex-row md:items-center md:justify-between md:gap-[clamp(32px,5vw,56px)]";
2824
+ var mainClass = "flex min-w-0 flex-1 flex-col items-stretch md:max-w-[680px]";
2825
+ var headingClass = "mb-[10px] mt-0 text-left font-luxury text-[clamp(24px,4.5vw,34px)] font-semibold leading-heading text-lux-ink";
2826
+ var subheadingClass = "mb-[28px] mt-0 text-left text-[clamp(14px,2.8vw,17px)] font-medium leading-body text-lux-heading md:mb-lg";
2827
+ var lineInputClass = "w-full rounded-none border-0 border-b border-b-[#999999] bg-lux-on-dark px-0 pb-[10px] pt-[12px] text-md font-regular text-lux-text outline-none transition-colors placeholder:text-[#A9A9A9] focus:border-b-lux-gold disabled:cursor-not-allowed disabled:opacity-60";
2828
+ var dialSelectClass = "block w-full min-w-[90px] max-w-[96px] cursor-pointer appearance-none rounded-none border-0 border-b border-b-[#999999] bg-lux-on-dark bg-[right_2px_center] bg-no-repeat py-[10px] pl-0 pr-[24px] text-[15px] font-medium text-lux-text outline-none transition-colors focus:border-b-lux-gold disabled:cursor-not-allowed disabled:opacity-60";
2829
+ var errorClass = "mt-[6px] block text-xs text-danger";
2830
+ var actionClass = "relative z-[1] inline-flex min-h-[52px] w-full items-center justify-center gap-[10px] whitespace-nowrap rounded-full border-0 bg-lux-gold-gradient px-[28px] py-md text-xs font-bold tracking-[0.06em] text-lux-text shadow-[0_2px_12px_rgba(184,134,11,0.25)] transition-[opacity,transform] hover:not-disabled:-translate-y-px focus-visible:outline-2 focus-visible:outline-lux-gold focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-75 md:w-auto md:min-w-[240px] md:px-xl";
2831
+ var spinnerClass = "h-[22px] w-[22px] animate-spin rounded-full border-2 border-lux-text/25 border-t-lux-text";
2832
+ var toastBaseClass = "fixed bottom-[18vh] left-1/2 z-20 -translate-x-1/2 rounded-md border border-lux-gold/50 bg-[linear-gradient(180deg,#F3E5AB_0%,#D4AF37_100%)] px-lg py-md text-[15px] font-medium leading-body text-lux-text shadow-[0_4px_20px_rgba(0,0,0,0.15)] transition-opacity duration-300 max-[600px]:bottom-lg max-[600px]:left-md max-[600px]:right-md max-[600px]:translate-x-0";
2833
+ var SelectChevron = () => /* @__PURE__ */ jsx(
2834
+ "svg",
2835
+ {
2836
+ className: "pointer-events-none absolute right-[2px] top-1/2 -translate-y-1/2",
2837
+ width: "12",
2838
+ height: "12",
2839
+ viewBox: "0 0 12 12",
2840
+ fill: "none",
2841
+ "aria-hidden": "true",
2842
+ children: /* @__PURE__ */ jsx("path", { d: "M6 8L1 3h10z", fill: "#666666" })
2843
+ }
2844
+ );
2845
+ var ConciergeIcon = () => /* @__PURE__ */ jsx("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
2846
+ "path",
2847
+ {
2848
+ d: "M12 12a4 4 0 100-8 4 4 0 000 8zM4 20a8 8 0 0116 0",
2849
+ stroke: "currentColor",
2850
+ strokeWidth: "1.5",
2851
+ strokeLinecap: "round"
2852
+ }
2853
+ ) });
2854
+ var LuxuryInquiryForm = ({
2855
+ onSubmit,
2856
+ title = "Bespoke Inquiries",
2857
+ subheading = "Your dedicated concierge awaits to craft your unforgettable journey!",
2858
+ namePlaceholder = "enter your name",
2859
+ phonePlaceholder = "enter your mobile Number",
2860
+ dialCodes = DEFAULT_DIAL_CODES,
2861
+ className,
2862
+ ...rest
2863
+ }) => {
2864
+ const [name, setName] = useState("");
2865
+ const [dialCode, setDialCode] = useState(dialCodes[0]?.code ?? DEFAULT_DIAL);
2866
+ const [phoneLocal, setPhoneLocal] = useState("");
2867
+ const [errors, setErrors] = useState({});
2868
+ const [submitting, setSubmitting] = useState(false);
2869
+ const [toastOn, setToastOn] = useState(false);
2870
+ const fullMobile = () => {
2871
+ const digits = phoneLocal.replace(/\D/g, "");
2872
+ const code = dialCode.replace(/\s/g, "") || DEFAULT_DIAL;
2873
+ return `${code}${digits}`;
2874
+ };
2875
+ const validate = () => {
2876
+ const next = {};
2877
+ if (!name.trim()) next.name = "Name is required";
2878
+ const digits = phoneLocal.replace(/\D/g, "");
2879
+ if (!digits) next.mobile = "Phone number is required";
2880
+ else if (digits.length < 6 || digits.length > 15) {
2881
+ next.mobile = "Enter a valid phone number";
2882
+ }
2883
+ setErrors(next);
2884
+ return Object.keys(next).length === 0;
2885
+ };
2886
+ const handleSubmit = async (e) => {
2887
+ e.preventDefault();
2888
+ if (!validate()) return;
2889
+ const mobile = fullMobile();
2890
+ setSubmitting(true);
2891
+ setErrors({});
2892
+ try {
2893
+ await Promise.resolve(onSubmit({ name: name.trim(), mobile }));
2894
+ setName("");
2895
+ setPhoneLocal("");
2896
+ setDialCode(dialCodes[0]?.code ?? DEFAULT_DIAL);
2897
+ setToastOn(true);
2898
+ setTimeout(() => setToastOn(false), 4e3);
2899
+ } catch (err) {
2900
+ const message = err instanceof Error ? err.message : "Something went wrong. Please try again.";
2901
+ setErrors((prev) => ({ ...prev, form: message }));
2902
+ } finally {
2903
+ setSubmitting(false);
2904
+ }
2905
+ };
2906
+ return /* @__PURE__ */ jsxs(
2907
+ "section",
2908
+ {
2909
+ className: cn(sectionClass2, className),
2910
+ "aria-labelledby": "luxury-inquiry-title",
2911
+ ...rest,
2912
+ children: [
2913
+ /* @__PURE__ */ jsx("div", { className: cardClass6, children: /* @__PURE__ */ jsx("form", { onSubmit: handleSubmit, noValidate: true, children: /* @__PURE__ */ jsxs("div", { className: layoutClass, children: [
2914
+ /* @__PURE__ */ jsxs("div", { className: mainClass, children: [
2915
+ /* @__PURE__ */ jsx(
2916
+ "div",
2917
+ {
2918
+ className: "mb-[20px] flex h-12 w-12 items-center justify-center rounded-full bg-lux-gold-light text-lux-gold-strong md:hidden",
2919
+ "aria-hidden": "true",
2920
+ children: /* @__PURE__ */ jsx(ConciergeIcon, {})
2921
+ }
2922
+ ),
2923
+ /* @__PURE__ */ jsx("h2", { id: "luxury-inquiry-title", className: headingClass, children: title }),
2924
+ /* @__PURE__ */ jsx("p", { className: subheadingClass, children: subheading }),
2925
+ /* @__PURE__ */ jsxs("div", { className: "flex w-full min-w-0 flex-col gap-[22px]", children: [
2926
+ /* @__PURE__ */ jsxs("div", { className: "w-full min-w-0", children: [
2927
+ /* @__PURE__ */ jsx("label", { className: "sr-only", htmlFor: "luxury-inquiry-name", children: "Name" }),
2928
+ /* @__PURE__ */ jsx(
2929
+ "input",
2930
+ {
2931
+ id: "luxury-inquiry-name",
2932
+ className: lineInputClass,
2933
+ type: "text",
2934
+ name: "name",
2935
+ placeholder: namePlaceholder,
2936
+ value: name,
2937
+ onChange: (e) => setName(e.target.value),
2938
+ disabled: submitting,
2939
+ autoComplete: "name",
2940
+ "aria-required": "true",
2941
+ "aria-invalid": !!errors.name
2942
+ }
2943
+ ),
2944
+ errors.name && /* @__PURE__ */ jsx("span", { className: errorClass, role: "alert", children: errors.name })
2945
+ ] }),
2946
+ /* @__PURE__ */ jsxs("div", { className: "w-full min-w-0", children: [
2947
+ /* @__PURE__ */ jsxs("div", { className: "flex w-full min-w-0 flex-row items-end gap-[12px]", children: [
2948
+ /* @__PURE__ */ jsxs("div", { className: "relative min-w-0 flex-none", children: [
2949
+ /* @__PURE__ */ jsx("label", { className: "sr-only", htmlFor: "luxury-inquiry-dial", children: "Country calling code" }),
2950
+ /* @__PURE__ */ jsx(
2951
+ "select",
2952
+ {
2953
+ id: "luxury-inquiry-dial",
2954
+ className: dialSelectClass,
2955
+ name: "dialCode",
2956
+ value: dialCode,
2957
+ onChange: (e) => setDialCode(e.target.value),
2958
+ disabled: submitting,
2959
+ "aria-label": "Country calling code",
2960
+ children: dialCodes.map((c) => /* @__PURE__ */ jsx("option", { value: c.code, children: c.label }, c.code))
2961
+ }
2962
+ ),
2963
+ /* @__PURE__ */ jsx(SelectChevron, {})
2964
+ ] }),
2965
+ /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
2966
+ /* @__PURE__ */ jsx("label", { className: "sr-only", htmlFor: "luxury-inquiry-mobile", children: "Mobile number" }),
2967
+ /* @__PURE__ */ jsx(
2968
+ "input",
2969
+ {
2970
+ id: "luxury-inquiry-mobile",
2971
+ className: lineInputClass,
2972
+ type: "tel",
2973
+ name: "mobile",
2974
+ placeholder: phonePlaceholder,
2975
+ value: phoneLocal,
2976
+ onChange: (e) => setPhoneLocal(e.target.value),
2977
+ disabled: submitting,
2978
+ autoComplete: "tel-national",
2979
+ inputMode: "numeric",
2980
+ "aria-required": "true",
2981
+ "aria-invalid": !!errors.mobile
2982
+ }
2983
+ )
2984
+ ] })
2985
+ ] }),
2986
+ errors.mobile && /* @__PURE__ */ jsx("span", { className: errorClass, role: "alert", children: errors.mobile })
2987
+ ] }),
2988
+ errors.form && /* @__PURE__ */ jsx("span", { className: errorClass, role: "alert", children: errors.form })
2989
+ ] })
2990
+ ] }),
2991
+ /* @__PURE__ */ jsx("div", { className: "flex flex-none items-center justify-center md:min-w-[220px] md:justify-end md:self-center", children: /* @__PURE__ */ jsx(
2992
+ "button",
2993
+ {
2994
+ className: actionClass,
2995
+ type: "submit",
2996
+ disabled: submitting,
2997
+ "aria-busy": submitting,
2998
+ children: submitting ? /* @__PURE__ */ jsxs(Fragment, { children: [
2999
+ /* @__PURE__ */ jsx("span", { className: spinnerClass, "aria-hidden": "true" }),
3000
+ /* @__PURE__ */ jsx("span", { children: "Connecting..." })
3001
+ ] }) : /* @__PURE__ */ jsx("span", { children: "CONNECT WITH CONCIERGE" })
3002
+ }
3003
+ ) })
3004
+ ] }) }) }),
3005
+ /* @__PURE__ */ jsx(
3006
+ "div",
3007
+ {
3008
+ className: cn(toastBaseClass, toastOn ? "opacity-100" : "pointer-events-none opacity-0"),
3009
+ role: "status",
3010
+ children: "Thank you! Your form has been submitted successfully. We'll be in touch soon."
3011
+ }
3012
+ )
3013
+ ]
3014
+ }
3015
+ );
3016
+ };
3017
+ LuxuryInquiryForm.displayName = "LuxuryInquiryForm";
3018
+ var sectionClass3 = "w-full bg-background px-[20px] pt-[56px] pb-[64px] md:px-[48px] md:pt-[72px] md:pb-[88px]";
3019
+ var containerClass2 = "mx-auto flex w-full max-w-[720px] flex-col items-center gap-[20px] text-center md:gap-lg";
3020
+ var badgeClass2 = "inline-block rounded-full border border-lux-gold-strong px-md py-[6px] text-xs font-medium uppercase leading-[32px] tracking-[0.14em] text-lux-gold-strong";
3021
+ var headingClass2 = "m-0 font-luxury text-xl font-medium capitalize leading-[50px] tracking-[0.02em] text-lux-heading md:text-[40px]";
3022
+ var bodyClass = "m-0 max-w-[62ch] text-md font-regular leading-body text-lux-text";
3023
+ var LuxuryIntro = forwardRef(
3024
+ ({ badge = "Experience", heading, body, className, ...rest }, ref) => /* @__PURE__ */ jsx("section", { ref, className: cn(sectionClass3, className), ...rest, children: /* @__PURE__ */ jsxs("div", { className: containerClass2, children: [
3025
+ badge ? /* @__PURE__ */ jsx("span", { className: badgeClass2, children: badge }) : null,
3026
+ /* @__PURE__ */ jsx("h2", { className: headingClass2, children: heading }),
3027
+ /* @__PURE__ */ jsx("p", { className: bodyClass, children: body })
3028
+ ] }) })
3029
+ );
3030
+ LuxuryIntro.displayName = "LuxuryIntro";
3031
+ var sectionClass4 = "w-full bg-background px-[20px] py-[40px] md:px-[48px] md:py-[56px]";
3032
+ var headingStackClass = "mx-auto mb-[40px] flex w-full flex-col items-center text-center";
3033
+ var badgeClass3 = "mb-[12px] inline-block rounded-full bg-lux-gold-strong px-md py-[6px] text-xs font-semibold uppercase leading-button tracking-[0.14em] text-lux-on-dark";
3034
+ var titleClass2 = "m-0 font-luxury text-xl font-medium leading-heading tracking-[0.02em] text-lux-heading md:text-[38px]";
3035
+ var rowWrapClass = "relative mx-auto w-full max-w-[1100px]";
3036
+ var rowClass2 = "flex snap-x snap-mandatory overflow-x-auto scroll-smooth [scrollbar-width:none] [&::-webkit-scrollbar]:hidden";
3037
+ var cardClass7 = "relative w-[90%] shrink-0 snap-center px-lg py-lg md:w-[50%] max-w-[800px] mx-auto";
3038
+ var photoGridClass = "relative mb-[30px] h-[180px]";
3039
+ var jumpingPhotoClass = "absolute left-0 top-0 h-[139px] w-[100px] -rotate-2 border-2 border-lux-gold object-cover";
3040
+ var groupPhotoClass = "absolute bottom-0 left-[70px] h-[97px] w-[180px] -rotate-2 border-2 border-lux-gold object-cover";
3041
+ var quoteBaseClass = "mb-[20px] overflow-hidden text-ellipsis text-left text-sm leading-body text-lux-text [display:-webkit-box] [-webkit-box-orient:vertical] md:text-md";
3042
+ var readMoreClass = "text-sm font-semibold text-lux-gold-strong underline-offset-2 hover:underline focus-visible:outline-2 focus-visible:outline-lux-gold focus-visible:outline-offset-2";
3043
+ var nameClass = "mt-[8px] mb-0 text-right text-sm font-medium text-lux-gold-strong";
3044
+ var accentTapeBaseClass = "absolute z-[1] h-[20px] w-[100px] bg-lux-gold-light/60";
3045
+ var arrowClass = "absolute top-1/2 z-10 hidden -translate-y-1/2 items-center justify-center rounded-full border border-lux-gold bg-background text-lux-gold-strong shadow-sm md:inline-flex h-[40px] w-[40px] focus-visible:outline-2 focus-visible:outline-lux-gold focus-visible:outline-offset-2";
3046
+ var ChevronLeft3 = () => /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
3047
+ "path",
3048
+ {
3049
+ d: "M15 6l-6 6 6 6",
3050
+ stroke: "currentColor",
3051
+ strokeWidth: "1.75",
3052
+ strokeLinecap: "round",
3053
+ strokeLinejoin: "round"
3054
+ }
3055
+ ) });
3056
+ var ChevronRight3 = () => /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
3057
+ "path",
3058
+ {
3059
+ d: "M9 6l6 6-6 6",
3060
+ stroke: "currentColor",
3061
+ strokeWidth: "1.75",
3062
+ strokeLinecap: "round",
3063
+ strokeLinejoin: "round"
3064
+ }
3065
+ ) });
3066
+ var LuxuryTestimonials = forwardRef(
3067
+ ({
3068
+ reviews,
3069
+ heading = "Unfiltered Reviews",
3070
+ badge = "Testimonials",
3071
+ lineClamp,
3072
+ className,
3073
+ ...rest
3074
+ }, ref) => {
3075
+ const rowRef = useRef(null);
3076
+ const scrollBy = (direction) => {
3077
+ const row = rowRef.current;
3078
+ if (!row) return;
3079
+ row.scrollBy({ left: direction * row.clientWidth * 0.8, behavior: "smooth" });
3080
+ };
3081
+ const clampStyle = lineClamp ? { WebkitLineClamp: lineClamp } : void 0;
3082
+ return /* @__PURE__ */ jsxs("section", { ref, className: cn(sectionClass4, className), ...rest, children: [
3083
+ /* @__PURE__ */ jsxs("div", { className: headingStackClass, children: [
3084
+ badge ? /* @__PURE__ */ jsx("span", { className: badgeClass3, children: badge }) : null,
3085
+ /* @__PURE__ */ jsx("h2", { className: titleClass2, children: heading })
3086
+ ] }),
3087
+ /* @__PURE__ */ jsxs("div", { className: rowWrapClass, children: [
3088
+ /* @__PURE__ */ jsx(
3089
+ "button",
3090
+ {
3091
+ type: "button",
3092
+ "aria-label": "Previous reviews",
3093
+ className: cn(arrowClass, "left-0"),
3094
+ onClick: () => scrollBy(-1),
3095
+ children: /* @__PURE__ */ jsx(ChevronLeft3, {})
3096
+ }
3097
+ ),
3098
+ /* @__PURE__ */ jsx("div", { ref: rowRef, className: rowClass2, children: reviews.map((review, index) => /* @__PURE__ */ jsxs("article", { className: cardClass7, children: [
3099
+ /* @__PURE__ */ jsx(
3100
+ "span",
3101
+ {
3102
+ "aria-hidden": "true",
3103
+ className: cn(
3104
+ accentTapeBaseClass,
3105
+ index % 2 === 0 ? "left-[200px] top-[100px] rotate-[30deg]" : "left-0 top-[20px] -rotate-[30deg]"
3106
+ )
3107
+ }
3108
+ ),
3109
+ /* @__PURE__ */ jsxs("div", { className: photoGridClass, children: [
3110
+ /* @__PURE__ */ jsx(
3111
+ "img",
3112
+ {
3113
+ src: review.image1,
3114
+ alt: `${review.name} travelling`,
3115
+ loading: "lazy",
3116
+ decoding: "async",
3117
+ className: jumpingPhotoClass
3118
+ }
3119
+ ),
3120
+ /* @__PURE__ */ jsx(
3121
+ "img",
3122
+ {
3123
+ src: review.image2,
3124
+ alt: `${review.name} with the group`,
3125
+ loading: "lazy",
3126
+ decoding: "async",
3127
+ className: groupPhotoClass
3128
+ }
3129
+ )
3130
+ ] }),
3131
+ /* @__PURE__ */ jsxs("p", { className: quoteBaseClass, style: clampStyle, children: [
3132
+ "\u201C",
3133
+ review.content,
3134
+ "\u201D"
3135
+ ] }),
3136
+ review.link ? /* @__PURE__ */ jsx("a", { href: review.link, className: readMoreClass, children: /* @__PURE__ */ jsx("strong", { children: "continue reading ..." }) }) : null,
3137
+ /* @__PURE__ */ jsx("p", { className: nameClass, children: review.name })
3138
+ ] }, `${review.name}-${review.content.slice(0, 16)}`)) }),
3139
+ /* @__PURE__ */ jsx(
3140
+ "button",
3141
+ {
3142
+ type: "button",
3143
+ "aria-label": "Next reviews",
3144
+ className: cn(arrowClass, "right-0"),
3145
+ onClick: () => scrollBy(1),
3146
+ children: /* @__PURE__ */ jsx(ChevronRight3, {})
3147
+ }
3148
+ )
3149
+ ] })
3150
+ ] });
3151
+ }
3152
+ );
3153
+ LuxuryTestimonials.displayName = "LuxuryTestimonials";
2411
3154
  var SearchSvg2 = () => /* @__PURE__ */ jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: [
2412
3155
  /* @__PURE__ */ jsx("circle", { cx: "9", cy: "9", r: "6.5", stroke: "currentColor", strokeWidth: "1.5" }),
2413
3156
  /* @__PURE__ */ jsx(
@@ -2513,7 +3256,7 @@ var OfficesSection = forwardRef(
2513
3256
  }
2514
3257
  );
2515
3258
  OfficesSection.displayName = "OfficesSection";
2516
- var ChevronLeft3 = () => /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
3259
+ var ChevronLeft4 = () => /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
2517
3260
  "path",
2518
3261
  {
2519
3262
  d: "M10 12L6 8l4-4",
@@ -2523,7 +3266,7 @@ var ChevronLeft3 = () => /* @__PURE__ */ jsx("svg", { width: "16", height: "16",
2523
3266
  strokeLinejoin: "round"
2524
3267
  }
2525
3268
  ) });
2526
- var ChevronRight3 = () => /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
3269
+ var ChevronRight4 = () => /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
2527
3270
  "path",
2528
3271
  {
2529
3272
  d: "M6 4l4 4-4 4",
@@ -2594,7 +3337,7 @@ var PackagesCarousel = forwardRef(
2594
3337
  disabled: !canPrev,
2595
3338
  "aria-label": "Previous packages",
2596
3339
  className: cn(arrowBase3, "-left-2"),
2597
- children: /* @__PURE__ */ jsx(ChevronLeft3, {})
3340
+ children: /* @__PURE__ */ jsx(ChevronLeft4, {})
2598
3341
  }
2599
3342
  ),
2600
3343
  /* @__PURE__ */ jsx(
@@ -2628,7 +3371,7 @@ var PackagesCarousel = forwardRef(
2628
3371
  disabled: !canNext,
2629
3372
  "aria-label": "Next packages",
2630
3373
  className: cn(arrowBase3, "-right-2"),
2631
- children: /* @__PURE__ */ jsx(ChevronRight3, {})
3374
+ children: /* @__PURE__ */ jsx(ChevronRight4, {})
2632
3375
  }
2633
3376
  )
2634
3377
  ] })
@@ -2711,7 +3454,7 @@ var TeamSection = forwardRef(
2711
3454
  }
2712
3455
  );
2713
3456
  TeamSection.displayName = "TeamSection";
2714
- var ChevronLeft4 = () => /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
3457
+ var ChevronLeft5 = () => /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
2715
3458
  "path",
2716
3459
  {
2717
3460
  d: "M12 15l-5-5 5-5",
@@ -2721,7 +3464,7 @@ var ChevronLeft4 = () => /* @__PURE__ */ jsx("svg", { width: "18", height: "18",
2721
3464
  strokeLinejoin: "round"
2722
3465
  }
2723
3466
  ) });
2724
- var ChevronRight4 = () => /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
3467
+ var ChevronRight5 = () => /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
2725
3468
  "path",
2726
3469
  {
2727
3470
  d: "M8 5l5 5-5 5",
@@ -2731,7 +3474,7 @@ var ChevronRight4 = () => /* @__PURE__ */ jsx("svg", { width: "18", height: "18"
2731
3474
  strokeLinejoin: "round"
2732
3475
  }
2733
3476
  ) });
2734
- var arrowClass = "inline-flex items-center justify-center w-9 h-9 p-0 bg-primary border-none rounded-full text-on-dark cursor-pointer transition-opacity duration-150 ease-in disabled:opacity-40 disabled:cursor-not-allowed focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2";
3477
+ var arrowClass2 = "inline-flex items-center justify-center w-9 h-9 p-0 bg-primary border-none rounded-full text-on-dark cursor-pointer transition-opacity duration-150 ease-in disabled:opacity-40 disabled:cursor-not-allowed focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2";
2735
3478
  var TestimonialsCarousel = forwardRef(
2736
3479
  ({ testimonials, defaultIndex = 0, activeIndex, onActiveIndexChange, className, ...rest }, ref) => {
2737
3480
  const isControlled = activeIndex !== void 0;
@@ -2788,8 +3531,8 @@ var TestimonialsCarousel = forwardRef(
2788
3531
  onClick: () => setIndex(currentIndex - 1),
2789
3532
  disabled: isFirst,
2790
3533
  "aria-label": "Previous testimonial",
2791
- className: arrowClass,
2792
- children: /* @__PURE__ */ jsx(ChevronLeft4, {})
3534
+ className: arrowClass2,
3535
+ children: /* @__PURE__ */ jsx(ChevronLeft5, {})
2793
3536
  }
2794
3537
  ),
2795
3538
  /* @__PURE__ */ jsx(
@@ -2822,8 +3565,8 @@ var TestimonialsCarousel = forwardRef(
2822
3565
  onClick: () => setIndex(currentIndex + 1),
2823
3566
  disabled: isLast,
2824
3567
  "aria-label": "Next testimonial",
2825
- className: arrowClass,
2826
- children: /* @__PURE__ */ jsx(ChevronRight4, {})
3568
+ className: arrowClass2,
3569
+ children: /* @__PURE__ */ jsx(ChevronRight5, {})
2827
3570
  }
2828
3571
  )
2829
3572
  ] }) : null
@@ -2880,7 +3623,7 @@ var useDesktopVideoVisible = (ref, breakpointPx = 768) => {
2880
3623
  }, [ref, breakpointPx]);
2881
3624
  return shouldRender;
2882
3625
  };
2883
- var ChevronLeft5 = () => /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
3626
+ var ChevronLeft6 = () => /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
2884
3627
  "path",
2885
3628
  {
2886
3629
  d: "M10 12L6 8l4-4",
@@ -2890,7 +3633,7 @@ var ChevronLeft5 = () => /* @__PURE__ */ jsx("svg", { width: "16", height: "16",
2890
3633
  strokeLinejoin: "round"
2891
3634
  }
2892
3635
  ) });
2893
- var ChevronRight5 = () => /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
3636
+ var ChevronRight6 = () => /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
2894
3637
  "path",
2895
3638
  {
2896
3639
  d: "M6 4l4 4-4 4",
@@ -2985,7 +3728,7 @@ var TripsCategorySection = forwardRef(
2985
3728
  disabled: !canPrev,
2986
3729
  "aria-label": "Previous trips",
2987
3730
  className: cn(arrowBase4, "left-2"),
2988
- children: /* @__PURE__ */ jsx(ChevronLeft5, {})
3731
+ children: /* @__PURE__ */ jsx(ChevronLeft6, {})
2989
3732
  }
2990
3733
  ),
2991
3734
  /* @__PURE__ */ jsx(
@@ -3015,7 +3758,7 @@ var TripsCategorySection = forwardRef(
3015
3758
  disabled: !canNext,
3016
3759
  "aria-label": "Next trips",
3017
3760
  className: cn(arrowBase4, "right-2"),
3018
- children: /* @__PURE__ */ jsx(ChevronRight5, {})
3761
+ children: /* @__PURE__ */ jsx(ChevronRight6, {})
3019
3762
  }
3020
3763
  ),
3021
3764
  /* @__PURE__ */ jsx(
@@ -3345,11 +4088,26 @@ var layout = {
3345
4088
  contentWidth: "760px",
3346
4089
  mobileBreakpoint: "768px"
3347
4090
  };
4091
+ var luxury = {
4092
+ colors: {
4093
+ gold: "#C5A059",
4094
+ goldStrong: "#A68411",
4095
+ goldLight: "#F3E5AB",
4096
+ goldSoft: "#E8D5B7",
4097
+ heading: "#9A7B4F",
4098
+ ink: "#0C060E",
4099
+ inkCard: "#1A1A1A",
4100
+ onDark: "#FFFDF9",
4101
+ text: "#2C2C2C"
4102
+ },
4103
+ font: 'var(--font-luxury-family, "Playfair Display"), Georgia, serif'
4104
+ };
3348
4105
  var theme = {
3349
4106
  ...tokens,
3350
- layout
4107
+ layout,
4108
+ luxury
3351
4109
  };
3352
4110
 
3353
- export { BottomNav, BrandLogo, BrandsSection, CategoryNavbar, ContactForm, ContactSection, CtaBanner, DestinationCard, DestinationsSection, EventBanner, EventCarousel, EventVideoBanner, ExpandableValueCard, ExploreCard, ExploreSection, FaqExpandable, FaqSection, FeatureCard, Footer, GalleryPhoto, GallerySection, Hero, HomeHero, LocationCard, MonthTabs, Navbar, OfficesSection, PackageCard, PackagesCarousel, SectionHeader, SiteHeader, TeamInfoCard, TeamSection, TestimonialCard, TestimonialsCarousel, TextSection, TripCategoryCard, TripsCategorySection, UctMobileBanner, ValuesSection, WarriorCard, WarriorsSection, WhyChooseSection, theme };
4111
+ export { BottomNav, BrandLogo, BrandsSection, CategoryNavbar, ContactForm, ContactSection, CtaBanner, DestinationCard, DestinationsSection, EventBanner, EventCarousel, EventVideoBanner, ExpandableValueCard, ExploreCard, ExploreSection, FaqExpandable, FaqSection, FeatureCard, Footer, GalleryPhoto, GallerySection, Hero, HomeHero, ImageMarquee, LocationCard, LuxuryCategoryNav, LuxuryDestinationSection, LuxuryHero, LuxuryInquiryForm, LuxuryIntro, LuxuryTestimonials, LuxuryTripCard, MonthTabs, Navbar, OfficesSection, PackageCard, PackagesCarousel, SectionHeader, SiteHeader, TeamInfoCard, TeamSection, TestimonialCard, TestimonialsCarousel, TextSection, TripCategoryCard, TripsCategorySection, UctMobileBanner, ValuesSection, WarriorCard, WarriorsSection, WhyChooseSection, theme };
3354
4112
  //# sourceMappingURL=index.js.map
3355
4113
  //# sourceMappingURL=index.js.map