add sponsor logo, enable hover scroll on sponsors container

package-lock.json

@@ -9262,17 +9262,6 @@
         }
       }
     },
-    "node_modules/next-intl/node_modules/@swc/helpers": {
-      "version": "0.5.23",
-      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.23.tgz",
-      "integrity": "sha512-5lSsMOTXURePglDfvuAQUqkGek9Hg2kksOYay2m0+XR++b2NWYL/4sWyuvVBIs8oKnJaxkdi9whaL/sqN13afw==",
-      "license": "Apache-2.0",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "tslib": "^2.8.0"
-      }
-    },
     "node_modules/next-themes": {
       "version": "0.4.6",
       "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.4.6.tgz",

src/components/HoverTicker.tsx

@@ -0,0 +1,100 @@
+"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,6 +4,7 @@ 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;
@@ -157,6 +158,13 @@ const sponsors: Sponsor[] = [
     width: 244,
     height: 244,  
   },
+  {
+    href: "",
+    src: "/sponsors/istar.jpg",
+    alt: "iStar Kebab",
+    width: 244,
+    height: 244
+  },
 ];
 
 interface SponsorsProps {
@@ -173,53 +181,65 @@ export default function Sponsors({
   const t = useTranslations();
 
   return (
-    <div
-      className={`flex flex-col w-full xl:h-[414px] mx-auto ${vipnagorgialla.className} font-bold italic border-[#1F5673] ${className}`}
-    >
-      {showTitle && (
-        <h3 className="text-4xl md:text-5xl dark:text-[#EEE5E5] text-[#2A2C3F] uppercase text-center px-12 pt-8 pb-4">
-          {t("home.sections.poweredBy")}
-        </h3>
-      )}
+      <div
+          className={`flex flex-col w-full xl:h-[414px] mx-auto ${vipnagorgialla.className} font-bold italic border-[#1F5673] ${className}`}
+      >
+        {showTitle && (
+            <h3 className="text-4xl md:text-5xl dark:text-[#EEE5E5] text-[#2A2C3F] uppercase text-center px-12 pt-8 pb-4">
+              {t("home.sections.poweredBy")}
+            </h3>
+        )}
 
-      <div className="relative xl:flex-1 overflow-hidden py-8 sm:py-10 xl:py-4 2xl:py-6">
-        <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}`}
-              href={sponsor.href}
-              target="_blank"
-              className="flex items-center justify-center shrink-0"
-              aria-hidden={index >= sponsors.length}
-              tabIndex={index >= sponsors.length ? -1 : undefined}
-            >
-              <Image
-                src={sponsor.src}
-                alt={sponsor.alt}
-                width={sponsor.width}
-                height={sponsor.height}
-                className={`object-contain max-h-[80px] max-w-[120px] sm:max-h-[110px] sm:max-w-[150px] md:max-h-[130px] md:max-w-[180px] lg:max-h-[140px] lg:max-w-[200px] xl:max-h-[180px] xl:max-w-[240px] 2xl:max-h-[210px] 2xl:max-w-[280px] ${sponsor.className || ""}`}
-              />
-            </NextLink>
-          ))}
-        </div>
+        <HoverTicker className="xl:flex-1 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">
+            {tickerSponsors.map((sponsor, index) => (
+                <NextLink
+                    key={`${sponsor.alt}-${index}`}
+                    href={sponsor.href}
+                    target="_blank"
+                    className="flex items-center justify-center shrink-0"
+                    aria-hidden={index >= sponsors.length}
+                    tabIndex={index >= sponsors.length ? -1 : undefined}
+                >
+                  <Image
+                      src={sponsor.src}
+                      alt={sponsor.alt}
+                      width={sponsor.width}
+                      height={sponsor.height}
+                      className={`object-contain max-h-[80px] max-w-[120px] sm:max-h-[110px] sm:max-w-[150px] md:max-h-[130px] md:max-w-[180px] lg:max-h-[140px] lg:max-w-[200px] xl:max-h-[180px] xl:max-w-[240px] 2xl:max-h-[210px] 2xl:max-w-[280px] ${sponsor.className || ""}`}
+                  />
+                </NextLink>
+            ))}
+          </div>
+        </HoverTicker>
+
+        <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%);
+            }
+            to {
+              transform: translateX(-25%);
+            }
+          }
+        `}</style>
       </div>
-
-      <style jsx>{`
-        .ticker-track {
-          animation: sponsors-ticker 36s linear infinite;
-          will-change: transform;
-        }
-
-        @keyframes sponsors-ticker {
-          from {
-            transform: translateX(0%);
-          }
-          to {
-            transform: translateX(-25%);
-          }
-        }
-      `}</style>
-    </div>
   );
 }