Skip to content

style(marketing): redesign hero AppMockup to match v2 / Linear #4394

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
Kitenite merged 3 commits into from
May 11, 2026
Merged

style(marketing): redesign hero AppMockup to match v2 / Linear #4394

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d4dc36c
style(marketing): redesign hero AppMockup to match v2 / Linear language
Kitenite May 11, 2026
e473edb
style(marketing): add more agents, cloud/branch icons, rename Notes→R…
Kitenite May 11, 2026
bba2ffd
fix(marketing): correct branch label per demo, drop magic offset, gat…
Kitenite May 11, 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
5 changes: 5 additions & 0 deletions apps/marketing/public/app-icons/amp.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions apps/marketing/public/app-icons/copilot-white.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions apps/marketing/public/app-icons/copilot.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions apps/marketing/public/app-icons/mastracode-white.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions apps/marketing/public/app-icons/mastracode.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
20 changes: 20 additions & 0 deletions apps/marketing/public/app-icons/pi-white.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
20 changes: 20 additions & 0 deletions apps/marketing/public/app-icons/pi.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
27 changes: 8 additions & 19 deletions apps/marketing/src/app/components/HeroSection/components/AppMockup/AppMockup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,36 +4,25 @@ import { ExternalIdePopup } from "./components/ExternalIdePopup";
import { LeftSidebar } from "./components/LeftSidebar";
import { MainPanel } from "./components/MainPanel";
import { RightSidebar } from "./components/RightSidebar";
import { WindowChrome } from "./components/WindowChrome";
import { TabBar } from "./components/TabBar";
import type { AppMockupProps } from "./types";

export type { ActiveDemo } from "./types";

