chore: add sponsors section

Show paid sponsors with a direct sponsorship CTA and keep the Carbon
Cover placement desktop-only with a compact mobile fallback.

Author: bluedbird

src/app/(public)/(site)/page.test.tsx

@@ -0,0 +1,46 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+
+vi.mock("@/features/marketing/components/hero-section", () => ({
+  HeroSection: () => <section data-testid="hero-section" />,
+}));
+
+vi.mock("@/features/marketing/components/home-deploy-section", () => ({
+  HomeDeploySection: () => <section data-testid="home-deploy" />,
+}));
+
+vi.mock("@/features/marketing/components/home-discover-section", () => ({
+  HomeDiscoverSection: () => <section data-testid="home-discover" />,
+}));
+
+vi.mock("@/features/marketing/components/home-faq-section", () => ({
+  HomeFaqSection: () => <section data-testid="home-faq" />,
+}));
+
+vi.mock("@/features/marketing/components/home-features-section", () => ({
+  HomeFeaturesSection: () => <section data-testid="home-features" />,
+}));
+
+vi.mock("@/features/marketing/components/home-use-cases-section", () => ({
+  HomeUseCasesSection: () => <section data-testid="home-use-cases" />,
+}));
+
+vi.mock("@/features/marketing/components/sponsors-section", () => ({
+  SponsorsSection: () => <section data-testid="home-sponsors" />,
+}));
+
+import HomePage from "./page";
+
+describe("HomePage", () => {
+  it("places sponsors between the FAQ and the final start CTA", () => {
+    render(<HomePage />);
+
+    const faq = screen.getByTestId("home-faq");
+    const sponsors = screen.getByTestId("home-sponsors");
+    const start = document.getElementById("start");
+
+    expect(start).not.toBeNull();
+    expect(faq.nextElementSibling).toBe(sponsors);
+    expect(sponsors.nextElementSibling).toBe(start);
+  });
+});

src/app/(public)/(site)/page.tsx

@@ -8,6 +8,7 @@ import { HomeDiscoverSection } from "@/features/marketing/components/home-discov
 import { HomeFaqSection } from "@/features/marketing/components/home-faq-section";
 import { HomeFeaturesSection } from "@/features/marketing/components/home-features-section";
 import { HomeUseCasesSection } from "@/features/marketing/components/home-use-cases-section";
