diff --git a/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Accessibility/accessibility.module.css b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Accessibility/accessibility.module.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Accessibility/index.tsx b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Accessibility/index.tsx
new file mode 100644
index 000000000..a06224077
--- /dev/null
+++ b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Accessibility/index.tsx
@@ -0,0 +1,3 @@
+export default function AccessibilityAmenity() {
+ return
AccessibilityAmenity
+}
diff --git a/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Breakfast/breakfast.module.css b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Breakfast/breakfast.module.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Breakfast/index.tsx b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Breakfast/index.tsx
new file mode 100644
index 000000000..d3a24f585
--- /dev/null
+++ b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Breakfast/index.tsx
@@ -0,0 +1,3 @@
+export default function BreakfastAmenity() {
+ return BreakfastAmenity
+}
diff --git a/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/CheckInCheckOut/checkInCheckOut.module.css b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/CheckInCheckOut/checkInCheckOut.module.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/CheckInCheckOut/index.tsx b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/CheckInCheckOut/index.tsx
new file mode 100644
index 000000000..94990fd1f
--- /dev/null
+++ b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/CheckInCheckOut/index.tsx
@@ -0,0 +1,5 @@
+import React from "react"
+
+export default function CheckInCheckOutAmenity() {
+ return CheckInAmenity
+}
diff --git a/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Meetings/index.tsx b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Meetings/index.tsx
new file mode 100644
index 000000000..9d8a174eb
--- /dev/null
+++ b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Meetings/index.tsx
@@ -0,0 +1,3 @@
+export default function MeetingsAmenity() {
+ return MeetingsAmenity
+}
diff --git a/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Meetings/meetings.module.css b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Meetings/meetings.module.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/index.tsx b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/index.tsx
new file mode 100644
index 000000000..9f685d1a1
--- /dev/null
+++ b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/index.tsx
@@ -0,0 +1,3 @@
+export default function ParkingAmenity() {
+ return ParkingAmenity
+}
diff --git a/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/parking.module.css b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/parking.module.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/index.ts b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/index.ts
new file mode 100644
index 000000000..65e50750e
--- /dev/null
+++ b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/index.ts
@@ -0,0 +1,5 @@
+export { default as AccessibilityAmenity } from "./Accessibility"
+export { default as BreakfastAmenity } from "./Breakfast"
+export { default as CheckInCheckOutAmenity } from "./CheckInCheckOut"
+export { default as MeetingsAmenity } from "./Meetings"
+export { default as ParkingAmenity } from "./Parking"
diff --git a/components/ContentType/HotelPage/SidePeeks/Amenities/amenities.module.css b/components/ContentType/HotelPage/SidePeeks/Amenities/amenities.module.css
new file mode 100644
index 000000000..b6d3ba651
--- /dev/null
+++ b/components/ContentType/HotelPage/SidePeeks/Amenities/amenities.module.css
@@ -0,0 +1,10 @@
+.wrapper {
+ padding: var(--Spacing-x1);
+ border-bottom: 1px solid var(--Base-Border-Subtle);
+}
+
+.amenity {
+ display: flex;
+ gap: var(--Spacing-x1);
+ padding: var(--Spacing-x-one-and-half) var(--Spacing-x2);
+}
diff --git a/components/ContentType/HotelPage/SidePeeks/Amenities/index.tsx b/components/ContentType/HotelPage/SidePeeks/Amenities/index.tsx
index ba527e549..2dbbaf80c 100644
--- a/components/ContentType/HotelPage/SidePeeks/Amenities/index.tsx
+++ b/components/ContentType/HotelPage/SidePeeks/Amenities/index.tsx
@@ -1,13 +1,23 @@
import { amenities } from "@/constants/routes/hotelPageParams"
+import { HeartIcon } from "@/components/Icons"
import Accordion from "@/components/TempDesignSystem/Accordion"
import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem"
import SidePeek from "@/components/TempDesignSystem/SidePeek"
+import Body from "@/components/TempDesignSystem/Text/Body"
import { getIntl } from "@/i18n"
import { getLang } from "@/i18n/serverContext"
-import { mapFacilityToIconName } from "../../data"
-import Amenity from "./Amenity"
+import { mapFacilityToIcon } from "../../data"
+import {
+ AccessibilityAmenity,
+ BreakfastAmenity,
+ CheckInCheckOutAmenity,
+ MeetingsAmenity,
+ ParkingAmenity,
+} from "./AccordionAmenities"
+
+import styles from "./amenities.module.css"
import type { AmenitiesSidePeekProps } from "@/types/components/hotelPage/sidepeek/amenities"
import { IconName } from "@/types/components/icon"
@@ -17,22 +27,61 @@ export default async function AmenitiesSidePeek({
}: AmenitiesSidePeekProps) {
const lang = getLang()
const intl = await getIntl()
+
+ const filterdList = amenitiesList
+ .filter((filter) => !filter.name.startsWith("Parking"))
+ .filter((filter) => !filter.name.startsWith("Meeting"))
+ .filter((filter) => filter.name !== "Late check-out until 14:00 guaranteed")
+
return (
- {amenitiesList.map((amenity) => {
- const name = mapFacilityToIconName(amenity.id)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {filterdList.map((amenity) => {
+ const Icon = mapFacilityToIcon(amenity.id)
return (
-
-
-
+
+
+ {Icon ? (
+
+ ) : (
+
+ )}
+ {amenity.name}
+
+
)
})}