diff --git a/apps/scandic-web/components/ContentType/HotelPage/Hero/ImageButton/imageButton.module.css b/apps/scandic-web/components/ContentType/HotelPage/Hero/ImageButton/imageButton.module.css new file mode 100644 index 000000000..2fdd28abd --- /dev/null +++ b/apps/scandic-web/components/ContentType/HotelPage/Hero/ImageButton/imageButton.module.css @@ -0,0 +1,29 @@ +.imageButton { + display: flex; + padding: 0; + border-width: 0; + background-color: transparent; + cursor: pointer; + border-radius: var(--Corner-radius-md); + overflow: hidden; + flex: 1; +} + +.image { + object-fit: cover; + width: 100%; + height: 100%; + margin: 0 auto; +} + +@media screen and (max-width: 767px) { + .imageButton { + height: 252px; + } +} + +@media screen and (min-width: 768px) { + .imageButton { + border-radius: var(--Corner-radius-sm); + } +} diff --git a/apps/scandic-web/components/ContentType/HotelPage/Hero/ImageButton/index.tsx b/apps/scandic-web/components/ContentType/HotelPage/Hero/ImageButton/index.tsx new file mode 100644 index 000000000..d3a3a89b8 --- /dev/null +++ b/apps/scandic-web/components/ContentType/HotelPage/Hero/ImageButton/index.tsx @@ -0,0 +1,41 @@ +import { cx } from "class-variance-authority" +import { Button as ButtonRAC } from "react-aria-components" + +import Image from "@scandic-hotels/design-system/Image" + +import styles from "./imageButton.module.css" + +import type { GalleryImage } from "@scandic-hotels/design-system/ImageGallery" + +interface ImageButtonProps { + ariaLabel: string + className?: string + image: GalleryImage + index: number + onPress: (index: number) => void +} + +export function ImageButton({ + ariaLabel, + className, + image, + index, + onPress, +}: ImageButtonProps) { + return ( + onPress(index)} + > + {image.alt} + + ) +} diff --git a/apps/scandic-web/components/ContentType/HotelPage/Hero/Logos/DowntownCamperLarge.tsx b/apps/scandic-web/components/ContentType/HotelPage/Hero/Logos/DowntownCamperLarge.tsx new file mode 100644 index 000000000..aecb31c38 --- /dev/null +++ b/apps/scandic-web/components/ContentType/HotelPage/Hero/Logos/DowntownCamperLarge.tsx @@ -0,0 +1,116 @@ +export function DowntownCamperLogoLarge({ className }: { className?: string }) { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) +} diff --git a/apps/scandic-web/components/ContentType/HotelPage/Hero/Logos/DowntownCamperSmall.tsx b/apps/scandic-web/components/ContentType/HotelPage/Hero/Logos/DowntownCamperSmall.tsx new file mode 100644 index 000000000..77361d8c7 --- /dev/null +++ b/apps/scandic-web/components/ContentType/HotelPage/Hero/Logos/DowntownCamperSmall.tsx @@ -0,0 +1,103 @@ +export function DowntownCamperLogoSmall({ className }: { className?: string }) { + return ( + + + + + + + + + + + + + + + + + + ) +} diff --git a/apps/scandic-web/components/ContentType/HotelPage/Hero/Logos/GrandHotelLarge.tsx b/apps/scandic-web/components/ContentType/HotelPage/Hero/Logos/GrandHotelLarge.tsx new file mode 100644 index 000000000..8607196b2 --- /dev/null +++ b/apps/scandic-web/components/ContentType/HotelPage/Hero/Logos/GrandHotelLarge.tsx @@ -0,0 +1,105 @@ +export function GrandHotelLogoLarge({ className }: { className?: string }) { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + ) +} diff --git a/apps/scandic-web/components/ContentType/HotelPage/Hero/Logos/GrandHotelSmall.tsx b/apps/scandic-web/components/ContentType/HotelPage/Hero/Logos/GrandHotelSmall.tsx new file mode 100644 index 000000000..70d252afc --- /dev/null +++ b/apps/scandic-web/components/ContentType/HotelPage/Hero/Logos/GrandHotelSmall.tsx @@ -0,0 +1,69 @@ +export function GrandHotelLogoSmall({ className }: { className?: string }) { + return ( + + + + + + + + + + + + + + + + + ) +} diff --git a/apps/scandic-web/components/ContentType/HotelPage/Hero/Logos/HaymarketLarge.tsx b/apps/scandic-web/components/ContentType/HotelPage/Hero/Logos/HaymarketLarge.tsx new file mode 100644 index 000000000..4c6a9d302 --- /dev/null +++ b/apps/scandic-web/components/ContentType/HotelPage/Hero/Logos/HaymarketLarge.tsx @@ -0,0 +1,89 @@ +export function HaymarketLogoLarge({ className }: { className?: string }) { + return ( + + + + + + + + + + + + + + + + + + + + + + ) +} diff --git a/apps/scandic-web/components/ContentType/HotelPage/Hero/Logos/HaymarketSmall.tsx b/apps/scandic-web/components/ContentType/HotelPage/Hero/Logos/HaymarketSmall.tsx new file mode 100644 index 000000000..7eeaba3c3 --- /dev/null +++ b/apps/scandic-web/components/ContentType/HotelPage/Hero/Logos/HaymarketSmall.tsx @@ -0,0 +1,53 @@ +export function HaymarketLogoSmall({ className }: { className?: string }) { + return ( + + + + + + + + + + + + + ) +} diff --git a/apps/scandic-web/components/ContentType/HotelPage/Hero/Logos/HotelNorgeLarge.tsx b/apps/scandic-web/components/ContentType/HotelPage/Hero/Logos/HotelNorgeLarge.tsx new file mode 100644 index 000000000..537ffe71a --- /dev/null +++ b/apps/scandic-web/components/ContentType/HotelPage/Hero/Logos/HotelNorgeLarge.tsx @@ -0,0 +1,97 @@ +export function HotelNorgeLogoLarge({ className }: { className?: string }) { + return ( + + + + + + + + + + + + + + + + + + + + + + + + ) +} diff --git a/apps/scandic-web/components/ContentType/HotelPage/Hero/Logos/HotelNorgeSmall.tsx b/apps/scandic-web/components/ContentType/HotelPage/Hero/Logos/HotelNorgeSmall.tsx new file mode 100644 index 000000000..d7cfed06e --- /dev/null +++ b/apps/scandic-web/components/ContentType/HotelPage/Hero/Logos/HotelNorgeSmall.tsx @@ -0,0 +1,101 @@ +export function HotelNorgeLogoSmall({ className }: { className?: string }) { + return ( + + + + + + + + + + + + + + + + + + + + ) +} diff --git a/apps/scandic-web/components/ContentType/HotelPage/Hero/Logos/MarskiLarge.tsx b/apps/scandic-web/components/ContentType/HotelPage/Hero/Logos/MarskiLarge.tsx new file mode 100644 index 000000000..49cbead31 --- /dev/null +++ b/apps/scandic-web/components/ContentType/HotelPage/Hero/Logos/MarskiLarge.tsx @@ -0,0 +1,73 @@ +export function MarskiLogoLarge({ className }: { className?: string }) { + return ( + + + + + + + + + + + + + + + + + + ) +} diff --git a/apps/scandic-web/components/ContentType/HotelPage/Hero/Logos/MarskiSmall.tsx b/apps/scandic-web/components/ContentType/HotelPage/Hero/Logos/MarskiSmall.tsx new file mode 100644 index 000000000..753a2ee4b --- /dev/null +++ b/apps/scandic-web/components/ContentType/HotelPage/Hero/Logos/MarskiSmall.tsx @@ -0,0 +1,44 @@ +export function MarskiLogoSmall({ className }: { className?: string }) { + return ( + + + + + + + + + + + + + + + + ) +} diff --git a/apps/scandic-web/components/ContentType/HotelPage/Hero/Logos/ScandicGoLarge.tsx b/apps/scandic-web/components/ContentType/HotelPage/Hero/Logos/ScandicGoLarge.tsx new file mode 100644 index 000000000..3deed4b21 --- /dev/null +++ b/apps/scandic-web/components/ContentType/HotelPage/Hero/Logos/ScandicGoLarge.tsx @@ -0,0 +1,59 @@ +export function ScandicGoLogoLarge({ className }: { className?: string }) { + return ( + + + + + + + + + + + ) +} diff --git a/apps/scandic-web/components/ContentType/HotelPage/Hero/Logos/ScandicGoSmall.tsx b/apps/scandic-web/components/ContentType/HotelPage/Hero/Logos/ScandicGoSmall.tsx new file mode 100644 index 000000000..1bf205168 --- /dev/null +++ b/apps/scandic-web/components/ContentType/HotelPage/Hero/Logos/ScandicGoSmall.tsx @@ -0,0 +1,59 @@ +export function ScandicGoLogoSmall({ className }: { className?: string }) { + return ( + + + + + + + + + + + ) +} diff --git a/apps/scandic-web/components/ContentType/HotelPage/Hero/Logos/TheDockLarge.tsx b/apps/scandic-web/components/ContentType/HotelPage/Hero/Logos/TheDockLarge.tsx new file mode 100644 index 000000000..5379ba6dc --- /dev/null +++ b/apps/scandic-web/components/ContentType/HotelPage/Hero/Logos/TheDockLarge.tsx @@ -0,0 +1,105 @@ +export function TheDockLogoLarge({ className }: { className?: string }) { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) +} diff --git a/apps/scandic-web/components/ContentType/HotelPage/Hero/Logos/TheDockSmall.tsx b/apps/scandic-web/components/ContentType/HotelPage/Hero/Logos/TheDockSmall.tsx new file mode 100644 index 000000000..f9348ee75 --- /dev/null +++ b/apps/scandic-web/components/ContentType/HotelPage/Hero/Logos/TheDockSmall.tsx @@ -0,0 +1,61 @@ +export function TheDockLogoSmall({ className }: { className?: string }) { + return ( + + + + + + + + + + + + + + + ) +} diff --git a/apps/scandic-web/components/ContentType/HotelPage/Hero/Logos/index.tsx b/apps/scandic-web/components/ContentType/HotelPage/Hero/Logos/index.tsx new file mode 100644 index 000000000..e4265d8a7 --- /dev/null +++ b/apps/scandic-web/components/ContentType/HotelPage/Hero/Logos/index.tsx @@ -0,0 +1,79 @@ +import { Theme } from "@scandic-hotels/common/utils/theme" +import ScandicLogoIcon from "@scandic-hotels/design-system/Icons/ScandicLogoIcon" + +import { DowntownCamperLogoLarge } from "./DowntownCamperLarge" +import { DowntownCamperLogoSmall } from "./DowntownCamperSmall" +import { GrandHotelLogoLarge } from "./GrandHotelLarge" +import { GrandHotelLogoSmall } from "./GrandHotelSmall" +import { HaymarketLogoLarge } from "./HaymarketLarge" +import { HaymarketLogoSmall } from "./HaymarketSmall" +import { HotelNorgeLogoLarge } from "./HotelNorgeLarge" +import { HotelNorgeLogoSmall } from "./HotelNorgeSmall" +import { MarskiLogoLarge } from "./MarskiLarge" +import { MarskiLogoSmall } from "./MarskiSmall" +import { ScandicGoLogoLarge } from "./ScandicGoLarge" +import { ScandicGoLogoSmall } from "./ScandicGoSmall" +import { TheDockLogoLarge } from "./TheDockLarge" +import { TheDockLogoSmall } from "./TheDockSmall" + +interface BrandedHotelLogoProps { + theme: Theme + size?: "small" | "large" + className?: string +} + +export function BrandedHotelLogo({ + theme, + size = "small", + className, +}: BrandedHotelLogoProps) { + const isSmall = size === "small" + + switch (theme) { + case Theme.downtownCamper: + return isSmall ? ( + + ) : ( + + ) + case Theme.grandHotel: + return isSmall ? ( + + ) : ( + + ) + case Theme.haymarket: + return isSmall ? ( + + ) : ( + + ) + case Theme.hotelNorge: + return isSmall ? ( + + ) : ( + + ) + case Theme.marski: + return isSmall ? ( + + ) : ( + + ) + case Theme.scandicGo: + return isSmall ? ( + + ) : ( + + ) + case Theme.theDock: + return isSmall ? ( + + ) : ( + + ) + case Theme.scandic: + default: + return + } +} diff --git a/apps/scandic-web/components/ContentType/HotelPage/Hero/hero.module.css b/apps/scandic-web/components/ContentType/HotelPage/Hero/hero.module.css new file mode 100644 index 000000000..55c05e9a2 --- /dev/null +++ b/apps/scandic-web/components/ContentType/HotelPage/Hero/hero.module.css @@ -0,0 +1,93 @@ +.hotelPageHero { + position: relative; + display: flex; + overflow: hidden; + gap: var(--Space-x05); + width: 100%; + max-width: var(--max-width-page); + z-index: 0; + margin: 0 auto; + + &:not(.isThemed) { + > .imageButton:nth-child(2), + > .imageButton:nth-child(3) { + display: none; + } + } +} + +.logoWrapper { + background-color: var(--Surface-Brand-Primary-1-Default); + display: flex; + align-items: center; + padding: var(--Space-x1) 0; +} + +.seeAllButton { + position: absolute; + bottom: var(--Space-x2); + right: var(--Space-x2); + z-index: 1; +} + +@media screen and (max-width: 767px) { + .hotelPageHero { + &.isThemed { + flex-direction: column; + } + &:not(.isThemed) { + height: 252px; + } + } +} + +@media screen and (min-width: 768px) { + .hotelPageHero { + gap: var(--Space-x1); + height: 270px; + } + + .logo { + height: 100%; + } +} + +@media screen and (min-width: 1367px) { + .hotelPageHero { + padding: 0 var(--Space-x5); + height: 524px; + + &:not(.isThemed):has(> .imageButton:nth-child(2)) { + display: grid; + grid-template-columns: 70% 30%; + grid-template-rows: repeat(2, 1fr); + grid-template-areas: + "main side1" + "main side2"; + + > .imageButton:first-child { + grid-area: main; + } + + > .imageButton:nth-child(2) { + display: initial; + grid-area: side1; + } + + > .imageButton:nth-child(3) { + display: initial; + grid-area: side2; + } + } + } + + .logoWrapper { + padding: var(--Space-x3); + border-radius: var(--Corner-radius-sm); + justify-content: center; + } + + .seeAllButton { + right: calc(var(--Space-x2) + var(--Space-x5)); + } +} diff --git a/apps/scandic-web/components/ContentType/HotelPage/Hero/index.tsx b/apps/scandic-web/components/ContentType/HotelPage/Hero/index.tsx new file mode 100644 index 000000000..e5315bf40 --- /dev/null +++ b/apps/scandic-web/components/ContentType/HotelPage/Hero/index.tsx @@ -0,0 +1,116 @@ +"use client" + +import { cx } from "class-variance-authority" +import { useState } from "react" +import { useIntl } from "react-intl" +import { useMediaQuery } from "usehooks-ts" + +import { DEFAULT_THEME, type Theme } from "@scandic-hotels/common/utils/theme" +import { Button } from "@scandic-hotels/design-system/Button" +import Lightbox from "@scandic-hotels/design-system/Lightbox" + +import { ImageButton } from "./ImageButton" +import { BrandedHotelLogo } from "./Logos" + +import styles from "./hero.module.css" + +import type { GalleryImage } from "@scandic-hotels/design-system/ImageGallery" + +interface HotelPageHeroProps { + images: GalleryImage[] + hotelName: string + theme: Theme +} + +export function HotelPageHero({ + images, + hotelName, + theme, +}: HotelPageHeroProps) { + const intl = useIntl() + const isMobile = useMediaQuery("(max-width: 767px)") + const [lightboxState, setLightboxState] = useState({ + activeIndex: 0, + isOpen: false, + }) + + const isThemed = theme !== DEFAULT_THEME + const seeAllPhotosText = intl.formatMessage({ + id: "common.seeAllPhotos", + defaultMessage: "See all photos", + }) + + return ( +
+ {isThemed ? ( + <> +
+ +
+ setLightboxState({ activeIndex: 0, isOpen: true })} + /> + + ) : ( + <> + {images.slice(0, 3).map((image, index) => ( + + setLightboxState({ activeIndex: index, isOpen: true }) + } + /> + ))} + + )} + {images.length > 1 && ( + <> + + setLightboxState({ activeIndex: 0, isOpen: false })} + isOpen={lightboxState.isOpen} + /> + + )} +
+ ) +} diff --git a/apps/scandic-web/components/ContentType/HotelPage/PreviewImages/index.tsx b/apps/scandic-web/components/ContentType/HotelPage/PreviewImages/index.tsx deleted file mode 100644 index 0361284a3..000000000 --- a/apps/scandic-web/components/ContentType/HotelPage/PreviewImages/index.tsx +++ /dev/null @@ -1,93 +0,0 @@ -"use client" - -import { useState } from "react" -import { Button as ButtonRAC } from "react-aria-components" -import { useIntl } from "react-intl" - -import { Button } from "@scandic-hotels/design-system/Button" -import Image from "@scandic-hotels/design-system/Image" -import Lightbox from "@scandic-hotels/design-system/Lightbox" - -import { mapApiImagesToGalleryImages } from "@/utils/imageGallery" - -import styles from "./previewImages.module.css" - -import type { PreviewImagesProps } from "@/types/components/hotelPage/previewImages" - -export default function PreviewImages({ - images, - hotelName, -}: PreviewImagesProps) { - const intl = useIntl() - const [lightboxState, setLightboxState] = useState({ - activeIndex: 0, - isOpen: false, - }) - - const lightboxImages = mapApiImagesToGalleryImages(images) - - return ( -
- {lightboxImages.slice(0, 3).map((image, index) => ( - - setLightboxState({ - activeIndex: index, - isOpen: true, - }) - } - > - {image.alt} - - ))} - {images.length > 1 && ( - <> - - setLightboxState({ activeIndex: 0, isOpen: false })} - isOpen={lightboxState.isOpen} - /> - - )} -
- ) -} diff --git a/apps/scandic-web/components/ContentType/HotelPage/PreviewImages/previewImages.module.css b/apps/scandic-web/components/ContentType/HotelPage/PreviewImages/previewImages.module.css deleted file mode 100644 index 9255ca90f..000000000 --- a/apps/scandic-web/components/ContentType/HotelPage/PreviewImages/previewImages.module.css +++ /dev/null @@ -1,87 +0,0 @@ -.imageWrapper { - display: grid; - gap: 8px; - position: relative; - width: 100%; - z-index: 0; - max-width: var(--max-width-page); - margin: 0 auto; -} - -.imageButton { - padding: 0; - border-width: 0; - background-color: transparent; - cursor: pointer; - border-radius: var(--Corner-radius-sm); - overflow: hidden; - max-height: 30vh; -} - -.image { - object-fit: cover; - width: 100%; - height: 100%; - margin: 0 auto; -} - -.imageWrapper > :nth-child(2), -.imageWrapper > :nth-child(3) { - display: none; -} - -.seeAllButton { - position: absolute; - bottom: var(--Space-x2); - right: var(--Space-x4); - z-index: 1; -} - -@media screen and (min-width: 768px) { - .seeAllButton { - right: calc(var(--Space-x2) + var(--Layout-Tablet-Margin-Margin-min)); - } -} - -@media screen and (min-width: 1367px) { - .imageWrapper { - padding: 0 var(--Space-x5); - } - - .imageButton { - max-height: 540px; - } - - .desktopGrid > :nth-child(3) { - grid-area: side2; - } - - .seeAllButton { - right: var(--Space-x7); - } - - .imageWrapper:has(> :nth-child(2)) { - grid-template-columns: 70% 30%; - grid-template-rows: repeat(2, 16.625rem); - grid-template-areas: - "main side1" - "main side2"; - - > :first-child { - grid-area: main; - } - - > :nth-child(2), - > :nth-child(3) { - display: initial; - } - - > :nth-child(2) { - grid-area: side1; - } - - .imageButton { - max-height: none; - } - } -} diff --git a/apps/scandic-web/components/ContentType/HotelPage/index.tsx b/apps/scandic-web/components/ContentType/HotelPage/index.tsx index 63628dd3a..00b52abb3 100644 --- a/apps/scandic-web/components/ContentType/HotelPage/index.tsx +++ b/apps/scandic-web/components/ContentType/HotelPage/index.tsx @@ -16,9 +16,11 @@ import { getMeetingRooms } from "@/lib/trpc/memoizedRequests" import AccordionSection from "@/components/Blocks/Accordion" import Breadcrumbs from "@/components/Breadcrumbs" import HotelCampaigns from "@/components/ContentType/HotelPage/Campaigns" +import { HotelPageHero } from "@/components/ContentType/HotelPage/Hero" import BreadcrumbsSkeleton from "@/components/TempDesignSystem/Breadcrumbs/BreadcrumbsSkeleton" import { getIntl } from "@/i18n" import { getLang } from "@/i18n/serverContext" +import { mapApiImagesToGalleryImages } from "@/utils/imageGallery" import { generateHotelSchema } from "@/utils/jsonSchemas" import MapCard from "./Map/MapCard" @@ -37,7 +39,6 @@ import AmenitiesList from "./AmenitiesList" import DialogshiftWidget from "./DialogshiftWidget" import { Facilities } from "./Facilities" import IntroSection from "./IntroSection" -import PreviewImages from "./PreviewImages" import { Rooms } from "./Rooms" import SidePeeks from "./SidePeeks" import TabNavigation from "./TabNavigation" @@ -147,6 +148,7 @@ export default async function HotelPage({ const trackingHotelData = getTrackingHotelData(hotelData.hotel) const isThemed = hotelTheme !== DEFAULT_THEME + const galleryImages = mapApiImagesToGalleryImages(images ?? []) return (
@@ -167,8 +169,12 @@ export default async function HotelPage({ isThemed={isThemed ? "mobileOnly" : undefined} /> - {images?.length ? ( - + {galleryImages.length ? ( + ) : null}