feat(SW-70): create base for rate selection page

This is the foundation for the rate selection. Since we don't have UX
and UI ready yet this is on a best effort basis. Things that will be
changed later includes proper API fetching, correct design,
internationalization of text and form handling.

app/[lang]/(live)/(public)/hotelreservation/layout.module.css

@@ -1,3 +1,3 @@
 .layout {
-  height: 100vh;
+  min-height: 100dvh;
 }

app/[lang]/(live)/(public)/hotelreservation/layout.tsx

@@ -7,12 +7,5 @@ import { LangParams, LayoutArgs } from "@/types/params"
 export default function HotelReservationLayout({
   children,
 }: React.PropsWithChildren<LayoutArgs<LangParams>>) {
-  return (
-    <div className={styles.layout}>
-      <Title as="h1" color="black">
-        Lorem, ipsum.
-      </Title>
-      {children}
-    </div>
-  )
+  return <div className={styles.layout}>{children}</div>
 }

app/[lang]/(live)/(public)/hotelreservation/select-rate/page.module.css

@@ -0,0 +1,41 @@
+.header {
+  margin-top: var(--Spacing-x2);
+  margin-bottom: var(--Spacing-x2);
+}
+
+.hotelInfo {
+  margin-bottom: 64px;
+}
+
+.page {
+  min-height: 100dvh;
+  padding-top: var(--Spacing-x6);
+  padding-left: var(--Spacing-x2);
+  padding-right: var(--Spacing-x2);
+  background-color: var(--Scandic-Brand-Warm-White);
+}
+
+.content {
+  max-width: 1134px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.page input[type="radio"] {
+  opacity: 0;
+  position: fixed;
+  width: 0;
+}
+
+.roomList {
+  margin-top: var(--Spacing-x4);
+  list-style: none;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  column-gap: var(--Spacing-x2);
+  row-gap: var(--Spacing-x4);
+}
+
+.roomList > li {
+  width: 100%;
+}

app/[lang]/(live)/(public)/hotelreservation/select-rate/page.tsx

@@ -0,0 +1,114 @@
+import RoomCard from "@/components/HotelReservation/SelectRate/RoomCard"
+import { Room } from "@/components/HotelReservation/SelectRate/RoomCard/roomCard"
+import Header from "@/components/Section/Header"
+
+import styles from "./page.module.css"
+
+const getRooms: () => Promise<Room[]> = () => {
+  return new Promise((resolve) =>
+    resolve([
+      {
+        id: 1,
+        name: "Cabin",
+        description:
+          "Stylish, peaceful and air-conditioned room. The rooms have small clerestory windows.",
+        size: "17 - 24 m² (1 - 2 persons)",
+        pricePerNight: 1348,
+        currency: "SEK",
+        imageSrc:
+          "https://www.scandichotels.se/imageVault/publishedmedia/xnmqnmz6mz0uhuat0917/scandic-helsinki-hub-room-standard-KR-7.jpg",
+      },
+      {
+        id: 2,
+        name: "Standard",
+        description:
+          "Stylish, peaceful and air-conditioned room. The rooms have small clerestory windows.",
+        size: "19 - 30 m² (1 - 2 persons)",
+        pricePerNight: 1548,
+        currency: "SEK",
+        imageSrc:
+          "https://www.scandichotels.se/imageVault/publishedmedia/xnmqnmz6mz0uhuat0917/scandic-helsinki-hub-room-standard-KR-7.jpg",
+      },
+      {
+        id: 3,
+        name: "Superior",
+        description:
+          "Stylish, peaceful and air-conditioned room. The rooms have small clerestory windows.",
+        size: "22 - 40 m² (1 - 3 persons)",
+        pricePerNight: 1744,
+        currency: "SEK",
+        imageSrc:
+          "https://www.scandichotels.se/imageVault/publishedmedia/xnmqnmz6mz0uhuat0917/scandic-helsinki-hub-room-standard-KR-7.jpg",
+      },
+      {
+        id: 4,
+        name: "Superior Family",
+        description:
+          "Stylish, peaceful and air-conditioned room. The rooms have small clerestory windows.",
+        size: "29 - 49 m² (3 - 4 persons)",
+        pricePerNight: 2032,
+        currency: "SEK",
+        imageSrc:
+          "https://www.scandichotels.se/imageVault/publishedmedia/xnmqnmz6mz0uhuat0917/scandic-helsinki-hub-room-standard-KR-7.jpg",
+      },
+      {
+        id: 5,
+        name: "Superior PLUS",
+        description:
+          "Stylish, peaceful and air-conditioned room. The rooms have small clerestory windows.",
+        size: "21 - 28 m² (2 - 3 persons)",
+        pricePerNight: 2065,
+        currency: "SEK",
+        imageSrc:
+          "https://www.scandichotels.se/imageVault/publishedmedia/xnmqnmz6mz0uhuat0917/scandic-helsinki-hub-room-standard-KR-7.jpg",
+      },
+      {
+        id: 6,
+        name: "Junior Suite",
+        description:
+          "Stylish, peaceful and air-conditioned room. The rooms have small clerestory windows.",
+        size: "35 - 43 m² (2 - 4 persons)",
+        pricePerNight: 3012,
+        currency: "SEK",
+        imageSrc:
+          "https://www.scandichotels.se/imageVault/publishedmedia/xnmqnmz6mz0uhuat0917/scandic-helsinki-hub-room-standard-KR-7.jpg",
+      },
+    ])
+  )
+}
+
+export default async function SelectRate() {
+  const rooms = await getRooms()
+
+  return (
+    <div className={styles.page}>
+      <main className={styles.content}>
+        <div className={styles.hotelInfo}>Hotel info TBI</div>
+        <div className={styles.header}>
+          <Header
+            title="Choose room"
+            subtitle={"Which room class suits you the best?"}
+            link={{
+              href: "#",
+              text: "All rooms comes with standard amenities",
+            }}
+          />
+        </div>
+
+        <ul className={styles.roomList}>
+          {rooms.map((room) => (
+            <li key={room.id}>
+              <input
+                type="radio"
+                name="room"
+                value={room.id}
+                id={`room-${room.id}`}
+              />
+              <RoomCard room={room} />
+            </li>
+          ))}
+        </ul>
+      </main>
+    </div>
+  )
+}