fix: quicker loading

src/components/Banner/Banner.tsx

@@ -1,12 +1,24 @@
+import Image from 'next/image'
+import type { CSSProperties } from 'react'
 import { Logo } from '@/components/Logo/Logo'
+import type { Media } from '@/payload-types'
 import styles from "./styles.module.scss"
 
+const backgroundSizeToObjectFit: Record<
+  'cover' | 'contain' | 'auto',
+  CSSProperties['objectFit']
+> = {
+  cover: 'cover',
+  contain: 'contain',
+  auto: 'none',
+}
+
 export interface BannerProps {
   textLine1?: string | null
   textLine2?: string | null
   textLine3?: string | null
   backgroundColor?: string | null
-  backgroundImage?: string | null
+  backgroundImage?: Media | null
   backgroundPosition?:
     | 'center center'
     | 'top center'
@@ -30,15 +42,27 @@ export const Banner = ({
   backgroundPosition = 'center center',
   backgroundSize = 'cover',
 }: BannerProps) => {
-  const bannerStyle: React.CSSProperties = {
+  const bannerStyle: CSSProperties = {
     ...(backgroundColor && { backgroundColor }),
-    ...(backgroundImage && { backgroundImage: `url(${backgroundImage})` }),
-    ...(backgroundPosition && { backgroundPosition }),
-    ...(backgroundSize && { backgroundSize }),
   }
 
   return (
     <div className={styles.banner} style={bannerStyle}>
+      {backgroundImage?.url && (
+        <Image
+          src={backgroundImage.url}
+          alt={backgroundImage.alt ?? ''}
+          fill
+          priority
+          sizes="100vw"
+          unoptimized
+          className={styles.backgroundImage}
+          style={{
+            objectFit: backgroundSizeToObjectFit[backgroundSize ?? 'cover'],
+            objectPosition: backgroundPosition ?? 'center center',
+          }}
+        />
+      )}
       <div className={styles.logo}>
         <Logo color={"#ffffff33"} height={200} />
       </div>

src/components/Banner/styles.module.scss

@@ -4,14 +4,17 @@
   position: relative;
   height: 634px;
   background-color: $shade1;
-  background-image: url("banner2.jpg");
-  background-size: cover;
-  background-position: center center;
   opacity: 0.7;
+  overflow: hidden;
+}
+
+.backgroundImage {
+  z-index: 0;
 }
 
 .logo {
   position: absolute;
+  z-index: 1;
   bottom: 20px;
   left: 30px;
 }
@@ -21,6 +24,7 @@
   color: $white;
   font-family: var(--header-font);
   position: absolute;
+  z-index: 1;
   bottom: 50px;
   right: 0;
   width: 50vw;

src/compositions/Blocks/Blocks.tsx

@@ -148,10 +148,9 @@ export function Blocks({ content }: BlocksProps) {
           }
 
           if (item.blockType === 'banner') {
-            const bannerImageUrl =
-              typeof item.backgroundImage === 'object' &&
-              item.backgroundImage?.url
-                ? item.backgroundImage.url
+            const backgroundImage =
+              typeof item.backgroundImage === 'object'
+                ? item.backgroundImage
                 : undefined
             return (
               <Banner
@@ -160,7 +159,7 @@ export function Blocks({ content }: BlocksProps) {
                 textLine2={item.textLine2}
                 textLine3={item.textLine3}
                 backgroundColor={item.backgroundColor}
-                backgroundImage={bannerImageUrl}
+                backgroundImage={backgroundImage}
                 backgroundPosition={item.backgroundPosition}
                 backgroundSize={item.backgroundSize}
               />