feat(SW-340): Added HotelCardDialog component

components/HotelReservation/HotelCardDialog/hotelCardDialog.module.css

@@ -0,0 +1,70 @@
+.dialog {
+  padding-bottom: var(--Spacing-x1);
+  bottom: 32px;
+  left: 50%;
+  transform: translateX(-50%);
+  border: none;
+  background: transparent;
+}
+
+.dialogContainer {
+  border: 1px solid var(--Base-Border-Subtle);
+  border-radius: var(--Corner-radius-Medium);
+  width: 402px;
+  min-height: 227px;
+  background: var(--Base-Surface-Primary-light-Normal);
+  box-shadow: 0px 0px 8px 3px rgba(0, 0, 0, 0.1);
+  flex-direction: row;
+  display: flex;
+}
+
+.imageContainer {
+  position: relative;
+  min-height: 227px;
+  width: 177px;
+}
+
+.tripAdvisor {
+  display: none;
+}
+
+.imageContainer img {
+  object-fit: cover;
+}
+
+.content {
+  width: 100%;
+  padding: var(--Spacing-x-one-and-half);
+  gap: var(--Spacing-x1);
+  display: flex;
+  flex-direction: column;
+}
+
+.facilities {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--Spacing-x1);
+}
+
+.facilitiesItem {
+  display: flex;
+  align-items: center;
+  gap: var(--Spacing-x-half);
+}
+
+.prices {
+  border-radius: var(--Corner-radius-Medium);
+  padding: var(--Spacing-x-half) var(--Spacing-x1);
+  background: var(--Base-Surface-Secondary-light-Normal);
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x-half);
+}
+
+.perNight {
+  color: var(--Base-Text-Subtle-light-Normal);
+}
+
+.button {
+  margin-top: auto;
+}