reworked slider + added coaches page

src/pages/coaches/[...slug].astro

@@ -0,0 +1,48 @@
+---
+import BaseLayout from '@/layouts/BaseLayout.astro'
+import { getCollection } from 'astro:content'
+import { optimizeSliderImages, optimizeSliderThumbs } from '@/libs/image'
+import Section from '@/components/Section.astro'
+import { SwiperWithThumbs } from '@/components/swiper/SwiperWithThumbs'
+import Header from '@/components/header/Header.astro'
+
+export const getStaticPaths = async () => {
+  const coaches = await getCollection('coaches')
+  return coaches.map(({ slug, ...props }) => ({ params: { slug }, props }))
+}
+
+const { data, render } = Astro.props
+const { gallery, cover } = data
+const { Content } = await render()
+const galleryWithCover = gallery ? [cover, ...gallery] : undefined
+const [thumbs, optimizedGallery] = galleryWithCover
+  ? await Promise.all([
+      optimizeSliderThumbs(
+        galleryWithCover.map((src, index) => ({ src, alt: `gallery-thumb-${index}` }))
+      ),
+      optimizeSliderImages(
+        galleryWithCover.map((src, index) => ({ src, alt: `gallery-slide-${index}` }))
+      ),
+    ])
+  : [undefined, undefined]
+---
+
+<BaseLayout title={data.name}>
+  <Header />
+  {
+    optimizedGallery && (
+      <Section>
+        <SwiperWithThumbs
+          swiperClassName="h-[540px]"
+          client:load
+          images={optimizedGallery}
+          thumbs={thumbs}
+        />
+      </Section>
+    )
+  }
+
+  <Section>
+    <Content />
+  </Section>
+</BaseLayout>