add fonts + fix paddings

src/components/Footer.astro

@@ -11,7 +11,7 @@ const { lang } = Astro.props
 const t = useTranslations(lang)
 ---
 
-<footer id="contacts" class="flex flex-col items-center gap-6 text-center">
+<footer id="contacts" class="flex flex-col items-center gap-4 md:gap-6 text-center">
   <script
     is:inline
     type="text/javascript"
@@ -19,7 +19,7 @@ const t = useTranslations(lang)
     async
     src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A069b17526dc83cbf87c488f13ae089eb3af0f8f74af57e1be82e183434693562&width=100%25&height=400&lang=ru_RU&scroll=true"
   ></script>
-  <div class="flex flex-col items-center gap-4 px-6 py-8 text-center">
+  <div class="flex flex-col items-center gap-3 px-4 py-6 md:gap-4 md:px-6 md:py-8 text-center">
     <Image src={logoSrc} alt="logo" class="h-32 w-auto md:h-48" />
     <p class="text-light text-sm">
       © {new Date().getFullYear()}

src/components/Hero.astro

@@ -9,21 +9,24 @@ type Props = z.infer<ReturnType<typeof heroSchema>>
 const { title, description, cta, image, imageAlt } = Astro.props
 ---
 
-<Section id="hero" className="mt-16 p-0 md:mt-0 md:flex-row md:p-0">
-  <div class="mb-8 px-6 py-10 md:mb-0 md:w-1/2 md:p-24">
+<Section
+  id="hero"
+  className="mt-[var(--header-height)] p-0 md:mt-0 md:flex-col-reverse md:py-24 lg:flex-row lg:items-center"
+>
+  <div class="px-4 py-8 md:p-0 md:text-center lg:w-1/2 lg:text-start">
     <h1 class="mb-4 text-4xl font-bold leading-tight md:text-6xl" set:html={title} />
     <p class="text-brand-text mb-6">{description}</p>
     {
       cta && (
         <div class="flex w-full space-x-4">
-          <a href="#services" class="brand-btn w-full md:w-auto">
+          <a href="#services" class="brand-btn-outline lg:brand-btn w-full lg:w-auto">
             {cta?.title}
           </a>
         </div>
       )
     }
   </div>
-  <div class="relative hidden md:block md:w-1/2">
-    <Image src={image} alt={imageAlt} class="absolute h-full w-full object-cover" />
+  <div class="relative hidden md:block md:h-[450px] lg:w-1/2">
+    <Image src={image} alt={imageAlt} class="absolute h-full w-full object-contain" />
   </div>
 </Section>

src/components/Section.astro

@@ -13,7 +13,7 @@ const { title, description, className, id } = Astro.props
 
 <section
   class={cn(
-    'flex flex-col gap-6 py-10 px-6 md:p-24 md:gap-14',
+    'flex flex-col gap-6 py-12 px-4 md:py-24 md:px-16 lg:px-24 md:gap-12',
     className
   )}
   id={id}

src/components/ServiceCard.astro

@@ -9,7 +9,7 @@ const { title, charachteristics, highlighted = false, link } = Astro.props
 
 <div
   class:list={[
-    'flex h-full w-full flex-col border-2 px-7 py-8 md:max-w-[400px] md:min-h-[550px]',
+    'flex h-full w-full flex-col border-2 px-5 py-6 md:px-7 md:py-8 md:max-w-[400px] md:min-h-[550px]',
     'border border-transparent bg-card',
     { 'border-brand': highlighted },
   ]}

src/content/pages/main.md

@@ -1,8 +1,8 @@
 ---
 hero:
-  title: 'ПРИДАЙТЕ ВАШЕМУ ТЕЛУ <br /> <span class="text-brand">ЗДОРОВУЮ</span> <br /> И <span class="text-brand">СТРОЙНУЮ ФОРМУ</span>'
-  description: 'Преобразите свое тело и разум с помощью наших увлекательных тренировок и персонализированных программ. Присоединяйтесь к нам для достижения ваших фитнес-целей.'
-  image: './assets/hero.jpeg'
+  title: 'ПРЕОБРАЗИТЕ СВОЕ ТЕЛО <br /> <span class="text-brand">В СОВЕРШЕНСТВО</span>'
+  description: 'Профессиональные тренеры The Real Skill помогут достичь ваших целей через персональные тренировки и индивидуальный подход.'
+  image: '../../assets/logo.png'
   imageAlt: 'hero'
   cta:
     title: 'Записаться'
@@ -63,7 +63,8 @@ services:
   - title: 'Разовые Персональные тренировки с тренером'
     link:
       title: 'Записаться'
-      href: '/checkout/day-pass'
+      href: 'https://api.whatsapp.com/message/JKEYZFZBLQBIF1?autoload=1&app_absent=0'
+      target: '_blank'
     charachteristics:
       - text: 'Разовая тренировка'
         price: '5 000 ₽'
@@ -85,7 +86,8 @@ services:
     description: '30 календарных дней занятий с тренером'
     link:
       title: 'Записаться'
-      href: '/checkout/monthly'
+      href: 'https://n1381542.yclients.com/'
+      target: '_blank'
     charachteristics:
       - text: 'Персональный безлимит'
         price: '50 000 ₽'
@@ -97,7 +99,8 @@ services:
     description: 'Присутствие тренера БЕСПЛАТНО'
     link:
       title: 'Записаться'
-      href: '/checkout/annual'
+      href: 'https://n1381542.yclients.com/'
+      target: '_blank'
     charachteristics:
       - text: 'Разовое посещение Время 75 минут'
         price: '1500 ₽<br />c человека'

src/pages/index.astro

@@ -57,7 +57,7 @@ const t = useTranslations(lang)
         description={t('slider.subtitle')}
         className="bg-bg-light"
       >
-        <div class="-ml-6 flex w-[calc(100%+(1.5rem*2))] md:ml-0 md:w-full">
+        <div class="-ml-4 flex w-[calc(100%+(1rem*2))] md:ml-0 md:w-full">
           <Swiper
             className="h-[540px]"
             client:visible
@@ -83,7 +83,7 @@ const t = useTranslations(lang)
   {
     reviews && (
       <Section id="reviews" title={t('reviews.title')}>
-        <div class="-ml-6 flex w-[calc(100%+(1.5rem*2))] md:-ml-24 md:w-[calc(100%+(6rem*2))]">
+        <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={reviews} lang={lang} />
         </div>
       </Section>

src/styles/global.css

@@ -1,3 +1,4 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -8,7 +9,7 @@
   }
 
   html {
-    font-family: system-ui, sans-serif;
+    font-family: 'Inter', system-ui, sans-serif;
     scroll-behavior: smooth;
   }
 

tailwind.config.js

@@ -12,7 +12,7 @@ export default {
           DEFAULT: 'rgba(28, 28, 30, 1)',
         },
         brand: {
-          DEFAULT: 'rgba(163, 61, 215, 1)',
+          DEFAULT: 'rgba(136,10,145, 1)',
         },
         text: {
           light: '#FFFFFF',