From 2b3ffcf19e4a9d94c6d138d82348aa803ed8bd99 Mon Sep 17 00:00:00 2001
From: Hisham Aburaqibah <haburaqibah@giga.ly>
Date: Wed, 7 Oct 2026 11:33:10 +0200
Subject: [PATCH] feat(web): restyle partner sections

---
 apps/web/app/routes/about.tsx | 59 ++++++++++++++++++-----------------
 apps/web/app/routes/home.tsx  | 33 +++++++++++++-------
 2 files changed, 52 insertions(+), 40 deletions(-)

diff --git a/apps/web/app/routes/about.tsx b/apps/web/app/routes/about.tsx
index 9acd3f7..cf619a9 100644
--- a/apps/web/app/routes/about.tsx
+++ b/apps/web/app/routes/about.tsx
@@ -10,8 +10,8 @@
      Facts         a four-cell seam grid: the run, the coverage, the lead
                    partner and the funder.
      Nationwide    the approved body prose beside the three focus areas.
-     Consortium    the three members as role / name / deliverable panels, under
-                   a header row that carries the EU funding line.
+         Consortium    unboxed rows for the three members.
+           The header carries the EU funding line.
      Legacy        the SHARP I and II panel with the accent start-edge, and the
                    call to action into What We Do.
 
@@ -157,7 +157,7 @@ const ACCENT_EDGE =
 interface ConsortiumMember {
   id: string;
   name: string;
-  /** The role chip - `consortium.role` in the CMS, or the bundled copy's. */
+  /** The role label - `consortium.role` in the CMS, or the bundled copy's. */
   role: string | null;
   description: string;
   website: string | null;
@@ -301,33 +301,36 @@ export default function About({ loaderData }: Route.ComponentProps) {
             </p>
           </div>
 
-          <ul className="grid list-none grid-cols-1 gap-lg md:grid-cols-3">
+          <ul className="list-none divide-y divide-[var(--border-subtle)] border-y border-[var(--border-subtle)]">
             {consortium.map((member) => (
-              <li key={member.id}>
-                <InfoPanel
-                  /* On the sunken band the draft lifts these cards to the
-                     raised dark it uses for a page band (#1d1d1b), one step
-                     lighter than the panel shade InfoPanel defaults to. The
-                     `!` is what makes the override beat the component's own
-                     `bg-*` utility, which sorts after this one. */
-                  className="sh-lift sh-reveal sh-reveal--in hover:border-[var(--border-accent)]"
-                  title={member.name}
-                  {...(member.role
-                    ? { eyebrow: member.role, eyebrowVariant: "chip" as const }
-                    : {})}
-                >
-                  <span className="block">{member.description}</span>
-                  {member.website ? (
-                    <a
-                      href={member.website}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="mt-xs inline-block body-sm-bold text-[var(--text-link)] underline underline-offset-2 hover:text-[var(--text-link-hover)]"
-                    >
-                      {member.name}
-                    </a>
+              <li
+                key={member.id}
+                className="sh-reveal sh-reveal--in grid grid-cols-1 gap-md py-lg md:grid-cols-[minmax(0,1fr)_minmax(0,2fr)] md:gap-xl"
+              >
+                <div className="flex flex-col gap-xs">
+                  {member.role ? (
+                    <p className="label-md uppercase text-[var(--text-accent)]">
+                      {member.role}
+                    </p>
                   ) : null}
-                </InfoPanel>
+                  <h3 className="heading-h3 text-[var(--text-primary)]">
+                    {member.website ? (
+                      <a
+                        href={member.website}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="text-[var(--text-link)] underline underline-offset-2 hover:text-[var(--text-link-hover)]"
+                      >
+                        {member.name}
+                      </a>
+                    ) : (
+                      member.name
+                    )}
+                  </h3>
+                </div>
+                <p className="body-md text-[var(--text-secondary)]">
+                  {member.description}
+                </p>
               </li>
             ))}
           </ul>
diff --git a/apps/web/app/routes/home.tsx b/apps/web/app/routes/home.tsx
index f42f6f8..7b5ba25 100644
--- a/apps/web/app/routes/home.tsx
+++ b/apps/web/app/routes/home.tsx
@@ -17,7 +17,7 @@
                    a link through to What We Do.
      Newsroom      three cards from the newsroom, newest first.
      FAQs          a sticky heading column beside the accordion.
-     Consortium    the three members, then the civil society network logos.
+      Consortium    the three members, then the civil society network logos.
 
    WHAT THE DRAFT SHIPS THAT THIS PAGE DOES NOT
    --------------------------------------------
@@ -141,10 +141,9 @@ const PARTNER_PAGE_SIZE = 36;
 /**
  * Below this many partners the wall stays a grid.
  *
- * The marquee loops by carrying the tiles twice and sliding exactly half the
- * track, which only reads as a loop while the half is wider than the frame it
- * slides through. Eight 178px tiles clear a desktop container; fewer would
- * drift a short row across an empty band, so the grid keeps them still.
+ * The loop slides exactly half the track; fewer than eight wider tiles would
+ * leave a short drift instead of filling a desktop frame, so the grid keeps
+ * them still.
  */
 const PARTNER_MARQUEE_MIN = 8;
 /** The draft's newsroom band is a straight three-up row. */
@@ -487,10 +486,21 @@ function PartnerTile({
       src={partner.logo.src}
       alt={decorative ? "" : partner.name}
       loading="lazy"
-      className="max-h-[3.5rem] w-auto max-w-full object-contain"
+      className={cx(
+        "w-auto max-w-full object-contain",
+        fixedWidth
+          ? "h-[6.75rem] transition-transform duration-[var(--motion-duration-base)] group-hover:scale-105"
+          : "max-h-[3.5rem]",
+      )}
     />
   ) : (
-    <span className="body-sm-bold text-center text-[var(--text-secondary)]">
+    <span
+      className={cx(
+        "body-sm-bold text-center text-[var(--text-secondary)]",
+        fixedWidth &&
+          "transition-colors duration-[var(--motion-duration-base)] group-hover:text-[var(--text-accent)]",
+      )}
+    >
       {partner.name}
     </span>
   );
@@ -499,17 +509,16 @@ function PartnerTile({
     <li
       {...(decorative ? { "aria-hidden": true } : {})}
       className={cx(
-        "flex h-[5.5rem] items-center justify-center",
-        "rounded-control border border-[var(--border-subtle)] bg-[var(--surface-card)] p-md",
-        "transition-colors duration-[var(--motion-duration-base)]",
-        "hover:border-[var(--border-accent)]",
+        "flex items-center justify-center",
+        fixedWidth
+          ? "group me-lg h-[7.5rem] w-[12.5rem] shrink-0 ps-lg pe-lg"
+          : "h-[5.5rem] rounded-control border border-[var(--border-subtle)] bg-[var(--surface-card)] p-md transition-colors duration-[var(--motion-duration-base)] hover:border-[var(--border-accent)] sh-reveal sh-reveal--in",
         /* A still grid reveals tile by tile; a travelling track must not, or
            each tile would ramp its own opacity while it moves.
 
            The track's spacing is a margin on the tile rather than a `gap` on
            the row: the loop slides exactly half the track, so each half has to
            carry its own trailing space or the seam lands half a gap short. */
-        fixedWidth ? "me-md w-[11.125rem] shrink-0" : "sh-reveal sh-reveal--in",
         decorative && "sh-marquee__clone",
       )}
     >