Kirubel-Kibru-Yaltopia/GRV-Summit-Site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

-
Some checks are pending
Deploy to Cloudflare Workers (OpenNext) / deploy (push) Waiting to run
Details

Browse Source
This commit is contained in:
Kirubel-Kibru-Yaltopia 2026-05-21 21:18:11 +03:00
parent 06936e7a4f
commit 4ca1a4d497
5 changed files with 170 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/globals.css
View File

@ -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;

80
components/home/LastYearWinnerMark.tsx
View File

@ -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>

50
components/home/LastYearWinnerTip.tsx
View File

@ -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,31 +85,48 @@ 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">
{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"
>
<X className="size-3.5" aria-hidden />
</button>
) : null}
<div className="flex shrink-0 items-center gap-1.5">
{viewHref ? (
<Button
variant="outline"
@ -130,7 +151,8 @@ export function LastYearWinnerTip({ company, className }: Props) {
</Button>
) : null}
</div>
)}
</div>
) : null}
</div>
);
}

64
components/home/LastYearWinnersScroll.tsx
View File

@ -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}
/>
);
})}

2
content/last-year-winners.ts
View File

@ -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";