+import { SponsorsSection } from "@/features/marketing/components/sponsors-section";
 import { buildDefaultOpenGraphImages, DEFAULT_OG_IMAGE } from "@/shared/lib/seo";
 
 const PRINCIPLES = [
@@ -122,8 +123,9 @@ export default function HomePage() {
       <HomeUseCasesSection />
       <HomeDiscoverSection />
       <HomeFaqSection />
+      <SponsorsSection />
 
-      <section id="start" className="border-t border-zinc-200 bg-white py-16 dark:border-white/10 dark:bg-zinc-950 sm:py-20 lg:py-24">
+      <section id="start" className="bg-white py-16 dark:bg-zinc-950 sm:py-20 lg:py-24">
         <div className="site-container grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center lg:gap-12">
           <div>
             <p className="text-xs font-semibold tracking-[0.18em] text-brand-700 uppercase dark:text-brand-300">Start here</p>

src/features/marketing/components/sponsors-section.test.tsx

@@ -0,0 +1,55 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { COMMUNITY_SPONSORS, FEATURED_SPONSORS } from "@/shared/data/sponsors";
+
+vi.mock("@/shared/ui/carbon-ad-card", () => ({
+  CarbonAdCard: ({ desktopOnly, variant }: { desktopOnly?: boolean; variant?: string }) => (
+    <aside data-testid="carbon-ad" data-desktop-only={desktopOnly || undefined} data-variant={variant} />
+  ),
+}));
+
+import { SponsorsSection } from "./sponsors-section";
+
+describe("SponsorsSection", () => {
+  it("introduces the current backers and invites new sponsors", () => {
+    render(<SponsorsSection />);
+
+    expect(screen.getByRole("heading", { name: "These teams support Memos." })).toBeInTheDocument();
+
+    const sponsorCta = screen.getByRole("link", { name: "Become a sponsor" });
+    expect(sponsorCta).toHaveAttribute("href", "https://github.com/sponsors/usememos");
+    expect(sponsorCta).toHaveAttribute("target", "_blank");
+    expect(sponsorCta.getAttribute("rel")?.split(/\s+/)).toEqual(expect.arrayContaining(["noopener", "noreferrer"]));
+  });
+
+  it("shows every paid featured sponsor as a safe external link", () => {
+    render(<SponsorsSection />);
+
+    for (const sponsor of FEATURED_SPONSORS) {
+      const link = screen.getAllByRole("link").find((candidate) => candidate.getAttribute("href") === sponsor.url);
+
+      expect(link, `${sponsor.name} sponsor link`).toBeDefined();
+      expect(link).toHaveAttribute("target", "_blank");
+      expect(link?.getAttribute("rel")?.split(/\s+/)).toEqual(expect.arrayContaining(["noopener", "noreferrer"]));
+      expect(link?.querySelector(`img[alt="${sponsor.name} logo"]`)).not.toBeNull();
+    }
+
+    for (const sponsor of COMMUNITY_SPONSORS) {
+      expect(screen.queryByRole("link", { name: new RegExp(sponsor.name, "i") })).not.toBeInTheDocument();
+    }
+  });
+
+  it("places the Carbon ad after every sponsor logo", () => {
+    const { container } = render(<SponsorsSection />);
+    const carbonAd = screen.getByTestId("carbon-ad");
+    const logos = Array.from(container.querySelectorAll<HTMLImageElement>("img"));
+
+    expect(logos.length).toBeGreaterThanOrEqual(FEATURED_SPONSORS.length);
+    expect(carbonAd).toHaveAttribute("data-variant", "sponsor");
+    expect(carbonAd).toHaveAttribute("data-desktop-only", "true");
+
+    for (const logo of logos) {
+      expect(logo.compareDocumentPosition(carbonAd) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+    }
+  });
+});

src/features/marketing/components/sponsors-section.tsx

@@ -1,73 +1,78 @@
-import { HeartIcon } from "lucide-react";
-import Link from "next/link";
+import { ArrowUpRightIcon } from "lucide-react";
 import { FEATURED_SPONSORS } from "@/shared/data/sponsors";
 import { cn } from "@/shared/lib/utils";
 import { CarbonAdCard } from "@/shared/ui/carbon-ad-card";
 
+const SQUARE_LOGO_SPONSORS = new Set(["SSD Nodes"]);
+
 export function SponsorsSection() {
   return (
-    <section className="bg-transparent py-14 sm:py-18 lg:py-20">
+    <section className="bg-stone-50/70 py-10 dark:bg-zinc-900/35 lg:py-12">
       <div className="site-container">
-        <div className="grid gap-10 border-t border-stone-300/60 pt-10 dark:border-white/10 lg:grid-cols-[minmax(0,21rem)_minmax(0,1fr)] lg:gap-14 lg:pt-14">
-          <div className="lg:sticky lg:top-24 lg:self-start">
-            <div className="mb-4 inline-flex items-center gap-3 text-sm font-medium text-stone-600 dark:text-stone-300">
-              <span className="inline-flex h-5 w-5 items-center justify-center text-stone-700 dark:text-stone-200">
-                <HeartIcon className="h-4 w-4" />
-              </span>
-              <span className="tracking-[0.18em] uppercase text-stone-500 dark:text-stone-400">Community</span>
-            </div>
-            <h2 className="max-w-[12ch] text-balance font-serif text-3xl font-semibold tracking-[-0.03em] text-stone-950 dark:text-stone-100 sm:text-4xl lg:text-[3.15rem]">
-              Supported by people who want Memos to last.
+        <div className="grid gap-7 lg:grid-cols-[minmax(0,17rem)_minmax(0,1fr)] lg:items-center lg:gap-10">
+          <div>
+            <p className="text-xs font-semibold tracking-[0.18em] text-brand-700 uppercase dark:text-brand-300">Sponsors</p>
+            <h2 className="mt-4 max-w-[14ch] text-balance font-serif text-3xl font-semibold tracking-tight text-zinc-950 dark:text-zinc-100 sm:text-4xl">
+              These teams support Memos.
             </h2>
-            <p className="mt-4 max-w-md text-balance text-base leading-7 text-stone-600 dark:text-stone-300 sm:text-lg">
-              A small group of sponsors helps keep the project shipping, documented, and available to everyone.
-            </p>
+            <a
+              href="https://github.com/sponsors/usememos"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="group mt-4 inline-flex items-center gap-2 text-sm font-semibold text-zinc-950 transition-colors hover:text-brand-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-4 focus-visible:ring-offset-stone-50 dark:text-zinc-100 dark:hover:text-brand-300 dark:focus-visible:ring-offset-zinc-900"
+            >
+              Become a sponsor
+              <ArrowUpRightIcon
+                aria-hidden="true"
+                className="size-4 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5 motion-reduce:transition-none"
+              />
+            </a>
           </div>
 
-          <div>
-            <div className="grid lg:grid-cols-2">
-              {FEATURED_SPONSORS.map((sponsor) => (
-                <a
-                  key={sponsor.name}
-                  href={sponsor.url}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="group flex min-h-[12rem] flex-col justify-between gap-6 border-b border-stone-300/60 px-6 py-6 transition-colors dark:border-white/10 sm:px-8 sm:py-8 lg:[&:nth-last-child(-n+2)]:border-b-0 lg:[&:nth-child(odd)]:border-r lg:[&:nth-child(odd)]:border-stone-300/60 dark:lg:[&:nth-child(odd)]:border-white/10"
-                >
-                  <div className="flex items-center justify-start">
+          <div className="grid min-w-0 gap-5 lg:grid-cols-[minmax(0,1fr)_minmax(18rem,22rem)] lg:items-center lg:gap-8">
+            <div className="grid grid-cols-2 gap-x-6 gap-y-4 min-[360px]:grid-cols-3 min-[360px]:gap-x-4 sm:gap-x-8">
+              {FEATURED_SPONSORS.map((sponsor) => {
+                const logoClassName = cn(
+                  "h-auto w-auto max-w-[88%] object-contain transition-opacity duration-200 group-hover:opacity-100 motion-reduce:transition-none",
+                  SQUARE_LOGO_SPONSORS.has(sponsor.name) ? "max-h-12 opacity-90 sm:max-h-14 lg:max-h-16" : "max-h-7 opacity-80 sm:max-h-8",
+                );
+
+                return (
+                  <a
+                    key={sponsor.name}
+                    href={sponsor.url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="group flex min-h-16 items-center justify-center rounded-lg last:col-span-2 last:mx-auto last:w-1/2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-4 focus-visible:ring-offset-stone-50 min-[360px]:last:col-span-1 min-[360px]:last:mx-0 min-[360px]:last:w-auto dark:focus-visible:ring-offset-zinc-900"
+                  >
                     <img
                       src={sponsor.logo}
                       alt={`${sponsor.name} logo`}
-                      className={cn("h-10 w-auto max-w-full object-contain sm:h-12", sponsor.logoDark && "dark:hidden")}
+                      loading="lazy"
+                      decoding="async"
+                      className={cn(logoClassName, sponsor.logoDark && "dark:hidden")}
                     />
                     {sponsor.logoDark && (
                       <img
                         src={sponsor.logoDark}
                         alt={`${sponsor.name} logo`}
-                        className="hidden h-10 w-auto max-w-full object-contain dark:block sm:h-12"
+                        loading="lazy"
+                        decoding="async"
+                        className={cn(logoClassName, "hidden dark:block")}
                       />
                     )}
-                  </div>
-                  {sponsor.description && (
-                    <p className="max-w-sm border-t border-stone-300/60 pt-4 text-balance text-sm leading-7 text-stone-600 dark:border-white/10 dark:text-stone-300 sm:text-base">
-                      {sponsor.description}
-                    </p>
-                  )}
-                </a>
-              ))}
-              <div className="border-b border-stone-300/60 px-6 py-6 dark:border-white/10 sm:px-8 sm:py-8 lg:col-span-2 lg:border-b-0 lg:border-t lg:border-stone-300/60 dark:lg:border-white/10">
-                <CarbonAdCard variant="sponsor" />
-              </div>
+                  </a>
+                );
+              })}
             </div>
 
-            <div className="mt-6">
-              <Link
-                href="/sponsors"
-                className="inline-flex items-center gap-2 text-sm font-medium text-stone-900 transition-colors hover:text-stone-700 dark:text-stone-100 dark:hover:text-stone-200 sm:text-base"
-              >
-                View all sponsors and backers
-                <span aria-hidden="true">→</span>
-              </Link>
+            <div className="border-t border-zinc-200 pt-5 dark:border-white/10 lg:border-t-0 lg:border-l lg:pt-0 lg:pl-8">
+              <p className="hidden text-[0.6875rem] font-semibold tracking-[0.16em] text-zinc-500 uppercase dark:text-zinc-400 lg:block">
+                Sponsored
+              </p>
+              <div className="lg:mt-3">
+                <CarbonAdCard desktopOnly variant="sponsor" />
+              </div>
             </div>
           </div>
         </div>

src/shared/ui/carbon-ad-card.test.tsx

@@ -13,12 +13,20 @@ vi.mock("next/navigation", () => ({
   usePathname: () => mocks.pathname,
 }));
 
-function CarbonTestTree({ cards = 1 }: { cards?: number }) {
+function CarbonTestTree({
+  cards = 1,
+  desktopOnly,
+  variant,
+}: {
+  cards?: number;
+  desktopOnly?: boolean;
+  variant?: "compact" | "default" | "sponsor";
+}) {
   return (
     <>
       <CarbonAdsController />
       {Array.from({ length: cards }, (_, index) => (
-        <CarbonAdCard key={index} />
+        <CarbonAdCard key={index} desktopOnly={desktopOnly} variant={variant} />
       ))}
     </>
   );
@@ -47,6 +55,7 @@ describe("CarbonAdCard", () => {
 
   afterEach(() => {
     resetCarbonAdRuntimeForTests();
+    vi.unstubAllGlobals();
   });
 
   it("keeps the compact sponsor fallback while the Carbon creative is unavailable", () => {
@@ -63,6 +72,36 @@ describe("CarbonAdCard", () => {
     expect(link.className).toMatch(/\bleading-5\b/);
   });
 
+  it("keeps the homepage sponsor fallback concise", () => {
+    render(<CarbonTestTree variant="sponsor" />);
+
+    expect(screen.getByRole("link", { name: /Sponsor Memos Support the project and feature your logo here\./ })).toHaveAttribute(
+      "href",
+      "https://github.com/sponsors/usememos",
+    );
+    expect(screen.queryByText(/continued development/i)).not.toBeInTheDocument();
+  });
+
+  it("keeps the homepage ad inactive with a compact fallback on mobile", () => {
+    vi.stubGlobal(
+      "matchMedia",
+      vi.fn(() => ({
+        addEventListener: vi.fn(),
+        matches: false,
+        media: "(min-width: 1024px)",
+        removeEventListener: vi.fn(),
+      })),
+    );
+
+    render(<CarbonTestTree desktopOnly variant="sponsor" />);
+
+    const region = screen.getByRole("complementary", { name: "Sponsored content" });
+    expect(region).toHaveAttribute("data-carbon-status", "inactive");
+    expect(region.className).toContain("min-h-16");
+    expect(region.className).toContain("lg:min-h-[200px]");
+    expect(document.querySelector("#_carbonads_js")).not.toBeInTheDocument();
+  });
+
   it("loads the dashboard tag once without treating script load as an impression", () => {
     const refresh = vi.fn();
     window._carbonads = { refresh };