From eedf1aec58537e048d402efb53cb22af8bc5e4e5 Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Tue, 7 Jul 2026 10:24:11 +0200
Subject: [PATCH 01/11] feat: add developer spotlight landing page

Replace the /spotlight redirect with a real landing page that showcases
each spotlight using its OG preview image, newest as a featured card and
the rest in a responsive grid.
---
 components/SpotlightCard.tsx  | 59 +++++++++++++++++++++++++++++++++++
 components/post/postShared.ts |  3 ++
 next.config.js                |  5 ---
 pages/spotlight/index.tsx     | 59 +++++++++++++++++++++++++++++++++++
 4 files changed, 121 insertions(+), 5 deletions(-)
 create mode 100644 components/SpotlightCard.tsx
 create mode 100644 pages/spotlight/index.tsx

diff --git a/components/SpotlightCard.tsx b/components/SpotlightCard.tsx
new file mode 100644
index 000000000..4045f12a6
--- /dev/null
+++ b/components/SpotlightCard.tsx
@@ -0,0 +1,59 @@
+import { formatDate } from 'pliny/utils/formatDate'
+import { CoreContent } from 'pliny/utils/contentlayer'
+import type { Blog } from 'contentlayer/generated'
+import Image from '@/components/Image'
+import Link from '@/components/Link'
+import siteMetadata from '@/data/siteMetadata'
+import { getSpotlightOgImage } from '@/components/post/postShared'
+
+interface Props {
+  post: CoreContent<Blog>
+  featured?: boolean
+}
+
+export default function SpotlightCard({ post, featured = false }: Props) {
+  const { path, date, title, summary, images } = post
+  const ogImage = getSpotlightOgImage(images)
+
+  return (
+    <Link
+      href={`/${path}`}
+      aria-label={`Read the spotlight: ${title}`}
+      className="group flex h-full flex-col overflow-hidden rounded-lg border-2 border-gray-200 border-opacity-60 transition-colors hover:border-primary-500 dark:border-gray-700 dark:hover:border-primary-400"
+    >
+      <div className="relative aspect-[16/9] w-full overflow-hidden">
+        {ogImage && (
+          <Image
+            src={ogImage}
+            alt={title}
+            fill
+            sizes={
+              featured
+                ? '100vw'
+                : '(min-width: 1280px) 33vw, (min-width: 768px) 50vw, 100vw'
+            }
+            className="object-cover transition-transform duration-300 group-hover:scale-105"
+          />
+        )}
+      </div>
+      <div className={featured ? 'p-6 sm:p-8' : 'p-5'}>
+        <time
+          dateTime={date}
+          className="text-sm font-medium text-gray-500 dark:text-gray-400"
+        >
+          {formatDate(date, siteMetadata.locale)}
+        </time>
+        <h2
+          className={`mt-2 font-bold leading-tight tracking-tight text-gray-900 group-hover:text-primary-600 dark:text-gray-100 dark:group-hover:text-primary-400 ${
+            featured ? 'text-2xl sm:text-3xl' : 'text-xl'
+          }`}
+        >
+          {title}
+        </h2>
+        {summary && (
+          <p className="mt-3 text-gray-500 dark:text-gray-400">{summary}</p>
+        )}
+      </div>
+    </Link>
+  )
+}
diff --git a/components/post/postShared.ts b/components/post/postShared.ts
index 41d500c4d..3fd25ef86 100644
--- a/components/post/postShared.ts
+++ b/components/post/postShared.ts
@@ -22,6 +22,9 @@ export const discussUrl = () =>
 /** Spotlight posts: images[0] = OG/social, images[1] = cover hero. */
 export const getSpotlightHeroImage = (images?: string[]) => images?.[1]
 
+/** Spotlight posts: images[0] = OG/social preview. */
+export const getSpotlightOgImage = (images?: string[]) => images?.[0]
+
 /** Keep in sync with SectionContainer horizontal layout. */
 export const postSectionClasses =
   'mx-2 max-w-3xl px-4 sm:px-6 md:mx-auto lg:mx-auto xl:max-w-5xl xl:px-0'
