From 3dbbbb535eca4290c59391b3513c4924dd7d91da Mon Sep 17 00:00:00 2001 From: Mohamed Boudra Date: Tue, 22 Sep 2026 22:54:11 +0200 Subject: [PATCH] Sponsor page rework with paid homepage sponsor spots (#5219) * feat(website): rework sponsorship with homepage sponsor spots The founder note now states how the project is funded (sponsorship and Paseo Hub) instead of describing the product, and the same note and backing links render on the homepage and /sponsor from one module so the two cannot drift. Companies can sponsor one of four homepage logo spots at $500 a month through Stripe rather than GitHub Sponsors, because they need invoices and a vendor relationship. The spots render as placeholders until sold; approving a sponsor is an entry in src/data/sponsors.ts. The checkout URL is a placeholder until the Stripe Payment Link exists. * feat(website): point sponsor spot checkout at the Stripe payment link * docs(readme): add a sponsors section * docs(readme): add the sponsors section to the translated READMEs * docs(website): document the sponsor approval and Stripe cap workflow --- README.ja.md | 6 + README.ko.md | 6 + README.md | 6 + README.zh-CN.md | 6 + .../website/src/components/brand-icons.tsx | 22 ++ .../website/src/components/landing-page.tsx | 46 +-- .../website/src/components/sponsorship.tsx | 290 ++++++++++++++++++ packages/website/src/data/sponsors.ts | 42 +++ packages/website/src/routes/sponsor.tsx | 119 +------ 9 files changed, 386 insertions(+), 157 deletions(-) create mode 100644 packages/website/src/components/sponsorship.tsx create mode 100644 packages/website/src/data/sponsors.ts diff --git a/README.ja.md b/README.ja.md index 6629ccc397..335c87f6f4 100644 --- a/README.ja.md +++ b/README.ja.md @@ -151,6 +151,12 @@ npm run build:server npm run typecheck ``` +## スポンサー + +Paseo は一人で開発しており、使ってくれる人たちの支援で成り立っています。[GitHub Sponsors](https://github.com/sponsors/boudra) で支援するか、月 500 ドルで[スポンサー枠を購入](https://buy.stripe.com/8x24gBczR7LNaokcve2sM00)して、貴社のロゴをここと [paseo.sh のホームページ](https://paseo.sh/sponsor#spot)に掲載できます。 + + + ## 関連プロジェクト - [getpaseo/paseo-relay](https://github.com/getpaseo/paseo-relay) — Elixir 製の公式分散リレー diff --git a/README.ko.md b/README.ko.md index 66f74f45fa..2bb1a15fc6 100644 --- a/README.ko.md +++ b/README.ko.md @@ -161,6 +161,12 @@ npm run build:server npm run typecheck ``` +## 스폰서 + +Paseo는 한 사람이 개발하며, 사용하는 분들의 후원으로 운영됩니다. [GitHub Sponsors](https://github.com/sponsors/boudra)로 후원하거나, 월 500달러에 [스폰서 자리를 구매](https://buy.stripe.com/8x24gBczR7LNaokcve2sM00)하여 회사 로고를 이곳과 [paseo.sh 홈페이지](https://paseo.sh/sponsor#spot)에 게재할 수 있습니다. + + + ## 관련 프로젝트 - [getpaseo/paseo-relay](https://github.com/getpaseo/paseo-relay) — Elixir로 작성한 공식 분산형 릴레이 diff --git a/README.md b/README.md index a7a6c107e4..3a83f7e235 100644 --- a/README.md +++ b/README.md @@ -193,6 +193,12 @@ npm run build:server 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). + + + ## Related projects - [getpaseo/paseo-relay](https://github.com/getpaseo/paseo-relay) — official distributed relay, written in Elixir diff --git a/README.zh-CN.md b/README.zh-CN.md index c9c643b48f..6a5bde16f2 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -151,6 +151,12 @@ npm run build:server 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)上。 + + + ## 相关项目 - [getpaseo/paseo-relay](https://github.com/getpaseo/paseo-relay) — 官方分布式 relay，使用 Elixir 编写 diff --git a/packages/website/src/components/brand-icons.tsx b/packages/website/src/components/brand-icons.tsx index 0b48a9d5fe..c7692b43d6 100644 --- a/packages/website/src/components/brand-icons.tsx +++ b/packages/website/src/components/brand-icons.tsx @@ -44,3 +44,25 @@ export function SlackIcon(props: React.SVGProps) { ); } + +export function OpenCollectiveIcon(props: React.SVGProps) { + return ( + + + + + ); +} + +export function BuyMeACoffeeIcon(props: React.SVGProps) { + return ( + + + + ); +} diff --git a/packages/website/src/components/landing-page.tsx b/packages/website/src/components/landing-page.tsx index 6655c6ab37..248fa58675 100644 --- a/packages/website/src/components/landing-page.tsx +++ b/packages/website/src/components/landing-page.tsx @@ -78,6 +78,7 @@ import { DiscordIcon, GitHubIcon, SlackIcon } from "~/components/brand-icons"; import { ClaudeIcon, MobileChat, MobileDiff, MobileSidebar, PhoneFrame } from "~/components/mockup"; import { FAQItem } from "~/components/faq-item"; import { SiteFooter } from "~/components/site-footer"; +import { SponsorSection, SponsorsSection } from "~/components/sponsorship"; import { SiteHeader } from "~/components/site-header"; import "~/styles.css"; @@ -123,7 +124,8 @@ export function LandingPage({ title, subtitle }: LandingPageProps) { - + + @@ -1196,45 +1198,3 @@ function FAQ() { ); } - -function SponsorCTA() { - return ( - -
-

Paseo is an independent open source project for running coding agents.

-

Its guiding principle is optionality and freedom of choice.

-

- I wanted to use any provider without being locked into any ecosystem, run it on my own - infrastructure, access it from anywhere, and have it be fully automatable. -

-

I am hoping that you will enjoy Paseo as much as I do.

-

If you like Paseo, sponsorship is the best way to support continued development.

-

- Mo

-
- - - ); -} diff --git a/packages/website/src/components/sponsorship.tsx b/packages/website/src/components/sponsorship.tsx new file mode 100644 index 0000000000..958208e56f --- /dev/null +++ b/packages/website/src/components/sponsorship.tsx @@ -0,0 +1,290 @@ +import { ArrowRight, Check, ExternalLink } from "lucide-react"; +import { BuyMeACoffeeIcon, GitHubIcon, OpenCollectiveIcon } from "~/components/brand-icons"; +import { + BUY_ME_A_COFFEE_URL, + GITHUB_SPONSORS_URL, + HOMEPAGE_SPONSORS, + HOMEPAGE_SPOT_PRICE, + OPEN_COLLECTIVE_URL, + SPONSOR_CONTACT_EMAIL, + SPONSOR_SPOT_CHECKOUT_URL, + openSpotCount, +} from "~/data/sponsors"; + +function SectionHeading({ + as: Heading, + title, + description, + badge, +}: { + as: "h1" | "h2"; + title: string; + description?: string; + badge?: string; +}) { + return ( +
+
+ {title} + {badge ? ( + + {badge} + + ) : null} +
+ {description ? ( +

{description}

+ ) : null} +
+ ); +} + +const MAINTAINER_LINK = ( + + Mo + +); + +export function FounderNote() { + return ( +
+

+ I build Paseo on my own. There are no investors, no board and no company behind it, and I + have turned down funding offers to keep it that way. +

+

+ A tool that sits between you and your code, your keys and your machines has to stay neutral, + and that gets hard once someone else owns a return on it. Funding creates pressure to + monetize, and that pressure changes what gets built. +

+

+ Paseo is self-funded: the work is paid for by sponsorship and by{" "} + + Paseo Hub + + , an optional hosted service. Your support is what lets me work on Paseo full time. +

+

{MAINTAINER_LINK}, maintainer

+
+ ); +} + +interface BackingOption { + href: string; + name: string; + detail: string; + icon: React.ComponentType<{ className?: string }>; + external: boolean; + primary?: boolean; +} + +const BACKING_OPTIONS: ReadonlyArray = [ + { + href: GITHUB_SPONSORS_URL, + name: "GitHub Sponsors", + detail: "From $5 a month, or one time", + icon: GitHubIcon, + external: true, + primary: true, + }, + { + 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", + detail: "For companies", + icon: SpotIcon, + external: false, + }, +]; + +function SpotIcon({ className }: { className?: string }) { + return ( +