remove hover scrolling from sponsors

src/components/HoverTicker.tsx

@@ -1,100 +0,0 @@
-"use client";
-
-import { useRef, useEffect, ReactNode } from "react";
-
-interface HoverTickerProps {
-    children: ReactNode;
-    className?: string;
-    baseSpeed?: number;
-    hoverSpeed?: number;
-}
-
-export default function HoverTicker({
-        children,
-        className = "",
-        baseSpeed = 1.2,
-        hoverSpeed = 3.5,
-    }: HoverTickerProps) {
-
-    const containerRef = useRef<HTMLDivElement>(null);
-    const mouseZoneRef = useRef<"left" | "right" | "paused" | "none">("none");
-
-    useEffect(() => {
-        const container = containerRef.current;
-        if (!container) return;
-
-        let animationFrameId: number;
-
-        const animate = () => {
-            if (container) {
-                const zone = mouseZoneRef.current;
-
-                if (zone === "none") {
-                    container.scrollLeft += baseSpeed;
-                } else if (zone === "right") {
-                    container.scrollLeft += hoverSpeed;
-                } else if (zone === "left") {
-                    container.scrollLeft -= hoverSpeed;
-                }
-
-                // Infinite scroll cycle
-                const maxScroll = container.scrollWidth / 2;
-
-                if (container.scrollLeft >= maxScroll) {
-                    container.scrollLeft -= maxScroll / 2;
-                } else if (container.scrollLeft <= 0 && (zone === "left" || zone === "paused")) {
-                    container.scrollLeft += maxScroll / 2;
-                }
-            }
-            animationFrameId = requestAnimationFrame(animate);
-        };
-
-        animationFrameId = requestAnimationFrame(animate);
-
-        return () => cancelAnimationFrame(animationFrameId);
-    }, [baseSpeed, hoverSpeed]);
-
-    const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
-        const container = containerRef.current;
-        if (!container) return;
-
-        const rect = container.getBoundingClientRect();
-        const mouseX = e.clientX - rect.left;
-        const width = rect.width;
-
-        if (mouseX < width * 0.3) {
-            mouseZoneRef.current = "left";
-        } else if (mouseX > width * 0.7) {
-            mouseZoneRef.current = "right";
-        } else {
-            mouseZoneRef.current = "paused";
-        }
-    };
-
-    const handleMouseLeave = () => {
-        mouseZoneRef.current = "none";
-    };
-
-    return (
-        <div
-            ref={containerRef}
-            onMouseMove={handleMouseMove}
-            onMouseLeave={handleMouseLeave}
-            className={`ticker-container relative overflow-x-auto select-none ${className}`}
-        >
-            <div className="flex items-center w-max">
-                {children}
-            </div>
-
-            <style jsx>{`
-        .ticker-container {
-          -ms-overflow-style: none;
-          scrollbar-width: none;
-        }
-        .ticker-container::-webkit-scrollbar {
-          display: none;
-        }
-      `}</style>
-        </div>
-    );
-}

src/components/Sponsors.tsx

@@ -4,7 +4,6 @@ import { vipnagorgialla } from "@/components/Vipnagorgialla";
 import { useTranslations } from "next-intl";
 import Image from "next/image";
 import NextLink from "next/link";
-import HoverTicker from "@/components/HoverTicker";
 
 interface Sponsor {
   href: string;
@@ -163,7 +162,7 @@ const sponsors: Sponsor[] = [
     src: "/sponsors/istar.jpg",
     alt: "iStar Kebab",
     width: 244,
-    height: 244
+    height: 244,
   },
 ];
 
@@ -190,8 +189,8 @@ export default function Sponsors({
         </h3>
       )}
 
-        <HoverTicker className="xl:flex-1 py-8 sm:py-10 xl:py-4 2xl:py-6">
+      <div className="relative xl:flex-1 overflow-hidden py-8 sm:py-10 xl:py-4 2xl:py-6">
-          <div className="flex items-center gap-8 sm:gap-10 md:gap-12 xl:gap-16 2xl:gap-20 px-8 sm:px-10 xl:px-14 2xl:px-20">
+        <div className="ticker-track flex items-center w-max gap-8 sm:gap-10 md:gap-12 xl:gap-16 2xl:gap-20 px-8 sm:px-10 xl:px-14 2xl:px-20">
           {tickerSponsors.map((sponsor, index) => (
             <NextLink
               key={`${sponsor.alt}-${index}`}
@@ -211,26 +210,14 @@ export default function Sponsors({
             </NextLink>
           ))}
         </div>
-        </HoverTicker>
+      </div>
 
       <style jsx>{`
-          .ticker-container {
-            -ms-overflow-style: none; /* IE and Edge */
-            scrollbar-width: none; /* Firefox */
-          }
-          .ticker-container::-webkit-scrollbar {
-            display: none; /* Chrome, Safari, Opera */
-          }
-
         .ticker-track {
           animation: sponsors-ticker 36s linear infinite;
           will-change: transform;
         }
 
-          .ticker-container:hover .ticker-track {
-            animation-play-state: paused;
-          }
-
         @keyframes sponsors-ticker {
           from {
             transform: translateX(0%);