feat(BOOK-734): Added same layout for hero image and hero video on collection pages

Approved-by: Matilda Landström

apps/scandic-web/components/ContentType/CollectionPage/collectionPage.module.css

@@ -8,10 +8,10 @@
   background-color: var(--Base-Surface-Subtle-Normal);
 }
 
-.videoWrapper {
+.hero {
+  position: relative;
   width: 100%;
   height: 520px;
-  position: relative;
   padding: var(--Space-x2) 0;
 
   .heading {
@@ -23,11 +23,25 @@
     align-content: end;
     padding-bottom: var(--Space-x15);
     pointer-events: none;
+    z-index: 1;
 
     & > * {
       pointer-events: auto;
     }
   }
+
+  &.hasOverlay::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(
+      180deg,
+      rgba(255, 255, 255, 0) 0%,
+      rgba(31, 28, 27, 0.25) 48.08%,
+      rgba(31, 28, 27, 0.8) 100%
+    );
+    pointer-events: none;
+  }
 }
 
 .heroVideo {
@@ -43,7 +57,6 @@
   width: var(--max-width-content);
   margin: 0 auto;
   justify-items: start;
-  z-index: 1;
 }
 
 .intro {
@@ -72,7 +85,7 @@
 }
 
 @media (min-width: 1367px) {
-  .videoWrapper {
+  .hero {
     height: 480px;
 
     .headerContent {

apps/scandic-web/components/ContentType/CollectionPage/index.tsx

@@ -1,6 +1,8 @@
+import { cx } from "class-variance-authority"
 import { Suspense } from "react"
 
 import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
+import Image from "@scandic-hotels/design-system/Image"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { TrackingSDK } from "@scandic-hotels/tracking/TrackingSDK"
 
@@ -9,7 +11,6 @@ import { serverClient } from "@/lib/trpc/server"
 import Blocks from "@/components/Blocks"
 import Breadcrumbs from "@/components/Breadcrumbs"
 import HeaderDynamicContent from "@/components/Headers/DynamicContent"
-import Hero from "@/components/Hero"
 import { HeroVideo } from "@/components/HeroVideo"
 import MeetingPackageWidget from "@/components/MeetingPackageWidget"
 import BreadcrumbsSkeleton from "@/components/TempDesignSystem/Breadcrumbs/BreadcrumbsSkeleton"
@@ -36,26 +37,42 @@ export async function CollectionPage() {
     size: "contentWidth",
   }
 
+  const showHero = hero_video || hero_image
+
   return (
     <>
-      {hero_video ? null : (
+      {showHero ? null : (
         <Suspense fallback={<BreadcrumbsSkeleton {...breadCrumbsVariants} />}>
           <Breadcrumbs {...breadCrumbsVariants} />
         </Suspense>
       )}
       <section className={styles.pageSection}>
         <header className={styles.header}>
-          {hero_video ? (
+          {showHero ? (
             <>
-              <div className={styles.videoWrapper}>
+              <div
-                <HeroVideo
+                className={cx(styles.hero, {
-                  className={styles.heroVideo}
+                  [styles.hasOverlay]: hero_image && !hero_video,
-                  sources={hero_video.sources}
+                })}
-                  focalPoint={hero_video.focalPoint}
+              >
-                  captions={hero_video.captions}
+                {hero_video ? (
-                  isFullWidth
+                  <HeroVideo
-                  hasOverlay
+                    className={styles.heroVideo}
-                />
+                    sources={hero_video.sources}
+                    focalPoint={hero_video.focalPoint}
+                    captions={hero_video.captions}
+                    isFullWidth
+                    hasOverlay
+                  />
+                ) : null}
+                {hero_image && !hero_video ? (
+                  <Image
+                    alt={hero_image.meta.alt || hero_image.meta.caption || ""}
+                    src={hero_image.url}
+                    focalPoint={hero_image.focalPoint}
+                    fill
+                  />
+                ) : null}
                 <div className={styles.headerContent}>
                   <Typography variant="Title/lg">
                     <h1 className={styles.heading}>{header.heading}</h1>
@@ -81,7 +98,7 @@ export async function CollectionPage() {
           ) : null}
 
           <div className={styles.headerContent}>
-            {hero_video ? (
+            {showHero ? (
               <Typography variant="Body/Lead text">
                 <p>{header.preamble}</p>
               </Typography>
@@ -114,14 +131,6 @@ export async function CollectionPage() {
         </header>
 
         <div className={styles.content}>
-          {!hero_video && hero_image ? (
-            <Hero
-              alt={hero_image.meta.alt || hero_image.meta.caption || ""}
-              src={hero_image.url}
-              focalPoint={hero_image.focalPoint}
-              dimensions={hero_image.dimensions}
-            />
-          ) : null}
           <main className={styles.main}>
             {meeting_package?.show_widget && (
               <MeetingPackageWidget