-

2026-05-21 21:18:11 +03:00 · 2026-05-21 21:18:11 +03:00 · 4ca1a4d497
commit 4ca1a4d497
parent 06936e7a4f
5 changed files with 170 additions and 74 deletions
--- a/app/globals.css
+++ b/app/globals.css
@ -209,6 +209,9 @@
  .marquee-winners:hover {
    animation-play-state: paused;
  }
+  .marquee-winners-paused {
+    animation-play-state: paused !important;
+  }

  @keyframes winner-impact-pulse {
    0%,
@ -233,6 +236,9 @@
  }

  .winner-impact-value {
+    display: block;
+    max-width: 50%;
+    margin-inline: auto;
    animation:
      winner-impact-pulse 2.4s ease-in-out infinite,
      winner-impact-glow 2.4s ease-in-out infinite;
--- a/components/home/LastYearWinnerMark.tsx
+++ b/components/home/LastYearWinnerMark.tsx
@ -12,9 +12,11 @@ const GRV_LOGO = "/branding/logo-icon.png";
 type Props = {
  company: LastYearWinner;
  tipKey: string;
-  isTipOpen: boolean;
-  onTipOpen: (key: string) => void;
-  onTipClose: () => void;
+  isOpen: boolean;
+  isPinned: boolean;
+  onPin: () => void;
+  onUnpin: () => void;
+  onHover: (key: string | null) => void;
  variant?: "on-green" | "on-light";
  className?: string;
 };
@ -22,58 +24,71 @@ type Props = {
 export function LastYearWinnerMark({
  company,
  tipKey,
-  isTipOpen,
-  onTipOpen,
-  onTipClose,
+  isOpen,
+  isPinned,
+  onPin,
+  onUnpin,
+  onHover,
  variant = "on-light",
  className,
 }: Props) {
-  const closeTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const leaveTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
  const [failed, setFailed] = useState(false);
  const src = company.logoSrc ?? GRV_LOGO;
  const showImage = !failed && src;
  const logoOnly = !company.name;
  const onLight = variant === "on-light";

-  const clearCloseTimer = useCallback(() => {
-    if (closeTimer.current) {
-      clearTimeout(closeTimer.current);
-      closeTimer.current = null;
+  const clearLeaveTimer = useCallback(() => {
+    if (leaveTimer.current) {
+      clearTimeout(leaveTimer.current);
+      leaveTimer.current = null;
    }
  }, []);

  const handleEnter = useCallback(() => {
-    clearCloseTimer();
-    onTipOpen(tipKey);
-  }, [clearCloseTimer, onTipOpen, tipKey]);
+    clearLeaveTimer();
+    onHover(tipKey);
+  }, [clearLeaveTimer, onHover, tipKey]);

  const handleLeave = useCallback(() => {
-    clearCloseTimer();
-    closeTimer.current = setTimeout(() => onTipClose(), 120);
-  }, [clearCloseTimer, onTipClose]);
+    if (isPinned) return;
+    clearLeaveTimer();
+    leaveTimer.current = setTimeout(() => onHover(null), 120);
+  }, [clearLeaveTimer, isPinned, onHover]);
+
+  const handleClick = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      onPin();
+    },
+    [onPin]
+  );

  const handleOpenChange = useCallback(
    (open: boolean) => {
-      if (open) onTipOpen(tipKey);
-      else onTipClose();
+      if (!open && !isPinned) onHover(null);
    },
-    [onTipOpen, onTipClose, tipKey]
+    [isPinned, onHover]
  );

  return (
-    <Popover open={isTipOpen} onOpenChange={handleOpenChange}>
+    <Popover open={isOpen} onOpenChange={handleOpenChange}>
      <PopoverTrigger asChild>
        <button
          type="button"
+          data-winner-interactive
          className={cn(
            "shrink-0 rounded-lg outline-none focus-visible:ring-2 focus-visible:ring-[#1a5c38]/40",
-            isTipOpen && "relative z-30"
+            isOpen && "relative z-30"
          )}
          aria-label={
            company.name
-              ? `${company.name} — hover for impact details`
-              : "GRV alumni — hover for impact details"
+              ? `${company.name} — tap to read impact details`
+              : "GRV alumni — tap to read impact details"
          }
+          aria-expanded={isOpen}
+          onClick={handleClick}
          onMouseEnter={handleEnter}
          onMouseLeave={handleLeave}
          onFocus={handleEnter}
@ -86,10 +101,11 @@ export function LastYearWinnerMark({
                ? "border-[#1a5c38]/15 bg-white/95 hover:border-[#1a5c38]/30 hover:bg-white"
                : "border-white/25 bg-white/90 hover:border-white/50 hover:bg-white",
              logoOnly && "px-2",
-              isTipOpen &&
+              isOpen &&
                (onLight
                  ? "border-[#1a5c38]/40 ring-2 ring-[#1a5c38]/15"
                  : "border-white/60 ring-2 ring-white/25"),
+              isPinned && "border-[#ffb300]/70 ring-2 ring-[#ffb300]/25",
              className
            )}
          >
@ -125,17 +141,25 @@ export function LastYearWinnerMark({
          </div>
        </button>
      </PopoverTrigger>
-      {isTipOpen ? (
+      {isOpen ? (
        <PopoverContent
          side="top"
          align="center"
          sideOffset={8}
-          className="z-50 border-[#1a5c38]/15 bg-white p-0 shadow-lg"
+          collisionPadding={12}
+          data-winner-interactive
+          className="z-50 w-72 max-w-[calc(100vw-2rem)] shrink-0 overflow-hidden border-[#1a5c38]/15 bg-white p-0 shadow-lg"
          onMouseEnter={handleEnter}
          onMouseLeave={handleLeave}
          onOpenAutoFocus={(e) => e.preventDefault()}
+          onPointerDownOutside={(e) => {
+            if (isPinned) e.preventDefault();
+          }}
+          onInteractOutside={(e) => {
+            if (isPinned) e.preventDefault();
+          }}
        >
-          <LastYearWinnerTip company={company} />
+          <LastYearWinnerTip company={company} onClose={onUnpin} showClose={isPinned} />
        </PopoverContent>
      ) : null}
    </Popover>
--- a/components/home/LastYearWinnerTip.tsx
+++ b/components/home/LastYearWinnerTip.tsx
@ -3,7 +3,7 @@
 import { useState } from "react";
 import Image from "next/image";
 import Link from "next/link";
-import { ExternalLink, HandHeart } from "lucide-react";
+import { ExternalLink, HandHeart, X } from "lucide-react";
 import { getWinnerImpact, type LastYearWinner } from "@/content/last-year-winners";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
@ -11,6 +11,8 @@ import { cn } from "@/lib/utils";
 type Props = {
  company: LastYearWinner;
  className?: string;
+  showClose?: boolean;
+  onClose?: () => void;
 };

 function externalLinkProps(href: string) {
@ -55,7 +57,7 @@ function FounderPhoto({ company }: { company: LastYearWinner }) {
  );
 }

-export function LastYearWinnerTip({ company, className }: Props) {
+export function LastYearWinnerTip({ company, className, showClose, onClose }: Props) {
  const impact = getWinnerImpact(company);
  const headline = impact.metrics.find((m) => m.highlight) ?? impact.metrics[0];
  const supporting = impact.metrics.filter((m) => m !== headline).slice(0, 2);
@ -63,9 +65,11 @@ export function LastYearWinnerTip({ company, className }: Props) {
  const viewHref = impact.links.view ?? impact.links.website;
  const donateHref = impact.links.donate;

+  const showFooter = showClose || viewHref || donateHref;
+
  return (
-    <div className={cn("w-[min(calc(100vw-2rem),16.5rem)]", className)}>
-      <div className="flex gap-3 px-3 pt-3 pb-2">
+    <div className={cn("box-border w-72 max-w-full shrink-0 overflow-hidden", className)}>
+      <div className="flex min-w-0 gap-2.5 px-3 pt-3 pb-2">
        <FounderPhoto company={company} />
        <div className="min-w-0 flex-1">
          <p className="truncate text-[11px] font-semibold uppercase tracking-wider text-[#1a5c38]">
@ -81,56 +85,74 @@ export function LastYearWinnerTip({ company, className }: Props) {
      </div>

      {headline ? (
-        <div className="mx-3 mb-2 rounded-lg border border-[#1a5c38]/12 bg-[#f0f5f2] px-3 py-2.5 text-center">
-          <p className="text-[10px] font-bold uppercase tracking-wider text-[#1a5c38]/75">
+        <div className="mx-3 mb-2 overflow-hidden rounded-lg border border-[#1a5c38]/12 bg-[#f0f5f2] px-2.5 py-2 text-center">
+          <p className="truncate text-[10px] font-bold uppercase tracking-wider text-[#1a5c38]/75">
            {headline.label}
          </p>
-          <p className="winner-impact-value mt-0.5 font-display text-2xl font-extrabold tracking-tight text-[#0d3d26]">
+          <p className="winner-impact-value mt-0.5 truncate font-display text-xl font-extrabold tracking-tight text-[#0d3d26]">
            {headline.value}
          </p>
        </div>
      ) : null}

      {supporting.length > 0 ? (
-        <dl className="grid grid-cols-2 gap-1.5 px-3 pb-2">
+        <dl className="grid min-w-0 grid-cols-2 gap-1.5 px-3 pb-2">
          {supporting.map((m) => (
-            <div key={m.label} className="rounded-md bg-[#f7faf8] px-2 py-1.5 text-center">
-              <dt className="text-[9px] font-semibold uppercase tracking-wide text-[#1a5c38]/65">
+            <div key={m.label} className="min-w-0 rounded-md bg-[#f7faf8] px-1.5 py-1.5 text-center">
+              <dt className="truncate text-[9px] font-semibold uppercase tracking-wide text-[#1a5c38]/65">
                {m.label}
              </dt>
-              <dd className="text-xs font-bold text-[#0d3d26]">{m.value}</dd>
+              <dd className="truncate text-xs font-bold text-[#0d3d26]">{m.value}</dd>
            </div>
          ))}
        </dl>
      ) : null}

-      {(viewHref || donateHref) && (
-        <div className="flex items-center justify-end gap-2 border-t border-[#1a5c38]/10 bg-[#f7faf8]/80 px-3 py-2">
-          {viewHref ? (
-            <Button
-              variant="outline"
-              size="icon-sm"
-              className="rounded-full border-[#1a5c38]/20 text-[#1a5c38] hover:bg-[#f0f5f2]"
-              asChild
+      {showFooter ? (
+        <div
+          className={cn(
+            "flex w-full min-w-0 items-center gap-1.5 border-t border-[#1a5c38]/10 bg-[#f7faf8]/80 px-2.5 py-2",
+            showClose && onClose ? "justify-between" : "justify-end"
+          )}
+        >
+          {showClose && onClose ? (
+            <button
+              type="button"
+              data-winner-interactive
+              onClick={onClose}
+              className="inline-flex size-7 shrink-0 items-center justify-center rounded-full border border-[#1a5c38]/15 bg-white text-[#1a5c38] shadow-sm transition-colors hover:bg-[#f0f5f2]"
+              aria-label="Close impact details"
            >
-              <Link href={viewHref} aria-label="View startup" {...externalLinkProps(viewHref)}>
-                <ExternalLink className="size-4" />
-              </Link>
-            </Button>
-          ) : null}
-          {donateHref ? (
-            <Button
-              size="icon-sm"
-              className="rounded-full bg-[#1a5c38] text-white hover:bg-[#0d3d26]"
-              asChild
-            >
-              <Link href={donateHref} aria-label="Donate" {...externalLinkProps(donateHref)}>
-                <HandHeart className="size-4" />
-              </Link>
-            </Button>
+              <X className="size-3.5" aria-hidden />
+            </button>
          ) : null}
+          <div className="flex shrink-0 items-center gap-1.5">
+            {viewHref ? (
+              <Button
+                variant="outline"
+                size="icon-sm"
+                className="rounded-full border-[#1a5c38]/20 text-[#1a5c38] hover:bg-[#f0f5f2]"
+                asChild
+              >
+                <Link href={viewHref} aria-label="View startup" {...externalLinkProps(viewHref)}>
+                  <ExternalLink className="size-4" />
+                </Link>
+              </Button>
+            ) : null}
+            {donateHref ? (
+              <Button
+                size="icon-sm"
+                className="rounded-full bg-[#1a5c38] text-white hover:bg-[#0d3d26]"
+                asChild
+              >
+                <Link href={donateHref} aria-label="Donate" {...externalLinkProps(donateHref)}>
+                  <HandHeart className="size-4" />
+                </Link>
+              </Button>
+            ) : null}
+          </div>
        </div>
-      )}
+      ) : null}
    </div>
  );
 }
--- a/components/home/LastYearWinnersScroll.tsx
+++ b/components/home/LastYearWinnersScroll.tsx
@ -1,6 +1,6 @@
 "use client";

-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { lastYearWinners, lastYearWinnersCopy } from "@/content/last-year-winners";
 import { LastYearWinnerMark } from "@/components/home/LastYearWinnerMark";
 import { cn } from "@/lib/utils";
@ -13,16 +13,50 @@ type Props = {
 export function LastYearWinnersScroll({ variant = "on-green", className }: Props) {
  const items = [...lastYearWinners, ...lastYearWinners];
  const onLight = variant === "on-light";
-  const [activeTipKey, setActiveTipKey] = useState<string | null>(null);
+  const [hoverKey, setHoverKey] = useState<string | null>(null);
+  const [pinnedKey, setPinnedKey] = useState<string | null>(null);

-  const openTip = useCallback((key: string) => {
-    setActiveTipKey(key);
+  const isPaused = pinnedKey !== null;
+
+  const pinTip = useCallback((key: string) => {
+    setPinnedKey(key);
+    setHoverKey(null);
  }, []);

-  const closeTip = useCallback(() => {
-    setActiveTipKey(null);
+  const unpinTip = useCallback(() => {
+    setPinnedKey(null);
  }, []);

+  const setHover = useCallback(
+    (key: string | null) => {
+      if (pinnedKey) return;
+      setHoverKey(key);
+    },
+    [pinnedKey]
+  );
+
+  useEffect(() => {
+    if (!pinnedKey) return;
+
+    const dismiss = () => setPinnedKey(null);
+
+    const onPointerDown = (e: PointerEvent) => {
+      const target = e.target as HTMLElement;
+      if (target.closest("[data-winner-interactive]")) return;
+      dismiss();
+    };
+
+    const onScroll = () => dismiss();
+
+    document.addEventListener("pointerdown", onPointerDown, true);
+    window.addEventListener("scroll", onScroll, true);
+
+    return () => {
+      document.removeEventListener("pointerdown", onPointerDown, true);
+      window.removeEventListener("scroll", onScroll, true);
+    };
+  }, [pinnedKey]);
+
  return (
    <div
      className={cn(
@ -67,18 +101,28 @@ export function LastYearWinnersScroll({ variant = "on-green", className }: Props
            onLight ? "from-white" : "from-[#1a5c38]"
          )}
        />
-        <div className="marquee-winners pointer-events-auto flex w-max shrink-0 items-center gap-3 py-1">
+        <div
+          className={cn(
+            "marquee-winners pointer-events-auto flex w-max shrink-0 items-center gap-3 py-1",
+            isPaused && "marquee-winners-paused"
+          )}
+        >
          {items.map((company, i) => {
            const tipKey = `${company.id}-${i}`;
+            const isPinned = pinnedKey === tipKey;
+            const isOpen = isPinned || (!pinnedKey && hoverKey === tipKey);
+
            return (
              <LastYearWinnerMark
                key={tipKey}
                tipKey={tipKey}
                company={company}
                variant={variant}
-                isTipOpen={activeTipKey === tipKey}
-                onTipOpen={openTip}
-                onTipClose={closeTip}
+                isOpen={isOpen}
+                isPinned={isPinned}
+                onPin={() => pinTip(tipKey)}
+                onUnpin={unpinTip}
+                onHover={setHover}
              />
            );
          })}
--- a/content/last-year-winners.ts
+++ b/content/last-year-winners.ts
@ -34,7 +34,7 @@ export type LastYearWinner = {
 export const lastYearWinnersCopy = {
  eyebrow: "Last year's summit",
  headline: "18+ companies supported",
-  hoverHint: "Hover a company to see summit impact",
+  hoverHint: "Tap a company to read impact details",
 } as const;

 const GRV_LOGO = "/branding/logo-icon.png";