From 9913c097557f8471480a0a256341eee6d4bef662 Mon Sep 17 00:00:00 2001
From: Salam-vsem <minato.namikaze.best.hokage@gmail.com>
Date: Wed, 21 May 2025 00:00:21 +0300
Subject: [PATCH] section h-full

---
 src/components/Footer.astro                     |  2 +-
 src/components/GymGallery.tsx                   |  9 ++++++---
 src/components/Marquee.astro                    |  2 +-
 src/components/Section.astro                    |  2 +-
 src/components/coaches/CoachCard.tsx            |  4 ++--
 src/components/coaches/Coaches.tsx              | 17 +++++++++++++++--
 src/components/swiper/MediaSwiper.tsx           |  4 ++--
 src/components/swiper/MediaSwiperWithThumbs.tsx |  8 +++++++-
 src/components/swiper/simple-swiper.css         |  7 +++++++
 src/i18n/ui.ts                                  |  2 +-
 src/pages/coaches/[...slug].astro               |  4 ++--
 src/pages/index.astro                           |  4 ++--
 src/styles/global.css                           |  2 +-
 tailwind.config.js                              |  7 ++++++-
 14 files changed, 54 insertions(+), 20 deletions(-)

diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index dd741b1..1974c33 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -14,7 +14,7 @@ const { lang, socialMediaLinks } = Astro.props
 const t = useTranslations(lang)
 ---
 
-<footer id="contacts" class="flex flex-col items-center gap-4 text-center md:gap-6">
+<footer id="contacts" class="flex w-full flex-col items-center gap-4 text-center md:gap-6">
   <iframe
     transition:persist
     src=`https://yandex.ru/map-widget/v1/?um=constructor%3A069b17526dc83cbf87c488f13ae089eb3af0f8f74af57e1be82e183434693562&source=constructor&scroll=false&lang=${lang}`
