Refactor code structure for improved readability and maintainability

src/components/Activities.tsx

@@ -22,7 +22,7 @@ function SwiperButton({
       onClick={onClick}
       disabled={disabled}
       className={`
-        w-12 h-12 
+        w-10 h-10 sm:w-12 sm:h-12 
         border border-gray-200 
         transition-colors duration-200
         flex items-center justify-center
@@ -35,19 +35,19 @@ function SwiperButton({
       `}
       aria-label={direction === "next" ? "Next slide" : "Previous slide"}
     >
-      <img src={iconPath} alt="" className={`w-5 h-5`} />
+      <img src={iconPath} alt="" className={`w-4 h-4 sm:w-5 sm:h-5`} />
     </button>
   );
 }
 
 function Slide({ title, imageSrc }: { title: string; imageSrc: string }) {
   return (
-    <div className="flex flex-col bg-[#1068B0] py-6 px-3.5 relative">
-      <h2 className={`${fluxgore.className} text-4xl text-white leading-none`}>
+    <div className="flex flex-col bg-[#1068B0] py-4 px-3 sm:py-6 sm:px-3.5 relative">
+      <h2 className={`${fluxgore.className} text-2xl sm:text-3xl lg:text-4xl text-white leading-none`}>
         {title}
       </h2>
       <img
-        className="w-full h-auto object-cover mt-7"
+        className="w-full h-auto object-cover mt-4 sm:mt-7"
         src={imageSrc}
         alt="Slide Image"
       />
@@ -86,16 +86,16 @@ function Activities() {
   };
 
   return (
-    <div className="bg-[#F4F4F4] relative pt-20 pb-32">
-      <div className="container mx-auto">
-        <div className="flex flex-row justify-between items-center">
+    <div className="bg-[#F4F4F4] relative pt-12 pb-16 sm:pt-16 sm:pb-24 lg:pt-20 lg:pb-32">
+      <div className="container mx-auto px-4">
+        <div className="flex space-y-6 flex-row sm:justify-between sm:items-center sm:space-y-0">
           <h1
-            className={`${fluxgore.className} text-7xl text-[#060606] relative`}
+            className={`${fluxgore.className} text-3xl sm:text-5xl lg:text-7xl text-[#060606] relative max-w-2xs md:max-w-full`}
           >
             Активности фестиваля
           </h1>
 
-          <div className="flex items-center space-x-5">
+          <div className="flex items-center justify-center space-x-3 sm:space-x-5">
             <SwiperButton
               onClick={handlePrevious}
               direction="prev"
@@ -110,11 +110,11 @@ function Activities() {
         </div>
       </div>
 
-      <div className="container mx-auto overflow-visible">
-        <div className="mt-16 overflow-visible">
+      <div className="container mx-auto px-4 overflow-visible">
+        <div className="mt-8 sm:mt-12 lg:mt-16 overflow-visible">
           <Swiper
-            spaceBetween={20}
-            slidesPerView={3}
+            spaceBetween={15}
+            slidesPerView={1}
             onSwiper={handleSwiperInit}
             onSlideChange={handleSlideChange}
             watchOverflow={false}
@@ -122,9 +122,15 @@ function Activities() {
             breakpoints={{
               640: {
                 slidesPerView: 1,
+                spaceBetween: 15,
               },
               768: {
                 slidesPerView: 2,
+                spaceBetween: 20,
+              },
+              1024: {
+                slidesPerView: 3,
+                spaceBetween: 20,
               },
             }}
           >
@@ -136,28 +142,17 @@ function Activities() {
             </SwiperSlide>
             <SwiperSlide>
               <Slide
-                title="Автовыставка"
-                imageSrc="/images/activities/car1.png"
+                title="дрифт такси"
+                imageSrc="/images/activities/taxi.png"
               />
             </SwiperSlide>
             <SwiperSlide>
               <Slide
-                title="Автовыставка"
-                imageSrc="/images/activities/car1.png"
-              />
-            </SwiperSlide>
-            <SwiperSlide>
-              <Slide
-                title="Автовыставка"
-                imageSrc="/images/activities/car1.png"
-              />
-            </SwiperSlide>
-            <SwiperSlide>
-              <Slide
-                title="Автовыставка"
-                imageSrc="/images/activities/car1.png"
+                title="SMP Race такси"
+                imageSrc="/images/activities/race_taxi.png"
               />
             </SwiperSlide>
+
           </Swiper>
         </div>
       </div>

src/components/Cover.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @next/next/no-img-element */
 import { fluxgore } from "@/utils/fonts";
 import Button from "./Button";
 
@@ -14,7 +15,7 @@ function CoverHeading({ children, textPosition }: CoverHeadingProps) {
       className={`${fluxgore.className} text-white relative`}
       style={{
         textAlign: textAlign,
-        fontSize: "8vw", // Changed from fixed 130px to 8vw
+        fontSize: "clamp(50px, 10vw, 7vw)", // Slightly smaller on all screen sizes
         lineHeight: "1",
       }}
     >
@@ -23,7 +24,7 @@ function CoverHeading({ children, textPosition }: CoverHeadingProps) {
         <span
           className="absolute top-0 text-black"
           style={{
-            transform: `translate(1.1vw, 0.7vw)`, // Changed from fixed pixels to vw
+            transform: `translate(clamp(6px, 1.5vw, 1vw), clamp(4px, 1vw, 0.6vw))`, // Adjusted shadow offset
             textAlign: textAlign,
             zIndex: 1,
           }}
@@ -37,7 +38,7 @@ function CoverHeading({ children, textPosition }: CoverHeadingProps) {
         <span
           className="absolute top-0 text-black"
           style={{
-            transform: `translate(calc(-100% + 1.1vw), 0.7vw)`, // Changed from fixed pixels to vw
+            transform: `translate(calc(-100% + clamp(6px, 1.5vw, 1vw)), clamp(4px, 1vw, 0.6vw))`, // Adjusted shadow offset
             textAlign: textAlign,
             zIndex: 1,
           }}
@@ -54,7 +55,7 @@ function CoverHeading({ children, textPosition }: CoverHeadingProps) {
           zIndex: 3,
           display: "block",
           textAlign: textAlign,
-          WebkitTextStroke: "0.75vw black", // Changed from fixed 12px to 0.75vw
+          WebkitTextStroke: "clamp(3px, 1vw, 0.6vw) black", // Adjusted stroke width
           paintOrder: "stroke fill",
         }}
       >
@@ -67,10 +68,9 @@ function CoverHeading({ children, textPosition }: CoverHeadingProps) {
 function DateBox() {
   return (
     <div
-      className={`${fluxgore.className} bg-white text-black px-6 py-2 inline-block`}
+      className={`${fluxgore.className} bg-white text-black px-6 py-2 inline-blockt text-3xl md:text-[40px]`}
       style={{
         transform: "skewX(-15deg)",
-        fontSize: "2vw", // Changed from 40px to 2.5vw
         lineHeight: "1.2",
         filter: `
             drop-shadow(8px 8px 0px black)
@@ -94,16 +94,36 @@ function Cover() {
       className="bg-cover bg-center bg-no-repeat relative justify-center items-center py-36"
       style={{ backgroundImage: "url('/images/cover.svg')" }}
     >
-      <div className="container mx-auto max-w-5/7 mb-24">
+      <div className="container mx-auto mb-24">
         {/* Top row with ФЕСТИВАЛЬ and date box */}
+        <div className="flex align-center justify-center pb-7 md:hidden">
+          <DateBox />
+        </div>
+
+        {/* <div className="flex align-center justify-center pb-7 md:hidden">
+          <DateBox />
+        </div>
         <div className="flex flex-row items-center space-x-16">
           <CoverHeading>ФЕСТИВАЛЬ</CoverHeading>
-          <DateBox />
+          <div className="hidden md:block">
+            <DateBox />
+          </div>
         </div>
 
         <CoverHeading textPosition="right">ТЕХНИЧЕСКИХ</CoverHeading>
 
-        <CoverHeading>ВИДОВ СПОРТА</CoverHeading>
+        <CoverHeading>ВИДОВ СПОРТА</CoverHeading> */}
+        <img
+          src="/images/cover_text.png"
+          alt="Фестиваль технических видов спорта 2025"
+          className="w-full max-w-3xl mx-auto hidden md:block"
+        />
+
+        <img
+          src="/images/cover_text_mobile.png"
+          alt="Фестиваль технических видов спорта 2025"
+          className="w-full max-w-3xl mx-auto md:hidden"
+        />
       </div>
 
       <div className="flex justify-center items-center">
@@ -129,7 +149,9 @@ function CoverSoon() {
         {/* Top row with ФЕСТИВАЛЬ and date box */}
         <div className="flex flex-row items-center space-x-16">
           <CoverHeading>ФЕСТИВАЛЬ</CoverHeading>
-          <DateBox />
+          <div className="hidden md:block">
+            <DateBox />
+          </div>
         </div>
 
         <CoverHeading textPosition="right">ТЕХНИЧЕСКИХ</CoverHeading>

src/components/Events.tsx

@@ -11,27 +11,27 @@ interface EventCardProps {
 
 function EventCard(props: EventCardProps) {
   return (
-    <div className="flex flex-row bg-[#272727] py-5 px-2.5">
-      <div className="w-1/3">
+    <div className="flex flex-col md:flex-row bg-[#272727] py-5 px-2.5 md:py-5 md:px-2.5 p-4">
+      <div className="w-full md:w-1/3 mb-4 md:mb-0">
         <img
-          className="w-2/3 h-auto object-cover"
+          className="w-full md:w-2/3 h-auto object-cover rounded"
           src={props.image}
           alt={props.title}
         />
       </div>
-      <div className="w-1/3">
+      <div className="w-full md:w-1/3 mb-4 md:mb-0 md:px-4">
         <h2
-          className={`${fluxgore.className} text-4xl text-white leading-none`}
+          className={`${fluxgore.className} text-2xl md:text-4xl text-white leading-tight md:leading-none`}
         >
           {props.title}
         </h2>
         <p
-          className={`${gothampro.className} text-[#E6E6E6] text-base mt-6 leading-none`}
+          className={`${gothampro.className} text-[#E6E6E6] text-sm md:text-base mt-4 md:mt-6 leading-relaxed md:leading-none`}
         >
           {props.description}
         </p>
       </div>
-      <div className="flex justify-end w-1/3">
+      <div className="flex justify-center md:justify-end w-full md:w-1/3">
         <Button variant="blue" shadowEnabled={false}>
           регистрация
         </Button>
@@ -43,7 +43,7 @@ function EventCard(props: EventCardProps) {
 function Events() {
   return (
     <div
-      className="bg-[#161616] relative pt-64 pb-32"
+      className="bg-[#161616] relative pt-32 md:pt-64 pb-16 md:pb-32"
       style={{
         backgroundImage: `url('/images/noise.svg')`,
         backgroundSize: "cover",
@@ -52,25 +52,27 @@ function Events() {
       }}
     >
       <img
-        className="absolute top-0 object-cover"
+        className="absolute top-0 w-full object-cover"
         src="/images/events/paper_tear.png"
         alt="Paper tear"
       />
 
-      <div className="container mx-auto">
-        <div className="flex flex-row justify-between">
-          <h1 className={`${fluxgore.className} text-7xl text-white relative`}>
+      <div className="container mx-auto px-4">
+        <div className="flex flex-col md:flex-row md:justify-between space-y-6 md:space-y-0">
+          <h1
+            className={`${fluxgore.className} text-4xl md:text-7xl text-white relative`}
+          >
             что вас ждет
           </h1>
 
           <p
-            className={`${gothampro.className} text-[#E6E6E6] opacity-90 text-xl max-w-[536px] leading-none self-end`}
+            className={`${gothampro.className} text-[#E6E6E6] opacity-90 text-base md:text-xl max-w-full md:max-w-[536px] leading-relaxed md:leading-none md:self-end`}
           >
             [Для участия в соревнованиях нажмите кнопку регистрация]
           </p>
         </div>
 
-        <div className="flex flex-col space-y-7 mt-36">
+        <div className="flex flex-col space-y-4 md:space-y-7 mt-16 md:mt-36">
           <EventCard
             image="/events/yuka.png"
             title="YUKA Drive Fest Джимхана"
@@ -80,27 +82,31 @@ function Events() {
             link="#"
           />
           <EventCard
-            image="/events/yuka.png"
-            title="YUKA Drive Fest Джимхана"
-            description="YUKA Drive Fest Джимхана впервые врывается в Москву, и местом его дебюта станет наш Фестиваль технических видов спорта!
-            Это не просто гонки, это настоящий танец на асфальте, где мастерство водителя и мощь автомобиля сливаются воедино.
-            Под чутким руководством и вдохновляющим присутствием легендарного Аркадия Цареградцева, амбассадора и супер-босса соревнований, лучшие джимханисты страны покажут невероятные трюки, демонстрируя виртуозное владение машиной. Скорость, точность, дым из-под колес и филигранные маневры в ограниченном пространстве – вот что такое Джимхана."
+            image="/events/moscow_fight.png"
+            title="Дрифт«Битва за Москву»"
+            description="Любительский турнир по дрифту, который вырос из проекта «Дорога в дрифт», созданного в 2021 году для поиска новых талантов. За три года он превратился в полноценные соревнования с привлекательным призовым фондом.
+Во второй день фестиваля, 8 сентября, пройдет дрифт-гонка, где главным призом станет электромобиль «Москвич».
+Соревнования проводятся по традиционной олимпийской системе. Чтобы принять участие, необходимо подать заявку на сайте и дождаться приглашения от организаторов."
             link="#"
           />
           <EventCard
-            image="/events/yuka.png"
-            title="YUKA Drive Fest Джимхана"
-            description="YUKA Drive Fest Джимхана впервые врывается в Москву, и местом его дебюта станет наш Фестиваль технических видов спорта!
-            Это не просто гонки, это настоящий танец на асфальте, где мастерство водителя и мощь автомобиля сливаются воедино.
-            Под чутким руководством и вдохновляющим присутствием легендарного Аркадия Цареградцева, амбассадора и супер-босса соревнований, лучшие джимханисты страны покажут невероятные трюки, демонстрируя виртуозное владение машиной. Скорость, точность, дым из-под колес и филигранные маневры в ограниченном пространстве – вот что такое Джимхана."
+            image="/events/moto.png"
+            title="КуБок ШОС по Мотокроссу"
+            description="Уникальная возможность увидеть настоящую битву моторов и мастерства на трассе.
+
+Лучшие гонщики со всего мира соберутся, чтобы продемонстрировать невероятные прыжки, головокружительные виражи и бескомпромиссную борьбу за победу.
+
+Приготовьтесь к взрыву адреналина и незабываемым эмоциям, ведь Кубок ШОС по Мотокроссу обещает стать одним из самых ярких зрелищ фестиваля!"
             link="#"
           />
           <EventCard
-            image="/events/yuka.png"
-            title="YUKA Drive Fest Джимхана"
-            description="YUKA Drive Fest Джимхана впервые врывается в Москву, и местом его дебюта станет наш Фестиваль технических видов спорта!
-            Это не просто гонки, это настоящий танец на асфальте, где мастерство водителя и мощь автомобиля сливаются воедино.
-            Под чутким руководством и вдохновляющим присутствием легендарного Аркадия Цареградцева, амбассадора и супер-босса соревнований, лучшие джимханисты страны покажут невероятные трюки, демонстрируя виртуозное владение машиной. Скорость, точность, дым из-под колес и филигранные маневры в ограниченном пространстве – вот что такое Джимхана."
+            image="/events/cart.png"
+            title="Кубок по Фиджитал картингу"
+            description="На Фестивале технических видов спорта 2025 впервые состоится Кубок по Фиджитал Картингу!
+
+Это уникальное состязание, где виртуальная реальность встречается с реальной трассой.
+
+Участники будут сражаться на симуляторах, а затем переносить свои навыки на настоящий картинг, демонстрируя невероятную адаптивность и мастерство."
             link="#"
           />
         </div>

src/components/Footer.tsx

@@ -4,13 +4,19 @@ import Link from "next/link";
 /* eslint-disable @next/next/no-img-element */
 function Footer() {
   return (
-    <footer className="bg-[#0D0D0D] py-36 ">
-      <div className="container mx-auto flex flex-col space-y-9">
-        <div className="flex flex-row justify-between items-center">
-          <div className="flex flex-col space-y-16">
-            <img src="/logos/tech_logo_text.svg" alt="Tech Fest Logo" />
+    <footer className="bg-[#0D0D0D] py-16 md:py-36">
+      <div className="container mx-auto px-4 flex flex-col space-y-9">
+        <div className="flex flex-col md:flex-row md:justify-between md:items-start space-y-8 md:space-y-0">
+          {/* Logo and Social Links */}
+          <div className="flex flex-row md:flex-col md:space-y-16 space-x-16">
+            <img
+              src="/logos/tech_logo_text.svg"
+              alt="Tech Fest Logo"
+              className="w-32 md:w-auto"
+            />
 
-            <ul className="hidden md:flex space-x-2 items-center">
+            {/* Social Links - visible on all screen sizes */}
+            <ul className="flex space-x-2 items-center">
               <li>
                 <Link
                   href="https://t.me/your_channel"
@@ -59,106 +65,114 @@ function Footer() {
             </ul>
           </div>
 
-          <div className="flex flex-col space-y-7">
-            <h3 className={`${fluxgore.className} text-[18px] text-[#E6E6E6]`}>
-              ПЛОЩАДКИ
-            </h3>
-
-            <div className="flex flex-col space-y-2">
-              <Link
-                href="/#cover"
-                className={`${gothampro.className} text-base text-[#E6E6E6] opacity-60 hover:text-blue-500 transition-colors duration-200`}
+          {/* Navigation Columns - Stack on mobile, side by side on desktop */}
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+            <div className="flex flex-col space-y-4 md:space-y-7">
+              <h3
+                className={`${fluxgore.className} text-base md:text-[18px] text-[#E6E6E6]`}
               >
-                YUKA Drive Fest
-              </Link>
-              <Link
-                href="/#cover"
-                className={`${gothampro.className} text-base text-[#E6E6E6] opacity-60 hover:text-blue-500 transition-colors duration-200`}
-              >
-                ЭКСПО
-              </Link>
-              <Link
-                href="/#cover"
-                className={`${gothampro.className} text-base text-[#E6E6E6] opacity-60 hover:text-blue-500 transition-colors duration-200`}
-              >
-                Мотокросс
-              </Link>
-              <Link
-                href="/#cover"
-                className={`${gothampro.className} text-base text-[#E6E6E6] opacity-60 hover:text-blue-500 transition-colors duration-200`}
-              >
-                Дрифт Битва за Москву
-              </Link>
+                СОБЫТИЯ
+              </h3>
+              <div className="flex flex-col space-y-2">
+                <Link
+                  href="/#cover"
+                  className={`${gothampro.className} text-sm md:text-base text-[#E6E6E6] opacity-60 hover:text-blue-500 transition-colors duration-200`}
+                >
+                  YUKA Drive Fest
+                </Link>
+                <Link
+                  href="/#cover"
+                  className={`${gothampro.className} text-sm md:text-base text-[#E6E6E6] opacity-60 hover:text-blue-500 transition-colors duration-200`}
+                >
+                  ЭКСПО
+                </Link>
+                <Link
+                  href="/#cover"
+                  className={`${gothampro.className} text-sm md:text-base text-[#E6E6E6] opacity-60 hover:text-blue-500 transition-colors duration-200`}
+                >
+                  Мотокросс
+                </Link>
+                <Link
+                  href="/#cover"
+                  className={`${gothampro.className} text-sm md:text-base text-[#E6E6E6] opacity-60 hover:text-blue-500 transition-colors duration-200`}
+                >
+                  Дрифт Битва за Москву
+                </Link>
+              </div>
             </div>
-          </div>
-          <div className="flex flex-col space-y-7">
-            <h3 className={`${fluxgore.className} text-[18px] text-[#E6E6E6]`}>
-              ПЛОЩАДКИ
-            </h3>
 
-            <div className="flex flex-col space-y-2">
-              <Link
-                href="/#cover"
-                className={`${gothampro.className} text-base text-[#E6E6E6] opacity-60 hover:text-blue-500 transition-colors duration-200`}
+            <div className="flex flex-col space-y-4 md:space-y-7">
+              <h3
+                className={`${fluxgore.className} text-base md:text-[18px] text-[#E6E6E6]`}
               >
-                YUKA Drive Fest
-              </Link>
-              <Link
-                href="/#cover"
-                className={`${gothampro.className} text-base text-[#E6E6E6] opacity-60 hover:text-blue-500 transition-colors duration-200`}
-              >
-                ЭКСПО
-              </Link>
-              <Link
-                href="/#cover"
-                className={`${gothampro.className} text-base text-[#E6E6E6] opacity-60 hover:text-blue-500 transition-colors duration-200`}
-              >
-                Мотокросс
-              </Link>
-              <Link
-                href="/#cover"
-                className={`${gothampro.className} text-base text-[#E6E6E6] opacity-60 hover:text-blue-500 transition-colors duration-200`}
-              >
-                Дрифт Битва за Москву
-              </Link>
+                ИНФОРМАЦИЯ
+              </h3>
+              <div className="flex flex-col space-y-2">
+                <Link
+                  href="/#about"
+                  className={`${gothampro.className} text-sm md:text-base text-[#E6E6E6] opacity-60 hover:text-blue-500 transition-colors duration-200`}
+                >
+                  О фестивале
+                </Link>
+                <Link
+                  href="/#program"
+                  className={`${gothampro.className} text-sm md:text-base text-[#E6E6E6] opacity-60 hover:text-blue-500 transition-colors duration-200`}
+                >
+                  Программа
+                </Link>
+                <Link
+                  href="/#tickets"
+                  className={`${gothampro.className} text-sm md:text-base text-[#E6E6E6] opacity-60 hover:text-blue-500 transition-colors duration-200`}
+                >
+                  Билеты
+                </Link>
+                <Link
+                  href="/#contacts"
+                  className={`${gothampro.className} text-sm md:text-base text-[#E6E6E6] opacity-60 hover:text-blue-500 transition-colors duration-200`}
+                >
+                  Контакты
+                </Link>
+              </div>
             </div>
-          </div>
-          <div className="flex flex-col space-y-7">
-            <h3 className={`${fluxgore.className} text-[18px] text-[#E6E6E6]`}>
-              ПЛОЩАДКИ
-            </h3>
 
-            <div className="flex flex-col space-y-2">
-              <Link
-                href="/#cover"
-                className={`${gothampro.className} text-base text-[#E6E6E6] opacity-60 hover:text-blue-500 transition-colors duration-200`}
+            <div className="flex flex-col space-y-4 md:space-y-7">
+              <h3
+                className={`${fluxgore.className} text-base md:text-[18px] text-[#E6E6E6]`}
               >
-                YUKA Drive Fest
-              </Link>
-              <Link
-                href="/#cover"
-                className={`${gothampro.className} text-base text-[#E6E6E6] opacity-60 hover:text-blue-500 transition-colors duration-200`}
-              >
-                ЭКСПО
-              </Link>
-              <Link
-                href="/#cover"
-                className={`${gothampro.className} text-base text-[#E6E6E6] opacity-60 hover:text-blue-500 transition-colors duration-200`}
-              >
-                Мотокросс
-              </Link>
-              <Link
-                href="/#cover"
-                className={`${gothampro.className} text-base text-[#E6E6E6] opacity-60 hover:text-blue-500 transition-colors duration-200`}
-              >
-                Дрифт Битва за Москву
-              </Link>
+                УЧАСТИЕ
+              </h3>
+              <div className="flex flex-col space-y-2">
+                <Link
+                  href="/#registration"
+                  className={`${gothampro.className} text-sm md:text-base text-[#E6E6E6] opacity-60 hover:text-blue-500 transition-colors duration-200`}
+                >
+                  Регистрация
+                </Link>
+                <Link
+                  href="/#sponsors"
+                  className={`${gothampro.className} text-sm md:text-base text-[#E6E6E6] opacity-60 hover:text-blue-500 transition-colors duration-200`}
+                >
+                  Партнеры
+                </Link>
+                <Link
+                  href="/#media"
+                  className={`${gothampro.className} text-sm md:text-base text-[#E6E6E6] opacity-60 hover:text-blue-500 transition-colors duration-200`}
+                >
+                  Пресса
+                </Link>
+                <Link
+                  href="/#volunteer"
+                  className={`${gothampro.className} text-sm md:text-base text-[#E6E6E6] opacity-60 hover:text-blue-500 transition-colors duration-200`}
+                >
+                  Волонтерство
+                </Link>
+              </div>
             </div>
           </div>
         </div>
 
         <p
-          className={`${gothampro.className} text-[18px] text-[#E6E6E6] opacity-40`}
+          className={`${gothampro.className} text-sm md:text-[18px] text-[#E6E6E6] opacity-40 text-center md:text-left`}
         >
           © 2025 АНО &quot;СОК&quot;
         </p>

src/components/Info.tsx

@@ -6,7 +6,7 @@ function Info() {
   return (
     <div className={gothampro.className}>
       <div
-        className="bg-[#161616] relative overflow-hidden"
+        className="bg-[#161616] relative overflow-hidden px-4"
         style={{
           backgroundImage: `url('/images/noise.svg')`,
           backgroundSize: "cover",
@@ -17,13 +17,13 @@ function Info() {
         <div className="container mx-auto pt-36">
           <div className="flex flex-row">
             <div className="flex-1 basis-1/3">
-              <p className="text-white opacity-60 text-base uppercase font-medium">
+              <p className="text-white opacity-60 text-sm md:text-base uppercase font-medium">
                 [ о нас ]
               </p>
             </div>
 
             <div className="flex-col max-w-2/3">
-              <p className="text-white text-4xl font-normal">
+              <p className="text-white text-base md:text-4xl font-normal">
                 Фестиваль технических видов спорта 2025 — это седьмой{" "}
                 <span className="text-[#1068B0]">год драйва и эмоций</span>!
               </p>
@@ -34,7 +34,7 @@ function Info() {
             <div className="flex-1 basis-2/12"></div>
 
             <div className="flex-col max-w-10/12">
-              <p className="text-white text-4xl font-normal">
+              <p className="text-white text-base md:text-4xl font-normal">
                 Организованный Департаментом спорта Москвы и РАФ в День города,
                 он объединяет фанатов скорости и семьи.
               </p>
@@ -45,7 +45,7 @@ function Info() {
             <div className="flex-1 basis-1/3"></div>
 
             <div className="flex-col max-w-2/3">
-              <p className="text-white text-base font-normal max-w-2/5">
+              <p className="text-white text-base md:text-base font-normal md:max-w-2/5">
                 В этом году, помимо традиционной «Битвы за Москву» по дрифту,
                 вас ждут абсолютно новые для фестиваля соревнования:{" "}
                 <span className="text-[#1068B0]">
@@ -63,7 +63,7 @@ function Info() {
           <div className="flex flex-row mt-8">
             <div className="flex-1 basis-1/3"></div>
 
-            <div className="flex-col min-w-2/3 justify-start items-start">
+            <div className="flex-col md:min-w-2/3 justify-start items-start">
               <Button
                 onClick={() => {
                   console.log("test");
@@ -77,24 +77,24 @@ function Info() {
           </div>
         </div>
 
-        <div className="container mx-auto flex flex-row pt-24 pb-56">
-          <div className="w-1/3">
+        <div className="container mx-auto flex flex-col md:flex-row pt-12 md:pt-24 pb-28 md:pb-56 gap-4 md:gap-0">
+          <div className="w-full md:w-1/3 flex justify-center md:justify-start">
             <img
               src="/images/info/moto.png"
               alt="moto"
-              className="w-1/2 h-auto object-cover"
+              className="w-3/4 md:w-1/2 h-auto object-cover"
             />
           </div>
-          <div className="w-1/3">
+          <div className="w-full md:w-1/3 flex justify-center">
             <img
               src="/images/info/podium.png"
               alt="car"
-              className="w-full h-auto object-cover"
+              className="w-3/4 md:w-full h-auto object-cover"
             />
           </div>
-          <div className="flex w-1/3">
-            <div className="w-1/3"></div>
-            <div className="w-2/3">
+          <div className="flex w-full md:w-1/3 justify-center md:justify-start">
+            <div className="w-0 md:w-1/3"></div>
+            <div className="w-3/4 md:w-2/3">
               <img
                 src="/images/info/jump.png"
                 alt="jump"

src/components/Map.tsx

@@ -4,31 +4,31 @@ import Button from "./Button";
 function Map() {
   return (
     <div className="bg-[#272727] relative pt-14 pb-32">
-      <div className="container mx-auto flex flex-row">
-        <div className="flex flex-col w-1/2">
-          <h1 className={`${fluxgore.className} text-7xl text-white relative`}>
+      <div className="container mx-auto flex flex-col lg:flex-row px-4">
+        <div className="flex flex-col w-full lg:w-1/2 mb-8 lg:mb-0">
+          <h1 className={`${fluxgore.className} text-4xl md:text-5xl lg:text-7xl text-white relative`}>
             как нас найти
           </h1>
 
-          <h2 className={`${fluxgore.className} text-4xl text-[#1068B0] mt-20`}>
+          <h2 className={`${fluxgore.className} text-2xl md:text-3xl lg:text-4xl text-[#1068B0] mt-10 lg:mt-20`}>
             5-7 сентября 2025
           </h2>
 
           <p
-            className={`${gothampro.className} text-3xl text-[#E6E6E6] mt-5 font-medium max-w-2/3`}
+            className={`${gothampro.className} text-lg md:text-xl lg:text-3xl text-[#E6E6E6] mt-5 font-medium lg:max-w-2/3`}
           >
             г. Москва парк Технических видов спорта, МЦД2 станция Курьяново
           </p>
 
-          <div className="flex flex-col justify-end flex-grow mt-10">
+          <div className="flex flex-col justify-end flex-grow mt-6 lg:mt-10">
             <Button shadowEnabled={false}>схема проезда</Button>
           </div>
         </div>
 
-        <div className="w-1/2">
+        <div className="w-full lg:w-1/2">
           <iframe
             src="https://yandex.com/map-widget/v1/?um=constructor%3Ad4445ea405fa54c9148340a7de87f7a4b9df164b35ff2fe504cf79adc1fab55c&amp;source=constructor"
-            className="w-full h-[500px]"
+            className="w-full h-[300px] md:h-[400px] lg:h-[500px]"
             frameBorder="0"
           ></iframe>
         </div>

src/components/Navbar.tsx

@@ -95,7 +95,7 @@ function Navbar() {
         {/* Mobile Menu Button */}
         <button
           onClick={toggleMenu}
-          className="lg:hidden p-2 rounded-md hover:bg-white hover:bg-opacity-10 transition-colors"
+          className="lg:hidden p-2 rounded-md hover:bg-white hover:bg-opacity-10 hover:text-black transition-colors"
           aria-label="Toggle menu"
         >
           <svg
@@ -174,10 +174,7 @@ function Navbar() {
                 rel="noopener noreferrer"
                 className="w-10 h-10 bg-white bg-opacity-10 hover:bg-opacity-20 rounded-full flex items-center justify-center transition-all duration-200"
               >
-                <svg
-                  className="w-5 h-5 fill-white"
-                  viewBox="0 0 24 24"
-                >
+                <svg className="w-5 h-5 fill-black" viewBox="0 0 24 24">
                   <path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z" />
                 </svg>
               </Link>
@@ -187,10 +184,7 @@ function Navbar() {
                 rel="noopener noreferrer"
                 className="w-10 h-10 bg-white bg-opacity-10 hover:bg-opacity-20 rounded-full flex items-center justify-center transition-all duration-200"
               >
-                <svg
-                  className="w-5 h-5 fill-white"
-                  viewBox="0 0 24 24"
-                >
+                <svg className="w-5 h-5 fill-black" viewBox="0 0 24 24">
                   <path d="M15.684 0H8.316C1.592 0 0 1.592 0 8.316v7.368C0 22.408 1.592 24 8.316 24h7.368C22.408 24 24 22.408 24 15.684V8.316C24 1.592 22.408 0 15.684 0zm3.692 17.123h-1.744c-.66 0-.864-.525-2.05-1.71-1.033-1.001-1.49-.996-1.701-.996-.346 0-.444.097-.444.574v1.563c0 .422-.135.678-1.253.678-1.846 0-3.896-1.118-5.335-3.202C4.624 10.857 4.03 8.57 4.03 8.096c0-.21.097-.405.574-.405h1.744c.428 0 .59.194.756.648.83 2.405 2.229 4.506 2.807 4.506.213 0 .31-.097.31-.632V9.98c-.062-1.438-.84-1.563-.84-2.077 0-.17.135-.34.359-.34h2.744c.359 0 .487.194.487.632v3.473c0 .359.159.487.259.487.213 0 .383-.128.773-.518 1.205-1.315 2.067-3.34 2.067-3.34.118-.248.311-.485.73-.485h1.744c.523 0 .634.27.523.632-.24.749-2.42 4.062-2.42 4.062-.194.31-.259.446 0 .747.194.226 1.116.96 1.394 1.315.757.973.525 1.528.157 1.528z" />
                 </svg>
               </Link>
@@ -200,10 +194,7 @@ function Navbar() {
                 rel="noopener noreferrer"
                 className="w-10 h-10 bg-white bg-opacity-10 hover:bg-opacity-20 rounded-full flex items-center justify-center transition-all duration-200"
               >
-                <svg
-                  className="w-5 h-5 fill-white"
-                  viewBox="0 0 24 24"
-                >
+                <svg className="w-5 h-5 fill-black" viewBox="0 0 24 24">
                   <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
                 </svg>
               </Link>
@@ -215,4 +206,4 @@ function Navbar() {
   );
 }
 
-export default Navbar;
+export default Navbar;

src/components/Partners.tsx

@@ -4,7 +4,7 @@ import { fluxgore } from "@/utils/fonts";
 function Partners() {
   return (
     <div
-      className="bg-[#161616] relative py-52"
+      className="bg-[#161616] relative py-16 sm:py-32 lg:py-52"
       style={{
         backgroundImage: `url('/images/noise.svg')`,
         backgroundSize: "cover",
@@ -12,35 +12,37 @@ function Partners() {
         backgroundBlendMode: "overlay",
       }}
     >
-      <div className="container mx-auto">
-        <h1 className={`${fluxgore.className} text-7xl text-white relative`}>
+      <div className="container mx-auto px-4">
+        <h1
+          className={`${fluxgore.className} text-4xl sm:text-5xl md:text-6xl lg:text-7xl text-white relative`}
+        >
           партнеры
         </h1>
 
-        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-24 mt-16">
+        <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-8 sm:gap-12 md:gap-16 lg:gap-24 mt-8 sm:mt-12 lg:mt-16">
           <img
             src="/logos/dep.svg"
-            className="w-auto h-24 object-contain"
+            className="w-auto h-16 sm:h-20 lg:h-24 object-contain"
             alt="Dep Logo"
           />
           <img
             src="/logos/mos.svg"
-            className="w-auto h-24 object-contain"
+            className="w-auto h-16 sm:h-20 lg:h-24 object-contain"
             alt="Mos Logo"
           />
           <img
             src="/logos/raf.png"
-            className="w-auto h-24 object-contain"
+            className="w-auto h-16 sm:h-20 lg:h-24 object-contain"
             alt="Raf Logo"
           />
           <img
             src="/logos/ctvs.png"
-            className="w-auto h-24 object-contain"
+            className="w-auto h-16 sm:h-20 lg:h-24 object-contain"
             alt="Ctvs Logo"
           />
           <img
             src="/logos/smp.png"
-            className="w-auto h-24 object-contain"
+            className="w-auto h-16 sm:h-20 lg:h-24 object-contain"
             alt="SMP Logo"
           />
         </div>

src/components/Scheme.tsx

@@ -15,8 +15,8 @@ function SchemeSelect({
   onClick,
 }: SchemeSelectProps) {
   const baseClasses = `${fluxgore.className} leading-none cursor-pointer transition-all duration-300 ease-in-out hover:opacity-80 transform hover:scale-105`;
-  const activeClasses = "text-[#1E1E1E] text-4xl";
-  const inactiveClasses = "text-[#0D0D0D] text-xl opacity-50 self-end";
+  const activeClasses = "text-[#1E1E1E] text-2xl md:text-4xl";
+  const inactiveClasses = "text-[#0D0D0D] text-base md:text-xl opacity-50 self-end";
 
   return (
     <p
@@ -35,14 +35,14 @@ interface SchemeItemProps {
 
 function SchemeItem({ time, title }: SchemeItemProps) {
   return (
-    <div className="flex flex-row items-center space-x-2.5">
+    <div className="flex flex-col md:flex-row md:items-center space-y-1 md:space-y-0 md:space-x-2.5">
       <span
-        className={`${gothampro.className} text-white bg-[#1068B0] text-xl px-7 py-2.5`}
+        className={`${gothampro.className} text-white bg-[#1068B0] text-base md:text-xl px-4 md:px-7 py-1.5 md:py-2.5 text-center`}
       >
         {time}
       </span>
       <span
-        className={`${gothampro.className} text-[#0D0D0D] text-xl font-medium`}
+        className={`${gothampro.className} text-[#0D0D0D] text-base md:text-xl font-medium`}
       >
         {title}
       </span>
@@ -63,17 +63,17 @@ function Scheme() {
   ];
 
   return (
-    <div className="bg-[#F4F4F4] relative pt-20 pb-32">
+    <div className="bg-[#F4F4F4] relative pt-10 md:pt-20 pb-16 md:pb-32 px-4 md:px-0">
       <div className="container mx-auto">
-        <div className="flex flex-row justify-between">
+        <div className="flex flex-col md:flex-row md:justify-between space-y-4 md:space-y-0">
           <h1
-            className={`${fluxgore.className} text-7xl text-[#060606] relative`}
+            className={`${fluxgore.className} text-4xl md:text-7xl text-[#060606] relative`}
           >
             схема фестиваля
           </h1>
 
           <p
-            className={`${gothampro.className} text-[#060606] text-xl max-w-[354px] leading-none self-end`}
+            className={`${gothampro.className} text-[#060606] text-base md:text-xl max-w-full md:max-w-[354px] leading-normal md:leading-none md:self-end`}
           >
             [Выберите площадку, чтобы увидеть расписание]
           </p>
@@ -82,10 +82,10 @@ function Scheme() {
         <img
           src="/images/scheme/map.png"
           alt="Festival Map"
-          className="mt-20 w-full h-auto"
+          className="mt-10 md:mt-20 w-full h-auto"
         />
 
-        <div className="flex flex-row mt-40 space-x-5 justify-center">
+        <div className="flex flex-col md:flex-row mt-10 md:mt-40 space-y-3 md:space-y-0 md:space-x-5 items-center justify-center">
           <Button shadowEnabled={false} variant="blue">
             5 сентября
           </Button>
@@ -97,7 +97,7 @@ function Scheme() {
           </Button>
         </div>
 
-        <div className="flex flex-row mt-14 space-x-12 justify-center min-h-10">
+        <div className="flex flex-wrap md:flex-row mt-8 md:mt-14 gap-3 md:gap-0 md:space-x-12 justify-center min-h-10">
           {venues.map((venue) => (
             <SchemeSelect
               key={venue.name}
@@ -109,7 +109,7 @@ function Scheme() {
           ))}
         </div>
 
-        <div className="grid grid-cols-2 gap-4 mt-20 max-w-4xl mx-auto">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-10 md:mt-20 max-w-4xl mx-auto">
           <SchemeItem time="10:00-10:30" title="Открытие фестиваля" />
           <SchemeItem time="10:00-10:30" title="Открытие фестиваля" />
           <SchemeItem time="10:00-10:30" title="Открытие фестиваля" />

src/components/Video.tsx

@@ -10,12 +10,14 @@ function VideoStats(props: VideoStatsProps) {
   const { number, label } = props;
   return (
     <div className="flex flex-col">
-      <h1 className={`${fluxgore.className} text-8xl text-[#1068B0] relative`}>
+      <h1
+        className={`${fluxgore.className} text-4xl md:text-8xl text-[#1068B0] relative`}
+      >
         {number}
       </h1>
 
       <p
-        className={`${gothampro.className} text-[#E6E6E6] text-xl max-w-[536px] leading-normal uppercase`}
+        className={`${gothampro.className} text-[#E6E6E6] text-sm md:text-xl max-w-[536px] leading-normal uppercase`}
       >
         {label}
       </p>
@@ -26,7 +28,7 @@ function VideoStats(props: VideoStatsProps) {
 function Video() {
   return (
     <div
-      className="bg-[#161616] relative overflow-hidden pt-20"
+      className="bg-[#161616] relative overflow-hidden pt-10 md:pt-20"
       style={{
         backgroundImage: `url('/images/noise.svg')`,
         backgroundSize: "cover",
@@ -40,14 +42,16 @@ function Video() {
         alt="Lines"
       />
 
-      <div className="container mx-auto">
-        <div className="flex flex-row space-x-16">
-          <h1 className={`${fluxgore.className} text-7xl text-white relative`}>
+      <div className="container mx-auto px-4">
+        <div className="flex flex-col md:flex-row space-y-6 md:space-y-0 md:space-x-16">
+          <h1
+            className={`${fluxgore.className} text-4xl md:text-7xl text-white relative`}
+          >
             как это Было
           </h1>
 
           <p
-            className={`${gothampro.className} text-[#E6E6E6] opacity-90 text-xl max-w-[536px] leading-none`}
+            className={`${gothampro.className} text-[#E6E6E6] opacity-90 text-base md:text-xl max-w-full md:max-w-[536px] leading-relaxed md:leading-none`}
           >
             Прошлый фестиваль технических видов спорта стал незабываемым
             праздником скорости и мастерства, собрав рекордное количество
@@ -55,7 +59,7 @@ function Video() {
           </p>
         </div>
 
-        <div className="flex mt-14">
+        <div className="flex mt-8 md:mt-14">
           <iframe
             src="https://www.youtube.com/embed/FVzlAMLPFh0?si=E_EaXkQ3tJYtyf_s"
             title="YouTube video player"
@@ -66,12 +70,12 @@ function Video() {
             className="w-full h-auto aspect-video"
             style={{
               clipPath:
-                "polygon(60px 0, 100% 0, 100% calc(100% - 60px), calc(100% - 60px) 100%, 0 100%, 0 60px)",
+                "polygon(30px 0, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%, 0 30px)",
             }}
           ></iframe>
         </div>
 
-        <div className="grid grid-cols-4 gap-24 mt-36 pb-64">
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-24 mt-16 md:mt-36 pb-32 md:pb-64">
           <VideoStats number="260" label="[ единиц техники ]" />
           <VideoStats
             number="11"
@@ -86,7 +90,7 @@ function Video() {
       </div>
 
       <img
-        className="absolute bottom-0 object-cover"
+        className="absolute bottom-0 object-cover w-full"
         src="/images/video/paper_tear.png"
         alt="Paper tear"
       />

src/pages/preview.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 import Activities from "@/components/Activities";
 import Cover from "@/components/Cover";
 import Events from "@/components/Events";
@@ -17,7 +18,7 @@ export default function Home() {
         <Cover />
         <Info />
         <Video />
-        <Scheme />
+        {/* <Scheme /> */}
         <Events />
         <Activities />
         <Partners />