From a42048aff98d01881c1a7b6ff4681cc0074d2d57 Mon Sep 17 00:00:00 2001
From: myelinated-wackerow
 <263208946+myelinated-wackerow@users.noreply.github.com>
Date: Tue, 12 May 2026 02:50:12 -0700
Subject: [PATCH 1/2] refactor(community): hub cards as row stack

Replace the EdgeScrollContainer carousel with a responsive auto-fill grid of row cards (circular avatar left, content right) so the section scales as more hubs are added. Tighten each hub description to a single short line and swap the repetitive per-row CTA copy for a cadence Tag derived from a new cadenceKey field on the hub data. Adds a grid-cols-fill-3-w-full utility for the 26rem minmax variant. Old page-events-hub-cta-* strings remain in the locale JSON files for the intl-pipeline to scrub later.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Co-Authored-By: wackerow <54227730+wackerow@users.noreply.github.com>
---
 app/[locale]/community/events/page.tsx | 100 +++++++++++++------------
 src/data/community-hubs.ts             |  18 ++---
 src/intl/en/page-community-events.json |  16 ++--
 src/styles/utilities.css               |   3 +
 4 files changed, 72 insertions(+), 65 deletions(-)

diff --git a/app/[locale]/community/events/page.tsx b/app/[locale]/community/events/page.tsx
index 3670b8a516a..883c3b0867c 100644
--- a/app/[locale]/community/events/page.tsx
+++ b/app/[locale]/community/events/page.tsx
@@ -22,6 +22,7 @@ import {
 import Link from "@/components/ui/Link"
 import { Section } from "@/components/ui/section"
 import TabNav, { StickyContainer } from "@/components/ui/TabNav"
+import { Tag } from "@/components/ui/tag"
 
 import { cn } from "@/lib/utils/cn"
 import { getAppPageContributorInfo } from "@/lib/utils/contributors"
@@ -186,75 +187,76 @@ const Page = async (props: { params: Promise<PageParams> }) => {
                 {t("page-events-section-hubs-subtitle")}
               </p>
             </div>
-            <EdgeScrollContainer>
+            <div className="grid grid-cols-fill-3-w-full gap-4">
               {communityHubs.map(
                 ({
                   id,
                   location,
                   descriptionKey,
-                  ctaKey,
+                  cadenceKey,
                   coworkingSignupUrl,
                   meetupUrl,
                   banner,
                   brandColor: logoBgColor,
                 }) => (
-                  <EdgeScrollItem
+                  <div
                     key={id}
                     className={cn(
-                      "ms-6 w-[calc(100%-4rem)] max-w-96 md:w-96 lg:max-w-[30%] xl:max-w-[22%]",
-                      "flex flex-col justify-between gap-4 rounded-4xl border p-8 shadow-lg",
+                      "flex w-full gap-4 rounded-4xl border p-6 shadow-lg sm:gap-6 sm:p-8",
                       logoBgColor
                     )}
                   >
-                    <div className="space-y-2">
-                      <div className="grid size-fit shrink-0 place-items-center overflow-hidden rounded-full">
-                        <Image
-                          src={banner}
-                          alt=""
-                          className="size-24 object-cover object-center"
-                          sizes="6rem"
-                        />
+                    <div className="size-16 shrink-0 overflow-hidden rounded-full sm:size-20">
+                      <Image
+                        src={banner}
+                        alt=""
+                        className="size-full object-cover object-center"
+                        sizes="5rem"
+                      />
+                    </div>
+                    <div className="flex flex-1 flex-col gap-3">
+                      <div className="flex flex-wrap items-center gap-x-3 gap-y-2">
+                        <h3 className="text-2xl font-bold">
+                          {location}
+                          <span className="sr-only">
+                            &nbsp;
+                            {t("page-events-meta-ethereum-community-hub")}
+                          </span>
+                        </h3>
+                        <Tag size="small" status="tag-green">
+                          {t(cadenceKey)}
+                        </Tag>
                       </div>
-                      <h3 className="text-2xl font-bold">
-                        {location}
-                        <span className="sr-only">
-                          &nbsp;
-                          {t("page-events-meta-ethereum-community-hub")}
-                        </span>
-                      </h3>
-                      <div className="space-y-[1lh]">
-                        <p>{t(descriptionKey)}</p>
-                        <p>{t(ctaKey)}</p>
+                      <p>{t(descriptionKey)}</p>
+                      <div className="mt-auto flex flex-wrap gap-x-6 gap-y-2 pt-2">
+                        <Link
+                          href={coworkingSignupUrl}
+                          className="font-bold no-underline"
+                          customEventOptions={{
+                            eventCategory: "Events",
+                            eventAction: "hubs",
+                            eventName: `${location}_cowork`,
+                          }}
+                        >
+                          {t("page-events-hub-cowork-signup")}
+                        </Link>
+                        <Link
+                          href={meetupUrl}
+                          className="font-bold no-underline"
+                          customEventOptions={{
+                            eventCategory: "Events",
+                            eventAction: "hubs",
+                            eventName: `${location}_meetup`,
+                          }}
+                        >
+                          {t("page-events-hub-meetups")}
+                        </Link>
                       </div>
                     </div>
-                    <div className="mt-auto flex justify-between gap-6">
-                      <Link
-                        href={coworkingSignupUrl}
-                        className="font-bold no-underline"
-                        customEventOptions={{
-                          eventCategory: "Events",
-                          eventAction: "hubs",
-                          eventName: `${location}_cowork`,
-                        }}
-                      >
-                        {t("page-events-hub-cowork-signup")}
-                      </Link>
-                      <Link
-                        href={meetupUrl}
-                        className="font-bold no-underline"
-                        customEventOptions={{
-                          eventCategory: "Events",
-                          eventAction: "hubs",
-                          eventName: `${location}_meetup`,
-                        }}
-                      >
-                        {t("page-events-hub-meetups")}
-                      </Link>
-                    </div>
-                  </EdgeScrollItem>
+                  </div>
                 )
               )}
-            </EdgeScrollContainer>
+            </div>
             <div className="md:px-4">
               <ButtonLink
                 href="https://esp.ethereum.foundation/applicants/rfp/community-hubs"
diff --git a/src/data/community-hubs.ts b/src/data/community-hubs.ts
index e696107ee67..5ea0103e21a 100644
--- a/src/data/community-hubs.ts
+++ b/src/data/community-hubs.ts
@@ -13,7 +13,7 @@ export type CommunityHub = {
   id: string
   location: string
   descriptionKey: string
-  ctaKey: string
+  cadenceKey: string
   coworkingSignupUrl: string
   meetupUrl: string
   banner: StaticImageData
@@ -25,7 +25,7 @@ const communityHubs: CommunityHub[] = [
     id: "buenos-aires",
     location: "Buenos Aires",
     descriptionKey: "page-events-hub-description-buenos-aires",
-    ctaKey: "page-events-hub-cta-buenos-aires",
+    cadenceKey: "page-events-hub-cadence-everyday",
     coworkingSignupUrl:
       "https://airtable.com/appENuebGSKMB5sia/pagWfsW9hrLZUqBAf/form",
     meetupUrl: "https://luma.com/user/crecimientoar",
@@ -37,7 +37,7 @@ const communityHubs: CommunityHub[] = [
     id: "hong-kong",
     location: "Hong Kong",
     descriptionKey: "page-events-hub-description-hong-kong",
-    ctaKey: "page-events-hub-cta-hong-kong",
+    cadenceKey: "page-events-hub-cadence-everyday",
     coworkingSignupUrl: "https://forms.gle/bm78vRjZqvu45tsz5",
     meetupUrl: "https://luma.com/user/usr-ut3JGCXXuokkPdK",
     banner: HongKongHubBanner,
@@ -48,7 +48,7 @@ const communityHubs: CommunityHub[] = [
     id: "rome",
     location: "Rome",
     descriptionKey: "page-events-hub-description-rome",
-    ctaKey: "page-events-hub-cta-rome",
+    cadenceKey: "page-events-hub-cadence-everyday",
     coworkingSignupUrl: "https://forms.gle/wrjF85XYghXyFXH87",
     meetupUrl: "https://luma.com/user/UrbeHub",
     banner: RomeHubBanner,
@@ -59,7 +59,7 @@ const communityHubs: CommunityHub[] = [
     id: "london",
     location: "London",
     descriptionKey: "page-events-hub-description-london",
-    ctaKey: "page-events-hub-cta-default",
+    cadenceKey: "page-events-hub-cadence-everyday",
     coworkingSignupUrl: "https://hub.encode.club/ethereum",
     meetupUrl: "https://luma.com/ethldn",
     banner: LondonHubBanner,
@@ -70,7 +70,7 @@ const communityHubs: CommunityHub[] = [
     id: "berlin",
     location: "Berlin",
     descriptionKey: "page-events-hub-description-berlin",
-    ctaKey: "page-events-hub-cta-berlin",
+    cadenceKey: "page-events-hub-cadence-wednesdays",
     coworkingSignupUrl:
       "https://docs.google.com/forms/d/e/1FAIpQLScRgO-0OMUXOu30F5s2DYpImMKb4qgTp5pn-4Y6wjiCeY7bYQ/viewform",
     meetupUrl: "https://www.meetup.com/berlin-ethereum-meetup/",
@@ -82,7 +82,7 @@ const communityHubs: CommunityHub[] = [
     id: "dubai",
     location: "Dubai",
     descriptionKey: "page-events-hub-description-dubai",
-    ctaKey: "page-events-hub-cta-default",
+    cadenceKey: "page-events-hub-cadence-everyday",
     coworkingSignupUrl: "https://forms.gle/G4PthfvMMy476QmZ6",
     meetupUrl: "https://luma.com/HadronFC?k=c",
     banner: DubaiHubBanner,
@@ -93,7 +93,7 @@ const communityHubs: CommunityHub[] = [
     id: "lagos",
     location: "Lagos",
     descriptionKey: "page-events-hub-description-lagos",
-    ctaKey: "page-events-hub-cta-default",
+    cadenceKey: "page-events-hub-cadence-everyday",
     coworkingSignupUrl: "https://t.me/+LGAiPevzRNk1ZTM0",
     meetupUrl: "https://t.me/+LGAiPevzRNk1ZTM0",
     banner: LagosHubBanner,
@@ -104,7 +104,7 @@ const communityHubs: CommunityHub[] = [
     id: "sf",
     location: "San Francisco",
     descriptionKey: "page-events-hub-description-sf",
-    ctaKey: "page-events-hub-cta-default",
+    cadenceKey: "page-events-hub-cadence-everyday",
     coworkingSignupUrl: "https://frontiertower.io/apply",
     meetupUrl: "https://luma.com/user/ethereumhouseSF",
     banner: SFHubBanner,
diff --git a/src/intl/en/page-community-events.json b/src/intl/en/page-community-events.json
index 26023f1abdf..3753c1e820c 100644
--- a/src/intl/en/page-community-events.json
+++ b/src/intl/en/page-community-events.json
@@ -12,19 +12,21 @@
   "page-events-section-major-conferences": "Major blockchain conferences",
   "page-events-section-hubs": "Ethereum community hubs",
   "page-events-section-hubs-subtitle": "You can join regular co-working sessions and community events in these permanent spaces, perfect for inspired work, learning, connecting, and building.",
-  "page-events-hub-description-berlin": "The Ethereum Foundation office opens its doors every Wednesday for builders, researchers, creators, students, and explorers to co-work, connect, and collaborate.",
-  "page-events-hub-description-dubai": "An inspiring space hosted at Hadron Founders Club for founders, builders, researchers, and explorers to co-work, connect, collaborate, and learn.",
-  "page-events-hub-description-hong-kong": "Hosted by SNZ and ETHTAO, this vibrant space serves as a global financial gateway connecting East and West, Web2 and Web3.",
-  "page-events-hub-description-lagos": "A vibrant community space at Web3Bridge in Lagos for builders, founders, researchers, and creatives to co-work, collaborate, and grow together.",
+  "page-events-hub-description-berlin": "A weekly Wednesday space for builders, researchers, creators, and explorers at the Ethereum Foundation office.",
+  "page-events-hub-description-dubai": "An inspiring space for founders, builders, researchers, and explorers at Hadron Founders Club.",
+  "page-events-hub-description-hong-kong": "A vibrant space connecting East and West, Web2 and Web3, hosted by SNZ and ETHTAO.",
+  "page-events-hub-description-lagos": "A vibrant community space for builders, founders, researchers, and creatives at Web3Bridge.",
   "page-events-hub-description-london": "A dedicated floor for Ethereum builders, researchers, creators, students, and explorers at Encode Club.",
-  "page-events-hub-description-rome": "Hosted by the Urbe.eth community, it's a coworking and event space in Rome for builders at the frontier of technology.",
-  "page-events-hub-description-sf": "Frontier Tower is a 16-floor vertical village in the heart of San Francisco where people advance deep tech and frontier technologies in a relaxed, inspiring environment. The 12th floor is hosting Ethereum & Decentralized Tech.",
-  "page-events-hub-description-buenos-aires": "Hosted by the Crecimiento community at the Aleph Hub, it's a curated space for the local community and visitors working across Ethereum, AI and startups.",
+  "page-events-hub-description-rome": "A coworking and event space for frontier-tech builders, hosted by the Urbe.eth community.",
+  "page-events-hub-description-sf": "A floor for Ethereum and decentralized tech, hosted at Frontier Tower in San Francisco.",
+  "page-events-hub-description-buenos-aires": "A curated space for builders across Ethereum, AI, and startups, hosted by Crecimiento at the Aleph Hub.",
   "page-events-hub-cta-buenos-aires": "Join for events, workshops, community gatherings, and daily co-working!",
   "page-events-hub-cta-berlin": "Join for Co-working Wednesdays and regular events.",
   "page-events-hub-cta-default": "Join for everyday co-working and regular events.",
   "page-events-hub-cta-hong-kong": "Join for events, workshops, community gatherings, and daily co-working!",
   "page-events-hub-cta-rome": "Join for events, workshops, community gatherings, and daily co-working!",
+  "page-events-hub-cadence-everyday": "Everyday",
+  "page-events-hub-cadence-wednesdays": "Wednesdays",
   "page-events-hub-coworking-cta": "Sign up for co-working",
   "page-events-hub-meetup-cta": "View meetups",
   "page-events-hub-apply-cta": "Apply to host a hub",
diff --git a/src/styles/utilities.css b/src/styles/utilities.css
index 3ccd5525ba9..7359a00ce4f 100644
--- a/src/styles/utilities.css
+++ b/src/styles/utilities.css
@@ -48,6 +48,9 @@
 @utility grid-cols-bento {
   grid-template-columns: repeat(12, 1fr);
 }
+@utility grid-cols-fill-3-w-full {
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr));
+}
 @utility grid-cols-fill-3 {
   grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
 }

From 55ab71335443287379f21ad8326e2bb7c4601b61 Mon Sep 17 00:00:00 2001
From: wackerow <54227730+wackerow@users.noreply.github.com>
Date: Wed, 13 May 2026 09:11:29 +0200
Subject: [PATCH 2/2] patch(ui): hk color adjustment

- variable name refactor
---
 app/[locale]/community/events/page.tsx | 4 ++--
 src/data/community-hubs.ts             | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/[locale]/community/events/page.tsx b/app/[locale]/community/events/page.tsx
index 883c3b0867c..8fac822b87b 100644
--- a/app/[locale]/community/events/page.tsx
+++ b/app/[locale]/community/events/page.tsx
@@ -197,13 +197,13 @@ const Page = async (props: { params: Promise<PageParams> }) => {
                   coworkingSignupUrl,
                   meetupUrl,
                   banner,
-                  brandColor: logoBgColor,
+                  brandColor,
                 }) => (
                   <div
                     key={id}
                     className={cn(
                       "flex w-full gap-4 rounded-4xl border p-6 shadow-lg sm:gap-6 sm:p-8",
-                      logoBgColor
+                      brandColor
                     )}
                   >
                     <div className="size-16 shrink-0 overflow-hidden rounded-full sm:size-20">
diff --git a/src/data/community-hubs.ts b/src/data/community-hubs.ts
index 5ea0103e21a..475f2ea59de 100644
--- a/src/data/community-hubs.ts
+++ b/src/data/community-hubs.ts
@@ -42,7 +42,7 @@ const communityHubs: CommunityHub[] = [
     meetupUrl: "https://luma.com/user/usr-ut3JGCXXuokkPdK",
     banner: HongKongHubBanner,
     brandColor:
-      "bg-linear-to-b from-[#A4FCF5]/5 to-[#A4FCF5]/10 dark:from-[#A4FCF5]/20 dark:to-[#A4FCF5]/10 border-[#A4FCF5]/20",
+      "bg-linear-to-b from-[#83AAFA]/5 to-[#83AAFA]/10 dark:from-[#CFC4FA]/20 dark:to-[#CFC4FA]/10 border-[#83AAFA]/20 dark:border-[#CFC4FA]/10",
   },
   {
     id: "rome",