From 3d859ccac3052b65a063f76c72be98f9b69f66f1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ri=C4=8Dards?= Date: Fri, 12 Jun 2026 13:52:50 +0300 Subject: [PATCH 1/3] Welcome page v3: team agent pitch + HubSpot waitlist form (lp-a-team-agent) Replaces the v2 welcome page with the a-team-agent landing experiment: - Hero install confirmation, shared-agent pitch, looping chat demo, tool cloud, how-it-works, gated early-access section - Email capture via HubSpot embedded form (portal 146727725 / eu1) - PostHog funnel events tagged experiment=lp-a-team-agent: page_view, demo_viewed, cta_clicked, gate_viewed, email_submitted - Standalone document (own fonts/styles); replicates Cookiebot/GA/meta from Layout.astro - Logo links back to the main page --- astro-src/pages/welcome.astro | 1266 +++++++++++++++++++++++++-------- 1 file changed, 962 insertions(+), 304 deletions(-) diff --git a/astro-src/pages/welcome.astro b/astro-src/pages/welcome.astro index 389077f5..a88112b8 100644 --- a/astro-src/pages/welcome.astro +++ b/astro-src/pages/welcome.astro @@ -1,327 +1,985 @@ --- -import Layout from '../layouts/Layout.astro'; import PostHogInit from '../../src/components/PostHogInit'; -import SimpleNav from '../components/SimpleNav.astro'; -import Footer from '../../src/components/Footer'; + +/* + welcome.astro — v3 "team agent" design (Jun 2026). + Source experiment: About DC/landing-experiments/a-team-agent.html (lp-a-team-agent). + Previous v2 design recoverable from git history; welcome2.astro still holds v1. + + Notes: + - Standalone document (does NOT use Layout.astro): the design ships its own + fonts, reset and styles, and the shared Tailwind globals would fight it. + Head essentials (favicons, canonical, OG, Cookiebot, GA, Ahrefs) are + replicated below — keep in sync with Layout.astro if those change. + - Email capture: HubSpot embedded form (portal 146727725 / eu1). + - Funnel events go to PostHog with { experiment: 'lp-a-team-agent' }: + page_view → cta_clicked (hero|bottom) → gate_viewed → email_submitted (+ demo_viewed) +*/ + +const title = "Desktop Commander: You're all set. Now meet your team's agent."; +const description = + "Your Desktop Commander MCP is installed. Next: set up a shared agent for your team with shared files, shared tools, and its own computer. Connect your ERP, CRM, and databases, and talk to your stuff."; --- - - - - - -
- - -
-
- - -
- -
- - MCP Server Installed -
+ + + + + + {title} + + -

- You're all set. - Nothing else to install. -

-

- Pick a prompt below, switch to Claude Desktop, and paste. -

-
- - -
- -
- 1 - - Tap any prompt to copy - -
+ + + + + + -
- - - - - - - -
+ + + + + + + + -
- - Browse all 72+ prompts → - -
-
- - - + + + + + + - -
- 2 - - Now paste into Claude Desktop - -
+ + -
-
- -
- - - -
-
- Organize my Downloads folder by file type -
-
- - Claude Opus - - - -
-
-

- ↑ paste your prompt here and hit send -

-
+ + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + +
+
+
✓ MCP server installed
+
+ +
+

Installed. You're all set.

+

Thanks for installing the Desktop Commander MCP. It's connected to Claude. Nothing else to do. Switch over and start working.

+
+ Need a starting point? Browse 72+ prompts → +
+
+ +
+ +
+ +
while you're here · new
+
+ + +
+

Get your AI employee.

+

A shared agent that does work for your team, with shared files, shared tools, and its own computer. Everyone can talk to it.

+ +
+ +
+
+ + +
+
See it work
+

Task it like a teammate.

+

Ask in chat. It connects to your systems, does the work on its own computer, and delivers the result.

