diff --git a/packages/website/src/routes/index.tsx b/packages/website/src/routes/index.tsx new file mode 100644 index 000000000..d6df3ed1d --- /dev/null +++ b/packages/website/src/routes/index.tsx @@ -0,0 +1,380 @@ +import { createFileRoute } from '@tanstack/react-router' +import { CursorFieldProvider, FloatingButterfly } from '~/components/butterfly' +import '~/styles.css' + +export const Route = createFileRoute('/')({ + head: () => ({ + meta: [ + { title: 'Paseo - Your dev environment, in your pocket' }, + { + name: 'description', + content: + 'Monitor and control your local AI coding agents from anywhere. Works with Claude Code and your existing setup.', + }, + ], + }), + component: Home, +}) + +function Home() { + return ( + + {/* Hero section with background image */} +
+
+
+ + {/* Left side butterflies - facing right */} + + + + + {/* Right side butterflies - facing left */} + + + +
+
+
+ + {/* Content section with black background */} +
+
+ + + +
+
+
+ + ) +} + +function Nav() { + return ( + + ) +} + +function Hero() { + return ( +
+

+ Your dev environment, +
+ in your pocket +

+

+ Step away from your desk. Go for a walk. The best ideas come when + you're not staring at a screen. Now you can act on them. +

+
+ ) +} + +function Differentiator({ + title, + description, +}: { + title: string + description: string +}) { + return ( +
+

{title}

+

{description}

+
+ ) +} + +function Features() { + return ( +
+

What you get

+
+ + + + +
+
+ ) +} + +function Feature({ + title, + description, +}: { + title: string + description: string +}) { + return ( +
+

{title}

+

{description}

+
+ ) +} + +function GetStarted() { + return ( +
+
+ +

Install and run the server on your machine

+ npm install -g @paseohq/server && paseo + + +

+ Open the app on your phone and connect to your local server +

+ + +

+ Start managing your agents from anywhere +

+ +
+

+ Free and open source. Works on iOS, Android, and web. +

+
+ ) +} + +function HowItWorks() { + return ( +
+

+ Not another cloud sandbox +

+

+ Paseo connects to your actual development environment. Leverage your + existing setup without moving your code to the cloud. +

+
+ + + +
+
+ ) +} + +function Step({ + number, + children, +}: { + number: number + children: React.ReactNode +}) { + return ( +
+ + {number} + +
{children}
+
+ ) +} + +function CodeBlock({ children }: { children: React.ReactNode }) { + return ( +
+
+ $ + {children} +
+
+ ) +} + +function FAQ() { + return ( +
+

FAQ

+
+ + Paseo is free and open source. It wraps CLI tools like Claude Code and + Codex, which you'll need to have installed and configured with your + own credentials. Voice features currently require an OpenAI API key, + but local voice is coming soon. + + + Paseo itself doesn't send your code anywhere. Agents run locally and + communicate with their own APIs as they normally would. We provide an + optional end-to-end encrypted relay for remote access, but you can + also connect directly over your local network or use your own tunnel. + + + Claude Code, Codex, and OpenCode. + + + There isn't one. The app and server are free and open source, and + that's not changing. I built this for myself and I'm happy to share + it. If an obvious opportunity comes up I'll consider it, but it's not + the goal. + + +

+ I've been using Claude Code since launch. Early on I started SSHing + into Tmux from Termux on Android so I could check on agents during + my long walks. It worked, but the UX was rough. Dictation was bad, + the keyboard was awkward, and the{' '} + + infamous scroll bug + {' '} + meant starting over constantly. +

+

+ Anthropic and OpenAI now have mobile apps, but they force you into + cloud sandboxes where you lose your whole setup. Other apps exist + but I wasn't happy with their UX, security, or business model. +

+

+ So I built my own. It became good enough that it felt obvious it + should exist for others too. +

+ + +

+ The opposite. I built this to spend less time at my desk, not more. + Ideas fade. By the time you're back at your desk, the spark is gone. + And sometimes you just want to check on a running task or unblock it + with a quick reply, without cutting your walk short. +

+

+ My quality of life has improved. I get more done than ever, but I'm + also more present when I'm not working. This isn't about being + available 24/7. It's about not being chained to a desk when + inspiration strikes. +

+ +
+
+ ) +} + +function FAQItem({ + question, + children, +}: { + question: string + children: React.ReactNode +}) { + return ( +
+

{question}

+
{children}
+
+ ) +} + +function Footer() { + return ( + + ) +}