From 79e5d651407a3e979fda29fdf637c99171297290 Mon Sep 17 00:00:00 2001
From: Chuma McPhoy <chuma.mcphoy@scandichotels.com>
Date: Tue, 20 Aug 2024 16:51:47 +0200
Subject: [PATCH] feat(SW-96): add preview image and lightbox CTA on mobile
 viewports

---
 .../HotelPage/PreviewImages/index.tsx         | 21 +++++++++++++++-
 .../PreviewImages/previewImages.module.css    | 25 +++++++++++++++++++
 2 files changed, 45 insertions(+), 1 deletion(-)

diff --git a/components/ContentType/HotelPage/PreviewImages/index.tsx b/components/ContentType/HotelPage/PreviewImages/index.tsx
index ec18ad05d..124118b37 100644
--- a/components/ContentType/HotelPage/PreviewImages/index.tsx
+++ b/components/ContentType/HotelPage/PreviewImages/index.tsx
@@ -15,8 +15,27 @@ export default async function PreviewImages({
   const intl = await getIntl()
   return (
     <Lightbox images={images}>
+      {/*TODO: Replace with images from API once SW-189 is merged. */}
+      <div className={styles.mobileWrapper}>
+        <Image
+          src={images[0].url}
+          alt={images[0].alt}
+          width={752}
+          height={540}
+          objectFit="cover"
+          className={styles.mobileImage}
+        />
+        <Button
+          theme="base"
+          intent="inverted"
+          size="small"
+          id="lightboxTrigger"
+          className={styles.seeAllButton}
+        >
+          {intl.formatMessage({ id: "See all photos" })}
+        </Button>
+      </div>
       <div className={styles.desktopGrid}>
-        {/*TODO: Replace with images from API once SW-189 is merged. */}
         {images.slice(0, 3).map((image, index) => (
           <Image
             key={index}
diff --git a/components/ContentType/HotelPage/PreviewImages/previewImages.module.css b/components/ContentType/HotelPage/PreviewImages/previewImages.module.css
index f333c4ead..8d663aac3 100644
--- a/components/ContentType/HotelPage/PreviewImages/previewImages.module.css
+++ b/components/ContentType/HotelPage/PreviewImages/previewImages.module.css
@@ -1,8 +1,33 @@
+.mobileWrapper {
+  position: relative;
+  padding-top: var(--Spacing-x2);
+  background-color: var(--Base-Surface-Subtle-Normal);
+}
+
+.mobileImage {
+  display: block;
+  width: 100%;
+  height: auto;
+  border-radius: var(--Corner-radius-Medium);
+}
+
 .desktopGrid {
   display: none;
 }
 
+.seeAllButton {
+  position: absolute;
+  bottom: var(--Spacing-x2);
+  right: var(--Spacing-x4);
+  z-index: 1;
+  display: block;
+}
+
 @media screen and (min-width: 1367px) {
+  .mobileImage {
+    display: none;
+  }
+
   .desktopGrid {
     display: grid;
     grid-template-columns: 72% 28%;