diff --git a/next.config.js b/next.config.js
index 22f0b12ab..a18a23536 100644
--- a/next.config.js
+++ b/next.config.js
@@ -150,11 +150,6 @@ module.exports = () => {
           destination: '/faq/grantee',
           permanent: true,
         },
-        {
-          source: '/spotlight',
-          destination: '/tags/spotlight',
-          permanent: true,
-        },
         {
           source: '/heartbeat',
           destination: 'https://heartbeat.opensats.org/',
diff --git a/pages/spotlight/index.tsx b/pages/spotlight/index.tsx
new file mode 100644
index 000000000..0dfdeb934
--- /dev/null
+++ b/pages/spotlight/index.tsx
@@ -0,0 +1,59 @@
+import { PageSEO } from '@/components/SEO'
+import siteMetadata from '@/data/siteMetadata'
+import SpotlightCard from '@/components/SpotlightCard'
+import { kebabCase } from 'pliny/utils/kebabCase'
+import { sortedBlogPost, allCoreContent } from 'pliny/utils/contentlayer'
+import { InferGetStaticPropsType } from 'next'
+import { allBlogs } from 'contentlayer/generated'
+import type { Blog } from 'contentlayer/generated'
+
+export const getStaticProps = async () => {
+  const posts = allCoreContent(
+    sortedBlogPost(
+      allBlogs.filter(
+        (post) =>
+          post.draft !== true &&
+          post.tags.map((tag) => kebabCase(tag)).includes('spotlight')
+      )
+    ) as Blog[]
+  )
+  return { props: { posts } }
+}
+
+export default function Spotlight({
+  posts,
+}: InferGetStaticPropsType<typeof getStaticProps>) {
+  const [featured, ...rest] = posts
+
+  return (
+    <>
+      <PageSEO
+        title={`Developer Spotlights - ${siteMetadata.title}`}
+        description="Meet the developers OpenSats supports and the open-source work they are building."
+      />
+      <div className="space-y-2 pb-8 pt-6 md:space-y-5">
+        <h1 className="text-3xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl sm:leading-10 md:text-5xl md:leading-14">
+          Developer Spotlights
+        </h1>
+        <p className="text-lg leading-7 text-gray-500 dark:text-gray-400">
+          Get to know the developers we support and the open-source projects
+          they pour their days into.
+        </p>
+      </div>
+
+      {featured && (
+        <div className="pb-10">
+          <SpotlightCard post={featured} featured />
+        </div>
+      )}
+
+      {rest.length > 0 && (
+        <div className="grid gap-8 pb-10 md:grid-cols-2 xl:grid-cols-3">
+          {rest.map((post) => (
+            <SpotlightCard key={post.path} post={post} />
+          ))}
+        </div>
+      )}
+    </>
+  )
+}

From cba0bc9fa9083d38e939f1f55422b60bf0c9fabd Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Tue, 7 Jul 2026 10:28:58 +0200
Subject: [PATCH 02/11] feat: use hero image as featured spotlight card
 background

Layer the smaller OG preview on top of the wide hero image instead of
enlarging the OG card, which scaled poorly at full width.
---
 components/SpotlightCard.tsx | 79 ++++++++++++++++++++++++++++++------
 1 file changed, 67 insertions(+), 12 deletions(-)

diff --git a/components/SpotlightCard.tsx b/components/SpotlightCard.tsx
index 4045f12a6..fa78c711a 100644
--- a/components/SpotlightCard.tsx
+++ b/components/SpotlightCard.tsx
@@ -4,7 +4,10 @@ import type { Blog } from 'contentlayer/generated'
 import Image from '@/components/Image'
 import Link from '@/components/Link'
 import siteMetadata from '@/data/siteMetadata'
-import { getSpotlightOgImage } from '@/components/post/postShared'
+import {
+  getSpotlightOgImage,
+  getSpotlightHeroImage,
+} from '@/components/post/postShared'
 
 interface Props {
   post: CoreContent<Blog>
@@ -15,6 +18,66 @@ export default function SpotlightCard({ post, featured = false }: Props) {
   const { path, date, title, summary, images } = post
   const ogImage = getSpotlightOgImage(images)
 
+  if (featured) {
+    const heroImage = getSpotlightHeroImage(images) ?? ogImage
+    return (
+      <Link
+        href={`/${path}`}
+        aria-label={`Read the spotlight: ${title}`}
+        className="group relative block overflow-hidden rounded-lg border-2 border-gray-200 border-opacity-60 transition-colors hover:border-primary-500 dark:border-gray-700 dark:hover:border-primary-400"
+      >
+        <div className="relative min-h-[24rem] w-full sm:aspect-[2/1] sm:min-h-0 lg:aspect-[21/9]">
+          {heroImage && (
+            <Image
+              src={heroImage}
+              alt=""
+              fill
+              priority
+              sizes="100vw"
+              className="object-cover object-[70%_center] transition-transform duration-300 group-hover:scale-105 lg:object-center"
+            />
+          )}
+          <div
+            className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/45 to-black/10"
+            aria-hidden
+          />
+          {ogImage && (
+            <div className="absolute right-4 top-4 hidden w-40 overflow-hidden rounded-md border-2 border-white/80 shadow-lg sm:block lg:w-56">
+              <div className="relative aspect-[16/9]">
+                <Image
+                  src={ogImage}
+                  alt={title}
+                  fill
+                  sizes="14rem"
+                  className="object-cover"
+                />
+              </div>
+            </div>
+          )}
+          <div className="absolute inset-x-0 bottom-0 p-6 sm:p-8">
+            <p className="text-xs font-semibold uppercase tracking-widest text-white/80">
+              Developer Spotlight
+            </p>
+            <time
+              dateTime={date}
+              className="mt-2 block text-sm font-medium text-white/90"
+            >
+              {formatDate(date, siteMetadata.locale)}
+            </time>
+            <h2 className="mt-2 max-w-3xl text-2xl font-extrabold leading-tight tracking-tight text-white sm:text-3xl md:text-4xl">
+              {title}
+            </h2>
+            {summary && (
+              <p className="mt-3 line-clamp-2 max-w-2xl text-white/90 sm:line-clamp-3">
+                {summary}
+              </p>
+            )}
+          </div>
+        </div>
+      </Link>
+    )
+  }
+
   return (
     <Link
       href={`/${path}`}
@@ -27,27 +90,19 @@ export default function SpotlightCard({ post, featured = false }: Props) {
             src={ogImage}
             alt={title}
             fill
-            sizes={
-              featured
-                ? '100vw'
-                : '(min-width: 1280px) 33vw, (min-width: 768px) 50vw, 100vw'
-            }
+            sizes="(min-width: 1280px) 33vw, (min-width: 768px) 50vw, 100vw"
             className="object-cover transition-transform duration-300 group-hover:scale-105"
           />
         )}
       </div>
-      <div className={featured ? 'p-6 sm:p-8' : 'p-5'}>
+      <div className="p-5">
         <time
           dateTime={date}
           className="text-sm font-medium text-gray-500 dark:text-gray-400"
         >
           {formatDate(date, siteMetadata.locale)}
         </time>
-        <h2
-          className={`mt-2 font-bold leading-tight tracking-tight text-gray-900 group-hover:text-primary-600 dark:text-gray-100 dark:group-hover:text-primary-400 ${
-            featured ? 'text-2xl sm:text-3xl' : 'text-xl'
-          }`}
-        >
+        <h2 className="mt-2 text-xl font-bold leading-tight tracking-tight text-gray-900 group-hover:text-primary-600 dark:text-gray-100 dark:group-hover:text-primary-400">
           {title}
         </h2>
         {summary && (

From bd20c7abf9f2d40d200551c3a1efa692a81c330b Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Tue, 7 Jul 2026 10:29:55 +0200
Subject: [PATCH 03/11] feat: add apply for funding link to spotlight page

Mirror the funds page footer link with a call to action inviting readers
to apply, since spotlights profile grantees.
---
 pages/spotlight/index.tsx | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/pages/spotlight/index.tsx b/pages/spotlight/index.tsx
index 0dfdeb934..5678dda0b 100644
--- a/pages/spotlight/index.tsx
+++ b/pages/spotlight/index.tsx
@@ -1,5 +1,6 @@
 import { PageSEO } from '@/components/SEO'
 import siteMetadata from '@/data/siteMetadata'
+import Link from '@/components/Link'
 import SpotlightCard from '@/components/SpotlightCard'
 import { kebabCase } from 'pliny/utils/kebabCase'
 import { sortedBlogPost, allCoreContent } from 'pliny/utils/contentlayer'
@@ -54,6 +55,16 @@ export default function Spotlight({
           ))}
         </div>
       )}
+
+      <div className="flex justify-end pt-8 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"
+        >
+          Could you be next? Apply for funding &rarr;
+        </Link>
+      </div>
     </>
   )
 }

