From b7c499dd35b06ab82b2fafd404648fc18aac5503 Mon Sep 17 00:00:00 2001 From: syntaxbullet Date: Mon, 13 Jul 2026 15:02:37 +0200 Subject: [PATCH] refactor: update awards grid section and participation page styles for consistency --- src/collections/Pages/participationFields.ts | 2 +- src/payload-types.ts | 2 +- src/spa/components/AwardsGridSection.tsx | 275 ++++++++++--------- src/spa/pages/Participation.tsx | 10 +- 4 files changed, 157 insertions(+), 132 deletions(-) diff --git a/src/collections/Pages/participationFields.ts b/src/collections/Pages/participationFields.ts index f3c426e..8870164 100644 --- a/src/collections/Pages/participationFields.ts +++ b/src/collections/Pages/participationFields.ts @@ -243,7 +243,7 @@ export const participationFields: Field[] = [ name: 'awardsGrid', label: '06 · Awards grid', type: 'group', - admin: sectionAdmin('Awards section rendered after the dates banner. On the participation page, Goldene Bavaria is featured above the remaining award cards.'), + admin: sectionAdmin('Awards section rendered after the dates banner. On the participation page, the CMS heading and intro belong to the standalone Goldene Bavaria section; the remaining award cards render in a separate section below.'), fields: [ text('eyebrow', 'Eyebrow', participationContent.awardsGrid.eyebrow), textarea('heading', 'Heading', participationContent.awardsGrid.heading), diff --git a/src/payload-types.ts b/src/payload-types.ts index 60f8ac5..c61914f 100644 --- a/src/payload-types.ts +++ b/src/payload-types.ts @@ -895,7 +895,7 @@ export interface Page { | null; }; /** - * Awards section rendered after the dates banner. On the participation page, Goldene Bavaria is featured above the remaining award cards. + * Awards section rendered after the dates banner. On the participation page, the CMS heading and intro belong to the standalone Goldene Bavaria section; the remaining award cards render in a separate section below. */ awardsGrid?: { eyebrow?: string | null; diff --git a/src/spa/components/AwardsGridSection.tsx b/src/spa/components/AwardsGridSection.tsx index 9912e9c..91923a1 100644 --- a/src/spa/components/AwardsGridSection.tsx +++ b/src/spa/components/AwardsGridSection.tsx @@ -12,6 +12,7 @@ const FF = '"IBM Plex Sans", sans-serif'; const FB = '"Inter", sans-serif'; const NAVY = '#111D55'; const GOLD = '#EFBF04'; +const AWARD_ARTWORK_EDGE_NAVY = '#132B48'; type AwardCard = (typeof participationContent.awardsGrid.cards)[number]; type AwardCardCms = Partial & { image?: unknown }; @@ -80,8 +81,8 @@ function FeaturedAwardCard({ card }: { card: ResolvedAwardCard }) { const isContainedImage = isContainedAwardImage(imageFilename); return ( -
-
+
+
{mediaAlt(card.image,
@@ -160,7 +160,126 @@ function FeaturedAwardCard({ card }: { card: ResolvedAwardCard }) {
-
+ + ); +} + +function SupportingAwardCards({ + cards, + allCards, + followsFeaturedCard, +}: { + cards: ResolvedAwardCard[]; + allCards: ResolvedAwardCard[]; + followsFeaturedCard: boolean; +}) { + const isMobile = useIsMobile(); + + if (cards.length === 0) return null; + + return ( +
+ {cards.map((card, index) => { + const sourceIndex = allCards.indexOf(card); + const imageFilename = getAwardImageFilename(card, sourceIndex >= 0 ? sourceIndex : index); + const isContainedImage = isContainedAwardImage(imageFilename); + const usesGoldeneBavariaArtwork = imageFilename.includes('goldene-bavaria'); + const isLast = index === cards.length - 1; + const isDarkCard = !followsFeaturedCard && index === 1; + + return ( + + ); + })} +
); } @@ -171,127 +290,37 @@ export default function AwardsGridSection({ content, featuredGoldeneBavaria = fa const { featuredCard, supportingCards } = splitFeaturedAwardCard(cards, featuredGoldeneBavaria); return ( -
- -
- - {fallbackText(section.eyebrow, participationContent.awardsGrid.eyebrow)} - -
-

- -

-

- {fallbackText(section.description, participationContent.awardsGrid.description)} -

+ <> +
+ {!featuredCard ? : null} +
+ + {fallbackText(section.eyebrow, participationContent.awardsGrid.eyebrow)} + +
+

+ +

+

+ {fallbackText(section.description, participationContent.awardsGrid.description)} +

+
-
- {featuredCard ? : null} + {featuredCard ? ( +
+ +
+ ) : ( + + )} +
- {supportingCards.length > 0 ? ( -
- {supportingCards.map((card, index) => { - const sourceIndex = cards.indexOf(card); - const imageFilename = getAwardImageFilename(card, sourceIndex >= 0 ? sourceIndex : index); - const isContainedImage = isContainedAwardImage(imageFilename); - const isLast = index === supportingCards.length - 1; - const isDarkCard = !featuredCard && index === 1; - - return ( - - ); - })} -
+ {featuredCard && supportingCards.length > 0 ? ( +
+ +
) : null} - + ); } diff --git a/src/spa/pages/Participation.tsx b/src/spa/pages/Participation.tsx index 3b9a5ce..f559813 100644 --- a/src/spa/pages/Participation.tsx +++ b/src/spa/pages/Participation.tsx @@ -5,7 +5,6 @@ import BewerbungsForm from '@/spa/components/forms/BewerbungsForm'; import { NewsletterInterestForm } from '@/spa/components/forms/NewsletterInterestForm'; import AwardsGridSection, { type AwardsGridContent } from '@/spa/components/AwardsGridSection'; import WegZurAuszeichnungSection from '@/spa/components/WegZurAuszeichnungSection'; -import MunichSkylineBg from '@/spa/components/ui/munich-skyline-bg'; import { useIsMobile } from '@/spa/hooks/useIsMobile'; import { mediaAlt, mediaUrl } from '@/spa/cmsMediaField'; import { useApplicationPhase, useCmsRoute, useNewsletterForm } from '@/spa/cmsRoute'; @@ -17,7 +16,6 @@ const FF = '"IBM Plex Sans", sans-serif'; const FB = '"Inter", sans-serif'; const NAVY = '#111D55'; const GOLD = '#EFBF04'; -const CREAM = '#E4E2E3'; type ParticipationCms = Partial & { hero?: Partial & { backgroundImage?: unknown }; @@ -115,8 +113,7 @@ const Participation: React.FC = () => { {/* ── QUALIFICATIONS ───────────────────────────────────────────────────── */} -
- +
{/* Header */}
@@ -144,7 +141,7 @@ const Participation: React.FC = () => {
{/* 4 criteria as editorial rows */} -
+
{eligibilityCriteria.map((item, i, arr) => { const Icon = ICONS[item.icon as keyof typeof ICONS] || MapPin; return ( @@ -360,8 +357,7 @@ function BewerbungswegeSection({ content }: { content?: ApplicationWaysContent } (way) => !isFutureAwardApplicationWay(way), ); return ( -
- +
{/* Header */}