reworked slider + added coaches page

src/libs/image.ts

@@ -1,7 +1,39 @@
-import type { GetImageResult } from 'astro'
+import { TW_SCREENS, TW_WIDTHS } from '@/constants/images'
+import type { GetImageResult, UnresolvedImageTransform } from 'astro'
+import { getImage } from 'astro:assets'
 
 export const imageResultToImageAttributes = (imageResult: GetImageResult): ImportAttributes => ({
   src: imageResult.src,
   srcSet: imageResult.srcSet?.attribute,
   ...imageResult.attributes,
 })
+
+export const optimizeSliderImages = (images: Pick<UnresolvedImageTransform, 'src' | 'alt'>[]) =>
+  Promise.all(
+    images.map(async ({ src, alt }) =>
+      getImage({
+        src,
+        alt,
+        widths: [TW_SCREENS.SM, TW_SCREENS.LG],
+        sizes: `(max-width: ${TW_WIDTHS.LG}px) ${TW_SCREENS.SM}px, ${TW_SCREENS.LG}px`,
+        quality: 80,
+        format: 'webp',
+        loading: 'lazy',
+      }).then(imageResultToImageAttributes)
+    )
+  )
+
+export const optimizeSliderThumbs = (thumbs: Pick<UnresolvedImageTransform, 'src' | 'alt'>[]) =>
+  Promise.all(
+    thumbs.map(async ({ src, alt }) =>
+      getImage({
+        src,
+        alt,
+        widths: [TW_SCREENS.XXS, TW_SCREENS.XS],
+        sizes: `(max-width: ${TW_WIDTHS.LG}px) ${TW_SCREENS.XXS}px, ${TW_SCREENS.XS}px`,
+        quality: 60,
+        format: 'webp',
+        loading: 'lazy',
+      }).then(imageResultToImageAttributes)
+    )
+  )