feat(website): update hero copy, add sponsor CTA section

Update hero title to "All your coding agents, from anywhere" with
responsive line break. Add sponsor CTA section with personal messaging.
Update meta title for SEO. Fix GitHub sponsors link.
This commit is contained in:
Mohamed Boudra
2026-03-15 12:07:14 +07:00
parent eadca4a96b
commit 57db31c662
2 changed files with 36 additions and 5 deletions
@@ -67,7 +67,7 @@ function useDetectedPlatform(): Platform {
} }
interface LandingPageProps { interface LandingPageProps {
title: string title: React.ReactNode
subtitle: string subtitle: string
} }
@@ -109,6 +109,7 @@ export function LandingPage({ title, subtitle }: LandingPageProps) {
<Features /> <Features />
<CLISection /> <CLISection />
<FAQ /> <FAQ />
<SponsorCTA />
</div> </div>
</main> </main>
<footer className="p-6 md:p-20 md:pt-0 max-w-5xl mx-auto"> <footer className="p-6 md:p-20 md:pt-0 max-w-5xl mx-auto">
@@ -214,7 +215,7 @@ function Nav() {
) )
} }
function Hero({ title, subtitle }: { title: string; subtitle: string }) { function Hero({ title, subtitle }: { title: React.ReactNode; subtitle: string }) {
return ( return (
<div className="space-y-6"> <div className="space-y-6">
<motion.h1 <motion.h1
@@ -1088,6 +1089,36 @@ function FAQ() {
) )
} }
function SponsorCTA() {
return (
<motion.div
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, margin: '-60px' }}
transition={{ duration: 0.5, ease: 'easeOut' }}
className="rounded-xl bg-white/5 border border-white/10 p-8 md:p-10 text-center space-y-4"
>
<p className="text-lg font-medium">Paseo is an independent project</p>
<p className="text-sm text-white/50 max-w-md mx-auto leading-relaxed">
I built Paseo because the existing tools weren't good enough for me. There's no VC or big team behind this. If it saves you time, sponsoring keeps development going.
</p>
<div className="pt-2">
<a
href="https://github.com/sponsors/boudra"
target="_blank"
rel="noopener noreferrer"
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 on GitHub
</a>
</div>
</motion.div>
)
}
function FAQItem({ question, children }: { question: string; children: React.ReactNode }) { function FAQItem({ question, children }: { question: string; children: React.ReactNode }) {
return ( return (
<details className="group"> <details className="group">
+3 -3
View File
@@ -4,7 +4,7 @@ import { LandingPage } from '~/components/landing-page'
export const Route = createFileRoute('/')({ export const Route = createFileRoute('/')({
head: () => ({ head: () => ({
meta: [ meta: [
{ title: 'Paseo – Manage coding agents from your phone and desktop' }, { title: 'Paseo – Run Claude Code, Codex, and OpenCode from everywhere' },
{ {
name: 'description', name: 'description',
content: content:
@@ -18,8 +18,8 @@ export const Route = createFileRoute('/')({
function Home() { function Home() {
return ( return (
<LandingPage <LandingPage
title="One interface for all your coding agents" title={<>All your coding agents,<br className="hidden md:block" /> from anywhere</>}
subtitle="Run agents in parallel on your own machines. Ship from your phone or your desk." subtitle="Run any coding agent from your phone, desktop, or terminal. Self-hosted, multi-provider, open source."
/> />
) )
} }