diff --git a/components/ContentType/HotelPage/IntroSection/introSection.module.css b/components/ContentType/HotelPage/IntroSection/introSection.module.css
index 5e9ec4b80..f6db7e388 100644
--- a/components/ContentType/HotelPage/IntroSection/introSection.module.css
+++ b/components/ContentType/HotelPage/IntroSection/introSection.module.css
@@ -2,7 +2,7 @@
display: grid;
gap: var(--Spacing-x2);
position: relative;
- max-width: 607px; /* Max width according to Figma */
+ max-width: var(--hotel-page-intro-section-width);
}
.mainContent {
diff --git a/components/ContentType/HotelPage/Rooms/index.tsx b/components/ContentType/HotelPage/Rooms/index.tsx
index 4d5766187..54711f597 100644
--- a/components/ContentType/HotelPage/Rooms/index.tsx
+++ b/components/ContentType/HotelPage/Rooms/index.tsx
@@ -6,6 +6,7 @@ import { useIntl } from "react-intl"
import SectionContainer from "@/components/Section/Container"
import Grids from "@/components/TempDesignSystem/Grids"
import ShowMoreButton from "@/components/TempDesignSystem/ShowMoreButton"
+import Body from "@/components/TempDesignSystem/Text/Body"
import Title from "@/components/TempDesignSystem/Text/Title"
import { RoomCard } from "./RoomCard"
@@ -15,7 +16,7 @@ import styles from "./rooms.module.css"
import type { RoomsProps } from "@/types/components/hotelPage/room"
import { HotelHashValues } from "@/types/components/hotelPage/tabNavigation"
-export function Rooms({ rooms }: RoomsProps) {
+export function Rooms({ rooms, preamble }: RoomsProps) {
const intl = useIntl()
const showToggleButton = rooms.length > 3
const [allRoomsVisible, setAllRoomsVisible] = useState(!showToggleButton)
@@ -35,9 +36,12 @@ export function Rooms({ rooms }: RoomsProps) {
className={styles.roomsContainer}
>
-
- {intl.formatMessage({ id: "Rooms" })}
-
+
+
+ {intl.formatMessage({ id: "Rooms" })}
+
+ {preamble && {preamble}}
+
diff --git a/components/ContentType/HotelPage/Rooms/rooms.module.css b/components/ContentType/HotelPage/Rooms/rooms.module.css
index 7e9ad6ac5..e46a11ad9 100644
--- a/components/ContentType/HotelPage/Rooms/rooms.module.css
+++ b/components/ContentType/HotelPage/Rooms/rooms.module.css
@@ -20,3 +20,9 @@
.grid:not(.allVisible) :nth-child(n + 4) {
display: none;
}
+
+.sectionHeader {
+ display: grid;
+ gap: var(--Spacing-x-one-and-half);
+ max-width: var(--hotel-page-intro-section-width);
+}
diff --git a/components/ContentType/HotelPage/hotelPage.module.css b/components/ContentType/HotelPage/hotelPage.module.css
index 3632a4b61..3792293d8 100644
--- a/components/ContentType/HotelPage/hotelPage.module.css
+++ b/components/ContentType/HotelPage/hotelPage.module.css
@@ -8,6 +8,8 @@
var(--hotel-page-navigation-height) + var(--booking-widget-mobile-height) +
var(--Spacing-x2)
);
+ --hotel-page-intro-section-width: 607px; /* Max width according to Figma */
+
display: grid;
grid-template-areas:
"header"
diff --git a/components/ContentType/HotelPage/index.tsx b/components/ContentType/HotelPage/index.tsx
index 8a658bbb6..dccc0bdd2 100644
--- a/components/ContentType/HotelPage/index.tsx
+++ b/components/ContentType/HotelPage/index.tsx
@@ -41,10 +41,6 @@ import type { HotelPageProps } from "@/types/components/hotelPage/hotelPage"
import { HotelHashValues } from "@/types/components/hotelPage/tabNavigation"
import type { Facility } from "@/types/hotel"
import { PageContentTypeEnum } from "@/types/requests/contentType"
-import type {
- ActivitiesCard,
- SpaPage,
-} from "@/types/trpc/routers/contentstack/hotelPage"
export default async function HotelPage({ hotelId }: HotelPageProps) {
const lang = getLang()
@@ -70,6 +66,7 @@ export default async function HotelPage({ hotelId }: HotelPageProps) {
healthAndWellness,
restaurantImages,
conferencesAndMeetings,
+ hotelRoomElevatorPitchText,
hotelContent,
detailedFacilities,
healthFacilities,
@@ -164,7 +161,7 @@ export default async function HotelPage({ hotelId }: HotelPageProps) {
) : null}
-
+