- one more time rework slider

- rework design system
- fill trainer page

src/components/coaches/CoachCard.tsx

@@ -0,0 +1,33 @@
+import { useTranslations } from '@/i18n/utils'
+import type { CollectionEntry } from 'astro:content'
+import rightArrowIconSrc from '@/assets/icons/RightArrowIcon.svg'
+
+export type CoachCardProps = CollectionEntry<'coaches'> & { lang?: string }
+
+export const CoachCard: React.FC<CoachCardProps> = ({ data, lang, slug }) => {
+  const { name, description, cover, coverAlt } = data
+  const t = useTranslations(lang)
+  const coachPageLink = `/coaches/${slug}`
+
+  return (
+    <div className="aspect-3/4 relative h-full max-w-[262px] overflow-hidden rounded-3xl text-white md:max-w-[320px] lg:max-w-[400px]">
+      <img
+        {...cover}
+        loading="lazy"
+        decoding="async"
+        className="h-full w-full object-cover object-top mix-blend-luminosity"
+        alt={coverAlt}
+      />
+      <a
+        href={coachPageLink}
+        data-astro-prefetch
+        className="absolute inset-0 flex flex-col justify-end bg-gradient-to-t from-black/80 via-transparent p-2 lg:p-3"
+      >
+        <div className="flex items-center justify-between gap-4">
+          <h3 className="text-xl font-bold uppercase text-text-light">{name}</h3>
+          <img {...rightArrowIconSrc} width={50} height={50} />
+        </div>
+      </a>
+    </div>
+  )
+}