fix(SW-872): refactor to align design

app/[lang]/(live)/(public)/[contentType]/[uid]/@breadcrumbs/page.tsx

@@ -4,11 +4,16 @@ import Breadcrumbs from "@/components/Breadcrumbs"
 import BreadcrumbsSkeleton from "@/components/TempDesignSystem/Breadcrumbs/BreadcrumbsSkeleton"
 import { setLang } from "@/i18n/serverContext"
 
-import type { LangParams, PageArgs } from "@/types/params"
+import type { ContentTypeParams, LangParams, PageArgs } from "@/types/params"
 
-export default function PageBreadcrumbs({ params }: PageArgs<LangParams>) {
+export default function PageBreadcrumbs({
+  params,
+}: PageArgs<LangParams & ContentTypeParams>) {
   setLang(params.lang)
 
+  if (params.contentType === "hotel-page") {
+    return null
+  }
   return (
     <Suspense fallback={<BreadcrumbsSkeleton />}>
       <Breadcrumbs />

components/ContentType/HotelPage/hotelPage.module.css

@@ -9,7 +9,7 @@
   );
   display: grid;
   grid-template-areas:
-    "hotelImages"
+    "header"
     "tabNavigation"
     "mainSection"
     "mapContainer";
@@ -17,9 +17,9 @@
   max-width: var(--max-width);
 }
 
-.hotelImages {
-  grid-area: hotelImages;
+.header {
   background-color: var(--Base-Surface-Subtle-Normal);
+  grid-area: header;
 }
 
 .mainSection {
@@ -54,7 +54,7 @@
 @media screen and (min-width: 1367px) {
   .pageContainer {
     grid-template-areas:
-      "hotelImages mapContainer"
+      "header mapContainer"
       "tabNavigation mapContainer"
       "mainSection mapContainer";
     grid-template-columns: 1fr var(--hotel-page-map-desktop-width);

components/ContentType/HotelPage/index.tsx

@@ -1,12 +1,15 @@
 import { notFound } from "next/navigation"
+import { Suspense } from "react"
 
 import { restaurantAndBar } from "@/constants/routes/hotelPageParams"
 import { env } from "@/env/server"
 import { getHotelData, getHotelPage } from "@/lib/trpc/memoizedRequests"
 
 import AccordionSection from "@/components/Blocks/Accordion"
+import Breadcrumbs from "@/components/Breadcrumbs"
 import SidePeekProvider from "@/components/SidePeeks/SidePeekProvider"
 import Alert from "@/components/TempDesignSystem/Alert"
+import BreadcrumbsSkeleton from "@/components/TempDesignSystem/Breadcrumbs/BreadcrumbsSkeleton"
 import SidePeek from "@/components/TempDesignSystem/SidePeek"
 import { getIntl } from "@/i18n"
 import { getLang } from "@/i18n/serverContext"
@@ -117,14 +120,18 @@ export default async function HotelPage({ hotelId }: HotelPageProps) {
           __html: JSON.stringify(jsonSchema.jsonLd),
         }}
       />
-      <div className={styles.hotelImages}>
+      <header className={styles.header}>
+        <Suspense fallback={<BreadcrumbsSkeleton />}>
+          <Breadcrumbs />
+        </Suspense>
         {images?.length && <PreviewImages images={images} hotelName={name} />}
-      </div>
+      </header>
       <TabNavigation
         restaurantTitle={getRestaurantHeading(detailedFacilities)}
         hasActivities={!!activitiesCard}
         hasFAQ={!!faq.accordions.length}
       />
+
       <main className={styles.mainSection}>
         <div id={HotelHashValues.overview} className={styles.overview}>
           <div className={styles.introContainer}>