- one more time rework slider

- rework design system
- fill trainer page

src/pages/index.astro

@@ -2,31 +2,23 @@
 import { useTranslations } from '@/i18n/utils'
 import BaseLayout from '../layouts/BaseLayout.astro'
 import Section from '@/components/Section.astro'
-import { SwiperWithNav } from '@/components/swiper'
 import Header, { type HeaderProps } from '@/components/header/Header.astro'
 import Footer from '@/components/Footer.astro'
 
 import type { CollectionEntry } from 'astro:content'
 import { getEntry } from 'astro:content'
-import CoachCard from '@/components/CoachCard.astro'
-import ServiceCard from '@/components/ServiceCard.astro'
 import Marquee from '@/components/Marquee.astro'
 import { Reviews, type OptimizedReview } from '@/components/Reviews.tsx'
 import Hero from '@/components/Hero.astro'
 import { getImage } from 'astro:assets'
 import { imageResultToImageAttributes, optimizeSliderImages } from '@/libs/image'
 import { getCollection } from 'astro:content'
+import { Services } from '@/components/services/Services'
+import { GymGallery } from '@/components/GymGallery'
+import { Coaches } from '@/components/coaches/Coaches'
 
 type Props = CollectionEntry<'pages'>['data']
 
-const navItems: HeaderProps['navItems'] = [
-  { key: 'nav.coaches', href: '#coaches' },
-  { key: 'nav.slider', href: '#image-slider' },
-  { key: 'nav.services', href: '#services' },
-  { key: 'nav.reviews', href: '#reviews' },
-  { key: 'nav.contact', href: '#contacts' },
-]
-
 const { lang } = Astro.params
 const [page, coaches] = await Promise.all([getEntry('pages', 'main'), getCollection('coaches')])
 const { slider, services, hero, marquee, reviews, footer } = page?.data || {}
@@ -57,7 +49,7 @@ const t = useTranslations(lang)
 ---
 
 <BaseLayout title={t('home.title')}>
-  <Header lang={lang} navItems={navItems} />
+  <Header lang={lang} />
 
   {hero && <Hero {...hero} />}
 
@@ -72,11 +64,7 @@ const t = useTranslations(lang)
   {
     coaches.length > 0 && (
       <Section id="coaches" title={t('coaches.title')} description={t('coaches.subtitle')}>
-        <div class="grid place-items-center gap-4 sm:grid-cols-2 md:gap-8 lg:grid-cols-3">
-          {coaches.map((coach) => (
-            <CoachCard {...coach} lang={lang} />
-          ))}
-        </div>
+        <Coaches client:load coaches={coaches} lang={lang} />
       </Section>
     )
   }
@@ -89,14 +77,7 @@ const t = useTranslations(lang)
         description={t('slider.subtitle')}
         className="bg-bg-light"
       >
-        <div class="-ml-4 flex w-[calc(100%+(1rem*2))] md:ml-0 md:w-full">
-          <SwiperWithNav
-            className="h-[540px]"
-            slideClass="object-cover sm:object-contain"
-            client:visible
-            images={optimizedSlider}
-          />
-        </div>
+        <GymGallery client:visible images={optimizedSlider} />
       </Section>
     )
   }
@@ -104,11 +85,7 @@ const t = useTranslations(lang)
   {
     services && (
       <Section id="services" title={t('services.title')}>
-        <div class="grid place-items-center gap-4 md:grid-cols-2 md:gap-8 lg:grid-cols-3">
-          {services.map((service) => (
-            <ServiceCard {...service} />
-          ))}
-        </div>
+        <Services client:visible services={services} />
       </Section>
     )
   }
@@ -116,9 +93,7 @@ const t = useTranslations(lang)
   {
     optimizedReviews && (
       <Section id="reviews" title={t('reviews.title')}>
-        <div class="-mx-4 flex w-[calc(100%+2rem)] md:-mx-16 md:w-[calc(100%+8rem)] lg:-mx-24 lg:w-[calc(100%+12rem)]">
-          <Reviews client:visible reviews={optimizedReviews} lang={lang} />
-        </div>
+        <Reviews client:visible reviews={optimizedReviews} lang={lang} />
       </Section>
     )
   }