diff --git a/src/components/GymGallery.tsx b/src/components/GymGallery.tsx
index 175a2b5..28abfe9 100644
--- a/src/components/GymGallery.tsx
+++ b/src/components/GymGallery.tsx
@@ -9,15 +9,18 @@ export const GymGallery: React.FC<GymGalleryProps> = ({ images }) => {
   return (
     <MediaSwiper
       breakpoints={{
-        [TW_SCREENS.MD]: {
+        [TW_SCREENS.SM]: {
           slidesPerView: 2,
         },
-        [TW_SCREENS.LG]: {
+        [TW_SCREENS.MD]: {
           slidesPerView: 3,
         },
+        [TW_SCREENS.LG]: {
+          slidesPerView: 4,
+        },
       }}
       images={images}
-      imageClassName="aspect-3/4 max-w-[50vh] md:max-w-none mx-auto lg:max-h-[calc(90vh-144px)]"
+      imageClassName="aspect-3/4 max-w-[50vh] sm:max-w-[33vh] lg:max-w-[45vh] mx-auto"
     />
   )
 }
diff --git a/src/components/Marquee.astro b/src/components/Marquee.astro
index 7264246..6d0bec9 100644
--- a/src/components/Marquee.astro
+++ b/src/components/Marquee.astro
@@ -11,7 +11,7 @@ const repeatedTexts =
   texts.length < 10 ? Array.from({ length: 10 / texts.length }, () => texts).flat() : texts
 ---
 
-<div class="flex h-full w-max animate-marquee items-center gap-10 text-5xl font-bold uppercase">
+<div class="flex h-full w-max animate-marquee items-center gap-10 text-5xl font-bold uppercase bg-brand">
   {
     repeatedTexts.map((text) => (
       <>
diff --git a/src/components/Section.astro b/src/components/Section.astro
index 45c0ec7..d0f814e 100644
--- a/src/components/Section.astro
+++ b/src/components/Section.astro
@@ -14,7 +14,7 @@ const { title, description, className, id } = Astro.props
 <section
   id={id}
   class={cn(
-    'overflow-hidden w-full flex flex-col gap-5 py-16 px-5 md:px-10 lg:p-24 md:gap-12',
+    'overflow-hidden w-full flex flex-col gap-5 py-16 px-5 md:px-10 lg:p-24 md:gap-12 h-full justify-center',
     className
   )}
 >
diff --git a/src/components/coaches/CoachCard.tsx b/src/components/coaches/CoachCard.tsx
index b5bd490..8fd185b 100644
--- a/src/components/coaches/CoachCard.tsx
+++ b/src/components/coaches/CoachCard.tsx
@@ -8,12 +8,12 @@ export const CoachCard: React.FC<CoachCardProps> = ({ data, slug }) => {
   const coachPageLink = `/coaches/${slug}`
 
   return (
-    <div className="relative aspect-3/4 h-full max-w-[262px] overflow-hidden rounded-3xl text-white md:max-w-[320px] lg:max-w-[400px]">
+    <div className="relative mx-auto aspect-3/4 max-w-[45vh] overflow-hidden rounded-3xl text-white">
       <img
         {...cover}
         loading="lazy"
         decoding="async"
-        className="h-full w-full object-cover object-top mix-blend-luminosity"
+        className="w-full object-cover object-top mix-blend-luminosity"
         alt={coverAlt}
       />
       <a
diff --git a/src/components/coaches/Coaches.tsx b/src/components/coaches/Coaches.tsx
index 89c298b..183ef6a 100644
--- a/src/components/coaches/Coaches.tsx
+++ b/src/components/coaches/Coaches.tsx
@@ -2,17 +2,30 @@ import type { CollectionEntry } from 'astro:content'
 import { SimpleSwiper } from '../swiper/SimpleSwiper'
 import { SwiperSlide } from 'swiper/react'
 import { CoachCard } from './CoachCard'
+import { isAboveBreakpoint } from '@/libs/breakpoint'
+import { TW_SCREENS } from '@/constants/images'
 
 type CoachesProps = {
   coaches: CollectionEntry<'coaches'>[]
   lang?: string
 }
 
+const isXs = isAboveBreakpoint('XS')
+
 export const Coaches: React.FC<CoachesProps> = ({ coaches, lang }) => {
   return (
-    <SimpleSwiper>
+    <SimpleSwiper
+      slidesPerView={1}
+      freeMode={isXs}
+      pagination={{ type: 'fraction', enabled: !isXs }}
+      breakpoints={{
+        [TW_SCREENS.XS]: {
+          slidesPerView: 'auto',
+        },
+      }}
+    >
       {coaches.map((coach, index) => (
-        <SwiperSlide className="!h-auto" style={{ width: 'auto' }} key={index}>
+        <SwiperSlide key={index} className="w-full xs:!w-auto">
           <CoachCard {...coach} lang={lang} />
         </SwiperSlide>
       ))}
diff --git a/src/components/swiper/MediaSwiper.tsx b/src/components/swiper/MediaSwiper.tsx
index eeb16fb..3713cac 100644
--- a/src/components/swiper/MediaSwiper.tsx
+++ b/src/components/swiper/MediaSwiper.tsx
@@ -27,7 +27,7 @@ export const MediaSwiper = React.forwardRef<SwiperRef, MediaSwiperProps>(
         loop={true}
         watchSlidesProgress={true}
         style={{ overflow: 'hidden' }}
-        className={cn('h-full w-full', className)}
+        className={cn('w-full rounded-3xl', className)}
         {...otherProps}
       >
         {images.map((image, index) => (
@@ -38,7 +38,7 @@ export const MediaSwiper = React.forwardRef<SwiperRef, MediaSwiperProps>(
               decoding="async"
               fetchPriority={index === 0 ? 'high' : 'auto'}
               className={cn(
-                'aspect-video h-full w-full rounded-3xl object-cover object-center',
+                'aspect-video w-full rounded-3xl object-cover object-center',
                 imageClassName
               )}
             />
diff --git a/src/components/swiper/MediaSwiperWithThumbs.tsx b/src/components/swiper/MediaSwiperWithThumbs.tsx
index 4f0bc41..fb824b9 100644
--- a/src/components/swiper/MediaSwiperWithThumbs.tsx
+++ b/src/components/swiper/MediaSwiperWithThumbs.tsx
@@ -7,6 +7,7 @@ import 'swiper/css/pagination'
 import 'swiper/css/thumbs'
 import 'swiper/css/free-mode'
 import { MediaSwiper, type MediaSwiperProps } from './MediaSwiper'
+import { TW_SCREENS } from '@/constants/images'
 
 type MediaSwiperPropsWithThumbs = MediaSwiperProps & {
   thumbs: ImportAttributes[]
@@ -29,7 +30,12 @@ export const MediaSwiperWithThumbs: React.FC<MediaSwiperPropsWithThumbs> = ({
       />
       <Swiper
         onSwiper={setThumbsSwiper}
-        spaceBetween={12}
+        spaceBetween={8}
+        breakpoints={{
+          [TW_SCREENS.MD]: {
+            spaceBetween: 12,
+          },
+        }}
         slidesPerView={4}
         freeMode={true}
         watchSlidesProgress={true}
diff --git a/src/components/swiper/simple-swiper.css b/src/components/swiper/simple-swiper.css
index 6389a03..c1571b5 100644
--- a/src/components/swiper/simple-swiper.css
+++ b/src/components/swiper/simple-swiper.css
@@ -1,6 +1,13 @@
 .simple-swiper {
   width: 100%;
+  /* height: 100%; */
   overflow: visible;
+  display: flex;
+  flex-direction: column;
+}
+
+.swiper-wrapper {
+  height: auto;
 }
 
 .swiper-pagination-fraction {
diff --git a/src/i18n/ui.ts b/src/i18n/ui.ts
index 8e7d2b3..29f6c47 100644
--- a/src/i18n/ui.ts
+++ b/src/i18n/ui.ts
@@ -31,7 +31,7 @@ export const ui = {
     'coaches.subtitle': 'Вашему вниманию! Представляем наш тренерский состав',
     'coaches.link': 'Подробнее',
     // Slider Section
-    'slider.title': 'НАШ <span class="text-brand">ТРЕНАЖЕРНЫЙ ЗАЛ</span>',
+    'slider.title': 'НАШ <span class="text-brand">ЗАЛ</span>',
     'slider.subtitle': 'Современное оборудование в просторном зале',
     // Services Section
     'services.title': 'НАШИ <span class="text-brand">УСЛУГИ</span>',
diff --git a/src/pages/coaches/[...slug].astro b/src/pages/coaches/[...slug].astro
index 618a5e8..276ddf9 100644
--- a/src/pages/coaches/[...slug].astro
+++ b/src/pages/coaches/[...slug].astro
@@ -36,13 +36,13 @@ const [thumbs, optimizedGallery] = galleryWithCover
   <Header />
   {
     optimizedGallery && (
-      <Section className="mt-[var(--header-height)] md:mt-0">
+      <Section className="mt-[var(--header-height)] md:mt-0 overflow-auto h-auto">
         <div class="grid w-full grid-cols-1 place-items-start gap-8 lg:grid-cols-2">
           <MediaSwiperWithThumbs
             client:only="react"
             images={optimizedGallery}
             thumbs={thumbs}
-            imageClassName="aspect-3/4 max-w-[50vh] lg:w-auto object-top mx-auto lg:max-h-[70vh]"
+            imageClassName="aspect-3/4 max-w-[35vh] lg:w-auto object-top mx-auto lg:max-h-[70vh]"
           />
           <div class="flex flex-1 flex-col gap-8">
             <h1 class="font-bold lg:text-nowrap">{data.name}</h1>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 193aac9..1854772 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -89,7 +89,7 @@ const t = useTranslations(lang)
 
   {
     services && (
-      <Section id="services" title={t('services.title')}>
+      <Section id="services" title={t('services.title')} className="h-auto">
         <Services client:visible services={services} />
       </Section>
     )
@@ -97,7 +97,7 @@ const t = useTranslations(lang)
 
   {
     optimizedReviews && (
-      <Section id="reviews" title={t('reviews.title')}>
+      <Section id="reviews" title={t('reviews.title')} className="h-auto">
         <Reviews client:only="react" reviews={optimizedReviews} lang={lang} />
       </Section>
     )
diff --git a/src/styles/global.css b/src/styles/global.css
index 3d5a0e8..777ec78 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -20,7 +20,7 @@
 
 @layer base {
   :root {
-    --header-height: 6rem;
+    --header-height: 4rem;
     --marquee-height: 105px;
     --swiper-theme-color: rgba(198, 15, 211, 1) !important;
   }
diff --git a/tailwind.config.js b/tailwind.config.js
index bc73252..da65ad5 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,8 +1,13 @@
+import { TW_WIDTHS } from './src/constants/images';
+
 /** @type {import('tailwindcss').Config} */
 export default {
   content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
-  theme: {
+  theme: { 
     extend: {
+      screens: {
+        xs: `${TW_WIDTHS.XS}px`, 
+      },
       colors: {
         bg: {
           main: 'rgba(19, 21, 20, 1)',