export function AppMockup({ activeDemo = "Use Any Agents" }: AppMockupProps) {
return (
<div
className="relative w-full min-w-[700px] overflow-hidden rounded-2xl bg-black/60 shadow-[0_8px_60px_-12px_rgba(0,0,0,0.7)] backdrop-blur-xl"
className="relative w-full min-w-[700px] overflow-hidden rounded-md border border-border bg-background shadow-[0_30px_80px_-24px_rgba(0,0,0,0.7)]"
style={{ aspectRatio: "16/10" }}
>
<div
className="pointer-events-none absolute inset-0 z-10 rounded-2xl"
style={{
background:
"linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.02) 25%, rgba(255,255,255,0.02) 75%, rgba(255,255,255,0.15) 100%)",
mask: "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
WebkitMask:
"linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
maskComposite: "exclude",
WebkitMaskComposite: "xor",
padding: "1.5px",
}}
/>
<div className="pointer-events-none absolute inset-0 z-20 rounded-md ring-1 ring-inset ring-white/[0.04]" />

<WindowChrome />

<div className="flex h-[calc(100%-40px)]">
<div className="flex h-full">
<LeftSidebar activeDemo={activeDemo} />
<MainPanel activeDemo={activeDemo} />
<div className="flex min-w-0 flex-1 flex-col">
<TabBar activeDemo={activeDemo} />
<MainPanel activeDemo={activeDemo} />
</div>
<RightSidebar activeDemo={activeDemo} />
</div>

Expand Down
88 changes: 40 additions & 48 deletions ...ponents/HeroSection/components/AppMockup/components/ExternalIdePopup/ExternalIdePopup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,92 +9,84 @@ interface ExternalIdePopupProps {
}

export function ExternalIdePopup({ activeDemo }: ExternalIdePopupProps) {
const treeIconClassName = "size-3.5 shrink-0";
const treeIconClassName = "size-3 shrink-0";

return (
<motion.div
className="absolute bottom-6 right-6 w-[55%] overflow-hidden rounded-xl bg-black/50 shadow-[0_8px_40px_-8px_rgba(0,0,0,0.6)] backdrop-blur-xl"
style={{ aspectRatio: "16/10" }}
initial={{ opacity: 0, scale: 0.9, y: 20 }}
className="absolute bottom-6 right-6 w-[55%] overflow-hidden rounded-lg border border-border bg-background shadow-[0_30px_80px_-20px_rgba(0,0,0,0.7)]"
style={{
aspectRatio: "16/10",
pointerEvents: activeDemo === "Open in Any IDE" ? "auto" : "none",
}}
initial={{ opacity: 0, scale: 0.94, y: 16 }}
animate={{
opacity: activeDemo === "Open in Any IDE" ? 1 : 0,
scale: activeDemo === "Open in Any IDE" ? 1 : 0.9,
y: activeDemo === "Open in Any IDE" ? 0 : 20,
scale: activeDemo === "Open in Any IDE" ? 1 : 0.94,
y: activeDemo === "Open in Any IDE" ? 0 : 16,
}}
Comment thread
coderabbitai[bot] marked this conversation as resolved.
transition={{ duration: 0.3, ease: "easeOut" }}
>
<div
className="pointer-events-none absolute inset-0 z-10 rounded-xl"
style={{
background:
"linear-gradient(135deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.04) 26%, rgba(255,255,255,0.03) 74%, rgba(255,255,255,0.07) 100%)",
mask: "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
WebkitMask:
"linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
maskComposite: "exclude",
WebkitMaskComposite: "xor",
padding: "1.5px",
}}
/>
<div className="pointer-events-none absolute inset-0 z-10 rounded-lg ring-1 ring-inset ring-white/[0.04]" />

<div className="flex items-center justify-between border-b border-white/[0.06] bg-white/[0.04] px-5 py-3 backdrop-blur-md">
<div className="relative flex h-8 items-center border-b border-border bg-card px-3">
<div className="flex items-center gap-1.5">
<div className="h-2.5 w-2.5 rounded-full bg-[#ff5f57]/80" />
<div className="h-2.5 w-2.5 rounded-full bg-[#febc2e]/80" />
<div className="h-2.5 w-2.5 rounded-full bg-[#28c840]/80" />
<div className="size-2 rounded-full bg-[#ff5f57]/85" />
<div className="size-2 rounded-full bg-[#febc2e]/85" />
<div className="size-2 rounded-full bg-[#28c840]/85" />
</div>
<span className="text-[10px] uppercase tracking-[0.14em] text-muted-foreground/38">
External IDE
<span className="pointer-events-none absolute inset-x-0 text-center font-mono text-[10px] tracking-tight text-muted-foreground/60">
Cursor — index.ts
</span>
<div className="w-12" />
</div>

<div className="flex h-[calc(100%-36px)]">
<div className="w-[116px] border-r border-white/[0.06] bg-white/[0.02] p-5 text-[11px]">
<div className="mb-3 flex items-center gap-2 text-[10px] uppercase tracking-[0.12em] text-muted-foreground/36">
<div className="flex h-[calc(100%-32px)]">
<div className="w-[120px] border-r border-border bg-card p-3 text-[11px]">
<div className="mb-2 flex items-center gap-1.5 text-[10px] font-medium uppercase tracking-[0.08em] text-muted-foreground/55">
<LuFolder className={treeIconClassName} />
<span>src</span>
</div>
<div className="ml-4 space-y-2">
<div className="flex items-center gap-2 font-medium text-orange-500/75">
<div className="ml-3 space-y-0.5">
<div className="relative flex items-center gap-1.5 rounded-sm bg-foreground/[0.06] px-1.5 py-0.5 text-foreground/95">
<span className="absolute inset-y-1 left-0 w-[2px] rounded-r-sm bg-brand" />
<LuFile className={treeIconClassName} />
<span>index.ts</span>
</div>
<div className="flex items-center gap-2 text-muted-foreground/30">
<div className="flex items-center gap-1.5 px-1.5 py-0.5 text-muted-foreground/55">
<LuFile className={treeIconClassName} />
<span>utils.ts</span>
</div>
<div className="flex items-center gap-2 text-muted-foreground/30">
<div className="flex items-center gap-1.5 px-1.5 py-0.5 text-muted-foreground/55">
<LuFile className={treeIconClassName} />
<span>types.ts</span>
</div>
</div>
</div>

<div className="flex-1 overflow-hidden bg-black/20 p-6 font-mono text-[11px]">
<div className="space-y-2 leading-relaxed">
<div className="flex-1 overflow-hidden p-4 font-mono text-[11px]">
<div className="space-y-1.5 leading-relaxed">
<div>
<span className="text-violet-300/60">import</span> {"{"} Agent{" "}
{"}"} <span className="text-violet-300/60">from</span>{" "}
<span className="text-stone-300/70">"ai"</span>
<span className="text-violet-300">import</span> {"{"} Agent {"}"}{" "}
<span className="text-violet-300">from</span>{" "}
<span className="text-emerald-300/85">"ai"</span>
</div>
<div>
<span className="text-violet-300/60">import</span> {"{"} tools{" "}
{"}"} <span className="text-violet-300/60">from</span>{" "}
<span className="text-stone-300/70">"./utils"</span>
<span className="text-violet-300">import</span> {"{"} tools {"}"}{" "}
<span className="text-violet-300">from</span>{" "}
<span className="text-emerald-300/85">"./utils"</span>
</div>
<div className="text-muted-foreground/20">│</div>
<div className="text-muted-foreground/30">│</div>
<div>
<span className="text-violet-300/60">const</span>{" "}
<span className="text-orange-500/75">agent</span> ={" "}
<span className="text-stone-300/70">new</span> Agent({"{"}
<span className="text-violet-300">const</span>{" "}
<span className="text-brand-light">agent</span> ={" "}
<span className="text-violet-300">new</span>{" "}
<span className="text-foreground/95">Agent</span>({"{"}
</div>
<div className="pl-4">
<span className="text-foreground/60">model:</span>{" "}
<span className="text-stone-300/70">"claude-4"</span>,
<span className="text-foreground/75">model:</span>{" "}
<span className="text-emerald-300/85">"claude-4"</span>,
</div>
<div className="pl-4">
<span className="text-foreground/60">tools:</span> [tools.read,
<span className="text-foreground/75">tools:</span> [tools.read,
tools.write]
</div>
<div>{"}"})</div>
Expand Down
62 changes: 32 additions & 30 deletions .../components/HeroSection/components/AppMockup/components/FileChangeItem/FileChangeItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
"use client";

import {
VscChevronRight,
VscChevronDown,
VscDiffAdded,
VscDiffModified,
VscDiffRemoved,
Expand All @@ -24,46 +24,48 @@ export function FileChangeItem({
type,
}: FileChangeItemProps) {
const isFolder = type === "folder";
const Icon = isFolder
? VscChevronRight
: type === "add"
? VscDiffAdded
: type === "edit"
? VscDiffModified
: type === "delete"
? VscDiffRemoved
: VscDiffModified;

let iconColor = "text-muted-foreground/30";
if (isFolder) {
iconColor = "text-muted-foreground/24";
} else if (type === "add") {
iconColor = "text-emerald-300/70";
} else if (type === "edit") {
iconColor = "text-[#febc2e]/75";
} else if (type === "delete") {
iconColor = "text-rose-300/75";
return (
<div
className="flex items-center gap-1.5 px-3 pb-2 pt-5 font-mono text-[10px] font-medium uppercase tracking-[0.06em] text-muted-foreground/65"
style={{ paddingLeft: `${10 + indent * 12}px` }}
>
<VscChevronDown className="size-2.5 text-muted-foreground/45" />
<span className="truncate">{path}</span>
</div>
);
}

const Icon =
type === "add"
? VscDiffAdded
: type === "delete"
? VscDiffRemoved
: VscDiffModified;

const iconColor =
type === "add"
? "text-emerald-400/85"
: type === "delete"
? "text-rose-400/85"
: "text-amber-300/85";

return (
<div
className={`flex items-center justify-between gap-2 px-3 hover:bg-white/[0.03] ${isFolder ? "mt-1 py-1.5" : "py-1.5"}`}
style={{ paddingLeft: `${10 + indent * 14}px` }}
className="flex h-7 items-center justify-between gap-2 hover:bg-foreground/[0.025]"
style={{ paddingLeft: `${14 + indent * 12}px`, paddingRight: "12px" }}
>
<div className="flex min-w-0 items-center gap-2">
<Icon
className={`${isFolder ? "size-2.5" : "size-3.5"} shrink-0 ${iconColor}`}
/>
<span
className={`truncate ${isFolder ? "text-[10px] font-medium text-muted-foreground/34" : "text-[11px] text-muted-foreground/58"}`}
>
<Icon className={`size-3 shrink-0 ${iconColor}`} />
<span className="truncate text-[11px] text-muted-foreground">
{path}
</span>
</div>
{!isFolder && (add > 0 || del > 0) && (
<span className="shrink-0 tabular-nums text-[10px] font-medium">
{add > 0 && <span className="text-emerald-300/75">+{add}</span>}
{del > 0 && <span className="ml-1 text-rose-300/75">-{del}</span>}
{(add > 0 || del > 0) && (
<span className="shrink-0 font-mono text-[10px] tabular-nums">
{add > 0 && <span className="text-emerald-400/85">+{add}</span>}
{del > 0 && <span className="ml-1 text-rose-400/75">−{del}</span>}
</span>
)}
</div>
Expand Down
Loading
Loading