Skip to content

Feat/landing hero chat mockup #115

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
snhsish merged 2 commits into from
Sep 20, 2026
+197 −116
Merged

Feat/landing hero chat mockup #115

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
fb21216
feat(web): revamp phone mockup into live chat session UI
snhsish Sep 20, 2026
3ceb2d4
feat(web): split hero into two-line title plus phone layout
snhsish Sep 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 29 additions & 22 deletions apps/web/src/components/landing/hero.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { GlyphMatrix } from "@/components/ui/glyph-matrix";
import { FlickeringGrid } from "@/components/ui/flickering-grid";
import { TerminalMockup } from "@/components/landing/terminal-mockup";
import { PhoneMockup } from "@/components/landing/phone-mockup";
import Link from "next/link";
import { useTheme } from "next-themes";
Expand All @@ -22,7 +21,7 @@ export function Hero() {
const gridColor = mounted && theme === "dark" ? "#4B5563" : "#6B7280";

return (
<section className="relative flex min-h-[80vh] items-center justify-center overflow-hidden py-20 md:py-32">
<section className="relative flex items-center overflow-hidden py-16 md:h-[calc(100vh-4rem)] md:min-h-[740px] md:py-0">
<div className="absolute top-0 left-0 w-1/2 h-1/2 z-0 opacity-50" style={{maskImage: 'linear-gradient(to bottom right, black 0%, transparent 100%)', WebkitMaskImage: 'linear-gradient(to bottom right, black 0%, transparent 100%)'}}>
<GlyphMatrix
glyphs="01·•+*/\\<>="
Expand All @@ -43,27 +42,35 @@ export function Hero() {
className="h-full w-full"
/>
</div>
<div className="container relative z-10 flex flex-col items-center text-center">
<Badge variant="secondary" className="mb-4">
Free & Open Source
</Badge>
<h1 className="text-4xl md:text-6xl font-bold tracking-tight max-w-3xl">
Your OpenCode agent,<br />in your pocket
</h1>
<p className="mt-6 text-lg md:text-xl text-muted-foreground max-w-2xl">
CrossCode connects your phone to your PC&apos;s OpenCode instance. Approve tool calls, review diffs, and manage sessions.
</p>
<div className="mt-8 flex flex-col sm:flex-row gap-3">
<Button size="lg" asChild>
<Link href="/download">Download</Link>
</Button>
<Button size="lg" variant="outline" asChild>
<Link href="/login">Login</Link>
</Button>
<div className="container relative z-10 grid h-full w-full items-center gap-12 md:grid-cols-[1.05fr_0.95fr] md:gap-6 overflow-visible">
<div className="flex flex-col items-start justify-center text-left h-full py-10">
<Badge variant="secondary" className="mb-4">
Free & Open Source
</Badge>
<h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight max-w-2xl lg:whitespace-nowrap">
Your OpenCode agent,
<br />
in your pocket
</h1>
<p className="mt-6 text-lg md:text-xl text-muted-foreground max-w-xl text-pretty">
CrossCode connects your phone to your PC&apos;s OpenCode instance. Approve tool calls, review diffs, and manage sessions.
</p>
<div className="mt-8 flex flex-row gap-3">
<Button size="lg" asChild>
<Link href="/download">Download</Link>
</Button>
<Button size="lg" variant="outline" asChild>
<Link href="/login">Get Started</Link>
</Button>
</div>
</div>
<div className="mt-16 w-full max-w-5xl flex flex-col lg:flex-row gap-10 items-start justify-center">
<TerminalMockup />
<PhoneMockup />
<div className="relative flex h-full items-center justify-center md:justify-start lg:pl-16">
{/* glow behind phone */}
<div className="pointer-events-none absolute left-1/2 top-1/2 -z-10 h-[560px] w-[560px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary/[0.07] blur-[100px]" />
<div className="relative w-fit origin-top scale-[0.88] min-[400px]:scale-100 [mask-image:linear-gradient(to_bottom,black_88%,transparent_100%)]">
<PhoneMockup />
<div className="pointer-events-none absolute inset-x-0 bottom-0 h-24 bg-gradient-to-t from-background via-background/60 to-transparent" />
</div>
</div>
</div>
</section>
Expand Down
Loading
Loading