mirror of
https://github.com/getpaseo/paseo.git
synced 2026-10-24 10:12:44 +00:00
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
This commit is contained in:
Mohamed Boudra
@@ -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)に掲載できます。
|
||||
|
||||
<!-- Sponsor logos go here, in the same order as packages/website/src/data/sponsors.ts -->
|
||||
|
||||
## 関連プロジェクト
|
||||
|
||||
- [getpaseo/paseo-relay](https://github.com/getpaseo/paseo-relay) — Elixir 製の公式分散リレー
|
||||
|
||||
@@ -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)에 게재할 수 있습니다.
|
||||
|
||||
<!-- Sponsor logos go here, in the same order as packages/website/src/data/sponsors.ts -->
|
||||
|
||||
## 관련 프로젝트
|
||||
|
||||
- [getpaseo/paseo-relay](https://github.com/getpaseo/paseo-relay) — Elixir로 작성한 공식 분산형 릴레이
|
||||
|
||||
@@ -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).
|
||||
|
||||
<!-- Sponsor logos go here, in the same order as packages/website/src/data/sponsors.ts -->
|
||||
|
||||
## Related projects
|
||||
|
||||
- [getpaseo/paseo-relay](https://github.com/getpaseo/paseo-relay) — official distributed relay, written in Elixir
|
||||
|
||||
@@ -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)上。
|
||||
|
||||
<!-- Sponsor logos go here, in the same order as packages/website/src/data/sponsors.ts -->
|
||||
|
||||
## 相关项目
|
||||
|
||||
- [getpaseo/paseo-relay](https://github.com/getpaseo/paseo-relay) — 官方分布式 relay，使用 Elixir 编写
|
||||
|
||||
@@ -44,3 +44,25 @@ export function SlackIcon(props: React.SVGProps<SVGSVGElement>) {
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function OpenCollectiveIcon(props: React.SVGProps<SVGSVGElement>) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 39.98 40.05"
|
||||
fill="currentColor"
|
||||
{...props}
|
||||
>
|
||||
<path d="M32.76 19.97c0 2.53-.73 4.94-2 6.94l5.14 5.16c2.5-3.36 4.08-7.57 4.08-12.1 0-4.5-1.57-8.7-4.08-12.08l-5.13 5.16c1.26 2 2 4.3 2 6.93z" />
|
||||
<path d="M20 32.8c-7.02 0-12.78-5.78-12.78-12.83 0-7.04 5.76-12.82 12.77-12.82 2.6 0 4.9.73 6.9 2.1l5.13-5.15C28.68 1.58 24.5 0 20 0 9 0 0 8.94 0 20.08s9 19.97 20 19.97c4.6 0 8.8-1.57 12.14-4.1L27 30.8c-1.98 1.26-4.4 2-7 2z" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function BuyMeACoffeeIcon(props: React.SVGProps<SVGSVGElement>) {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" {...props}>
|
||||
<path d="M20.216 6.415l-.132-.666c-.119-.598-.388-1.163-1.001-1.379-.197-.069-.42-.098-.57-.241-.152-.143-.196-.366-.231-.572-.065-.378-.125-.756-.192-1.133-.057-.325-.102-.69-.25-.987-.195-.4-.597-.634-.996-.788a5.723 5.723 0 00-.626-.194c-1-.263-2.05-.36-3.077-.416a25.834 25.834 0 00-3.7.062c-.915.083-1.88.184-2.75.5-.318.116-.646.256-.888.501-.297.302-.393.77-.177 1.146.154.267.415.456.692.58.36.162.737.284 1.123.366 1.075.238 2.189.331 3.287.37 1.218.05 2.437.01 3.65-.118.299-.033.598-.073.896-.119.352-.054.578-.513.474-.834-.124-.383-.457-.531-.834-.473-.466.074-.96.108-1.382.146-1.177.08-2.358.082-3.536.006a22.228 22.228 0 01-1.157-.107c-.086-.01-.18-.025-.258-.036-.243-.036-.484-.08-.724-.13-.111-.027-.111-.185 0-.212h.005c.277-.06.557-.108.838-.147h.002c.131-.009.263-.032.394-.048a25.076 25.076 0 013.426-.12c.674.019 1.347.067 2.017.144l.228.031c.267.04.533.088.798.145.392.085.895.113 1.07.542.055.137.08.288.111.431l.319 1.484a.237.237 0 01-.199.284h-.003c-.037.006-.075.01-.112.015a36.704 36.704 0 01-4.743.295 37.059 37.059 0 01-4.699-.304c-.14-.017-.293-.042-.417-.06-.326-.048-.649-.108-.973-.161-.393-.065-.768-.032-1.123.161-.29.16-.527.404-.675.701-.154.316-.199.66-.267 1-.069.34-.176.707-.135 1.056.087.753.613 1.365 1.37 1.502a39.69 39.69 0 0011.343.376.483.483 0 01.535.53l-.071.697-1.018 9.907c-.041.41-.047.832-.125 1.237-.122.637-.553 1.028-1.182 1.171-.577.131-1.165.2-1.756.205-.656.004-1.31-.025-1.966-.022-.699.004-1.556-.06-2.095-.58-.475-.458-.54-1.174-.605-1.793l-.731-7.013-.322-3.094c-.037-.351-.286-.695-.678-.678-.336.015-.718.3-.678.679l.228 2.185.949 9.112c.147 1.344 1.174 2.068 2.446 2.272.742.12 1.503.144 2.257.156.966.016 1.942.053 2.892-.122 1.408-.258 2.465-1.198 2.616-2.657.34-3.332.683-6.663 1.024-9.995l.215-2.087a.484.484 0 01.39-.426c.402-.078.787-.212 1.074-.518.455-.488.546-1.124.385-1.766zm-1.478.772c-.145.137-.363.201-.578.233-2.416.359-4.866.54-7.308.46-1.748-.06-3.477-.254-5.207-.498-.17-.024-.353-.055-.47-.18-.22-.236-.111-.71-.054-.995.052-.26.152-.609.463-.646.484-.057 1.046.148 1.526.22.577.088 1.156.159 1.737.212 2.48.226 5.002.19 7.472-.14.45-.06.899-.13 1.345-.21.399-.072.84-.206 1.08.206.166.281.188.657.162.974a.544.544 0 01-.169.364zm-6.159 3.9c-.862.37-1.84.788-3.109.788a5.884 5.884 0 01-1.569-.217l.877 9.004c.065.78.717 1.38 1.5 1.38 0 0 1.243.065 1.658.065.447 0 1.786-.065 1.786-.065.783 0 1.434-.6 1.499-1.38l.94-9.95a3.996 3.996 0 00-1.322-.238c-.826 0-1.491.284-2.26.613z" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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) {
|
||||
<AutomationSection />
|
||||
<ExtensibleSection />
|
||||
<FAQ />
|
||||
<SponsorCTA />
|
||||
<SponsorSection />
|
||||
<SponsorsSection />
|
||||
</div>
|
||||
</main>
|
||||
<SiteFooter />
|
||||
@@ -1196,45 +1198,3 @@ function FAQ() {
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
||||
function SponsorCTA() {
|
||||
return (
|
||||
<motion.div
|
||||
initial={FADE_IN_UP}
|
||||
whileInView={FADE_IN}
|
||||
viewport={VIEWPORT_60}
|
||||
transition={EASE_OUT_05}
|
||||
className="rounded-xl bg-white/5 border border-white/10 p-8 md:p-10 text-left space-y-4 max-w-xl mx-auto"
|
||||
>
|
||||
<div className="text-sm text-muted-foreground leading-relaxed space-y-3">
|
||||
<p>Paseo is an independent open source project for running coding agents.</p>
|
||||
<p>Its guiding principle is optionality and freedom of choice.</p>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>I am hoping that you will enjoy Paseo as much as I do.</p>
|
||||
<p>If you like Paseo, sponsorship is the best way to support continued development.</p>
|
||||
<p>- Mo</p>
|
||||
</div>
|
||||
<div className="pt-2">
|
||||
<a
|
||||
href="/sponsor"
|
||||
className="inline-flex items-center gap-2 rounded-lg bg-white/10 border border-white/20 px-5 py-2.5 text-sm font-medium text-white hover:bg-white/15 transition-colors"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
className="text-pink-400"
|
||||
>
|
||||
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
|
||||
</svg>
|
||||
Sponsor Paseo
|
||||
</a>
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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 (
|
||||
<div className="mb-12 space-y-2">
|
||||
<div className="flex items-center gap-3">
|
||||
<Heading className="text-3xl font-medium tracking-tight">{title}</Heading>
|
||||
{badge ? (
|
||||
<span className="rounded-full bg-emerald-400/10 px-2 py-1 text-xs text-emerald-300">
|
||||
{badge}
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
{description ? (
|
||||
<p className="max-w-lg text-base text-pretty text-muted-foreground">{description}</p>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const MAINTAINER_LINK = (
|
||||
<a
|
||||
href="https://github.com/boudra"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="underline hover:text-white/80"
|
||||
>
|
||||
Mo
|
||||
</a>
|
||||
);
|
||||
|
||||
export function FounderNote() {
|
||||
return (
|
||||
<div className="max-w-2xl space-y-5 leading-relaxed text-white/70">
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
Paseo is self-funded: the work is paid for by sponsorship and by{" "}
|
||||
<a href="/hub" className="underline hover:text-white/90">
|
||||
Paseo Hub
|
||||
</a>
|
||||
, an optional hosted service. Your support is what lets me work on Paseo full time.
|
||||
</p>
|
||||
<p className="text-white/50">{MAINTAINER_LINK}, maintainer</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface BackingOption {
|
||||
href: string;
|
||||
name: string;
|
||||
detail: string;
|
||||
icon: React.ComponentType<{ className?: string }>;
|
||||
external: boolean;
|
||||
primary?: boolean;
|
||||
}
|
||||
|
||||
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,
|
||||
},
|
||||
{
|
||||
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 (
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className={`inline-block rounded-md border border-dashed border-current ${className ?? ""}`}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export function BackingOptions() {
|
||||
return (
|
||||
<div className="grid gap-3 md:grid-cols-2">
|
||||
{BACKING_OPTIONS.map((option) => (
|
||||
<a
|
||||
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 ${
|
||||
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" />
|
||||
<div className="space-y-1">
|
||||
<p className="flex items-center gap-1.5 font-medium text-white">
|
||||
{option.name}
|
||||
{option.external ? (
|
||||
<ExternalLink className="h-3.5 w-3.5 text-white/40" />
|
||||
) : (
|
||||
<ArrowRight className="h-3.5 w-3.5 text-white/40" />
|
||||
)}
|
||||
</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) => (
|
||||
<li key={sponsor.href}>
|
||||
<a
|
||||
href={sponsor.href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer sponsored"
|
||||
className="flex h-32 items-center justify-center rounded-xl border border-white/10 bg-white/[0.02] px-6 transition-colors hover:border-white/20 hover:bg-white/[0.05]"
|
||||
>
|
||||
<img src={sponsor.logo} alt={sponsor.name} className="max-h-10 max-w-full opacity-80" />
|
||||
</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>
|
||||
);
|
||||
}
|
||||
|
||||
const SPOT_FEATURES: ReadonlyArray<string> = [
|
||||
"Your logo on the homepage of paseo.sh, around 70,000 visitors a month",
|
||||
"Your logo in the GitHub README, around 30,000 visitors a month",
|
||||
"An announcement in the Discord, around 2,000 members",
|
||||
"A mention in the changelog",
|
||||
];
|
||||
|
||||
export function SponsorSpotSection() {
|
||||
const open = openSpotCount();
|
||||
return (
|
||||
<section id="spot" className="scroll-mt-8">
|
||||
<SectionHeading
|
||||
as="h2"
|
||||
title="Sponsor a spot"
|
||||
description="Support an independent project and put your company in front of a fast-growing audience of developers."
|
||||
/>
|
||||
<div className="space-y-8">
|
||||
<div className="flex items-end gap-2">
|
||||
<span className="text-4xl font-medium tracking-tight">{HOMEPAGE_SPOT_PRICE}</span>
|
||||
<span className="mb-1 text-sm text-white/45">a month</span>
|
||||
</div>
|
||||
<ul className="grid max-w-2xl gap-3 text-white/70">
|
||||
{SPOT_FEATURES.map((feature) => (
|
||||
<li key={feature} className="flex items-start gap-2.5">
|
||||
<Check aria-hidden="true" className="mt-1 size-4 shrink-0 text-emerald-300" />
|
||||
<span>{feature}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="flex flex-col items-start gap-4 sm:flex-row sm:items-center">
|
||||
{open > 0 ? (
|
||||
<a
|
||||
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
|
||||
</a>
|
||||
) : null}
|
||||
<a
|
||||
href={`mailto:${SPONSOR_CONTACT_EMAIL}`}
|
||||
className="text-sm text-white/60 underline transition-colors hover:text-white/90"
|
||||
>
|
||||
{open > 0 ? "Or email me first" : "Email me to hear when a spot opens"}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
/** The /sponsor page's first section: the note and the ways to back the work. */
|
||||
export function SponsorPaseoSection() {
|
||||
return (
|
||||
<section>
|
||||
<SectionHeading as="h1" title="Sponsor Paseo" />
|
||||
<div className="space-y-10">
|
||||
<FounderNote />
|
||||
<BackingOptions />
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
/** Homepage: a short version of the note with the same links as /sponsor. */
|
||||
export function SponsorSection() {
|
||||
return (
|
||||
<section>
|
||||
<SectionHeading as="h2" title="Sponsor Paseo" />
|
||||
<div className="space-y-10">
|
||||
<div className="max-w-2xl space-y-5 leading-relaxed text-white/70">
|
||||
<p>
|
||||
I build Paseo on my own, with no investors 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 funding creates pressure to
|
||||
monetize.
|
||||
</p>
|
||||
<p>
|
||||
Paseo is self-funded through sponsorship and{" "}
|
||||
<a href="/hub" className="underline hover:text-white/90">
|
||||
Paseo Hub
|
||||
</a>
|
||||
, and your support is what lets me work on it full time.
|
||||
</p>
|
||||
<p className="text-white/50">{MAINTAINER_LINK}, maintainer</p>
|
||||
</div>
|
||||
<BackingOptions />
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
/** Homepage: the four sponsor spots, as they look once filled. */
|
||||
export function SponsorsSection() {
|
||||
return (
|
||||
<section>
|
||||
<SectionHeading as="h2" title="Sponsors" badge="New" />
|
||||
<SponsorLogoRow />
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
/**
|
||||
* Homepage sponsor spots. This file is the inventory: the site shows one open
|
||||
* placeholder for every spot not listed in `HOMEPAGE_SPONSORS`.
|
||||
*
|
||||
* Approving a sponsor means three edits, or the site promises something it does
|
||||
* not deliver:
|
||||
*
|
||||
* 1. Add the entry below and drop its logo in `public/sponsors/`.
|
||||
* 2. Add the logo under the `## Sponsors` marker in `README.md`,
|
||||
* `README.zh-CN.md`, `README.ja.md` and `README.ko.md`, in this same order.
|
||||
* 3. Remove all of it when the subscription ends.
|
||||
*
|
||||
* The Stripe payment link caps itself at `HOMEPAGE_SPOT_COUNT` completed
|
||||
* checkouts, and a checkout you decline and refund still counts against that
|
||||
* cap. When you refund one, raise the link's completed-session limit by one, or
|
||||
* the page will offer a spot the link refuses to sell.
|
||||
*/
|
||||
export interface HomepageSponsor {
|
||||
name: string;
|
||||
href: string;
|
||||
/** Path under `public/`, e.g. `/sponsors/acme.svg`. Keep logos monochrome white. */
|
||||
logo: string;
|
||||
}
|
||||
|
||||
export const HOMEPAGE_SPONSORS: ReadonlyArray<HomepageSponsor> = [];
|
||||
|
||||
export const HOMEPAGE_SPOT_COUNT = 4;
|
||||
export const HOMEPAGE_SPOT_PRICE = "$500";
|
||||
|
||||
/** Stripe Payment Link for the monthly spot subscription. */
|
||||
export const SPONSOR_SPOT_CHECKOUT_URL = "https://buy.stripe.com/8x24gBczR7LNaokcve2sM00";
|
||||
|
||||
export const SPONSOR_CONTACT_EMAIL = "hello@paseo.sh";
|
||||
|
||||
export const GITHUB_SPONSORS_URL = "https://github.com/sponsors/boudra";
|
||||
export const OPEN_COLLECTIVE_URL =
|
||||
"https://opencollective.com/paseo-ai/donate?interval=month&amount=10&contributeAs=me";
|
||||
export const BUY_ME_A_COFFEE_URL = "https://buymeacoffee.com/paseo";
|
||||
|
||||
export function openSpotCount(): number {
|
||||
return Math.max(0, HOMEPAGE_SPOT_COUNT - HOMEPAGE_SPONSORS.length);
|
||||
}
|
||||
@@ -1,12 +1,13 @@
|
||||
import { createFileRoute } from "@tanstack/react-router";
|
||||
import { SiteShell } from "~/components/site-shell";
|
||||
import { SponsorPaseoSection, SponsorSpotSection } from "~/components/sponsorship";
|
||||
import { pageMeta } from "~/meta";
|
||||
|
||||
export const Route = createFileRoute("/sponsor")({
|
||||
head: () =>
|
||||
pageMeta(
|
||||
"Sponsor Paseo",
|
||||
"Support the independent open-source project behind Paseo. Built by Mo, funded by the community.",
|
||||
"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.",
|
||||
"/sponsor",
|
||||
),
|
||||
component: Sponsor,
|
||||
@@ -15,120 +16,10 @@ export const Route = createFileRoute("/sponsor")({
|
||||
function Sponsor() {
|
||||
return (
|
||||
<SiteShell width="default">
|
||||
<h1 className="text-3xl font-medium tracking-tight mb-8">Sponsor</h1>
|
||||
|
||||
{/* Founder note */}
|
||||
<div className="space-y-6 text-white/70 leading-relaxed max-w-2xl">
|
||||
<p className="font-medium">
|
||||
Hey, I'm{" "}
|
||||
<a
|
||||
href="https://github.com/boudra"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="underline hover:text-white/80"
|
||||
>
|
||||
Mo
|
||||
</a>
|
||||
.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Paseo started as a personal project: I wanted to run coding agents from anywhere without
|
||||
giving up control of my code, my keys, or my workflow.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
I work on Paseo full-time. It's an independent, self-funded open-source project. I
|
||||
don't have investors, a board, or a big team. I'm just shipping software the
|
||||
best I know how and hope it's useful to other people.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Sponsorship is what makes that sustainable. It lets me stay focused on the product instead
|
||||
of chasing monetization, and it sends a clear signal that independent, open-source tools
|
||||
have a place in developer workflows.
|
||||
</p>
|
||||
|
||||
<p>Thank you.</p>
|
||||
<div className="space-y-24">
|
||||
<SponsorPaseoSection />
|
||||
<SponsorSpotSection />
|
||||
</div>
|
||||
|
||||
{/* Sponsor links */}
|
||||
<section className="mt-12 space-y-4">
|
||||
<h2 className="text-xl font-medium">Support Paseo</h2>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4">
|
||||
<a
|
||||
href="https://github.com/sponsors/boudra"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center gap-4 rounded-xl border border-white/10 bg-white/[0.03] p-5 hover:border-white/20 hover:bg-white/[0.05] transition-colors"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="32"
|
||||
height="32"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
className="text-white/60"
|
||||
>
|
||||
<path d="M12 0C5.37 0 0 5.484 0 12.252c0 5.418 3.438 10.013 8.205 11.637.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.738-4.042-1.61-4.042-1.61-.546-1.403-1.333-1.776-1.333-1.776-1.089-.756.084-.741.084-.741 1.205.087 1.838 1.262 1.838 1.262 1.07 1.87 2.809 1.33 3.495 1.017.108-.79.417-1.33.76-1.636-2.665-.31-5.467-1.35-5.467-6.005 0-1.327.465-2.413 1.235-3.262-.124-.31-.535-1.556.117-3.243 0 0 1.008-.33 3.3 1.248a11.2 11.2 0 0 1 3.003-.404c1.02.005 2.045.138 3.003.404 2.29-1.578 3.297-1.248 3.297-1.248.653 1.687.242 2.933.118 3.243.77.85 1.233 1.935 1.233 3.262 0 4.667-2.807 5.692-5.48 5.995.43.38.823 1.133.823 2.285 0 1.65-.015 2.98-.015 3.386 0 .315.218.694.825.576C20.565 22.26 24 17.667 24 12.252 24 5.484 18.627 0 12 0z" />
|
||||
</svg>
|
||||
<div>
|
||||
<p className="font-medium text-white">GitHub Sponsors</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="https://opencollective.com/paseo-ai/donate?interval=month&amount=10&contributeAs=me"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center gap-4 rounded-xl border border-white/10 bg-white/[0.03] p-5 hover:border-white/20 hover:bg-white/[0.05] transition-colors"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="32"
|
||||
height="32"
|
||||
viewBox="0 0 39.98 40.05"
|
||||
className="text-white/60"
|
||||
>
|
||||
<path
|
||||
d="M32.76 19.97c0 2.53-.73 4.94-2 6.94l5.14 5.16c2.5-3.36 4.08-7.57 4.08-12.1 0-4.5-1.57-8.7-4.08-12.08l-5.13 5.16c1.26 2 2 4.3 2 6.93z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M20 32.8c-7.02 0-12.78-5.78-12.78-12.83 0-7.04 5.76-12.82 12.77-12.82 2.6 0 4.9.73 6.9 2.1l5.13-5.15C28.68 1.58 24.5 0 20 0 9 0 0 8.94 0 20.08s9 19.97 20 19.97c4.6 0 8.8-1.57 12.14-4.1L27 30.8c-1.98 1.26-4.4 2-7 2z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
<div>
|
||||
<p className="font-medium text-white">Open Collective</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="https://buymeacoffee.com/paseo"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center gap-4 rounded-xl border border-white/10 bg-white/[0.03] p-5 hover:border-white/20 hover:bg-white/[0.05] transition-colors"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="32"
|
||||
height="32"
|
||||
viewBox="0 0 24 24"
|
||||
className="text-white/60"
|
||||
>
|
||||
<path
|
||||
d="M20.216 6.415l-.132-.666c-.119-.598-.388-1.163-1.001-1.379-.197-.069-.42-.098-.57-.241-.152-.143-.196-.366-.231-.572-.065-.378-.125-.756-.192-1.133-.057-.325-.102-.69-.25-.987-.195-.4-.597-.634-.996-.788a5.723 5.723 0 00-.626-.194c-1-.263-2.05-.36-3.077-.416a25.834 25.834 0 00-3.7.062c-.915.083-1.88.184-2.75.5-.318.116-.646.256-.888.501-.297.302-.393.77-.177 1.146.154.267.415.456.692.58.36.162.737.284 1.123.366 1.075.238 2.189.331 3.287.37 1.218.05 2.437.01 3.65-.118.299-.033.598-.073.896-.119.352-.054.578-.513.474-.834-.124-.383-.457-.531-.834-.473-.466.074-.96.108-1.382.146-1.177.08-2.358.082-3.536.006a22.228 22.228 0 01-1.157-.107c-.086-.01-.18-.025-.258-.036-.243-.036-.484-.08-.724-.13-.111-.027-.111-.185 0-.212h.005c.277-.06.557-.108.838-.147h.002c.131-.009.263-.032.394-.048a25.076 25.076 0 013.426-.12c.674.019 1.347.067 2.017.144l.228.031c.267.04.533.088.798.145.392.085.895.113 1.07.542.055.137.08.288.111.431l.319 1.484a.237.237 0 01-.199.284h-.003c-.037.006-.075.01-.112.015a36.704 36.704 0 01-4.743.295 37.059 37.059 0 01-4.699-.304c-.14-.017-.293-.042-.417-.06-.326-.048-.649-.108-.973-.161-.393-.065-.768-.032-1.123.161-.29.16-.527.404-.675.701-.154.316-.199.66-.267 1-.069.34-.176.707-.135 1.056.087.753.613 1.365 1.37 1.502a39.69 39.69 0 0011.343.376.483.483 0 01.535.53l-.071.697-1.018 9.907c-.041.41-.047.832-.125 1.237-.122.637-.553 1.028-1.182 1.171-.577.131-1.165.2-1.756.205-.656.004-1.31-.025-1.966-.022-.699.004-1.556-.06-2.095-.58-.475-.458-.54-1.174-.605-1.793l-.731-7.013-.322-3.094c-.037-.351-.286-.695-.678-.678-.336.015-.718.3-.678.679l.228 2.185.949 9.112c.147 1.344 1.174 2.068 2.446 2.272.742.12 1.503.144 2.257.156.966.016 1.942.053 2.892-.122 1.408-.258 2.465-1.198 2.616-2.657.34-3.332.683-6.663 1.024-9.995l.215-2.087a.484.484 0 01.39-.426c.402-.078.787-.212 1.074-.518.455-.488.546-1.124.385-1.766zm-1.478.772c-.145.137-.363.201-.578.233-2.416.359-4.866.54-7.308.46-1.748-.06-3.477-.254-5.207-.498-.17-.024-.353-.055-.47-.18-.22-.236-.111-.71-.054-.995.052-.26.152-.609.463-.646.484-.057 1.046.148 1.526.22.577.088 1.156.159 1.737.212 2.48.226 5.002.19 7.472-.14.45-.06.899-.13 1.345-.21.399-.072.84-.206 1.08.206.166.281.188.657.162.974a.544.544 0 01-.169.364zm-6.159 3.9c-.862.37-1.84.788-3.109.788a5.884 5.884 0 01-1.569-.217l.877 9.004c.065.78.717 1.38 1.5 1.38 0 0 1.243.065 1.658.065.447 0 1.786-.065 1.786-.065.783 0 1.434-.6 1.499-1.38l.94-9.95a3.996 3.996 0 00-1.322-.238c-.826 0-1.491.284-2.26.613z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
<div>
|
||||
<p className="font-medium text-white">Buy Me a Coffee</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
</SiteShell>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user