Update mockups and add mobile section to landing page

This commit is contained in:
Mohamed Boudra
2026-03-26 10:59:59 +07:00
parent 3fcc1ecedb
commit bf8ba4da8f
5 changed files with 33 additions and 2 deletions

View File

@@ -7,7 +7,11 @@
<p align="center">One interface for all your coding agents.</p>
<p align="center">
<img src="https://paseo.sh/paseo-mockup.png" alt="Paseo app screenshot" width="100%">
<img src="https://paseo.sh/hero-mockup.png" alt="Paseo app screenshot" width="100%">
</p>
<p align="center">
<img src="https://paseo.sh/mobile-mockup.png" alt="Paseo mobile app" width="100%">
</p>
---
@@ -59,8 +63,12 @@ npm run dev
# run individual surfaces
npm run dev:server
npm run dev:app
npm run dev:desktop
npm run dev:website
# build the daemon
npm run build:daemon
# repo-wide checks
npm run typecheck
```

Binary file not shown.

After

Width:  |  Height:  |  Size: 862 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 587 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.1 MiB

View File

@@ -42,7 +42,7 @@ export function LandingPage({ title, subtitle }: LandingPageProps) {
>
<div className="max-w-6xl lg:max-w-7xl xl:max-w-[90rem] mx-auto">
<img
src="/paseo-mockup.png"
src="/hero-mockup.png"
alt="Paseo app showing agent management interface"
className="w-full rounded-lg shadow-2xl"
/>
@@ -55,6 +55,7 @@ export function LandingPage({ title, subtitle }: LandingPageProps) {
<main className="p-6 md:p-20 md:pt-8 max-w-5xl mx-auto">
<div className="space-y-24">
<Features />
<MobileSection />
<CLISection />
<FAQ />
<SponsorCTA />
@@ -1002,6 +1003,28 @@ done`,
},
];
function MobileSection() {
return (
<section className="space-y-6">
<div className="space-y-2">
<h2 className="text-2xl font-medium">Mobile-first</h2>
<p className="text-sm text-white/60 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.
</p>
</div>
<div className="-mx-[calc(50vw-50%)] px-6 md:px-8">
<div className="max-w-5xl lg:max-w-6xl mx-auto">
<img
src="/mobile-mockup.png"
alt="Paseo mobile app screens"
className="w-full rounded-lg"
/>
</div>
</div>
</section>
);
}
function CLISection() {
const [activeIndex, setActiveIndex] = React.useState(0);
const active = cliExamples[activeIndex];