feat(SW-96): ship lightbox preview images on hotel page

components/ContentType/HotelPage/hotelPage.module.css

@@ -7,6 +7,11 @@
   padding-right: var(--Spacing-x3);
 }
 
+.desktopGrid,
+.seeAllButton {
+  display: none;
+}
+
 .mainSection {
   display: grid;
   gap: var(--Spacing-x9);
@@ -34,4 +39,46 @@
     gap: var(--Spacing-x9);
     grid-template-columns: 607px 340px;
   }
+
+  .desktopGrid {
+    display: grid;
+    grid-template-columns: 72% 28%;
+    grid-template-rows: repeat(2, 1fr);
+    gap: 8px;
+    position: relative;
+    width: 100%;
+    padding-top: var(--Spacing-x2);
+    background-color: var(--Base-Surface-Subtle-Normal);
+  }
+
+  .desktopGrid > :first-child {
+    grid-row: 1 / span 2;
+    height: 100%;
+  }
+
+  .desktopGrid > :nth-child(2) {
+    grid-row: 1;
+    grid-column: 2;
+  }
+  .desktopGrid > :nth-child(3) {
+    grid-row: 2;
+    grid-column: 2;
+  }
+
+  .seeAllButton {
+    position: absolute;
+    bottom: var(--Spacing-x4);
+    right: var(--Spacing-x4);
+    z-index: 1;
+    display: block;
+  }
+
+  .baseImage {
+    cursor: pointer;
+    object-fit: cover;
+    border-radius: var(--Corner-radius-Medium);
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
 }

components/ContentType/HotelPage/index.tsx

@@ -1,8 +1,11 @@
+import Image from "next/image"
+
 import { serverClient } from "@/lib/trpc/server"
 
 import { MOCK_FACILITIES } from "./Facilities/mockData"
 import Facilities from "./Facilities"
 import { DesktopLightbox } from "@/components/Lightbox/Desktop"
+import Button from "@/components/TempDesignSystem/Button"
 
 import AmenitiesList from "./AmenitiesList"
 import { tempHotelLightboxImage } from "./data"
@@ -25,8 +28,29 @@ export default async function HotelPage() {
   return (
     <div className={styles.pageContainer}>
       <DesktopLightbox images={tempHotelLightboxImage}>
-        <button id="lightboxTrigger">Open Lightbox</button>
+        <div className={styles.desktopGrid}>
-        <button>noope</button>
+          {/*TODO: Replace with images from API once SW-189 is merged. */}
+          {tempHotelLightboxImage.slice(0, 3).map((image, index) => (
+            <Image
+              key={index}
+              src={image.url}
+              alt={image.alt}
+              width={index === 0 ? 752 : 292}
+              height={index === 0 ? 540 : 266}
+              objectFit="cover"
+              className={styles.baseImage}
+            />
+          ))}
+        </div>
+        <Button
+          theme="base"
+          intent="inverted"
+          size="small"
+          id="lightboxTrigger"
+          className={styles.seeAllButton}
+        >
+          See all photos
+        </Button>
       </DesktopLightbox>
       <TabNavigation />
       <main className={styles.mainSection}>