✨ Add tall hero instead of fullscreen and 2to1 (#2454)

* ✨ Add tall hero instead of fullscreen and 2to1

* 🎨 merge main and lock

* 🎨 remove the ratio

sanityv3/schemas/documents/header/sharedHeaderFields.ts

@@ -111,9 +111,9 @@ const heroRatio = {
   type: 'string',
   options: {
     list: [
-      { title: '2:1', value: '0.5' },
+      { title: 'Tall', value: 'tall' },
+      { title: '2:1(deprecated)', value: '0.5' },
       { title: 'Narrow', value: 'narrow' },
-      { title: 'Full screen', value: 'fullScreen' },
     ],
   },
   hidden: ({ parent }: DocumentType) => {

web/pageComponents/shared/Hero/FullImageHero.tsx

@@ -1,32 +1,18 @@
-import styled from 'styled-components'
 import type { HeroType, ImageWithCaptionData } from 'types'
 import { useSanityLoader } from '../../../lib/hooks/useSanityLoader'
 import Image, { Ratios } from '../SanityImage'
 import { StyledCaption } from '../image/StyledCaption'
 
-const ImgWrapper = styled.div`
-  height: calc(100vh - var(--topbar-height));
-  position: relative;
-`
-
 type FullImageHeroType = {
   figure: ImageWithCaptionData
   ratio?: string
 }
 
 const imageSizes = '100vw'
 
-const FullScreenHero = ({ figure }: FullImageHeroType) => {
-  return (
-    <ImgWrapper>
-      <Image maxWidth={4096} image={figure.image} fill sizes={imageSizes} priority />
-    </ImgWrapper>
-  )
-}
-
 const NarrowHero = ({ figure }: FullImageHeroType) => {
   // 4:3 for small screens and 10:3 for large screens
-  const desktopUrl = useSanityLoader(figure.image, 4096, Ratios.THREE_TO_TEN)
+  const desktopUrl = useSanityLoader(figure.image, 2560, Ratios.THREE_TO_TEN)
 
   // Using picture with mobile and dekstop source to avoid initial load layout shift between aspect ratio
   return (
@@ -36,11 +22,18 @@ const NarrowHero = ({ figure }: FullImageHeroType) => {
     </picture>
   )
 }
+const TallHero = ({ figure }: FullImageHeroType) => {
+  return (
+    <div className="relative w-full h-[53dvh] lg:h-[65dvh] 4xl:h-[67dvh]">
+      <Image maxWidth={2560} fill aspectRatio={Ratios.FOUR_TO_FIVE} image={figure.image} sizes={imageSizes} priority />
+    </div>
+  )
+}
 
 const RatioHero = ({ ratio, figure }: FullImageHeroType) => {
   return (
     <Image
-      maxWidth={4096}
+      maxWidth={2560}
       aspectRatio={Number(ratio) || Ratios.ONE_TO_TWO}
       image={figure.image}
       sizes={imageSizes}
@@ -53,10 +46,10 @@ export const FullImageHero = ({ ratio, figure, hideImageCaption, captionBg }: He
   const getHero = () => {
     if (figure)
       switch (ratio) {
-        case 'fullScreen':
-          return <FullScreenHero figure={figure} />
         case 'narrow':
           return <NarrowHero figure={figure} />
+        case 'tall':
+          return <TallHero figure={figure} />
         default:
           return <RatioHero figure={figure} ratio={ratio} />
       }