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.

components/HotelReservation/SelectRate/RoomCard/index.tsx

@@ -0,0 +1,42 @@
+import Button from "@/components/TempDesignSystem/Button"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+import Title from "@/components/TempDesignSystem/Text/Title"
+
+import { RoomProps } from "./roomCard"
+
+import styles from "./roomCard.module.css"
+
+export default function RoomCard({ room }: RoomProps) {
+  return (
+    <div className={styles.card}>
+      <div className={styles.cardBody}>
+        <div className={styles.nameContainer}>
+          <Title className={styles.name} as="h5" level="h3">
+            {room.name}
+          </Title>
+          <div className={styles.nameInfo}>i</div>
+        </div>
+        <Caption color="burgundy">17 - 24 m² (1 - 2 persons)</Caption>
+        <Caption color="burgundy">{room.description}</Caption>
+
+        <Caption color="burgundy">
+          From <span className={styles.price}>{room.pricePerNight}</span>{" "}
+          {room.currency}/night
+        </Caption>
+
+        <Button
+          asChild
+          type="button"
+          size="small"
+          theme="primaryDark"
+          className={styles.button}
+        >
+          <label htmlFor={`room-${room.id}`}>Choose room</label>
+        </Button>
+      </div>
+      {/* TODO: maybe use the `Image` component instead of the `img` tag. Waiting until we know how to get the image */}
+      {/* eslint-disable-next-line @next/next/no-img-element */}
+      <img alt="A photo of the room" src={room.imageSrc} />
+    </div>
+  )
+}