+ +
+
+
+
+ # team · Your AI employee +
+
M
+
J
+
DC
+ online
+
+
+
+
- -
- Not working in Claude? - Open - Settings → Connectors, - toggle Desktop Commander on, and approve its tools. -
+ +
+
Connect everything
+

Connect your tools.
Talk to your stuff.

+

Plug in the systems your company already runs on: ERP, CRM, databases, drives. Ask in plain language, and answers, reports, and changes come back done.

+ +
+ SAP + NetSuite + Odoo + Salesforce + HubSpot + Postgres + MySQL + Google Drive + SharePoint + Notion + GitHub + Stripe + Shopify + Airtable + + any MCP +
+ +
+
+
M
Finance asks
+
Which invoices are overdue in NetSuite, by customer?
+
→ table + reminder drafts, 40 sec
+
+
+
J
Sales asks
+
Pull this quarter's pipeline by stage from Salesforce.
+
→ chart + summary, posted to the team
+
+
+
A
Ops asks
+
How many orders shipped late this week, and why?
+
→ root-cause digest from ERP + logs
+
+
+
+ + +
+
From install to agent
+

How it works

+
+
+
01 · HIRE
+
Hire an agent for your team
+
It gets its own computer in the cloud and is ready to work in minutes. No software to install, nothing to maintain.
+
+
+
02 · CONNECT
+
Connect your tools
+
Plug in the things your company already uses: files, spreadsheets, ERP, CRM, databases. Connect once, and the whole team is covered.
+
+
+
03 · TALK
+
Let everyone talk to it
+
Your team messages the agent in Slack, Teams, or the browser. Ask for something, and it comes back done.
+
+
+ +
+ +
+
early access · limited team slots
+
+ + + + + +
+ + -
+
+ +
+
DACHUKFRNORDESUS
+
+
PDF
+
+
may-sales-report.pdf
+
6 pages · charts + tables · just now
+
-

- Privacy Policy -

