feat: remove unused animation logic and clean up components for better performance

src/components/Cover.tsx

@@ -13,13 +13,11 @@ function CoverHeading({ children, textPosition }: CoverHeadingProps) {
 
   return (
     <h1
-      className={`${fluxgore.className} text-white relative animate-fade-in-up uppercase`}
+      className={`${fluxgore.className} text-white relative uppercase`}
       style={{
         textAlign: textAlign,
         fontSize: "clamp(50px, 10vw, 7vw)", // Slightly smaller on all screen sizes
         lineHeight: "1",
-        animationDelay: textPosition === "right" ? "0.3s" : "0.1s",
-        animationFillMode: "both",
       }}
     >
       {/* Shadow layer */}
@@ -71,7 +69,7 @@ function CoverHeading({ children, textPosition }: CoverHeadingProps) {
 function DateBox() {
   return (
     <div
-      className={`${fluxgore.className} bg-white text-black px-6 py-2 inline-block text-3xl md:text-[40px] animate-bounce-in uppercase`}
+      className={`${fluxgore.className} bg-white text-black px-6 py-2 inline-block text-3xl md:text-[40px] uppercase`}
       style={{
         transform: "skewX(-15deg)",
         lineHeight: "1.2",
@@ -80,8 +78,6 @@ function DateBox() {
             drop-shadow(-2px -2px 0px rgba(0,0,0,0.3))
           `,
         border: "4px solid black",
-        animationDelay: "0.5s",
-        animationFillMode: "both",
       }}
     >
       <div style={{ transform: "skewX(15deg)" }}>
@@ -95,7 +91,7 @@ function DateBox() {
 
 function Cover() {
   return (
-    <div className="relative justify-center items-center py-36 animate-fade-in">
+    <div className="relative justify-center items-center py-36">
       {/* Background Image */}
       <Image
         src="/images/KV.png"
@@ -129,11 +125,7 @@ function Cover() {
               alt="Фестиваль технических видов спорта 2025"
               width={768}
               height={400}
-              className="w-full max-w-3xl mx-auto hidden md:block animate-slide-in-left"
+              className="w-full max-w-3xl mx-auto hidden md:block"
-              style={{
-                animationDelay: "0.2s",
-                animationFillMode: "both",
-              }}
               priority
             />
 
@@ -142,11 +134,7 @@ function Cover() {
               alt="Фестиваль технических видов спорта 2025"
               width={576}
               height={300}
-              className="w-full max-w-3xl mx-auto md:hidden animate-slide-in-left"
+              className="w-full max-w-3xl mx-auto md:hidden"
-              style={{
-                animationDelay: "0.2s",
-                animationFillMode: "both",
-              }}
               priority
             />
           </div>
@@ -157,10 +145,8 @@ function Cover() {
               alt="free_entry"
               width={265}
               height={232}
-              className="w-32 md:w-40 animate-slide-in-left"
+              className="w-32 md:w-40"
               style={{
-                animationDelay: "0.4s",
-                animationFillMode: "both",
                 transform: "rotate(15deg)",
               }}
               priority
@@ -168,102 +154,9 @@ function Cover() {
           </div>
         </div>
 
-        <div className="flex justify-center items-center">
+        <div className="flex justify-center items-center"></div>
-          {/* <Button
-            onClick={() => {
-              window.location.href = "/about";
-            }}
-            className="animate-pulse-glow hover:animate-none transition-all duration-300 hover:scale-105"
-            style={{
-              animationDelay: "0.8s",
-              animationFillMode: "both",
-            }}
-          >
-            смотреть карту
-          </Button> */}
       </div>
     </div>
-
-      <style jsx>{`
-        @keyframes fade-in {
-          from {
-            opacity: 0;
-          }
-          to {
-            opacity: 1;
-          }
-        }
-
-        @keyframes fade-in-up {
-          from {
-            opacity: 0;
-            transform: translateY(30px);
-          }
-          to {
-            opacity: 1;
-            transform: translateY(0);
-          }
-        }
-
-        @keyframes slide-in-left {
-          from {
-            opacity: 0;
-            transform: translateX(-50px);
-          }
-          to {
-            opacity: 1;
-            transform: translateX(0);
-          }
-        }
-
-        @keyframes bounce-in {
-          0% {
-            opacity: 0;
-            transform: scale(0.3) skewX(-15deg);
-          }
-          50% {
-            transform: scale(1.05) skewX(-15deg);
-          }
-          70% {
-            transform: scale(0.9) skewX(-15deg);
-          }
-          100% {
-            opacity: 1;
-            transform: scale(1) skewX(-15deg);
-          }
-        }
-
-        @keyframes pulse-glow {
-          0%,
-          100% {
-            box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
-          }
-          50% {
-            box-shadow: 0 0 30px rgba(255, 255, 255, 0.6);
-          }
-        }
-
-        .animate-fade-in {
-          animation: fade-in 0.8s ease-out;
-        }
-
-        .animate-fade-in-up {
-          animation: fade-in-up 0.6s ease-out;
-        }
-
-        .animate-slide-in-left {
-          animation: slide-in-left 0.8s ease-out;
-        }
-
-        .animate-bounce-in {
-          animation: bounce-in 0.8s ease-out;
-        }
-
-        .animate-pulse-glow {
-          animation: pulse-glow 2s ease-in-out infinite;
-        }
-      `}</style>
-    </div>
   );
 }
 

src/components/Info.tsx

@@ -1,61 +1,12 @@
 /* eslint-disable @next/next/no-img-element */
 import { gothampro } from "@/utils/fonts";
 import Button from "./Button";
-import { useEffect, useRef } from "react";
 import Image from "next/image";
 
 function Info() {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const elementsRef = useRef<(HTMLDivElement | null)[]>([]);
-
-  useEffect(() => {
-    const observer = new IntersectionObserver(
-      (entries) => {
-        entries.forEach((entry) => {
-          if (entry.isIntersecting) {
-            entry.target.classList.add("animate-fade-in-up");
-            entry.target.classList.remove("opacity-0", "translate-y-8");
-          }
-        });
-      },
-      { threshold: 0.1, rootMargin: "0px 0px -50px 0px" }
-    );
-
-    elementsRef.current.forEach((el) => {
-      if (el) observer.observe(el);
-    });
-
-    return () => observer.disconnect();
-  }, []);
-
-  const addToRefs = (el: HTMLDivElement | null) => {
-    if (el && !elementsRef.current.includes(el)) {
-      elementsRef.current.push(el);
-    }
-  };
-
   return (
     <div id="info" className={gothampro.className}>
-      <style jsx>{`
+      <div className="bg-[#161616] relative overflow-hidden px-4">
-        @keyframes fadeInUp {
-          from {
-            opacity: 0;
-            transform: translateY(30px);
-          }
-          to {
-            opacity: 1;
-            transform: translateY(0);
-          }
-        }
-        .animate-fade-in-up {
-          animation: fadeInUp 0.6s ease-out forwards;
-        }
-      `}</style>
-
-      <div
-        ref={containerRef}
-        className="bg-[#161616] relative overflow-hidden px-4"
-      >
         {/* Background noise pattern */}
         <Image
           src="/images/noise.svg"
@@ -66,10 +17,7 @@ function Info() {
         />
 
         <div className="container mx-auto pt-36 relative z-10">
-          <div
+          <div className="flex flex-row">
-            ref={addToRefs}
-            className="flex flex-row opacity-0 translate-y-8 transition-all duration-700"
-          >
             <div className="flex-1 basis-1/3">
               <p className="text-white opacity-60 text-sm md:text-base uppercase font-medium">
                 [ о нас ]
@@ -84,10 +32,7 @@ function Info() {
             </div>
           </div>
 
-          <div
+          <div className="flex flex-row">
-            ref={addToRefs}
-            className="flex flex-row opacity-0 translate-y-8 transition-all duration-700 delay-200"
-          >
             <div className="flex-1 basis-2/12"></div>
 
             <div className="flex-col max-w-10/12">
@@ -98,32 +43,10 @@ function Info() {
             </div>
           </div>
 
-          <div
+          <div className="flex flex-row mt-8">
-            ref={addToRefs}
-            className="flex flex-row mt-8 opacity-0 translate-y-8 transition-all duration-700 delay-300"
-          >
-            {/* <div className="flex-1 basis-1/3"></div>
-
-            <div className="flex-col max-w-2/3">
-              <p className="text-white text-base md:text-base font-normal md:max-w-2/5">
-                В этом году, помимо традиционной «Битвы за Москву» по дрифту,
-                вас ждут абсолютно новые для фестиваля соревнования:{" "}
-                <span className="text-[#1068B0]">
-                  YUKA DRIVE FEST Джимхана и 12-тичасовая картинг-гонка.
-                </span>
-                А также масса активностей: выставки авто/мото, квест,
-                граффити-контест, детская зона и киберкафе. <br />
-                <br />
-                Благодаря новым партнерам, праздник будет еще ярче. Приходите
-                всей семьей и получите незабываемые впечатления!
-              </p>
-            </div> */}
           </div>
 
-          <div
+          <div className="flex flex-row mt-8">
-            ref={addToRefs}
-            className="flex flex-row mt-8 opacity-0 translate-y-8 transition-all duration-700 delay-500"
-          >
             <div className="flex-1 basis-1/3"></div>
 
             <div className="flex-col md:min-w-2/3 justify-start items-start">
@@ -144,10 +67,7 @@ function Info() {
         </div>
 
         <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 relative z-10">
-          <div
+          <div className="w-full md:w-1/3 flex justify-center md:justify-start">
-            ref={addToRefs}
-            className="w-full md:w-1/3 flex justify-center md:justify-start opacity-0 translate-y-8 transition-all duration-700 delay-700"
-          >
             <div className="w-3/4 md:w-1/2 relative hover:scale-105 transition-transform duration-300">
               <Image
                 src="/images/info/moto.png"
@@ -158,10 +78,7 @@ function Info() {
               />
             </div>
           </div>
-          <div
+          <div className="w-full md:w-1/3 flex justify-center">
-            ref={addToRefs}
-            className="w-full md:w-1/3 flex justify-center opacity-0 translate-y-8 transition-all duration-700 delay-900"
-          >
             <div className="w-3/4 md:w-full relative hover:scale-105 transition-transform duration-300">
               <Image
                 src="/images/info/podium.jpg"
@@ -172,10 +89,7 @@ function Info() {
               />
             </div>
           </div>
-          <div
+          <div className="flex w-full md:w-1/3 justify-center md:justify-start">
-            ref={addToRefs}
-            className="flex w-full md:w-1/3 justify-center md:justify-start opacity-0 translate-y-8 transition-all duration-700 delay-1000"
-          >
             <div className="w-0 md:w-1/3"></div>
             <div className="w-3/4 md:w-2/3 relative hover:scale-105 transition-transform duration-300">
               <Image

src/components/Partners.tsx

@@ -1,38 +1,9 @@
 /* eslint-disable @next/next/no-img-element */
 import { fluxgore } from "@/utils/fonts";
 import Button from "./Button";
-import { useEffect, useRef } from "react";
 import Image from "next/image";
 
 function Partners() {
-  const elementsRef = useRef<(HTMLDivElement | null)[]>([]);
-
-  useEffect(() => {
-    const observer = new IntersectionObserver(
-      (entries) => {
-        entries.forEach((entry) => {
-          if (entry.isIntersecting) {
-            entry.target.classList.add("animate-fade-in-up");
-            entry.target.classList.remove("opacity-0", "translate-y-8");
-          }
-        });
-      },
-      { threshold: 0.1, rootMargin: "0px 0px -50px 0px" }
-    );
-
-    elementsRef.current.forEach((el) => {
-      if (el) observer.observe(el);
-    });
-
-    return () => observer.disconnect();
-  }, []);
-
-  const addToRefs = (el: HTMLDivElement | null) => {
-    if (el && !elementsRef.current.includes(el)) {
-      elementsRef.current.push(el);
-    }
-  };
-
   return (
     <div id="partners" className="bg-[#161616] relative py-16 sm:py-32 lg:py-52">
       {/* Background noise pattern */}
@@ -44,27 +15,8 @@ function Partners() {
         quality={75}
       />
 
-      <style jsx>{`
-        @keyframes fadeInUp {
-          from {
-            opacity: 0;
-            transform: translateY(30px);
-          }
-          to {
-            opacity: 1;
-            transform: translateY(0);
-          }
-        }
-        .animate-fade-in-up {
-          animation: fadeInUp 0.6s ease-out forwards;
-        }
-      `}</style>
-
       <div className="container mx-auto px-4 relative z-10">
-        <div
+        <div>
-          ref={addToRefs}
-          className="opacity-0 translate-y-8 transition-all duration-700"
-        >
           <h1
             className={`${fluxgore.className} text-4xl sm:text-5xl md:text-6xl lg:text-7xl text-white relative uppercase`}
           >
@@ -72,10 +24,7 @@ function Partners() {
           </h1>
         </div>
 
-        <div
+        <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">
-          ref={addToRefs}
-          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 opacity-0 translate-y-8 transition-all duration-700 delay-200"
-        >
           <div className="w-auto h-16 sm:h-20 lg:h-24 relative hover:scale-110 transition-transform duration-300">
             <Image
               src="/logos/dep.svg"
@@ -140,20 +89,9 @@ function Partners() {
               className="object-contain"
             />
           </div>
-          {/* <div className="w-auto h-16 sm:h-20 lg:h-24 relative hover:scale-110 transition-transform duration-300">
-            <Image
-              src="/logos/smp.png"
-              alt="SMP Logo"
-              fill
-              className="object-contain"
-            />
-          </div> */}
         </div>
 
-        <div
+        <div>
-          ref={addToRefs}
-          className="opacity-0 translate-y-8 transition-all duration-700 delay-500"
-        >
           <Button
             onClick={() => {
               const mail = "mailto:ftvs.partners@yandex.ru";

src/components/Video.tsx

@@ -1,6 +1,5 @@
 /* eslint-disable @next/next/no-img-element */
 import { fluxgore, gothampro } from "@/utils/fonts";
-import { useEffect, useRef } from "react";
 
 interface VideoStatsProps {
   number: string;
@@ -27,34 +26,6 @@ function VideoStats(props: VideoStatsProps) {
 }
 
 function Video() {
-  const elementsRef = useRef<(HTMLDivElement | null)[]>([]);
-
-  useEffect(() => {
-    const observer = new IntersectionObserver(
-      (entries) => {
-        entries.forEach((entry) => {
-          if (entry.isIntersecting) {
-            entry.target.classList.add("animate-fade-in-up");
-            entry.target.classList.remove("opacity-0", "translate-y-8");
-          }
-        });
-      },
-      { threshold: 0.1, rootMargin: "0px 0px -50px 0px" }
-    );
-
-    elementsRef.current.forEach((el) => {
-      if (el) observer.observe(el);
-    });
-
-    return () => observer.disconnect();
-  }, []);
-
-  const addToRefs = (el: HTMLDivElement | null) => {
-    if (el && !elementsRef.current.includes(el)) {
-      elementsRef.current.push(el);
-    }
-  };
-
   return (
     <div
       className="bg-[#161616] relative overflow-hidden pt-10 md:pt-20"
@@ -65,22 +36,6 @@ function Video() {
         backgroundBlendMode: "overlay",
       }}
     >
-      <style jsx>{`
-        @keyframes fadeInUp {
-          from {
-            opacity: 0;
-            transform: translateY(30px);
-          }
-          to {
-            opacity: 1;
-            transform: translateY(0);
-          }
-        }
-        .animate-fade-in-up {
-          animation: fadeInUp 0.6s ease-out forwards;
-        }
-      `}</style>
-
       <img
         className="absolute top-0 right-0 object-cover"
         src="/images/video/arrows.svg"
@@ -88,10 +43,7 @@ function Video() {
       />
 
       <div className="container mx-auto px-4">
-        <div
+        <div className="flex flex-col md:flex-row space-y-6 md:space-y-0 md:space-x-16">
-          ref={addToRefs}
-          className="flex flex-col md:flex-row space-y-6 md:space-y-0 md:space-x-16 opacity-0 translate-y-8 transition-all duration-700"
-        >
           <h1
             className={`${fluxgore.className} text-4xl md:text-7xl text-white relative uppercase`}
           >
@@ -107,10 +59,7 @@ function Video() {
           </p>
         </div>
 
-        <div
+        <div className="flex mt-8 md:mt-14">
-          ref={addToRefs}
-          className="flex mt-8 md:mt-14 opacity-0 translate-y-8 transition-all duration-700 delay-200"
-        >
           <iframe
             src="https://vkvideo.ru/video_ext.php?oid=-23293707&id=456242039&hd=2"
             frameBorder="0"
@@ -125,10 +74,7 @@ function Video() {
           ></iframe>
         </div>
 
-        <div
+        <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">
-          ref={addToRefs}
-          className="grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-24 mt-16 md:mt-36 pb-32 md:pb-64 opacity-0 translate-y-8 transition-all duration-700 delay-500"
-        >
           <div className="hover:scale-105 transition-transform duration-300">
             <VideoStats number="260" label="[ единиц техники ]" />
           </div>
@@ -149,12 +95,6 @@ function Video() {
           </div>
         </div>
       </div>
-
-      {/* <img
-        className="absolute bottom-0 object-cover w-full"
-        src="/images/video/paper_tear.png"
-        alt="Paper tear"
-      /> */}
     </div>
   );
 }