feat(SW-936): add meetings sidepeek

components/ContentType/HotelPage/SidePeeks/MeetingsAndConferences/index.tsx

@@ -0,0 +1,59 @@
+import { meetingsAndConferences } from "@/constants/routes/hotelPageParams"
+
+import Image from "@/components/Image"
+import Button from "@/components/TempDesignSystem/Button"
+import Link from "@/components/TempDesignSystem/Link"
+import SidePeek from "@/components/TempDesignSystem/SidePeek"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+import Title from "@/components/TempDesignSystem/Text/Title"
+import { getIntl } from "@/i18n"
+import { getLang } from "@/i18n/serverContext"
+
+import styles from "./meetingsAndConferences.module.css"
+
+import { MeetingsAndConferencesSidePeekProps } from "@/types/components/hotelPage/sidepeek/meetingsAndConferences"
+
+export default async function MeetingsAndConferencesSidePeek({
+  meetingFacilities,
+}: MeetingsAndConferencesSidePeekProps) {
+  const lang = getLang()
+  const intl = await getIntl()
+  return (
+    <SidePeek
+      contentKey={meetingsAndConferences[lang]}
+      title={intl.formatMessage({ id: "Meetings & Conferences" })}
+    >
+      <div className={styles.wrapper}>
+        <Subtitle color="burgundy" asChild>
+          <Title level="h3">
+            {intl.formatMessage({ id: "Creative spaces for meetings" })}
+          </Title>
+        </Subtitle>
+        <div className={styles.information}>
+          <Image
+            src=""
+            alt=""
+            height={300}
+            width={200}
+            className={styles.image}
+          />
+          <Image
+            src=""
+            alt=""
+            height={300}
+            width={200}
+            className={styles.image}
+          />
+          <div className={styles.text}>{meetingFacilities?.headingText}</div>
+        </div>
+        <div className={styles.buttonContainer}>
+          <Button fullWidth theme="base" intent="secondary" asChild>
+            <Link href="" weight="bold" color="burgundy">
+              {intl.formatMessage({ id: "About meetings & conferences" })}
+            </Link>
+          </Button>
+        </div>
+      </div>
+    </SidePeek>
+  )
+}

components/ContentType/HotelPage/SidePeeks/MeetingsAndConferences/meetingsAndConferences.module.css

@@ -0,0 +1,35 @@
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x4);
+  margin-bottom: calc(
+    var(--Spacing-x4) * 2 + 80px
+  ); /* Creates space between the wrapper and buttonContainer */
+}
+
+.information {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 1fr 1fr;
+  gap: var(--Spacing-x2);
+}
+
+.image {
+  width: 100%;
+  height: 175px;
+  object-fit: cover;
+}
+
+.text {
+  grid-column: 1 / 3;
+}
+
+.buttonContainer {
+  background-color: var(--Base-Background-Primary-Normal);
+  border-top: 1px solid var(--Base-Border-Subtle);
+  padding: var(--Spacing-x4) var(--Spacing-x2);
+  width: 100%;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+}