section h-full

2025-05-21 00:00:21 +03:00
parent a2833c0ef4
commit 9913c09755
14 changed files with 54 additions and 20 deletions
--- 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}`
--- 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"
    />
  )
 }
--- 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) => (
      <>
--- 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
  )}
 >
--- 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
--- 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>
      ))}
--- 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
              )}
            />
--- 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}
--- 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 {
--- 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>',
--- 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>
--- 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>
    )
--- 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;
  }
--- 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)',