- one more time rework slider

- rework design system
- fill trainer page

src/components/services/Services.tsx

@@ -0,0 +1,49 @@
+import type { servicesSchema } from '@/content.config'
+import type { z } from 'astro:content'
+import { useState } from 'react'
+import { SwiperSlide } from 'swiper/react'
+import { CharachteristicCard } from './CharachteristicCard'
+import { cn } from '@/libs/cn'
+import { SimpleSwiper } from '../swiper/SimpleSwiper'
+
+export type ServicesProps = {
+  services: z.infer<typeof servicesSchema>[]
+}
+
+export const Services: React.FC<ServicesProps> = ({ services }) => {
+  const [serviceId, setServiceId] = useState(0)
+  const selectedService = services[serviceId]
+  const isSelected = (index: number) => index === serviceId
+
+  return (
+    <div className="flex flex-col gap-5">
+      <SimpleSwiper spaceBetween={8}>
+        {services.map((service, index) => (
+          <SwiperSlide style={{ width: 'auto' }} key={index}>
+            <button
+              className={cn('tag-btn', isSelected(index) && 'tag-btn-active')}
+              onClick={() => setServiceId(index)}
+            >
+              {service.title}
+            </button>
+          </SwiperSlide>
+        ))}
+      </SimpleSwiper>
+      <SimpleSwiper>
+        {selectedService.charachteristics?.map((charachteristic, index) => (
+          <SwiperSlide
+            className="aspect-3/4 !h-auto w-full max-w-[262px] md:max-w-[320px]"
+            key={index}
+          >
+            <CharachteristicCard
+              {...charachteristic}
+              title={charachteristic.text}
+              description={selectedService.description}
+              link={selectedService.link}
+            />
+          </SwiperSlide>
+        ))}
+      </SimpleSwiper>
+    </div>
+  )
+}