feat(SW-962): add link

components/ContentType/HotelPage/SidePeeks/Activities/activities.module.css

@@ -1,2 +1,15 @@
-.wrapper {
+.preamble {
+  margin-bottom: calc(
+    var(--Spacing-x4) * 2 + 80px
+  ); /* Creates space between the wrapper and buttonContainer */
+}
+
+.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;
 }

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

@@ -1,12 +1,20 @@
 import { activities } from "@/constants/routes/hotelPageParams"
 
+import Button from "@/components/TempDesignSystem/Button"
+import Link from "@/components/TempDesignSystem/Link"
 import SidePeek from "@/components/TempDesignSystem/SidePeek"
+import Preamble from "@/components/TempDesignSystem/Text/Preamble"
 import { getIntl } from "@/i18n"
 import { getLang } from "@/i18n/serverContext"
 
 import styles from "./activities.module.css"
 
-export default async function ActivitiesSidePeek() {
+import { ActivitiesSidePeekProps } from "@/types/components/hotelPage/sidepeek/activities"
+
+export default async function ActivitiesSidePeek({
+  preamble,
+  contentPage,
+}: ActivitiesSidePeekProps) {
   const lang = getLang()
   const intl = await getIntl()
   return (
@@ -14,7 +22,16 @@ export default async function ActivitiesSidePeek() {
       contentKey={activities[lang]}
       title={intl.formatMessage({ id: "Activities" })}
     >
-      <div className={styles.wrapper}>This is some content for Activities</div>
+      <Preamble className={styles.preamble}>{preamble}</Preamble>
+      {contentPage?.href && (
+        <div className={styles.buttonContainer}>
+          <Button theme="base" intent="secondary" asChild>
+            <Link href={contentPage.href} color="burgundy" weight="bold">
+              {intl.formatMessage({ id: "Show activities calendar" })}
+            </Link>
+          </Button>
+        </div>
+      )}
     </SidePeek>
   )
 }

components/ContentType/HotelPage/index.tsx

@@ -1,7 +1,6 @@
 import { notFound } from "next/navigation"
 
 import {
-  activities,
   meetingsAndConferences,
   restaurantAndBar,
 } from "@/constants/routes/hotelPageParams"
@@ -201,13 +200,10 @@ export default async function HotelPage({ hotelId }: HotelPageProps) {
           Restaurant & Bar
         </SidePeek>
         <WellnessAndExerciseSidePeek healthFacilities={healthFacilities} />
-        <SidePeek
-          contentKey={activities[lang]}
-          title={intl.formatMessage({ id: "Activities" })}
-        >
-          {/* TODO */}
-          Activities
-        </SidePeek>
+        <ActivitiesSidePeek
+          preamble="This is content about activites"
+          contentPage={activitiesCard?.contentPage}
+        />
         <SidePeek
           contentKey={meetingsAndConferences[lang]}
           title={intl.formatMessage({ id: "Meetings & Conferences" })}