Skip to content

Commit 2164df2

Browse files
moonrailgunmoonrailgun
committed
feat(website): add host-aware skills feature section
Surface Dao's per-host skill system on the marketing site as section 04. A new FeatureHostSkills component with a HostSkillsVisual showing host -> skill mappings (github.com, youtube.com, x.com, arxiv.org). Renumber subsequent sections to 05/06 and flip their mockup sides to preserve the alternating left/right layout. Trim the redundant "skill system" mention from FeatureAgent now that it has its own section.
1 parent 211170a commit 2164df2

7 files changed

Lines changed: 161 additions & 5 deletions

File tree

‎website/app/page.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { Hero } from '@/components/Hero';
33
import { FeatureSidebar } from '@/components/FeatureSidebar';
44
import { FeatureCommandBar } from '@/components/FeatureCommandBar';
55
import { FeatureAgent } from '@/components/FeatureAgent';
6+
import { FeatureHostSkills } from '@/components/FeatureHostSkills';
67
import { FeatureContentFirst } from '@/components/FeatureContentFirst';
78
import { FeatureKeyboardFirst } from '@/components/FeatureKeyboardFirst';
89
import { FeatureGrid } from '@/components/FeatureGrid';
@@ -18,6 +19,7 @@ export default function HomePage() {
1819
<FeatureSidebar />
1920
<FeatureCommandBar />
2021
<FeatureAgent />
22+
<FeatureHostSkills />
2123
<FeatureContentFirst />
2224
<FeatureKeyboardFirst />
2325
<FeatureGrid />

‎website/components/FeatureAgent.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ export function FeatureAgent() {
55
<FeatureSection
66
eyebrow="03 / AI AGENT"
77
heading="An assistant that lives next to your tabs."
8-
body="A native AI sidebar with long-term memory, proactive suggestions on every navigation, a skill system, and a visible cursor that shows you exactly what it touched. No vendor lock-in — bring your own model: Gemini, GPT, Claude, or anything else."
8+
body="A native AI sidebar with long-term memory, proactive suggestions on every navigation, and a visible cursor that shows you exactly what it touched. No vendor lock-in — bring your own model: Gemini, GPT, Claude, or anything else."
99
bullets={[
1010
{ icon: 'brain', label: 'Long-term memory' },
1111
{ icon: 'zap', label: 'Proactive' },

‎website/components/FeatureContentFirst.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { ContentFirstVisual } from './ui/ContentFirstVisual';
44
export function FeatureContentFirst() {
55
return (
66
<FeatureSection
7-
eyebrow="04 / CONTENT FIRST"
7+
eyebrow="05 / CONTENT FIRST"
88
heading="The web, with more room to breathe."
99
body="We work hard to give you more space for the content that matters. Read, watch, and create with the maximum of your screen — not the maximum of the browser around it. On macOS immersive mode, the chrome melts away entirely, giving you a true full-screen web canvas — like F11, but native."
1010
bullets={[
@@ -14,7 +14,7 @@ export function FeatureContentFirst() {
1414
{ icon: 'palette', label: 'Adapts to the page' },
1515
]}
1616
customVisual={<ContentFirstVisual />}
17-
mockupSide="left"
17+
mockupSide="right"
1818
/>
1919
);
2020
}

‎website/components/FeatureHostSkills.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { FeatureSection } from './FeatureSection';
2+
import { HostSkillsVisual } from './ui/HostSkillsVisual';
3+
4+
export function FeatureHostSkills() {
5+
return (
6+
<FeatureSection
7+
eyebrow="04 / HOST-AWARE SKILLS"
8+
heading="Skills tuned to where you are."
9+
body="The agent learns site-specific workflows. Drop a skill into a host and Dao will pick it up the next time you land on that domain — different paths for GitHub, YouTube, X, your internal dashboards. The longer you use a site, the more your browser knows about it."
10+
bullets={[
11+
{ icon: 'globe', label: 'Per-host skill scopes' },
12+
{ icon: 'zap', label: 'Hot-loaded on navigation' },
13+
{ icon: 'code', label: 'Bring your own skills' },
14+
]}
15+
customVisual={<HostSkillsVisual />}
16+
mockupSide="left"
17+
/>
18+
);
19+
}

‎website/components/FeatureKeyboardFirst.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { KeyboardVisual } from './ui/KeyboardVisual';
44
export function FeatureKeyboardFirst() {
55
return (
66
<FeatureSection
7-
eyebrow="05 / KEYBOARD FIRST"
7+
eyebrow="06 / KEYBOARD FIRST"
88
heading="A few keystrokes away from anywhere."
99
body="Learn a handful of Dao Browser shortcuts and you'll fall in love with using it. Tabs, sidebar, address bar, AI — all one keypress away. Your hands never have to leave the keyboard."
1010
bullets={[
@@ -13,7 +13,7 @@ export function FeatureKeyboardFirst() {
1313
{ icon: 'sparkles', label: 'Cmd + E for the AI Agent' },
1414
]}
1515
customVisual={<KeyboardVisual />}
16-
mockupSide="right"
16+
mockupSide="left"
1717
/>
1818
);
1919
}

‎website/components/ui/HostSkillsVisual.module.css‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
.root {
2+
background: var(--bg-elevated);
3+
border: 1px solid var(--border);
4+
border-radius: 12px;
5+
padding: 32px 28px;
6+
box-shadow: var(--shadow-frame);
7+
aspect-ratio: 16 / 10;
8+
display: flex;
9+
align-items: center;
10+
justify-content: center;
11+
}
12+
13+
.list {
14+
list-style: none;
15+
padding: 0;
16+
margin: 0;
17+
display: flex;
18+
flex-direction: column;
19+
gap: 16px;
20+
width: 100%;
21+
max-width: 460px;
22+
}
23+
24+
.item {
25+
display: grid;
26+
grid-template-columns: 110px auto 1fr;
27+
align-items: center;
28+
gap: 10px;
29+
font-size: 13px;
30+
}
31+
32+
.host {
33+
display: inline-flex;
34+
align-items: center;
35+
justify-content: center;
36+
height: 26px;
37+
padding: 0 10px;
38+
border: 1px solid var(--border);
39+
border-radius: 6px;
40+
background: var(--bg);
41+
font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
42+
font-size: 12px;
43+
font-weight: 500;
44+
color: var(--text);
45+
line-height: 1;
46+
white-space: nowrap;
47+
overflow: hidden;
48+
text-overflow: ellipsis;
49+
}
50+
51+
.arrow {
52+
color: var(--text-tertiary);
53+
font-size: 14px;
54+
}
55+
56+
.skills {
57+
display: flex;
58+
flex-wrap: wrap;
59+
gap: 6px;
60+
}
61+
62+
.skill {
63+
display: inline-flex;
64+
align-items: center;
65+
height: 24px;
66+
padding: 0 10px;
67+
border-radius: 999px;
68+
background: var(--accent-subtle);
69+
color: var(--accent);
70+
font-size: 12px;
71+
font-weight: 500;
72+
line-height: 1;
73+
white-space: nowrap;
74+
}
75+
76+
@media (max-width: 640px) {
77+
.root {
78+
padding: 24px 20px;
79+
aspect-ratio: auto;
80+
}
81+
.item {
82+
grid-template-columns: 1fr;
83+
gap: 6px;
84+
}
85+
.arrow {
86+
display: none;
87+
}
88+
}

‎website/components/ui/HostSkillsVisual.tsx‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import styles from './HostSkillsVisual.module.css';
2+
3+
interface HostRow {
4+
host: string;
5+
skills: string[];
6+
}
7+
8+
const HOSTS: HostRow[] = [
9+
{
10+
host: 'github.com',
11+
skills: ['Summarize PR', 'Review diff', 'Find related issues'],
12+
},
13+
{
14+
host: 'youtube.com',
15+
skills: ['Transcript', 'Chapter summary', 'Bookmark timestamp'],
16+
},
17+
{
18+
host: 'x.com',
19+
skills: ['Unroll thread', 'Save to memory'],
20+
},
21+
{
22+
host: 'arxiv.org',
23+
skills: ['Explain abstract', 'Cite as BibTeX'],
24+
},
25+
];
26+
27+
export function HostSkillsVisual() {
28+
return (
29+
<div className={styles.root} aria-hidden="true">
30+
<ul className={styles.list}>
31+
{HOSTS.map((row) => (
32+
<li key={row.host} className={styles.item}>
33+
<span className={styles.host}>{row.host}</span>
34+
<span className={styles.arrow}>→</span>
35+
<span className={styles.skills}>
36+
{row.skills.map((s) => (
37+
<span key={s} className={styles.skill}>
38+
{s}
39+
</span>
40+
))}
41+
</span>
42+
</li>
43+
))}
44+
</ul>
45+
</div>
46+
);
47+
}

0 commit comments

Comments
 (0)