@planetaexo/design-system 0.75.0 → 0.77.0

package/dist/index.d.cts

@@ -3626,6 +3626,17 @@ interface TripHeaderChip {
 interface TripHeaderProps {
     /** Hero image array — shows a carousel when more than one image */
     images: string[];
+    /**
+     * Responsive `srcSet`/`sizes` for the FIRST hero image (the LCP element),
+     * letting phones fetch a smaller width than the full-bleed desktop cover.
+     * Applied to the video poster and to carousel slide 0 only; the off-screen
+     * slides keep their single `images[i]` src. Omit for the legacy single-src
+     * behaviour. (The host app builds these — e.g. one `/_next/image` URL per
+     * width — since the DS doesn't know the optimizer's allowed widths.)
+     */
+    heroImageSrcSet?: string;
+    /** `sizes` paired with {@link heroImageSrcSet} (e.g. `"100vw"`). */
+    heroImageSizes?: string;
     /** Optional video URL — plays as background instead of the image carousel */
     videoUrl?: string;
     /** Main trip title */
@@ -3665,7 +3676,7 @@ interface TripHeaderProps {
     uiVariant?: "v1" | "v2";
     className?: string;
 }
-declare function TripHeader({ images, videoUrl, title, breadcrumb, destination, duration, groupSize, labels, tagline, chips, belowMeta, siteHeader, uiVariant, className, }: TripHeaderProps): react_jsx_runtime.JSX.Element;
+declare function TripHeader({ images, heroImageSrcSet, heroImageSizes, videoUrl, title, breadcrumb, destination, duration, groupSize, labels, tagline, chips, belowMeta, siteHeader, uiVariant, className, }: TripHeaderProps): react_jsx_runtime.JSX.Element;
 
 interface SiteFooterChip {
     label: string;
@@ -3907,6 +3918,14 @@ interface TripPageProps {
     /** Group size shown with a people icon in the hero meta row */
     groupSize?: string;
     images: string[];
+    /**
+     * Responsive `srcSet`/`sizes` for the first hero image (LCP) — forwarded to
+     * {@link TripHeader} so phones fetch a smaller width than the desktop cover.
+     * Omit for legacy single-src behaviour.
+     */
+    heroImageSrcSet?: string;
+    /** `sizes` paired with {@link heroImageSrcSet} (e.g. `"100vw"`). */
+    heroImageSizes?: string;
     /** Optional video URL — plays as background instead of the image carousel */
     videoUrl?: string;
     /** Breadcrumb trail displayed above the title */
@@ -4066,7 +4085,7 @@ interface TripPageProps {
     features?: Record<string, boolean>;
     className?: string;
 }
-declare function TripPage({ title, tagline, destination, duration, groupSize, images, videoUrl, breadcrumb, chips, highlights, howToGetThere, recommendedFor, overview, overviewHighlights, itinerary, itineraryDays, gallery, galleryLightbox, included, notIncluded, whatToBring, weather, optionalExtras, accommodation, accommodationGallery, accommodationGalleryVariant, whenItOperates, food, foodGallery, foodGalleryVariant, termsAndConditions, meetingPoints, meetingPoint, faqs, faqInitialCount, sectionIcons, labels, reviews, trustpilot, trustpilotMini, trustpilotHero, priceFrom, currency, season, departureTimes, benefits, currencyEstimates, priceInfo, onBook, onBookingSubmit, bookingLoading, bookingDefaults, bookingLabels, bookLabel, fromLabel, perPersonLabel, siteHeader, footerBadges, uiVariant, features, className, }: TripPageProps): react_jsx_runtime.JSX.Element;
+declare function TripPage({ title, tagline, destination, duration, groupSize, images, heroImageSrcSet, heroImageSizes, videoUrl, breadcrumb, chips, highlights, howToGetThere, recommendedFor, overview, overviewHighlights, itinerary, itineraryDays, gallery, galleryLightbox, included, notIncluded, whatToBring, weather, optionalExtras, accommodation, accommodationGallery, accommodationGalleryVariant, whenItOperates, food, foodGallery, foodGalleryVariant, termsAndConditions, meetingPoints, meetingPoint, faqs, faqInitialCount, sectionIcons, labels, reviews, trustpilot, trustpilotMini, trustpilotHero, priceFrom, currency, season, departureTimes, benefits, currencyEstimates, priceInfo, onBook, onBookingSubmit, bookingLoading, bookingDefaults, bookingLabels, bookLabel, fromLabel, perPersonLabel, siteHeader, footerBadges, uiVariant, features, className, }: TripPageProps): react_jsx_runtime.JSX.Element;
 
 interface Category2Trip extends TripCardProps {
     /** Marca a trip como featured — sobe para o topo do grid principal. */
@@ -4180,6 +4199,15 @@ interface CategoryPage2Props {
     faqInitialCount?: number;
     gallery?: (string | PhotoGalleryPhoto)[];
     galleryTitle?: string;
+    /**
+     * Lightbox mode for the photo gallery when a photo is tapped.
+     * - `"classic"` — paged single-photo view with prev/next arrows (default).
+     * - `"feed"` — Airbnb "photo tour": one vertical scrollable column of every
+     *   photo, opened scrolled to the tapped one (white captions overlaid, focused
+     *   photo full-opacity, neighbours dimmed). Pass `"feed"` on mobile.
+     * @default "classic"
+     */
+    galleryLightbox?: "classic" | "feed";
     /** Trips-list expand button: "Load more" (count appended). */
     loadMoreLabel?: string;
     /** Expand/collapse collapse button: "Show less". */
@@ -4194,7 +4222,7 @@ interface CategoryPage2Props {
     filterLabels?: FilterPanelLabels;
     className?: string;
 }
-declare function CategoryPage2({ title, intro, heroImage, videoUrl, trustpilotMini, breadcrumb, siteHeader, heroRightSlot, popularTours, popularToursTitle, popularToursEyebrow, trips, tripsTitle, tripsEyebrow, filterGroups, sortOptions, defaultSort, tripsInitialCount, tripListingSlot, trustpilot, reviewsTitle, reviewsSubtitle, blogPosts, aboutTitle, aboutContent, blogIntro, travelGuideHref, travelGuideLabel, blogPostsTitle, blogPostsViewAllHref, faqs, faqsTitle, faqInitialCount, gallery, galleryTitle, loadMoreLabel, showLessLabel, seeMoreLabel, viewAllPostsLabel, cardLabels, filterLabels, footerBadges, className, }: CategoryPage2Props): react_jsx_runtime.JSX.Element;
+declare function CategoryPage2({ title, intro, heroImage, videoUrl, trustpilotMini, breadcrumb, siteHeader, heroRightSlot, popularTours, popularToursTitle, popularToursEyebrow, trips, tripsTitle, tripsEyebrow, filterGroups, sortOptions, defaultSort, tripsInitialCount, tripListingSlot, trustpilot, reviewsTitle, reviewsSubtitle, blogPosts, aboutTitle, aboutContent, blogIntro, travelGuideHref, travelGuideLabel, blogPostsTitle, blogPostsViewAllHref, faqs, faqsTitle, faqInitialCount, gallery, galleryTitle, galleryLightbox, loadMoreLabel, showLessLabel, seeMoreLabel, viewAllPostsLabel, cardLabels, filterLabels, footerBadges, className, }: CategoryPage2Props): react_jsx_runtime.JSX.Element;
 
 type ActivityCardSize = "sm" | "md" | "lg";
 interface ActivityCardProps {

package/dist/index.d.ts

@@ -3626,6 +3626,17 @@ interface TripHeaderChip {
 interface TripHeaderProps {
     /** Hero image array — shows a carousel when more than one image */
     images: string[];
+    /**
+     * Responsive `srcSet`/`sizes` for the FIRST hero image (the LCP element),
+     * letting phones fetch a smaller width than the full-bleed desktop cover.
+     * Applied to the video poster and to carousel slide 0 only; the off-screen
+     * slides keep their single `images[i]` src. Omit for the legacy single-src
+     * behaviour. (The host app builds these — e.g. one `/_next/image` URL per
+     * width — since the DS doesn't know the optimizer's allowed widths.)
+     */
+    heroImageSrcSet?: string;
+    /** `sizes` paired with {@link heroImageSrcSet} (e.g. `"100vw"`). */
+    heroImageSizes?: string;
     /** Optional video URL — plays as background instead of the image carousel */
     videoUrl?: string;
     /** Main trip title */
@@ -3665,7 +3676,7 @@ interface TripHeaderProps {
     uiVariant?: "v1" | "v2";
     className?: string;
 }
-declare function TripHeader({ images, videoUrl, title, breadcrumb, destination, duration, groupSize, labels, tagline, chips, belowMeta, siteHeader, uiVariant, className, }: TripHeaderProps): react_jsx_runtime.JSX.Element;
+declare function TripHeader({ images, heroImageSrcSet, heroImageSizes, videoUrl, title, breadcrumb, destination, duration, groupSize, labels, tagline, chips, belowMeta, siteHeader, uiVariant, className, }: TripHeaderProps): react_jsx_runtime.JSX.Element;
 
 interface SiteFooterChip {
     label: string;
@@ -3907,6 +3918,14 @@ interface TripPageProps {
     /** Group size shown with a people icon in the hero meta row */
     groupSize?: string;
     images: string[];
+    /**
+     * Responsive `srcSet`/`sizes` for the first hero image (LCP) — forwarded to
+     * {@link TripHeader} so phones fetch a smaller width than the desktop cover.
+     * Omit for legacy single-src behaviour.
+     */
+    heroImageSrcSet?: string;
+    /** `sizes` paired with {@link heroImageSrcSet} (e.g. `"100vw"`). */
+    heroImageSizes?: string;
     /** Optional video URL — plays as background instead of the image carousel */
     videoUrl?: string;
     /** Breadcrumb trail displayed above the title */
@@ -4066,7 +4085,7 @@ interface TripPageProps {
     features?: Record<string, boolean>;
     className?: string;
 }
-declare function TripPage({ title, tagline, destination, duration, groupSize, images, videoUrl, breadcrumb, chips, highlights, howToGetThere, recommendedFor, overview, overviewHighlights, itinerary, itineraryDays, gallery, galleryLightbox, included, notIncluded, whatToBring, weather, optionalExtras, accommodation, accommodationGallery, accommodationGalleryVariant, whenItOperates, food, foodGallery, foodGalleryVariant, termsAndConditions, meetingPoints, meetingPoint, faqs, faqInitialCount, sectionIcons, labels, reviews, trustpilot, trustpilotMini, trustpilotHero, priceFrom, currency, season, departureTimes, benefits, currencyEstimates, priceInfo, onBook, onBookingSubmit, bookingLoading, bookingDefaults, bookingLabels, bookLabel, fromLabel, perPersonLabel, siteHeader, footerBadges, uiVariant, features, className, }: TripPageProps): react_jsx_runtime.JSX.Element;
+declare function TripPage({ title, tagline, destination, duration, groupSize, images, heroImageSrcSet, heroImageSizes, videoUrl, breadcrumb, chips, highlights, howToGetThere, recommendedFor, overview, overviewHighlights, itinerary, itineraryDays, gallery, galleryLightbox, included, notIncluded, whatToBring, weather, optionalExtras, accommodation, accommodationGallery, accommodationGalleryVariant, whenItOperates, food, foodGallery, foodGalleryVariant, termsAndConditions, meetingPoints, meetingPoint, faqs, faqInitialCount, sectionIcons, labels, reviews, trustpilot, trustpilotMini, trustpilotHero, priceFrom, currency, season, departureTimes, benefits, currencyEstimates, priceInfo, onBook, onBookingSubmit, bookingLoading, bookingDefaults, bookingLabels, bookLabel, fromLabel, perPersonLabel, siteHeader, footerBadges, uiVariant, features, className, }: TripPageProps): react_jsx_runtime.JSX.Element;
 
 interface Category2Trip extends TripCardProps {
     /** Marca a trip como featured — sobe para o topo do grid principal. */
@@ -4180,6 +4199,15 @@ interface CategoryPage2Props {
     faqInitialCount?: number;
     gallery?: (string | PhotoGalleryPhoto)[];
     galleryTitle?: string;
+    /**
+     * Lightbox mode for the photo gallery when a photo is tapped.
+     * - `"classic"` — paged single-photo view with prev/next arrows (default).
+     * - `"feed"` — Airbnb "photo tour": one vertical scrollable column of every
+     *   photo, opened scrolled to the tapped one (white captions overlaid, focused
+     *   photo full-opacity, neighbours dimmed). Pass `"feed"` on mobile.
+     * @default "classic"
+     */
+    galleryLightbox?: "classic" | "feed";
     /** Trips-list expand button: "Load more" (count appended). */
     loadMoreLabel?: string;
     /** Expand/collapse collapse button: "Show less". */
@@ -4194,7 +4222,7 @@ interface CategoryPage2Props {
     filterLabels?: FilterPanelLabels;
     className?: string;
 }
-declare function CategoryPage2({ title, intro, heroImage, videoUrl, trustpilotMini, breadcrumb, siteHeader, heroRightSlot, popularTours, popularToursTitle, popularToursEyebrow, trips, tripsTitle, tripsEyebrow, filterGroups, sortOptions, defaultSort, tripsInitialCount, tripListingSlot, trustpilot, reviewsTitle, reviewsSubtitle, blogPosts, aboutTitle, aboutContent, blogIntro, travelGuideHref, travelGuideLabel, blogPostsTitle, blogPostsViewAllHref, faqs, faqsTitle, faqInitialCount, gallery, galleryTitle, loadMoreLabel, showLessLabel, seeMoreLabel, viewAllPostsLabel, cardLabels, filterLabels, footerBadges, className, }: CategoryPage2Props): react_jsx_runtime.JSX.Element;
+declare function CategoryPage2({ title, intro, heroImage, videoUrl, trustpilotMini, breadcrumb, siteHeader, heroRightSlot, popularTours, popularToursTitle, popularToursEyebrow, trips, tripsTitle, tripsEyebrow, filterGroups, sortOptions, defaultSort, tripsInitialCount, tripListingSlot, trustpilot, reviewsTitle, reviewsSubtitle, blogPosts, aboutTitle, aboutContent, blogIntro, travelGuideHref, travelGuideLabel, blogPostsTitle, blogPostsViewAllHref, faqs, faqsTitle, faqInitialCount, gallery, galleryTitle, galleryLightbox, loadMoreLabel, showLessLabel, seeMoreLabel, viewAllPostsLabel, cardLabels, filterLabels, footerBadges, className, }: CategoryPage2Props): react_jsx_runtime.JSX.Element;
 
 type ActivityCardSize = "sm" | "md" | "lg";
 interface ActivityCardProps {

package/dist/index.js

@@ -12015,7 +12015,7 @@ function Lightbox({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: "fixed inset-0 z-50 bg-black/92 flex flex-col items-center justify-center",
+      className: "fixed inset-0 z-[1000] bg-black/92 flex flex-col items-center justify-center",
       onClick: onClose,
       children: [
         /* @__PURE__ */ jsx(
@@ -12203,24 +12203,81 @@ function FeedLightbox({
       if (frame) cancelAnimationFrame(frame);
     };
   }, []);
-  return /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-50 flex flex-col bg-zinc-950 text-white", children: [
-    /* @__PURE__ */ jsxs("div", { className: "sticky top-0 z-10 flex items-center gap-3 border-b border-white/10 bg-zinc-950/80 px-3 py-2.5 backdrop-blur-md", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-[1000] bg-zinc-950 text-white", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: scrollRef,
+        className: "absolute inset-0 overflow-y-auto overscroll-contain",
+        children: /* @__PURE__ */ jsx("div", { className: "mx-auto flex w-full max-w-3xl flex-col", children: items.map(({ photo, index, sectionLabel, isSectionStart }) => {
+          var _a2;
+          const isFocused = index === active;
+          return /* @__PURE__ */ jsxs(
+            "figure",
+            {
+              "data-index": index,
+              ref: (el) => {
+                itemRefs.current[index] = el;
+              },
+              className: cn(
+                "group relative transition-opacity duration-500",
+                // The focused (centred / hovered) photo is at full opacity;
+                // every other photo is dimmed a touch so the eye lands on it.
+                isFocused ? "opacity-100" : "opacity-[0.65] hover:opacity-100"
+              ),
+              children: [
+                /* @__PURE__ */ jsx("div", { className: "overflow-hidden bg-white/5", children: /* @__PURE__ */ jsx(
+                  Picture,
+                  {
+                    src: photo.src,
+                    alt: (_a2 = photo.alt) != null ? _a2 : `Photo ${index + 1}`,
+                    title: photo.caption,
+                    className: "block h-auto w-full",
+                    eager: index < 2,
+                    rootMargin: "800px"
+                  }
+                ) }),
+                sectionLabel && isSectionStart && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-x-0 top-0 bg-gradient-to-b from-black/60 via-black/20 to-transparent px-3 pb-12 pt-3 sm:px-4", children: /* @__PURE__ */ jsx("h2", { className: "font-heading text-lg font-bold uppercase tracking-wide text-white drop-shadow-md", children: sectionLabel }) }),
+                (photo.caption || photo.credit) && /* @__PURE__ */ jsxs(
+                  "figcaption",
+                  {
+                    className: cn(
+                      "pointer-events-none absolute inset-x-0 bottom-0 flex flex-col items-end gap-0.5 bg-gradient-to-t from-black/60 via-black/20 to-transparent px-3 pb-3 pt-12 text-right transition-opacity duration-500 sm:px-4",
+                      isFocused ? "opacity-100" : "opacity-0 group-hover:opacity-100"
+                    ),
+                    children: [
+                      photo.caption && /* @__PURE__ */ jsx("p", { className: "font-ui text-sm font-medium leading-snug text-white drop-shadow-md", children: photo.caption }),
+                      photo.credit && /* @__PURE__ */ jsxs("p", { className: "font-ui text-xs text-white/80 drop-shadow-md", children: [
+                        "\xA9 ",
+                        photo.credit
+                      ] })
+                    ]
+                  }
+                )
+              ]
+            },
+            index
+          );
+        }) })
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "pointer-events-none absolute inset-x-0 top-0 z-10 flex items-center gap-3 bg-gradient-to-b from-black/70 via-black/30 to-transparent px-3 pb-10 pt-2.5", children: [
       /* @__PURE__ */ jsx(
         "button",
         {
           type: "button",
           onClick: onClose,
-          className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-white transition-colors hover:bg-white/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/60",
+          className: "pointer-events-auto flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-black/25 text-white backdrop-blur-sm transition-colors hover:bg-white/15 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/60",
           "aria-label": (_a = labels == null ? void 0 : labels.close) != null ? _a : "Close lightbox",
           children: /* @__PURE__ */ jsx(XIcon, { className: "h-5 w-5" })
         }
       ),
-      activeLabel && /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-center font-heading text-sm font-bold uppercase tracking-wide text-white", children: activeLabel }),
+      activeLabel && /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-center font-heading text-sm font-bold uppercase tracking-wide text-white drop-shadow-md", children: activeLabel }),
       total > 1 && /* @__PURE__ */ jsxs(
         "span",
         {
           className: cn(
-            "shrink-0 font-ui text-sm font-medium tabular-nums text-white/60",
+            "shrink-0 font-ui text-sm font-medium tabular-nums text-white/80 drop-shadow-md",
             !activeLabel && "ml-auto"
           ),
           children: [
@@ -12230,74 +12287,7 @@ function FeedLightbox({
           ]
         }
       )
-    ] }),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref: scrollRef,
-        className: "flex-1 overflow-y-auto overscroll-contain",
-        children: /* @__PURE__ */ jsx("div", { className: "mx-auto flex w-full max-w-3xl flex-col", children: items.map(({ photo, index, sectionLabel, isSectionStart }) => {
-          var _a2;
-          const isFocused = index === active;
-          return /* @__PURE__ */ jsxs(React20.Fragment, { children: [
-            sectionLabel && isSectionStart && /* @__PURE__ */ jsx(
-              "h2",
-              {
-                className: cn(
-                  "px-3 pb-3 font-heading text-lg font-bold uppercase tracking-wide text-white sm:px-4",
-                  index > 0 ? "pt-8" : "pt-2"
-                ),
-                children: sectionLabel
-              }
-            ),
-            /* @__PURE__ */ jsxs(
-              "figure",
-              {
-                "data-index": index,
-                ref: (el) => {
-                  itemRefs.current[index] = el;
-                },
-                className: cn(
-                  "group relative transition-opacity duration-500",
-                  // The focused (centred / hovered) photo is at full opacity;
-                  // every other photo is dimmed a touch so the eye lands on it.
-                  isFocused ? "opacity-100" : "opacity-[0.65] hover:opacity-100"
-                ),
-                children: [
-                  /* @__PURE__ */ jsx("div", { className: "overflow-hidden bg-white/5", children: /* @__PURE__ */ jsx(
-                    Picture,
-                    {
-                      src: photo.src,
-                      alt: (_a2 = photo.alt) != null ? _a2 : `Photo ${index + 1}`,
-                      title: photo.caption,
-                      className: "block h-auto w-full",
-                      eager: index < 2,
-                      rootMargin: "800px"
-                    }
-                  ) }),
-                  (photo.caption || photo.credit) && /* @__PURE__ */ jsxs(
-                    "figcaption",
-                    {
-                      className: cn(
-                        "pointer-events-none absolute inset-x-0 bottom-0 flex flex-col items-end gap-0.5 bg-gradient-to-t from-black/60 via-black/20 to-transparent px-3 pb-3 pt-12 text-right transition-opacity duration-500 sm:px-4",
-                        isFocused ? "opacity-100" : "opacity-0 group-hover:opacity-100"
-                      ),
-                      children: [
-                        photo.caption && /* @__PURE__ */ jsx("p", { className: "font-ui text-sm font-medium leading-snug text-white drop-shadow-md", children: photo.caption }),
-                        photo.credit && /* @__PURE__ */ jsxs("p", { className: "font-ui text-xs text-white/80 drop-shadow-md", children: [
-                          "\xA9 ",
-                          photo.credit
-                        ] })
-                      ]
-                    }
-                  )
-                ]
-              }
-            )
-          ] }, index);
-        }) })
-      }
-    )
+    ] })
   ] });
 }
 var PhotoTourContext = React20.createContext(null);
@@ -14861,6 +14851,8 @@ function useHlsVideo(videoRef, src) {
 }
 function TripHeader({
   images,
+  heroImageSrcSet,
+  heroImageSizes,
   videoUrl,
   title,
   breadcrumb,
@@ -14940,6 +14932,8 @@ function TripHeader({
                   Picture,
                   {
                     src: validImages[0],
+                    srcSet: heroImageSrcSet,
+                    sizes: heroImageSizes,
                     alt: "",
                     "aria-hidden": true,
                     fetchPriority: "high",
@@ -14978,6 +14972,8 @@ function TripHeader({
                 Picture,
                 {
                   src: currentSrc,
+                  srcSet: safeIndex === 0 ? heroImageSrcSet : void 0,
+                  sizes: safeIndex === 0 ? heroImageSizes : void 0,
                   alt: title,
                   fetchPriority: safeIndex === 0 ? "high" : "auto",
                   eager: safeIndex === 0,
@@ -15550,6 +15546,8 @@ function TripPage({
   duration,
   groupSize,
   images,
+  heroImageSrcSet,
+  heroImageSizes,
   videoUrl,
   breadcrumb,
   chips,
@@ -15781,6 +15779,8 @@ function TripPage({
               TripHeader,
               {
                 images,
+                heroImageSrcSet,
+                heroImageSizes,
                 videoUrl,
                 title,
                 breadcrumb,
@@ -16290,6 +16290,7 @@ function CategoryPage2({
   faqInitialCount = 5,
   gallery,
   galleryTitle,
+  galleryLightbox = "classic",
   loadMoreLabel,
   showLessLabel,
   seeMoreLabel,
@@ -16552,7 +16553,15 @@ function CategoryPage2({
     ] }),
     gallery && gallery.length > 0 && /* @__PURE__ */ jsxs("section", { className: "pt-4", children: [
       galleryTitle && /* @__PURE__ */ jsx("h2", { className: "mx-auto w-full max-w-6xl px-6 sm:px-8 mb-6 text-2xl sm:text-3xl font-bold text-foreground font-heading", children: galleryTitle }),
-      /* @__PURE__ */ jsx(PhotoGallery, { photos: gallery, variant: "gridCompact", initialVisible: 8 })
+      /* @__PURE__ */ jsx(
+        PhotoGallery,
+        {
+          photos: gallery,
+          variant: "gridCompact",
+          initialVisible: 8,
+          lightbox: galleryLightbox
+        }
+      )
     ] }),
     (aboutTitle || aboutContent || blogPostsTitle || blogPosts && blogPosts.length > 0) && /* @__PURE__ */ jsx("section", { className: "w-full bg-gray-100", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto w-full max-w-6xl px-6 sm:px-8 py-14", children: [
       (aboutTitle || blogPostsTitle) && /* @__PURE__ */ jsx("h2", { className: "text-2xl sm:text-3xl font-bold text-foreground font-heading mb-5", children: aboutTitle != null ? aboutTitle : blogPostsTitle }),