fixes

.gitea/workflows/deploy.yml

@@ -22,7 +22,7 @@ jobs:
         run: |
           echo REPO_NAME=$(echo ${GITHUB_REPOSITORY} | awk -F"/" '{print $2}') >> $GITHUB_OUTPUT
           echo REPO_VERSION=${GITHUB_REF_NAME#v} >> $GITHUB_OUTPUT
-        
+
       # - name: Debug metadata outputs
       #   run: echo "${{ toJson(steps.meta.outputs) }}"
 

src/components/Footer.astro

@@ -29,7 +29,7 @@ const t = useTranslations(lang)
     </p>
     {
       socialMediaLinks && (
-        <div class="flex gap-4 text-text-light">
+        <div class="flex gap-4 text-white">
           {socialMediaLinks.map(({ href, target, icon }) => {
             return (
               <a href={href} target={target} rel="noopener noreferrer">

src/components/Hero.astro

@@ -10,7 +10,7 @@ type Props = z.infer<ReturnType<typeof heroSchema>> & { className?: string }
 const { title, description, cta, image, imageAlt, className } = Astro.props
 ---
 
-<Section id="hero" className={cn('h-full bg-bg-light', className)}>
+<Section id="hero" className={cn('h-full bg-light', className)}>
   <div
     class="flex h-full w-full flex-col items-center gap-5 pt-[var(--header-height)] md:gap-16 lg:flex-row lg:gap-36"
   >

src/components/Marquee.astro

@@ -11,7 +11,9 @@ 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 bg-brand">
+<div
+  class="flex h-full w-max animate-marquee items-center gap-10 bg-brand text-5xl font-bold uppercase"
+>
   {
     repeatedTexts.map((text) => (
       <>

src/components/Reviews.tsx

@@ -29,7 +29,7 @@ export const Reviews: React.FC<ReviewsProps> = ({ reviews, lang }) => {
     <SimpleSwiper
       slidesPerView={1}
       freeMode={isMd}
-      pagination={{type: 'fraction', enabled: !isMd}}
+      pagination={{ type: 'fraction', enabled: !isMd }}
       breakpoints={{
         [TW_SCREENS.MD]: {
           slidesPerView: 'auto',
@@ -50,7 +50,7 @@ export const Reviews: React.FC<ReviewsProps> = ({ reviews, lang }) => {
                 />
               ))}
             </div>
-            <blockquote className="break-words text-lg font-semibold text-text-light">
+            <blockquote className="break-words text-lg font-semibold text-white">
               {review}
             </blockquote>
             {author && (
@@ -64,7 +64,7 @@ export const Reviews: React.FC<ReviewsProps> = ({ reviews, lang }) => {
                   />
                 )}
                 <div className="flex flex-col">
-                  <span className="font-semibold text-text-light">{author.name}</span>
+                  <span className="font-semibold text-white">{author.name}</span>
                   <span>{author.description}</span>
                 </div>
               </div>
@@ -73,18 +73,16 @@ export const Reviews: React.FC<ReviewsProps> = ({ reviews, lang }) => {
         </SwiperSlide>
       ))}
       <SwiperSlide className={swiperSlideClassName}>
-        <div className="card h-full transition-colors hover:bg-bg-light/80">
+        <div className="card h-full transition-colors hover:bg-light/80">
           <a
             href={REVIEWS_LINK}
             target="_blank"
             className="flex h-full w-full flex-col items-center justify-center gap-4 p-6 text-center md:px-14 md:py-16"
           >
-            <span className="text-xl font-semibold text-text-light">
-              {t('reviews.viewMore.title')}
-            </span>
+            <span className="text-xl font-semibold text-white">{t('reviews.viewMore.title')}</span>
             <span>{t('reviews.viewMore.description')}</span>
             <svg
-              className="mt-2 h-6 w-6 text-text-light"
+              className="mt-2 h-6 w-6 text-white"
               viewBox="0 0 24 24"
               fill="none"
               stroke="currentColor"

src/components/coaches/CoachCard.tsx

@@ -22,7 +22,7 @@ export const CoachCard: React.FC<CoachCardProps> = ({ data, slug }) => {
         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>
+          <h3 className="text-xl font-bold uppercase text-white">{name}</h3>
           <img {...rightArrowIconSrc} width={50} height={50} />
         </div>
       </a>

src/components/header/Header.astro

@@ -25,13 +25,13 @@ const t = useTranslations(lang)
 <header
   class:list={[
     'fixed left-0 right-0 top-0 z-50',
-    'flex h-[var(--header-height)] items-center justify-between gap-20 bg-bg-main px-6 md:justify-start md:px-10',
+    'flex h-[var(--header-height)] items-center justify-between gap-20 bg-main px-6 md:justify-start md:px-10',
     'transition-transform duration-300',
   ]}
   id="main-header"
   transition:persist
 >
-  <a class="flex flex-col items-center font-bold uppercase text-text-light leading-tight" href="/">
+  <a class="flex flex-col items-center font-bold uppercase leading-tight text-white" href="/">
     <span>THEREALSKILL</span><span class="tracking-widest text-brand">studio</span>
   </a>
   <nav class="hidden flex-1 md:block">

src/components/header/MobileNavigation.tsx

@@ -67,7 +67,7 @@ const MobileNavigation: React.FC<MobileNavigationProps> = ({ navItems }) => {
       <AnimatedBurgerButton isOpen={isOpen} onClick={toggleMenu} />
       <div
         className={cn(
-          'fixed left-0 top-[var(--header-height)] z-50 h-[calc(100dvh-var(--header-height))] w-full transform bg-bg-main p-8 transition-transform duration-300 ease-in-out',
+          'fixed left-0 top-[var(--header-height)] z-50 h-[calc(100dvh-var(--header-height))] w-full transform bg-main p-8 transition-transform duration-300 ease-in-out',
           isOpen ? '-translate-x-0' : 'translate-x-full'
         )}
       >

src/components/services/CharachteristicCard.tsx

@@ -1,5 +1,5 @@
-import type {linkSchema} from "@/content.config"
-import type {z} from "astro:content"
+import type { linkSchema } from '@/content.config'
+import type { z } from 'astro:content'
 
 type Props = {
   title: string

src/components/swiper/simple-swiper.css

@@ -6,11 +6,11 @@
 }
 
 .swiper-pagination-fraction {
-  @apply text-xl w-auto;
+  @apply w-auto text-xl;
 }
 
 .swiper-pagination-current {
-  @apply text-text-light;
+  @apply text-white;
 }
 
 .swiper-button-disabled {

src/content/pages/main.md

@@ -1,6 +1,6 @@
 ---
 hero:
-  title: 'ПРЕОБРАЗИТЕ СВОЕ ТЕЛО <br /> <span class="text-brand">В СОВЕРШЕНСТВО</span>'
+  title: 'ПРЕОБРАЗИТЕ<br />СВОЕ ТЕЛО В <span class="text-brand">СОВЕРШЕНСТВО</span>'
   description: 'Профессиональные тренеры THEREALSKILL studio помогут достичь ваших целей через персональные тренировки и индивидуальный подход.'
   image: './assets/hero.jpg'
   imageAlt: 'hero'

src/i18n/utils.ts

@@ -15,6 +15,7 @@ export function getLangFromUrl(url: URL) {
 export function useTranslations(lang?: string) {
   return function t(key: TranslationKey, payload?: Primitive): string {
     const translation =
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
       ui[lang as keyof typeof ui]?.[key] || ui[i18n!.defaultLocale as keyof typeof ui][key]
 
     if (typeof translation === 'function') return translation(String(payload))

src/layouts/BaseLayout.astro

@@ -19,7 +19,12 @@ const t = useTranslations(Astro.currentLocale)
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+
+    <!-- Favicon -->
+    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+    <link rel="icon" type="image/svg+xml" sizes="any" href="/favicon.svg" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon.png" />
+
     <meta name="generator" content={Astro.generator} />
     <meta name="description" content={t('seo.meta.description')} />
     <meta name="keywords" content={t('seo.meta.keywords')} />

src/pages/404.astro

@@ -14,9 +14,7 @@ const t = useTranslations(lang)
     <div class="flex h-full w-full flex-col items-center justify-center gap-6 text-center">
       <h1 class="text-6xl font-bold text-brand">404</h1>
       <h2 class="text-4xl font-bold">{t('404.title')}</h2>
-      <a href="/" class="brand-btn">
-        На главную
-      </a>
+      <a href="/" class="brand-btn"> На главную </a>
     </div>
   </Section>
 </BaseLayout>

src/pages/coaches/styles.css

@@ -25,5 +25,5 @@
 }
 
 .coach-card-list > li {
-  @apply flex items-center rounded-2xl bg-card px-3 py-2;
+  @apply flex items-center rounded-2xl bg-light px-3 py-2;
 }

src/pages/index.astro

@@ -80,7 +80,7 @@ const t = useTranslations(lang)
         id="image-slider"
         title={t('slider.title')}
         description={t('slider.subtitle')}
-        className="bg-bg-light"
+        className="bg-light"
       >
         <GymGallery client:only="react" images={optimizedSlider} />
       </Section>

src/styles/global.css

@@ -20,9 +20,9 @@
 
 @layer base {
   :root {
-    --header-height: 4rem;
+    --header-height: 5rem;
     --marquee-height: 105px;
-    --swiper-theme-color: rgba(198, 15, 211, 1) !important;
+    --swiper-theme-color: #ffffff !important;
   }
 
   html {
@@ -32,7 +32,7 @@
 
   html,
   body {
-    @apply h-full w-full bg-bg-main text-text;
+    @apply h-full w-full bg-main text;
   }
 
   h1 {
@@ -60,28 +60,28 @@
   h4,
   h5,
   h6 {
-    @apply text-text-light;
+    @apply text-white;
   }
 
   a {
-    @apply transform cursor-pointer no-underline duration-300 ease-in-out hover:text-text-light;
+    @apply transform cursor-pointer no-underline duration-300 ease-in-out hover:text-white;
   }
 }
 
 @layer components {
   .brand-btn {
-    @apply rounded-full bg-brand px-6 py-3 text-center text-text-light transition-colors duration-300 hover:bg-brand/80;
+    @apply rounded-full bg-brand px-6 py-3 text-center text-white transition-colors duration-300 hover:bg-brand/80;
   }
   .brand-btn-outline {
-    @apply rounded-full border border-brand bg-transparent px-6 py-3 text-center text-text-light transition-colors duration-300 hover:bg-brand;
+    @apply rounded-full border border-brand bg-transparent px-6 py-3 text-center text-white transition-colors duration-300 hover:bg-brand;
   }
   .tag-btn {
-    @apply hover:tag-btn-active rounded-full bg-card p-2 text-sm transition-colors duration-300;
+    @apply hover:tag-btn-active rounded-full bg-light p-2 text-sm transition-colors duration-300;
   }
   .tag-btn-active {
-    @apply bg-brand text-text-light;
+    @apply bg-brand text-white;
   }
   .card {
-    @apply rounded-3xl bg-card p-4 md:p-6;
+    @apply rounded-3xl bg-light p-4 md:p-6;
   }
 }

tailwind.config.js

@@ -1,31 +1,41 @@
-import { TW_WIDTHS } from './src/constants/images';
+import { TW_WIDTHS } from './src/constants/images'
 
 /** @type {import('tailwindcss').Config} */
+
+const colors = {
+  background: {
+    DEFAULT: 'rgba(19, 21, 20, 1)',
+    light: 'rgba(28, 28, 30, 1)',
+  },
+  text: {
+    DEFAULT: '#C4C4C4',
+    muted: '#D9D9D9',
+  },
+  brand: {
+    DEFAULT: 'rgba(198, 15, 211, 1)',
+  },
+  border: {
+    DEFAULT: '#D9D9D9',
+  },
+}
+
 export default {
   content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
-  theme: { 
+  theme: {
     extend: {
       screens: {
-        xs: `${TW_WIDTHS.XS}px`, 
+        xs: `${TW_WIDTHS.XS}px`,
       },
-      colors: {
-        bg: {
-          main: 'rgba(19, 21, 20, 1)',
-          light: 'rgba(28, 28, 30, 1)',
-        },
-        card: {
-          DEFAULT: 'rgba(28, 28, 30, 1)',
-        },
-        brand: {
-          DEFAULT: 'rgba(198, 15, 211, 1)',
-        },
-        text: {
-          light: '#FFFFFF',
-          DEFAULT: '#C4C4C4',
-        },
-        border: {
-          light: '#D9D9D9',
-        },
+      colors,
+      textColor: {
+        DEFAULT: colors.text.DEFAULT,
+      },
+      backgroundColor: {
+        main: colors.background.DEFAULT,
+        light: colors.background.light,
+      },
+      borderColor: {
+        DEFAULT: colors.border.DEFAULT,
       },
       aspectRatio: {
         '3/4': '3 / 4',