From 7ddfbb868844cf5d7490a894b94b45f625366a29 Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Tue, 7 Jul 2026 10:31:18 +0200
Subject: [PATCH 04/11] refactor: drop og thumbnail overlay from featured
 spotlight card

The hero image alone reads better for the featured card.
---
 components/SpotlightCard.tsx | 13 -------------
 1 file changed, 13 deletions(-)

diff --git a/components/SpotlightCard.tsx b/components/SpotlightCard.tsx
index fa78c711a..6a928a4cf 100644
--- a/components/SpotlightCard.tsx
+++ b/components/SpotlightCard.tsx
@@ -41,19 +41,6 @@ export default function SpotlightCard({ post, featured = false }: Props) {
             className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/45 to-black/10"
             aria-hidden
           />
-          {ogImage && (
-            <div className="absolute right-4 top-4 hidden w-40 overflow-hidden rounded-md border-2 border-white/80 shadow-lg sm:block lg:w-56">
-              <div className="relative aspect-[16/9]">
-                <Image
-                  src={ogImage}
-                  alt={title}
-                  fill
-                  sizes="14rem"
-                  className="object-cover"
-                />
-              </div>
-            </div>
-          )}
           <div className="absolute inset-x-0 bottom-0 p-6 sm:p-8">
             <p className="text-xs font-semibold uppercase tracking-widest text-white/80">
               Developer Spotlight

From 86c6b594d85185abf443f6122869057f23a53c4c Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Tue, 7 Jul 2026 10:32:18 +0200
Subject: [PATCH 05/11] feat: add donate link to spotlight page footer

Pair the apply call to action with a donate link so readers can support
the developers the spotlights profile.
---
 pages/spotlight/index.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/pages/spotlight/index.tsx b/pages/spotlight/index.tsx
index 5678dda0b..c73382cc0 100644
--- a/pages/spotlight/index.tsx
+++ b/pages/spotlight/index.tsx
@@ -56,7 +56,14 @@ export default function Spotlight({
         </div>
       )}
 
-      <div className="flex justify-end pt-8 text-base font-medium leading-6">
+      <div className="flex flex-col gap-4 pt-8 text-base font-medium leading-6 sm:flex-row sm:justify-between">
+        <Link
+          href="/donate"
+          className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
+          aria-label="Donate to OpenSats"
+        >
+          Help fund developers like these &rarr;
+        </Link>
         <Link
           href="/apply"
           className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"

From 1b1c8326a1203503c05b4889b04f071822347b7d Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Tue, 7 Jul 2026 11:01:06 +0200
Subject: [PATCH 06/11] style: stack spotlight footer links vertically

Place the donate link above the apply link, both right-aligned.
---
 pages/spotlight/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/spotlight/index.tsx b/pages/spotlight/index.tsx
index c73382cc0..580bc0af0 100644
--- a/pages/spotlight/index.tsx
+++ b/pages/spotlight/index.tsx
@@ -56,7 +56,7 @@ export default function Spotlight({
         </div>
       )}
 
-      <div className="flex flex-col gap-4 pt-8 text-base font-medium leading-6 sm:flex-row sm:justify-between">
+      <div className="flex flex-col items-end gap-4 pt-8 text-base font-medium leading-6">
         <Link
           href="/donate"
           className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"

From 7a00598e6bb768942ded431321d0d046c15d3d2f Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Tue, 7 Jul 2026 11:01:32 +0200
Subject: [PATCH 07/11] style: order apply link above donate on spotlight page

---
 pages/spotlight/index.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/pages/spotlight/index.tsx b/pages/spotlight/index.tsx
index 580bc0af0..979a29a8f 100644
--- a/pages/spotlight/index.tsx
+++ b/pages/spotlight/index.tsx
@@ -58,18 +58,18 @@ export default function Spotlight({
 
       <div className="flex flex-col items-end gap-4 pt-8 text-base font-medium leading-6">
         <Link
-          href="/donate"
+          href="/apply"
           className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
-          aria-label="Donate to OpenSats"
+          aria-label="Apply for funding"
         >
-          Help fund developers like these &rarr;
+          Could you be next? Apply for funding &rarr;
         </Link>
         <Link
-          href="/apply"
+          href="/donate"
           className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
-          aria-label="Apply for funding"
+          aria-label="Donate to OpenSats"
         >
-          Could you be next? Apply for funding &rarr;
+          Help fund developers like these &rarr;
         </Link>
       </div>
     </>

From afd80a0b833d302da05b0c13496ea0c28244aaf6 Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Tue, 7 Jul 2026 11:04:49 +0200
Subject: [PATCH 08/11] feat: use compact spotlight card on mobile for featured
 post

Show the OG-image card at the same size as the rest on mobile, and only
switch to the hero background layout from md up. Extract shared compact
and hero card variants to keep it DRY.
---
 components/SpotlightCard.tsx | 120 +++++++++++++++++++++--------------
 1 file changed, 71 insertions(+), 49 deletions(-)

diff --git a/components/SpotlightCard.tsx b/components/SpotlightCard.tsx
index 6a928a4cf..733d5fdce 100644
--- a/components/SpotlightCard.tsx
+++ b/components/SpotlightCard.tsx
@@ -14,62 +14,18 @@ interface Props {
   featured?: boolean
 }
 
-export default function SpotlightCard({ post, featured = false }: Props) {
+const cardClasses =
+  'group block overflow-hidden rounded-lg border-2 border-gray-200 border-opacity-60 transition-colors hover:border-primary-500 dark:border-gray-700 dark:hover:border-primary-400'
+
+function CompactCard({ post }: { post: CoreContent<Blog> }) {
   const { path, date, title, summary, images } = post
   const ogImage = getSpotlightOgImage(images)
 
-  if (featured) {
-    const heroImage = getSpotlightHeroImage(images) ?? ogImage
-    return (
-      <Link
-        href={`/${path}`}
-        aria-label={`Read the spotlight: ${title}`}
-        className="group relative block overflow-hidden rounded-lg border-2 border-gray-200 border-opacity-60 transition-colors hover:border-primary-500 dark:border-gray-700 dark:hover:border-primary-400"
-      >
-        <div className="relative min-h-[24rem] w-full sm:aspect-[2/1] sm:min-h-0 lg:aspect-[21/9]">
-          {heroImage && (
-            <Image
-              src={heroImage}
-              alt=""
-              fill
-              priority
-              sizes="100vw"
-              className="object-cover object-[70%_center] transition-transform duration-300 group-hover:scale-105 lg:object-center"
-            />
-          )}
-          <div
-            className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/45 to-black/10"
-            aria-hidden
-          />
-          <div className="absolute inset-x-0 bottom-0 p-6 sm:p-8">
-            <p className="text-xs font-semibold uppercase tracking-widest text-white/80">
-              Developer Spotlight
-            </p>
-            <time
-              dateTime={date}
-              className="mt-2 block text-sm font-medium text-white/90"
-            >
-              {formatDate(date, siteMetadata.locale)}
-            </time>
-            <h2 className="mt-2 max-w-3xl text-2xl font-extrabold leading-tight tracking-tight text-white sm:text-3xl md:text-4xl">
-              {title}
-            </h2>
-            {summary && (
-              <p className="mt-3 line-clamp-2 max-w-2xl text-white/90 sm:line-clamp-3">
-                {summary}
-              </p>
-            )}
-          </div>
-        </div>
-      </Link>
-    )
-  }
-
   return (
     <Link
       href={`/${path}`}
       aria-label={`Read the spotlight: ${title}`}
-      className="group flex h-full flex-col overflow-hidden rounded-lg border-2 border-gray-200 border-opacity-60 transition-colors hover:border-primary-500 dark:border-gray-700 dark:hover:border-primary-400"
+      className={`flex h-full flex-col ${cardClasses}`}
     >
       <div className="relative aspect-[16/9] w-full overflow-hidden">
         {ogImage && (
@@ -99,3 +55,69 @@ export default function SpotlightCard({ post, featured = false }: Props) {
     </Link>
   )
 }
+
+function HeroCard({ post }: { post: CoreContent<Blog> }) {
+  const { path, date, title, summary, images } = post
+  const heroImage = getSpotlightHeroImage(images) ?? getSpotlightOgImage(images)
+
+  return (
+    <Link
+      href={`/${path}`}
+      aria-label={`Read the spotlight: ${title}`}
+      className={`relative ${cardClasses}`}
+    >
+      <div className="relative aspect-[2/1] w-full lg:aspect-[21/9]">
+        {heroImage && (
+          <Image
+            src={heroImage}
+            alt=""
+            fill
+            priority
+            sizes="100vw"
+            className="object-cover object-[70%_center] transition-transform duration-300 group-hover:scale-105 lg:object-center"
+          />
+        )}
+        <div
+          className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/45 to-black/10"
+          aria-hidden
+        />
+        <div className="absolute inset-x-0 bottom-0 p-6 sm:p-8">
+          <p className="text-xs font-semibold uppercase tracking-widest text-white/80">
+            Developer Spotlight
+          </p>
+          <time
+            dateTime={date}
+            className="mt-2 block text-sm font-medium text-white/90"
+          >
+            {formatDate(date, siteMetadata.locale)}
+          </time>
+          <h2 className="mt-2 max-w-3xl text-2xl font-extrabold leading-tight tracking-tight text-white sm:text-3xl md:text-4xl">
+            {title}
+          </h2>
+          {summary && (
+            <p className="mt-3 line-clamp-2 max-w-2xl text-white/90 sm:line-clamp-3">
+              {summary}
+            </p>
+          )}
+        </div>
+      </div>
+    </Link>
+  )
+}
+
+export default function SpotlightCard({ post, featured = false }: Props) {
+  if (!featured) {
+    return <CompactCard post={post} />
+  }
+
+  return (
+    <>
+      <div className="md:hidden">
+        <CompactCard post={post} />
+      </div>
+      <div className="hidden md:block">
+        <HeroCard post={post} />
+      </div>
+    </>
+  )
+}

From 80f4f93156058f269513ac326e01b315f2685026 Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Tue, 7 Jul 2026 11:13:28 +0200
Subject: [PATCH 09/11] feat: add dedicated og image and structured data to
 spotlight page

Generate a spotlight page OG card and pass the slug to PageSEO, and emit
CollectionPage/ItemList JSON-LD so the page is treated as a collection.
---
 pages/spotlight/index.tsx    | 32 +++++++++++++++++++++++++++++++-
 scripts/generate-page-og.mjs |  6 ++++++
 2 files changed, 37 insertions(+), 1 deletion(-)

diff --git a/pages/spotlight/index.tsx b/pages/spotlight/index.tsx
index 979a29a8f..111a6d45f 100644
--- a/pages/spotlight/index.tsx
+++ b/pages/spotlight/index.tsx
@@ -1,3 +1,4 @@
+import Head from 'next/head'
 import { PageSEO } from '@/components/SEO'
 import siteMetadata from '@/data/siteMetadata'
 import Link from '@/components/Link'
@@ -8,6 +9,9 @@ import { InferGetStaticPropsType } from 'next'
 import { allBlogs } from 'contentlayer/generated'
 import type { Blog } from 'contentlayer/generated'
 
+const PAGE_DESCRIPTION =
+  'Meet the developers OpenSats supports and the open-source work they are building.'
+
 export const getStaticProps = async () => {
   const posts = allCoreContent(
     sortedBlogPost(
@@ -26,12 +30,38 @@ export default function Spotlight({
 }: InferGetStaticPropsType<typeof getStaticProps>) {
   const [featured, ...rest] = posts
 
+  const structuredData = {
+    '@context': 'https://schema.org',
+    '@type': 'CollectionPage',
+    name: 'Developer Spotlights',
+    description: PAGE_DESCRIPTION,
+    url: `${siteMetadata.siteUrl}/spotlight`,
+    mainEntity: {
+      '@type': 'ItemList',
+      itemListElement: posts.map((post, index) => ({
+        '@type': 'ListItem',
+        position: index + 1,
+        url: `${siteMetadata.siteUrl}/${post.path}`,
+        name: post.title,
+      })),
+    },
+  }
+
   return (
     <>
       <PageSEO
         title={`Developer Spotlights - ${siteMetadata.title}`}
-        description="Meet the developers OpenSats supports and the open-source work they are building."
+        description={PAGE_DESCRIPTION}
+        slug="spotlight"
       />
+      <Head>
+        <script
+          type="application/ld+json"
+          dangerouslySetInnerHTML={{
+            __html: JSON.stringify(structuredData),
+          }}
+        />
+      </Head>
       <div className="space-y-2 pb-8 pt-6 md:space-y-5">
         <h1 className="text-3xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl sm:leading-10 md:text-5xl md:leading-14">
           Developer Spotlights
diff --git a/scripts/generate-page-og.mjs b/scripts/generate-page-og.mjs
index 1e333387e..339c6582f 100644
--- a/scripts/generate-page-og.mjs
+++ b/scripts/generate-page-og.mjs
@@ -52,6 +52,12 @@ const EXTRA_PAGES = [
     title: 'Map',
     summary: 'Countries where OpenSats has awarded grants.',
   },
+  {
+    slug: 'spotlight',
+    title: 'Developer Spotlights',
+    summary:
+      'Meet the developers OpenSats supports and the open-source work they are building.',
+  },
 ]
 
 // Utility / legal / form-result pages that don't benefit from a custom

From 749f4b950fefebf91f4228426ea3cc70610da14f Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Tue, 7 Jul 2026 11:13:28 +0200
Subject: [PATCH 10/11] a11y: respect reduced motion and drop redundant image
 alt on spotlight cards

Gate the hover zoom behind motion-safe and mark the OG preview decorative
since the title is already conveyed by the heading and link label.
---
 components/SpotlightCard.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/SpotlightCard.tsx b/components/SpotlightCard.tsx
index 733d5fdce..19248cfbc 100644
--- a/components/SpotlightCard.tsx
+++ b/components/SpotlightCard.tsx
@@ -31,10 +31,10 @@ function CompactCard({ post }: { post: CoreContent<Blog> }) {
         {ogImage && (
           <Image
             src={ogImage}
-            alt={title}
+            alt=""
             fill
             sizes="(min-width: 1280px) 33vw, (min-width: 768px) 50vw, 100vw"
-            className="object-cover transition-transform duration-300 group-hover:scale-105"
+            className="object-cover transition-transform duration-300 motion-safe:group-hover:scale-105"
           />
         )}
       </div>
@@ -74,7 +74,7 @@ function HeroCard({ post }: { post: CoreContent<Blog> }) {
             fill
             priority
             sizes="100vw"
-            className="object-cover object-[70%_center] transition-transform duration-300 group-hover:scale-105 lg:object-center"
+            className="object-cover object-[70%_center] transition-transform duration-300 motion-safe:group-hover:scale-105 lg:object-center"
           />
         )}
         <div

From 2c2ac658ce77201ad22d6973c88a4df2b3b49c69 Mon Sep 17 00:00:00 2001
From: Gigi <109058+dergigi@users.noreply.github.com>
Date: Tue, 7 Jul 2026 15:56:57 +0200
Subject: [PATCH 11/11] fix: apply suggestions from Arvin

Co-authored-by: ARVIN <141419722+Arvin21M@users.noreply.github.com>
---
 pages/spotlight/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/spotlight/index.tsx b/pages/spotlight/index.tsx
index 111a6d45f..cddf34dbc 100644
--- a/pages/spotlight/index.tsx
+++ b/pages/spotlight/index.tsx
@@ -95,7 +95,7 @@ export default function Spotlight({
           Could you be next? Apply for funding &rarr;
         </Link>
         <Link
-          href="/donate"
+          href="/funds"
           className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
           aria-label="Donate to OpenSats"
         >