Present company sponsorship as support instead of ad space (#5297)

* feat(website): present company sponsorship as support, not ad space

The homepage showed four empty "Sponsor / $500 a month" boxes under a
"New" badge, right below a note about staying independent. They read as
ad inventory for sale. The price now lives only on /sponsor, next to the
checkout. The homepage shows a Sponsors row only once a company has
sponsored, and the READMEs link to /sponsor instead of straight to
Stripe checkout.

* feat(website): drop subtitles from the sponsor options

Each option carried a line like "From $5 a month" or "with an invoice" that tried to set it apart, but the differences are not real: GitHub Sponsors invoices too and any channel takes small amounts. Showing the names lets people pick the platform they already use.

README.ja.md

@@ -153,7 +153,7 @@ npm run typecheck
 
 ## スポンサー
 
-Paseo は一人で開発しており、使ってくれる人たちの支援で成り立っています。[GitHub Sponsors](https://github.com/sponsors/boudra) で支援するか、月 500 ドルで[スポンサー枠を購入](https://buy.stripe.com/8x24gBczR7LNaokcve2sM00)して、貴社のロゴをここと [paseo.sh のホームページ](https://paseo.sh/sponsor#spot)に掲載できます。
+Paseo は一人で開発しており、使ってくれる人たちの支援で成り立っています。[GitHub Sponsors](https://github.com/sponsors/boudra) で支援できます。企業として毎月[スポンサー](https://paseo.sh/sponsor#spot)になっていただくと、ロゴをここと paseo.sh のホームページに掲載します。
 
 <!-- Sponsor logos go here, in the same order as packages/website/src/data/sponsors.ts -->
 

README.ko.md

@@ -163,7 +163,7 @@ npm run typecheck
 
 ## 스폰서
 
-Paseo는 한 사람이 개발하며, 사용하는 분들의 후원으로 운영됩니다. [GitHub Sponsors](https://github.com/sponsors/boudra)로 후원하거나, 월 500달러에 [스폰서 자리를 구매](https://buy.stripe.com/8x24gBczR7LNaokcve2sM00)하여 회사 로고를 이곳과 [paseo.sh 홈페이지](https://paseo.sh/sponsor#spot)에 게재할 수 있습니다.
+Paseo는 한 사람이 개발하며, 사용하는 분들의 후원으로 운영됩니다. [GitHub Sponsors](https://github.com/sponsors/boudra)로 후원할 수 있습니다. 회사는 매월 [Paseo를 후원](https://paseo.sh/sponsor#spot)하고 로고를 이곳과 paseo.sh 홈페이지에 게재할 수 있습니다.
 
 <!-- Sponsor logos go here, in the same order as packages/website/src/data/sponsors.ts -->
 

README.md

@@ -195,7 +195,7 @@ npm run typecheck
 
 ## Sponsors
 
-Paseo is built by one person and funded by the people who use it. Support the work on [GitHub Sponsors](https://github.com/sponsors/boudra), or [sponsor a spot](https://buy.stripe.com/8x24gBczR7LNaokcve2sM00) for $500 a month to put your company's logo here and on the [paseo.sh homepage](https://paseo.sh/sponsor#spot).
+Paseo is built by one person and funded by the people who use it. Support the work on [GitHub Sponsors](https://github.com/sponsors/boudra). Companies can [sponsor Paseo](https://paseo.sh/sponsor#spot) monthly and have their logo shown here and on the paseo.sh homepage.
 
 <!-- Sponsor logos go here, in the same order as packages/website/src/data/sponsors.ts -->
 

README.zh-CN.md

@@ -153,7 +153,7 @@ npm run typecheck
 
 ## 赞助
 
-Paseo 由一个人开发，靠使用它的人来资助。你可以通过 [GitHub Sponsors](https://github.com/sponsors/boudra) 支持这项工作，或者以每月 500 美元[赞助一个展示位](https://buy.stripe.com/8x24gBczR7LNaokcve2sM00)，把贵公司的 logo 放在这里和 [paseo.sh 首页](https://paseo.sh/sponsor#spot)上。
+Paseo 由一个人开发，靠使用它的人来资助。你可以通过 [GitHub Sponsors](https://github.com/sponsors/boudra) 支持这项工作。公司也可以按月[赞助 Paseo](https://paseo.sh/sponsor#spot)，logo 会展示在这里和 paseo.sh 首页上。
 
 <!-- Sponsor logos go here, in the same order as packages/website/src/data/sponsors.ts -->
 

packages/website/src/components/sponsorship.tsx

@@ -77,7 +77,6 @@ export function FounderNote() {
 interface BackingOption {
   href: string;
   name: string;
-  detail: string;
   icon: React.ComponentType<{ className?: string }>;
   external: boolean;
   primary?: boolean;
@@ -87,7 +86,6 @@ const BACKING_OPTIONS: ReadonlyArray<BackingOption> = [
   {
     href: GITHUB_SPONSORS_URL,
     name: "GitHub Sponsors",
-    detail: "From $5 a month, or one time",
     icon: GitHubIcon,
     external: true,
     primary: true,
@@ -95,21 +93,18 @@ const BACKING_OPTIONS: ReadonlyArray<BackingOption> = [
   {
     href: OPEN_COLLECTIVE_URL,
     name: "Open Collective",
-    detail: "Monthly or one time, with an invoice",
     icon: OpenCollectiveIcon,
     external: true,
   },
   {
     href: BUY_ME_A_COFFEE_URL,
     name: "Buy Me a Coffee",
-    detail: "One time, no account needed",
     icon: BuyMeACoffeeIcon,
     external: true,
   },
   {
     href: "/sponsor#spot",
-    name: "Sponsor a spot",
+    name: "Sponsor as a company",
-    detail: "For companies",
     icon: SpotIcon,
     external: false,
   },
@@ -132,33 +127,28 @@ export function BackingOptions() {
           key={option.href}
           href={option.href}
           {...(option.external ? { target: "_blank", rel: "noopener noreferrer" } : {})}
-          className={`flex items-start gap-4 rounded-xl border p-4 transition-colors ${
+          className={`flex items-center gap-4 rounded-xl border p-4 transition-colors ${
             option.primary
               ? "border-white/25 bg-white/[0.06] hover:border-white/40 hover:bg-white/[0.08]"
               : "border-white/10 bg-white/[0.02] hover:border-white/20 hover:bg-white/[0.05]"
           }`}
         >
-          <option.icon className="mt-0.5 h-6 w-6 shrink-0 text-white/60" />
+          <option.icon className="h-6 w-6 shrink-0 text-white/60" />
-          <div className="space-y-1">
+          <p className="flex items-center gap-1.5 font-medium text-white">
-            <p className="flex items-center gap-1.5 font-medium text-white">
+            {option.name}
-              {option.name}
+            {option.external ? (
-              {option.external ? (
+              <ExternalLink className="h-3.5 w-3.5 text-white/40" />
-                <ExternalLink className="h-3.5 w-3.5 text-white/40" />
+            ) : (
-              ) : (
+              <ArrowRight className="h-3.5 w-3.5 text-white/40" />
-                <ArrowRight className="h-3.5 w-3.5 text-white/40" />
+            )}
-              )}
+          </p>
-            </p>
-            <p className="text-sm text-white/50">{option.detail}</p>
-          </div>
         </a>
       ))}
     </div>
   );
 }
 
-/** The four homepage spots: sponsor logos first, then a placeholder for each open spot. */
 function SponsorLogoRow() {
-  const placeholders = Array.from({ length: openSpotCount() }, (_, index) => index);
   return (
     <ul className="grid grid-cols-2 gap-4">
       {HOMEPAGE_SPONSORS.map((sponsor) => (
@@ -173,17 +163,6 @@ function SponsorLogoRow() {
           </a>
         </li>
       ))}
-      {placeholders.map((index) => (
-        <li key={index}>
-          <a
-            href="/sponsor#spot"
-            className="flex h-32 flex-col items-center justify-center gap-1 rounded-xl border border-dashed border-white/20 transition-colors hover:border-white/40 hover:bg-white/[0.03]"
-          >
-            <span className="text-sm font-medium text-white/70">Sponsor</span>
-            <span className="text-xs text-white/40">{HOMEPAGE_SPOT_PRICE} a month</span>
-          </a>
-        </li>
-      ))}
     </ul>
   );
 }
@@ -201,8 +180,8 @@ export function SponsorSpotSection() {
     <section id="spot" className="scroll-mt-8">
       <SectionHeading
         as="h2"
-        title="Sponsor a spot"
+        title="Sponsor as a company"
-        description="Support an independent project and put your company in front of a fast-growing audience of developers."
+        description="If your team relies on Paseo, a monthly sponsorship funds its development directly. As a thank you, your logo goes on the homepage and in the README."
       />
       <div className="space-y-8">
         <div className="flex items-end gap-2">
@@ -223,7 +202,7 @@ export function SponsorSpotSection() {
               href={SPONSOR_SPOT_CHECKOUT_URL}
               className="inline-flex items-center rounded-md bg-white px-5 py-2.5 text-sm font-medium text-black transition-colors hover:bg-white/90"
             >
-              Sponsor a spot
+              Become a sponsor
             </a>
           ) : null}
           <a
@@ -279,12 +258,23 @@ export function SponsorSection() {
   );
 }
 
-/** Homepage: the four sponsor spots, as they look once filled. */
+/** Homepage: the companies sponsoring Paseo. Renders nothing until there is one. */
 export function SponsorsSection() {
+  if (HOMEPAGE_SPONSORS.length === 0) return null;
   return (
     <section>
-      <SectionHeading as="h2" title="Sponsors" badge="New" />
+      <SectionHeading as="h2" title="Sponsors" />
-      <SponsorLogoRow />
+      <div className="space-y-4">
+        <SponsorLogoRow />
+        {openSpotCount() > 0 ? (
+          <a
+            href="/sponsor#spot"
+            className="inline-block text-sm text-white/50 underline transition-colors hover:text-white/80"
+          >
+            Become a sponsor
+          </a>
+        ) : null}
+      </div>
     </section>
   );
 }

packages/website/src/routes/sponsor.tsx

@@ -7,7 +7,7 @@ export const Route = createFileRoute("/sponsor")({
   head: () =>
     pageMeta(
       "Sponsor Paseo",
-      "Paseo is built by one person with no investors. Sponsor the work on GitHub Sponsors, Open Collective or Buy Me a Coffee, or put your company's logo on the homepage.",
+      "Paseo is built by one person with no investors. Sponsor the work on GitHub Sponsors, Open Collective or Buy Me a Coffee, or sponsor it as a company.",
       "/sponsor",
     ),
   component: Sponsor,