diff --git a/components/ProjectCard.tsx b/components/ProjectCard.tsx
index 6a2be2aac..26c997445 100644
--- a/components/ProjectCard.tsx
+++ b/components/ProjectCard.tsx
@@ -1,17 +1,37 @@
 import Image from '@/components/Image'
 import Link from 'next/link'
-import { useState, useEffect } from 'react'
+import SocialIcon from '@/components/social-icons'
+import { getHeartbeatUrl } from '@/utils/heartbeat'
+
+const FUND_LABELS: Record<FundId, string> = {
+  general: 'General Fund',
+  nostr: 'Nostr Fund',
+  ops: 'Operations Budget',
+}
+
+export type FundId = 'general' | 'nostr' | 'ops'
 
 export type ProjectCardProps = {
-  slug
-  title
-  summary
-  coverImage
-  darkCoverImage?
-  invertDarkImage?
-  nym
-  tags
+  slug: string
+  title: string
+  summary: string
+  coverImage: string
+  darkCoverImage?: string
+  invertDarkImage?: boolean
+  nym: string
+  fund?: FundId
+  git?: string
+  nostr?: string
+  heartbeat?: string
+  zapstore?: string
+  showAttribution?: boolean
+  // Accepted for backwards compatibility; the redesigned card no longer
+  // surfaces tag chips or per-card image overrides.
+  tags?: string[]
   customImageStyles?: React.CSSProperties
+  /** Passed to next/image `sizes` (layout-specific). */
+  imageSizes?: string
+  imageFit?: 'cover' | 'contain'
 }
 
 const ProjectCard: React.FC<ProjectCardProps> = ({
@@ -22,65 +42,74 @@ const ProjectCard: React.FC<ProjectCardProps> = ({
   darkCoverImage,
   invertDarkImage,
   nym,
-  tags,
-  customImageStyles,
+  fund,
+  git,
+  nostr,
+  heartbeat,
+  zapstore,
+  showAttribution = true,
+  imageSizes = '(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw',
+  imageFit = 'cover',
 }) => {
-  const [isHorizontal, setIsHorizontal] = useState<boolean | null>(null)
-
-  useEffect(() => {
-    const img = document.createElement('img')
-    img.src = coverImage
-
-    // check if image is horizontal - added additional 10% to height to ensure only true
-    // horizontals get flagged.
-    img.onload = () => {
-      const { naturalWidth, naturalHeight } = img
-      const isHorizontal = naturalWidth >= naturalHeight * 1.1
-      setIsHorizontal(isHorizontal)
-    }
-  }, [coverImage])
-
-  let cardStyle
-  if (tags.includes('Nostr')) {
-    cardStyle =
-      'h-full space-y-4 rounded-xl border-b-4 border-purple-600 bg-stone-100 dark:border-purple-600 dark:bg-stone-900'
-  } else if (tags.includes('Lightning')) {
-    cardStyle =
-      'h-full space-y-4 rounded-xl border-b-4 border-yellow-300 bg-stone-100 dark:border-yellow-300 dark:bg-stone-900'
-  } else if (tags.includes('Bitcoin')) {
-    cardStyle =
-      'h-full space-y-4 rounded-xl border-b-4 border-orange-400 bg-stone-100 dark:border-orange-400 dark:bg-stone-900'
-  } else {
-    cardStyle =
-      'h-full space-y-4 rounded-xl border-b-4 border-stone-100 bg-stone-100 dark:border-stone-800 dark:bg-stone-900'
-  }
+  const heartbeatUrl = heartbeat || getHeartbeatUrl(git) || undefined
+  const hasFooter = Boolean(git || heartbeatUrl || nostr || zapstore)
 
   return (
-    <figure className={cardStyle}>
-      <Link href={`${slug}`} passHref>
-        <div className="flex h-36 w-full sm:h-52">
+    <figure className="flex h-full flex-col overflow-hidden rounded-xl bg-stone-100 dark:bg-stone-900">
+      <Link href={slug} className="block">
+        <div className="relative aspect-[4/3] w-full bg-white dark:bg-black">
           <Image
             alt={title}
             src={coverImage}
             darkSrc={darkCoverImage}
-            width={1200}
-            height={1200}
-            style={{
-              objectFit: isHorizontal ? 'fill' : 'cover',
-              ...customImageStyles,
-            }}
-            priority={true}
-            className={`cursor-pointer rounded-t-xl bg-white dark:bg-black ${
-              invertDarkImage ? 'dark:invert' : ''
-            }`}
+            fill
+            sizes={imageSizes}
+            className={`cursor-pointer ${
+              imageFit === 'contain'
+                ? 'object-contain p-4 sm:p-5'
+                : 'object-cover'
+            } ${invertDarkImage ? 'dark:invert' : ''}`}
           />
         </div>
-        <figcaption className="p-2">
-          <h2 className="font-bold">{title}</h2>
-          <div className="mb-4 text-sm">by {nym}</div>
-          <div className="mb-2 line-clamp-3">{summary}</div>
-        </figcaption>
       </Link>
+      <figcaption className="flex flex-1 flex-col gap-2 p-4">
+        <h2 className="font-bold leading-tight">
+          <Link href={slug} className="hover:text-orange-500">
+            {title}
+          </Link>
+        </h2>
+        {showAttribution && (
+          <div className="text-sm text-stone-500 dark:text-stone-400">
+            by {nym}
+            {fund && (
+              <>
+                {' · '}
+                <Link
+                  href={`/funds/${fund}`}
+                  className="underline-offset-2 hover:text-orange-500 hover:underline"
+                >
+                  via the {FUND_LABELS[fund]}
+                </Link>
+              </>
+            )}
+          </div>
+        )}
+        <p className="line-clamp-3 text-sm">{summary}</p>
+        {hasFooter && (
+          <div className="mt-auto flex items-center justify-end gap-2 pt-2 text-xs text-stone-500 dark:text-stone-400 [&>a]:opacity-70 [&>a]:transition-opacity [&>a]:hover:opacity-100">
+            <SocialIcon kind="github" href={git} size={4} />
+            {nostr && (
+              <SocialIcon
+                kind="nostr"
+                href={`https://njump.to/${nostr}`}
+                size={4}
+              />
+            )}
+            <SocialIcon kind="zapstore" href={zapstore} size={4} />
+            <SocialIcon kind="heartbeat" href={heartbeatUrl} size={4} />
+          </div>
+        )}
+      </figcaption>
     </figure>
   )
 }
diff --git a/data/projects/zapstore.mdx b/data/projects/zapstore.mdx
index 0a681c6ae..e1b23b321 100644
--- a/data/projects/zapstore.mdx
+++ b/data/projects/zapstore.mdx
@@ -4,6 +4,7 @@ dateAdded: '2025-03-27'
 summary: 'A nostr-based app store for signed releases, open discovery, and censorship-resistant software distribution.'
 nym: 'Franzap'
 website: 'https://zapstore.dev/'
+zapstore: 'https://zapstore.dev/apps/dev.zapstore.app'
 coverImage: '/static/images/projects/zapstore.png'
 git: 'https://github.com/zapstore/zapstore'
 tags: ['Nostr', 'Android', 'Mobile']
diff --git a/pages/projects/showcase.tsx b/pages/projects/showcase.tsx
index 7476608c7..d48853338 100644
--- a/pages/projects/showcase.tsx
+++ b/pages/projects/showcase.tsx
@@ -1,56 +1,148 @@
-import type { NextPage } from 'next'
-import { useEffect, useState } from 'react'
-import ProjectCard from '../../components/ProjectCard'
-import { allProjects } from 'contentlayer/generated'
-import { Project } from 'contentlayer/generated'
-import { isNotOpenSatsProject } from '../funds'
+import type { GetStaticProps, NextPage } from 'next'
 import Link from '@/components/Link'
 import { PageSEO } from '@/components/SEO'
+import StatsSentence from '@/components/StatsSentence'
+import ProjectCard from '@/components/ProjectCard'
+import type { FundId } from '@/components/ProjectCard'
+import { allProjects } from 'contentlayer/generated'
+import { buildClusters } from '@/utils/projectClusters'
+import { getLifetimeStats, type LifetimeStat } from '@/utils/lifetimeStats'
+
+type CardData = {
+  slug: string
+  title: string
+  summary: string
+  coverImage: string
+  darkCoverImage?: string
+  invertDarkImage?: boolean
+  nym: string
+  fund?: FundId
+  git?: string
+  nostr?: string
+  heartbeat?: string
+  zapstore?: string
+}
 
-const ProjectShowcase: NextPage<{ projects: Project[] }> = ({ projects }) => {
-  const [sortedProjects, setSortedProjects] = useState<Project[]>()
+type RenderCluster = {
+  id: string
+  title: string
+  blurb: string
+  projects: CardData[]
+}
 
-  useEffect(() => {
-    setSortedProjects(
-      projects.filter(isNotOpenSatsProject).sort(() => 0.5 - Math.random())
-    )
-  }, [projects])
+type ShowcaseProps = {
+  clusters: RenderCluster[]
+  lifetimeStats: LifetimeStat[] | null
+}
 
+const KNOWN_FUNDS: FundId[] = ['general', 'nostr', 'ops']
+
+function toCardData(project: (typeof allProjects)[number]): CardData {
+  const fund = (KNOWN_FUNDS as string[]).includes(project.fund || '')
+    ? (project.fund as FundId)
+    : undefined
+
+  return {
+    slug: `/projects/${project.slug}`,
+    title: project.title,
+    summary: project.summary,
+    coverImage: project.coverImage,
+    darkCoverImage: project.darkCoverImage,
+    invertDarkImage: project.invertDarkImage,
+    nym: project.nym,
+    fund,
+    git: project.git,
+    nostr: project.nostr,
+    heartbeat: project.heartbeat,
+    zapstore: project.zapstore,
+  }
+}
+
+const ProjectShowcase: NextPage<ShowcaseProps> = ({
+  clusters,
+  lifetimeStats,
+}) => {
   return (
     <>
       <PageSEO
         title="Project Showcase - OpenSats"
         description="A showcase of free and open-source Bitcoin and Nostr projects supported by OpenSats."
       />
-      <section className="flex flex-col p-4 md:p-8">
-        <div className="flex w-full items-center justify-between pb-8">
-          <h1 id="funds">Project Showcase</h1>
-        </div>
-        <ul className="grid max-w-5xl grid-cols-2 gap-4 md:grid-cols-3 xl:grid-cols-4">
-          {sortedProjects &&
-            sortedProjects.map((p, i) => (
-              <li key={i} className="">
-                <ProjectCard
-                  slug={`/projects/${p.slug}`}
-                  title={p.title}
-                  summary={p.summary}
-                  coverImage={p.coverImage}
-                  darkCoverImage={p.darkCoverImage}
-                  invertDarkImage={p.invertDarkImage}
-                  nym={p.nym}
-                  tags={p.tags}
-                />
-              </li>
-            ))}
-        </ul>
+
+      <section className="pt-4 md:pb-8">
+        <h1 className="py-2 text-3xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 max-[375px]:text-2xl sm:text-3xl sm:leading-10 md:py-4 md:text-5xl md:leading-14 lg:text-6xl">
+          Project Showcase
+        </h1>
+        <StatsSentence
+          initialStats={lifetimeStats}
+          className="text-lg leading-7 text-gray-500 dark:text-gray-400"
+        />
+        <p className="pt-3 text-lg leading-7 text-gray-500 dark:text-gray-400">
+          This is only a small selection of projects that OpenSats has funded.
+          For the complete list, see our{' '}
+          <Link
+            href="/tags/grants"
+            className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
+          >
+            grant announcements
+          </Link>
+          .
+        </p>
       </section>
-      <div className="flex justify-end pt-4 text-base font-medium leading-6">
+
+      <div className="divide-y divide-gray-200 dark:divide-gray-700">
+        {clusters.map((cluster) => (
+          <section key={cluster.id} className="py-10 first:pt-6">
+            <div className="pb-6">
+              <h2
+                id={`showcase-cluster-${cluster.id}`}
+                className="text-2xl font-bold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-3xl"
+              >
+                {cluster.title}
+              </h2>
+              <p className="pt-1 text-base text-gray-500 dark:text-gray-400">
+                {cluster.blurb}
+              </p>
+            </div>
+            <div
+              className="-mx-4 overflow-x-auto overflow-y-hidden overscroll-x-contain pb-2 pt-1 sm:mx-0 md:snap-x md:snap-mandatory"
+              aria-labelledby={`showcase-cluster-${cluster.id}`}
+              role="region"
+            >
+              <ul className="flex w-max max-w-none flex-nowrap gap-4 px-4 sm:px-0">
+                {cluster.projects.map((p) => (
+                  <li
+                    key={p.slug}
+                    className="w-[min(22rem,calc(100vw-2.5rem))] shrink-0 md:w-[min(22rem,calc((100vw-6rem)/3))] md:snap-start"
+                  >
+                    <ProjectCard
+                      {...p}
+                      showAttribution={false}
+                      imageFit="contain"
+                      imageSizes="(max-width: 768px) min(22rem, 90vw), (max-width: 1024px) 30vw, 22rem"
+                    />
+                  </li>
+                ))}
+              </ul>
+            </div>
+          </section>
+        ))}
+      </div>
+
+      <div className="flex flex-wrap justify-end gap-6 pt-4 text-base font-medium leading-6">
+        <Link
+          href="/apply"
+          className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
+          aria-label="Apply for funding"
+        >
+          Apply for funding &rarr;
+        </Link>
         <Link
           href="/tags/grants"
           className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
-          aria-label="All Grants"
+          aria-label="All grant announcements"
         >
-          All Grants &rarr;
+          All grant announcements &rarr;
         </Link>
       </div>
     </>
@@ -59,12 +151,19 @@ const ProjectShowcase: NextPage<{ projects: Project[] }> = ({ projects }) => {
 
 export default ProjectShowcase
 
-export async function getStaticProps() {
-  const projects = allProjects
+export const getStaticProps: GetStaticProps<ShowcaseProps> = async () => {
+  const clusters: RenderCluster[] = buildClusters(allProjects).map((c) => ({
+    id: c.id,
+    title: c.title,
+    blurb: c.blurb,
+    projects: c.projects.map((p) => toCardData(p)),
+  }))
+
+  const lifetimeStats = await getLifetimeStats()
 
+  // Strip `undefined` values so getStaticProps can serialize the payload.
   return {
-    props: {
-      projects,
-    },
+    props: JSON.parse(JSON.stringify({ clusters, lifetimeStats })),
+    revalidate: 60 * 60 * 12,
   }
 }
diff --git a/utils/projectClusters.ts b/utils/projectClusters.ts
new file mode 100644
index 000000000..c972b7620
--- /dev/null
+++ b/utils/projectClusters.ts
@@ -0,0 +1,132 @@
+import type { Project } from 'contentlayer/generated'
+
+export type Cluster = {
+  id: string
+  title: string
+  blurb: string
+  slugs: string[]
+}
+
+export type ResolvedCluster = Omit<Cluster, 'slugs'> & {
+  projects: Project[]
+}
+
+/**
+ * Editorial groupings for the project showcase. Order matters — clusters are
+ * rendered in the order they appear here. Projects within each cluster are
+ * sorted alphabetically by title when clusters are built.
+ */
+export const CLUSTERS: Cluster[] = [
+  {
+    id: 'privacy-infra',
+    title: 'Privacy & Infrastructure',
+    blurb: 'The plumbing that keeps the rest of the stack honest.',
+    slugs: ['tor', 'grapheneos', 'pdk', 'wireguard'],
+  },
+  {
+    id: 'core',
+    title: 'Protocol Maintenance & Development',
+    blurb: 'The full node, validation, and the protocol underneath.',
+    slugs: [
+      'bitcoin-core',
+      'libbitcoin',
+      'floresta',
+      'utreexod',
+      'stratumv2',
+      'splicing',
+      'vls',
+      'asmap',
+    ],
+  },
+  {
+    id: 'education',
+    title: 'Education & Research',
+    blurb: 'People bringing in the next wave of contributors.',
+    slugs: [
+      'summerofbitcoin',
+      'satoshinakamotoinstitute',
+      'bitcoindesign',
+      'bitshala',
+    ],
+  },
+  {
+    id: 'dev-tooling-testing',
+    title: 'Developer Tooling & Testing',
+    blurb:
+      'Libraries, kits, and workflow tools engineers use to build and ship.',
+    slugs: [
+      'bdk',
+      'rust-bitcoin',
+      'cdk',
+      'ndk',
+      'ngit',
+      'bitcoinfuzz',
+      'bitcoinresearchkit',
+    ],
+  },
+  {
+    id: 'wallets',
+    title: 'Wallets',
+    blurb: 'Self-custody software people actually use.',
+    slugs: ['cove', 'blixt', 'blitz-wallet', 'dana-wallet'],
+  },
+  {
+    id: 'lightning-payments',
+    title: 'Merchant Tooling & Payments',
+    blurb: 'Payments, point-of-sale, and merchant tooling on Lightning.',
+    slugs: ['btcpayserver', 'lnbits', 'mostro'],
+  },
+  {
+    id: 'chaumian-ecash',
+    title: 'Chaumian ecash',
+    blurb: 'Ecash wallets and mint software on Cashu.',
+    slugs: ['minibits', 'cashu', 'opencash'],
+  },
+  {
+    id: 'nostr-clients',
+    title: 'Nostr Clients',
+    blurb: 'How people read and post on nostr today.',
+    slugs: ['damus', 'amethyst', '0xchat', 'coracle', 'flotilla', 'soapbox'],
+  },
+  {
+    id: 'nostr-infra',
+    title: 'Nostr Infrastructure',
+    blurb: 'Relays, libraries, signers, and developer tooling.',
+    slugs: ['applesauce', 'citrine', 'frostr', 'amber', 'zapstore'],
+  },
+]
+
+/**
+ * Resolve cluster slug lists against the full project set, dropping unknown
+ * slugs and clusters that end up empty. In development, warns about
+ * non-OpenSats projects that aren't included in any cluster so the curation
+ * stays in sync with the data folder.
+ */
+export function buildClusters(allProjects: Project[]): ResolvedCluster[] {
+  const bySlug = new Map(allProjects.map((p) => [p.slug, p]))
+
+  const resolved = CLUSTERS.map(({ slugs, ...rest }) => ({
+    ...rest,
+    projects: slugs
+      .map((slug) => bySlug.get(slug))
+      .filter((p): p is Project => Boolean(p))
+      .sort((a, b) =>
+        a.title.localeCompare(b.title, undefined, { sensitivity: 'base' })
+      ),
+  })).filter((c) => c.projects.length > 0)
+
+  if (process.env.NODE_ENV !== 'production') {
+    const clustered = new Set(CLUSTERS.flatMap((c) => c.slugs))
+    const orphans = allProjects
+      .filter((p) => p.nym !== 'OpenSats' && !clustered.has(p.slug))
+      .map((p) => p.slug)
+    if (orphans.length > 0) {
+      console.warn(
+        `[projectClusters] ${orphans.length} project(s) not in any cluster:`,
+        orphans
+      )
+    }
+  }
+
+  return resolved
+}
diff --git a/utils/relatedPosts.ts b/utils/relatedPosts.ts
index 148b44039..6051cdef8 100644
--- a/utils/relatedPosts.ts
+++ b/utils/relatedPosts.ts
@@ -79,6 +79,22 @@ export function getRelatedBlogPostsForProject(
   return getRelatedBlogPostsByTerms([title, slug], blogs)
 }
 
+export type LatestPost = { slug: string; date: string; title: string }
+
+/**
+ * Returns the most recent related blog post for a project as a small DTO,
+ * or null if there are none. Expects `sortedBlogs` to already be sorted
+ * newest-first (e.g. via pliny's `sortedBlogPost`).
+ */
+export function getLatestPostForProject(
+  project: Project,
+  sortedBlogs: Blog[]
+): LatestPost | null {
+  const [latest] = getRelatedBlogPostsForProject(project, sortedBlogs)
+  if (!latest) return null
+  return { slug: latest.slug, date: latest.date, title: latest.title }
+}
+
 /**
  * Finds blog posts that mention a given topic by its title or any alias.
  */