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">One interface for all your coding agents.</p>
<p align="center"> <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> </p>
--- ---
@@ -59,8 +63,12 @@ npm run dev
# run individual surfaces # run individual surfaces
npm run dev:server npm run dev:server
npm run dev:app npm run dev:app
npm run dev:desktop
npm run dev:website npm run dev:website
# build the daemon
npm run build:daemon
# repo-wide checks # repo-wide checks
npm run typecheck 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"> <div className="max-w-6xl lg:max-w-7xl xl:max-w-[90rem] mx-auto">
<img <img
src="/paseo-mockup.png" src="/hero-mockup.png"
alt="Paseo app showing agent management interface" alt="Paseo app showing agent management interface"
className="w-full rounded-lg shadow-2xl" 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"> <main className="p-6 md:p-20 md:pt-8 max-w-5xl mx-auto">
<div className="space-y-24"> <div className="space-y-24">
<Features /> <Features />
<MobileSection />
<CLISection /> <CLISection />
<FAQ /> <FAQ />
<SponsorCTA /> <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() { function CLISection() {
const [activeIndex, setActiveIndex] = React.useState(0); const [activeIndex, setActiveIndex] = React.useState(0);
const active = cliExamples[activeIndex]; const active = cliExamples[activeIndex];