diff --git a/package-lock.json b/package-lock.json index bc6fb15..387691a 100644 --- a/package-lock.json +++ b/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", diff --git a/public/sponsors/istar.jpg b/public/sponsors/istar.jpg new file mode 100644 index 0000000..1622b04 Binary files /dev/null and b/public/sponsors/istar.jpg differ diff --git a/src/components/HoverTicker.tsx b/src/components/HoverTicker.tsx new file mode 100644 index 0000000..b2c242f --- /dev/null +++ b/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(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) => { + 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 ( +
+
+ {children} +
+ + +
+ ); +} \ No newline at end of file diff --git a/src/components/Sponsors.tsx b/src/components/Sponsors.tsx index e3593d0..2688a4b 100644 --- a/src/components/Sponsors.tsx +++ b/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 ( -
- {showTitle && ( -

- {t("home.sections.poweredBy")} -

- )} +
+ {showTitle && ( +

+ {t("home.sections.poweredBy")} +

+ )} -
-
- {tickerSponsors.map((sponsor, index) => ( - = sponsors.length} - tabIndex={index >= sponsors.length ? -1 : undefined} - > - {sponsor.alt} - - ))} -
+ +
+ {tickerSponsors.map((sponsor, index) => ( + = sponsors.length} + tabIndex={index >= sponsors.length ? -1 : undefined} + > + {sponsor.alt} + + ))} +
+
+ +
- - -
); }