refactor(community): hub cards as grid

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,
+                  brandColor,
                 }) => (
-                  <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",
-                      logoBgColor
+                      "flex w-full gap-4 rounded-4xl border p-6 shadow-lg sm:gap-6 sm:p-8",
+                      brandColor
                     )}
                   >
-                    <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"

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,19 +37,19 @@ 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://docs.google.com/forms/d/e/1FAIpQLSf8HrsYvKfs4eEI4dxSLAjquutu2jz5FiluePe4MsTwswQhHw/viewform",
     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",
     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,
@@ -60,7 +60,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,
@@ -71,7 +71,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/",
@@ -83,7 +83,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,
@@ -94,7 +94,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,
@@ -105,7 +105,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,

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",

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