Update landing page: mobile section, sponsor copy, muted color consistency

This commit is contained in:
Mohamed Boudra
2026-03-26 11:46:16 +07:00
parent 1ee7cace36
commit eada5eec53
2 changed files with 26 additions and 13 deletions
@@ -406,7 +406,7 @@ function Features() {
<span className="text-white/40">{feature.icon}</span> <span className="text-white/40">{feature.icon}</span>
<p className="font-medium text-lg">{feature.title}</p> <p className="font-medium text-lg">{feature.title}</p>
</div> </div>
<p className="text-sm text-white/60 leading-relaxed">{feature.description}</p> <p className="text-sm text-muted-foreground leading-relaxed">{feature.description}</p>
</motion.div> </motion.div>
))} ))}
</div> </div>
@@ -549,7 +549,7 @@ function ServerInstallButton() {
> >
<div className="space-y-2"> <div className="space-y-2">
<p className="text-base font-medium text-white">Run agents on a remote machine</p> <p className="text-base font-medium text-white">Run agents on a remote machine</p>
<p className="text-sm text-white/60"> <p className="text-sm text-muted-foreground">
For headless machines you want to connect to from the Paseo apps. The desktop app For headless machines you want to connect to from the Paseo apps. The desktop app
already includes a built-in daemon. already includes a built-in daemon.
</p> </p>
@@ -1008,7 +1008,7 @@ function MobileSection() {
<section className="space-y-6"> <section className="space-y-6">
<div className="space-y-2"> <div className="space-y-2">
<h2 className="text-2xl font-medium">Mobile-first</h2> <h2 className="text-2xl font-medium">Mobile-first</h2>
<p className="text-sm text-white/60 max-w-lg"> <p className="text-sm text-muted-foreground max-w-lg">
The mobile app has full feature parity with desktop. Launch agents, review diffs, talk through problems with voice, all from your phone. The mobile app has full feature parity with desktop. Launch agents, review diffs, talk through problems with voice, all from your phone.
</p> </p>
</div> </div>
@@ -1039,7 +1039,7 @@ function CLISection() {
> >
<div className="space-y-2"> <div className="space-y-2">
<h2 className="text-2xl font-medium">CLI</h2> <h2 className="text-2xl font-medium">CLI</h2>
<p className="text-sm text-white/60 max-w-lg"> <p className="text-sm text-muted-foreground max-w-lg">
Everything you can do in the app, you can do from the terminal. Everything you can do in the app, you can do from the terminal.
</p> </p>
</div> </div>
@@ -1061,7 +1061,7 @@ function CLISection() {
</div> </div>
<div className="space-y-3"> <div className="space-y-3">
<p className="text-sm text-white/50">{active.description}</p> <p className="text-sm text-muted-foreground">{active.description}</p>
<CLICodeBlock>{active.code}</CLICodeBlock> <CLICodeBlock>{active.code}</CLICodeBlock>
</div> </div>
@@ -1118,7 +1118,7 @@ function FAQ() {
</FAQItem> </FAQItem>
<FAQItem question="Do I need the desktop app?"> <FAQItem question="Do I need the desktop app?">
No. You can run the daemon headless with{" "} No. You can run the daemon headless with{" "}
<code className="font-mono text-white/50">npm install -g @getpaseo/cli && paseo</code> and <code className="font-mono text-muted-foreground">npm install -g @getpaseo/cli && paseo</code> and
use the CLI, web app, or mobile app to connect. The desktop app just bundles the daemon use the CLI, web app, or mobile app to connect. The desktop app just bundles the daemon
with a UI. with a UI.
</FAQItem> </FAQItem>
@@ -1175,13 +1175,26 @@ function SponsorCTA() {
whileInView={{ opacity: 1, y: 0 }} whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, margin: "-60px" }} viewport={{ once: true, margin: "-60px" }}
transition={{ duration: 0.5, ease: "easeOut" }} 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" 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"
> >
<p className="text-lg font-medium">Paseo is an independent project</p> <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"> <div className="text-sm text-muted-foreground leading-relaxed space-y-3">
I built Paseo because the existing tools weren't good enough for me. There's no VC or big <p>
team behind this. If it saves you time, sponsoring keeps development going. I believe that open source and freedom of choice always win for developer tools.
</p> </p>
<p>
Paseo has no VC funding and no big team behind it. I built it because the existing tools
weren't good enough for me. No tracking, no telemetry, no forced accounts, no vendor lock-in.
</p>
<p>
The monetization story is still taking shape. The obvious path is optional hosted
infrastructure like cloud sandboxes for teams. But Paseo itself will always be FOSS.
</p>
<p>
If you like Paseo, sponsoring keeps development going.
</p>
<p>- Mo</p>
</div>
<div className="pt-2"> <div className="pt-2">
<a <a
href="https://github.com/sponsors/boudra" href="https://github.com/sponsors/boudra"
@@ -1214,7 +1227,7 @@ function FAQItem({ question, children }: { question: string; children: React.Rea
<span className="font-mono text-white/40 hidden group-open:inline">-</span> <span className="font-mono text-white/40 hidden group-open:inline">-</span>
{question} {question}
</summary> </summary>
<div className="text-sm text-white/60 space-y-2 mt-2 ml-4">{children}</div> <div className="text-sm text-muted-foreground space-y-2 mt-2 ml-4">{children}</div>
</details> </details>
); );
} }
+1 -1
View File
@@ -79,7 +79,7 @@
--color-background: #0a0a0a; --color-background: #0a0a0a;
--color-foreground: #fafafa; --color-foreground: #fafafa;
--color-muted: #262626; --color-muted: #262626;
--color-muted-foreground: #a1a1aa; --color-muted-foreground: #b6b6b6;
--color-card: #171717; --color-card: #171717;
--color-border: #27272a; --color-border: #27272a;
--color-primary: #3b82f6; --color-primary: #3b82f6;