- - - -
- - - Discord - - - - GitHub -
+
+ `; + demoBody.appendChild(result); + requestAnimationFrame(() => requestAnimationFrame(() => { + document.querySelectorAll('#dChart span').forEach(b => { b.style.height = b.dataset.h + 'px'; }); + })); + }, stepsDone + 500); + + /* 4 — a third teammate reacts (no ask — just benefiting) */ + dWait(() => { + const bubble = document.getElementById('dResultBubble'); + if (!bubble) return; + const reacts = document.createElement('div'); + reacts.className = 'd-reacts'; + reacts.innerHTML = ` + 🔥 Aisha · Ops + 👍 2 + `; + bubble.appendChild(reacts); + }, stepsDone + 2100); + + /* 5 — employee #2 jumps in */ + const TASK2 = 'nice! @agent, same cut but just my UK accounts?'; + dWait(() => showPresence('Jonas'), stepsDone + 3000); + dWait(() => { + removePresence(); + const jonas = addUserMsg('Jonas · Sales', 'J', '#3D7BE8', true); + typeInto(jonas, TASK2, 0); + }, stepsDone + 4100); + const jonasDone = stepsDone + 4100 + TASK2.length * 26 + 400; + /* 6 — agent answers the second employee */ + dWait(() => { + const reply2 = document.createElement('div'); + reply2.className = 'd-msg d-agent'; + reply2.innerHTML = ` +
DC
+
+ On it, Jonas. UK only: €86k, +14% vs April. Your top account: Harrod & Co. +
+
PDF
+
+
may-sales-uk.pdf
+
3 pages · same data, your accounts · just now
+
+
-
+ `; + demoBody.appendChild(reply2); + }, jonasDone + 900); -
-
+ /* 7 — hold, fade, loop */ + dWait(() => { demoBody.style.opacity = 0; }, jonasDone + 7000); + dWait(runDemo, jonasDone + 7600); +} - +/* start when scrolled into view */ +const demoObserver = new IntersectionObserver(entries => { + if (entries[0].isIntersecting) { + runDemo(); + demoObserver.disconnect(); + track('demo_viewed'); + } +}, { threshold: 0.35 }); +demoObserver.observe(demoBody); - - + } +}); + + + From bfaa6fa1062bca1535f611c6966abcd593d89787 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ri=C4=8Dards?= Date: Mon, 15 Jun 2026 12:36:23 +0300 Subject: [PATCH 2/3] =?UTF-8?q?Welcome:=20redesign=20How=20it=20works=20se?= =?UTF-8?q?ction=20=E2=80=94=20non-technical=20team=20copy,=20gradient-rin?= =?UTF-8?q?g=20step=20nodes,=20icon=20watermarks,=20animated=20connector?= =?UTF-8?q?=20(CSS-only)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- astro-src/pages/welcome.astro | 100 +++++++++++++++++++++++++--------- 1 file changed, 74 insertions(+), 26 deletions(-) diff --git a/astro-src/pages/welcome.astro b/astro-src/pages/welcome.astro index a88112b8..2aa3b648 100644 --- a/astro-src/pages/welcome.astro +++ b/astro-src/pages/welcome.astro @@ -519,24 +519,67 @@ const description = /* ---------- how it works ---------- */ .how-section { padding: 90px 0 20px; text-align: center; } - .how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 900px; margin: 40px auto 0; text-align: left; } - @media (max-width: 720px) { .how { grid-template-columns: 1fr; } } + .how { display: flex; align-items: stretch; justify-content: center; gap: 0; max-width: 960px; margin: 46px auto 0; text-align: left; } .how-item { + position: relative; flex: 1; isolation: isolate; overflow: hidden; background: var(--glass); border: 1px solid var(--stroke); - border-radius: 18px; padding: 24px 24px 26px; + border-radius: 20px; padding: 26px 22px 30px; backdrop-filter: blur(10px); - transition: border-color 0.2s, transform 0.2s; + transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease; } - .how-item:hover { border-color: var(--stroke-bright); transform: translateY(-3px); } - .how-num { - font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; + /* gradient hairline border that lights up on hover */ + .how-item::after { + content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--grad); - -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; - margin-bottom: 12px; + -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); + -webkit-mask-composite: xor; mask-composite: exclude; + opacity: 0; transition: opacity 0.3s ease; pointer-events: none; + } + .how-item:hover { transform: translateY(-5px); border-color: transparent; box-shadow: 0 20px 55px rgba(125,169,255,0.14); } + .how-item:hover::after { opacity: 0.65; } + .how-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } + .how-node { + position: relative; flex: none; width: 46px; height: 46px; border-radius: 50%; + display: grid; place-items: center; + background: radial-gradient(circle at 50% 32%, rgba(125,169,255,0.18), rgba(255,255,255,0.015)); + transition: box-shadow 0.3s ease; + } + .how-node::before { + content: ''; position: absolute; inset: 0; border-radius: 50%; padding: 1.5px; + background: var(--grad); + -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); + -webkit-mask-composite: xor; mask-composite: exclude; + opacity: 0.75; transition: opacity 0.3s ease; + } + .how-item:hover .how-node::before { opacity: 1; } + .how-item:hover .how-node { box-shadow: 0 0 22px rgba(167,139,250,0.35); } + .how-node b { + font-family: var(--display); font-weight: 700; font-size: 17px; line-height: 1; + background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; + } + .how-label { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-dim); } + .how-title { font-family: var(--display); font-weight: 600; font-size: 18px; margin: 0 0 7px; position: relative; z-index: 1; } + .how-desc { font-size: 14px; color: var(--text-dim); line-height: 1.5; margin: 0; position: relative; z-index: 1; } + /* faint oversized icon watermark for depth */ + .how-wm { + position: absolute; right: -10px; bottom: -12px; width: 92px; height: 92px; + color: #A78BFA; opacity: 0.07; z-index: 0; + transition: opacity 0.3s ease, transform 0.3s ease; + } + .how-item:hover .how-wm { opacity: 0.16; transform: translateY(-4px) rotate(-4deg); } + /* animated gradient connector */ + .how-sep { + display: flex; align-items: center; padding: 0 8px; font-size: 22px; font-weight: 700; line-height: 1; + font-family: var(--display); + background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; + animation: howArrow 1.8s ease-in-out infinite; + } + @keyframes howArrow { 0%,100% { transform: translateX(0); opacity: 0.45; } 50% { transform: translateX(5px); opacity: 1; } } + @media (max-width: 720px) { + .how { flex-direction: column; gap: 12px; } + .how-sep { transform: rotate(90deg); padding: 4px 0; align-self: center; animation: none; opacity: 0.5; } } - .how-title { font-family: var(--display); font-weight: 600; font-size: 18px; margin-bottom: 6px; } - .how-desc { font-size: 14px; color: var(--text-dim); line-height: 1.55; } /* ---------- email gate (HubSpot embed) ---------- */ .hidden { display: none; } @@ -688,21 +731,26 @@ const description =
From install to agent

How it works

-
-
01 · HIRE
-
Hire an agent for your team
-
It gets its own computer in the cloud and is ready to work in minutes. No software to install, nothing to maintain.
-
-
-
02 · CONNECT
-
Connect your tools
-
Plug in the things your company already uses: files, spreadsheets, ERP, CRM, databases. Connect once, and the whole team is covered.
-
-
-
03 · TALK
-
Let everyone talk to it
-
Your team messages the agent in Slack, Teams, or the browser. Ask for something, and it comes back done.
-
+
+
01Create
+

Create a shared agent

+

Set up once for your whole team.

+ +
+ +
+
02Connect
+

Connect your tools

+

The apps your team already uses.

+ +
+ +
+
03Talk
+

Talk to it together

+

Just ask — it gets things done.

+ +
From 138d592853d037cc89d89588a55ffdc8dd48cfc6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ri=C4=8Dards?= Date: Thu, 25 Jun 2026 14:14:49 +0300 Subject: [PATCH 3/3] Welcome: rename 'shared agent' to 'team agent' across copy and CTAs --- astro-src/pages/welcome.astro | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/astro-src/pages/welcome.astro b/astro-src/pages/welcome.astro index 2aa3b648..2714385c 100644 --- a/astro-src/pages/welcome.astro +++ b/astro-src/pages/welcome.astro @@ -18,7 +18,7 @@ import PostHogInit from '../../src/components/PostHogInit'; const title = "Desktop Commander: You're all set. Now meet your team's agent."; const description = - "Your Desktop Commander MCP is installed. Next: set up a shared agent for your team with shared files, shared tools, and its own computer. Connect your ERP, CRM, and databases, and talk to your stuff."; + "Your Desktop Commander MCP is installed. Next: set up a team agent with shared files, shared tools, and its own computer. Connect your ERP, CRM, and databases, and talk to your stuff."; --- @@ -268,7 +268,7 @@ const description = text-transform: uppercase; color: var(--text-faint); white-space: nowrap; } - /* ---------- pitch: shared agent ---------- */ + /* ---------- pitch: team agent ---------- */ .pitch { padding: 70px 0 30px; text-align: center; } .pitch h2 { font-family: var(--display); @@ -650,13 +650,13 @@ const description =
while you're here · new
- +

Get your AI employee.

-

A shared agent that does work for your team, with shared files, shared tools, and its own computer. Everyone can talk to it.

+

An agent that does work for your team, with shared files, shared tools, and its own computer. Everyone can talk to it.

- +
@@ -733,7 +733,7 @@ const description =
01Create
-

Create a shared agent

+

Create a team agent

Set up once for your whole team.

@@ -754,7 +754,7 @@ const description =
- +
early access · limited team slots
@@ -764,7 +764,7 @@ const description =
Early access
-

Create your shared agent

+

Create your team agent

We're onboarding teams in small batches. Leave your company email and we'll reach out when your team's slot opens.

no spam · one email when your team's slot opens