diff --git a/src/spa/pages/Home.tsx b/src/spa/pages/Home.tsx index 7bef250..bb9ab84 100644 --- a/src/spa/pages/Home.tsx +++ b/src/spa/pages/Home.tsx @@ -1,6 +1,6 @@ import React, { useEffect, useRef, useState } from 'react'; import { Button } from '@/spa/components/ui/button'; -import { Play, ChevronRight, X, Star } from 'lucide-react'; +import { Play, ChevronLeft, ChevronRight, X, Star } from 'lucide-react'; import { Link } from '@/spa/router'; import { PartnerTicker } from '@/spa/components/ui/partner-ticker'; import { WINNERS } from '@/spa/data/winners'; @@ -225,6 +225,7 @@ function HomeWinnerCard({ const Home: React.FC = () => { const [showVideo, setShowVideo] = useState(false); const videoRef = useRef(null); + const winnersScrollRef = useRef(null); const isMobile = useIsMobile(); const placeholderImage = usePreistraegerPlaceholderImage(); const home = (useCmsRoute()?.doc?.home || {}) as HomeCms; @@ -259,9 +260,17 @@ const Home: React.FC = () => { const selectedWinnerDocs = selectedWinners .map((selected) => resolveCmsRelationship(selected, cmsPreistraeger)) .filter(Boolean) + const eligibleWinners = (cmsPreistraeger.length ? cmsPreistraeger : WINNERS) + .filter((winner) => Number((winner as { year?: string | number }).year) === 2025) + const selectedWinnerIDs = new Set( + selectedWinnerDocs.map((winner) => String((winner as WinnerCardData).id || (winner as WinnerCardData).slug)), + ) + const remainingWinners = selectedWinnerDocs.length >= 8 + ? eligibleWinners.filter((winner) => !selectedWinnerIDs.has(String((winner as WinnerCardData).id || (winner as WinnerCardData).slug))) + : [] const homeWinners = selectedWinnerDocs.length - ? selectedWinnerDocs - : (cmsPreistraeger.length ? cmsPreistraeger : WINNERS).filter((w) => Number((w as { year?: string | number }).year) === 2025).slice(0, 8); + ? [...selectedWinnerDocs, ...remainingWinners] + : eligibleWinners; const scrollDesktopWinners = !isMobile && homeWinners.length > 8; const scrollWinnerGrid = isMobile || scrollDesktopWinners; const quickCriteria = fallbackArray(quickCheck.criteria, homeContent.quickCheck.criteria); @@ -281,6 +290,16 @@ const Home: React.FC = () => { }); }, [showVideo, videoSrc]); + const scrollWinners = (direction: -1 | 1) => { + const container = winnersScrollRef.current; + if (!container) return; + + container.scrollBy({ + left: direction * Math.max(container.clientWidth * 0.8, 320), + behavior: 'smooth', + }); + }; + return (
{/* Hero Section */} @@ -380,15 +399,37 @@ const Home: React.FC = () => {
- - {fallbackText(winnersSection.cta?.label, homeContent.winners.cta.label)} - +
+ {scrollDesktopWinners && ( +
+ + +
+ )} + + {fallbackText(winnersSection.cta?.label, homeContent.winners.cta.label)} + +
-
{ scrollSnapType: scrollWinnerGrid ? 'x mandatory' : undefined, overscrollBehaviorX: scrollWinnerGrid ? 'contain' : undefined, gap: isMobile ? 8 : 0, - padding: isMobile ? '0 16px 8px' : 0, + padding: isMobile ? '0 16px 8px' : scrollDesktopWinners ? '0 0 12px' : 0, WebkitOverflowScrolling: 'touch', - scrollbarWidth: 'none', + scrollbarWidth: scrollDesktopWinners ? 'thin' : 'none', + scrollbarColor: scrollDesktopWinners ? '#EFBF04 rgba(255,255,255,0.14)' : undefined, }}> {homeWinners.map((w) => ( {phase.headline} -

+

{phase.body}

{phase.cta ? (