Skip to content

Commit 328eaf4

Browse files
BunsDevclaude
BunsDev
and
claude
authored
Update Turbo schema URLs to v2.9.3 (#152)
* Update Turbo schema URLs - Switch root and app configs to the v2.9.3 Turborepo schema - Keep workspace task configs unchanged * Refresh marketing landing page visuals - Add richer mockups and palette previews - Improve feature, trust, and workflow presentation - Stagger reveal timing for a more polished landing page * Refresh FAQ chevron and add Discord CTA - Replace text chevron with inline SVG icon - Add a Discord call-to-action card under the FAQ list * Enhance marketing page navigation and CTA polish - Add skip link, mobile nav toggle, and active section highlighting - Refresh footer, metadata, and final CTA presentation - Add background motion accents for a more dynamic landing page * Polish the marketing landing page UI - Add richer hero, feature, trust, FAQ, footer, and CTA styling - Improve mobile layouts, reduced-motion handling, and performance hints - Add subtle hero shine and scroll parallax interactions * Polish marketing landing page sections - Add Discord CTA to FAQ - Add illustrative visuals to feature cards - Add branded mark to final CTA and surface trust metrics * Add skip-link, JSON-LD schema, pill styles, and FinalCta mark enhancements Layers accessibility and polish additions on top of main's latest changes: skip-to-content link, SoftwareApplication structured data, hero pill badge styles, hero visual stage CSS mockup, feature card mini-visuals, surface mockups, theme palette swatches, FAQ Discord CTA, shooting star animations, and responsive/reduced-motion enhancements. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * Refresh bun lockfile metadata --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
1 parent c704d48 commit 328eaf4

19 files changed

Lines changed: 642 additions & 29 deletions

‎apps/desktop/turbo.jsonc‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"$schema": "https://turbo.build/schema.json",
2+
"$schema": "https://v2-9-3.turborepo.dev/schema.json",
33
"extends": ["//"],
44
"tasks": {
55
"build": {

‎apps/marketing/src/components/Background.astro‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ const stars = Array.from({ length: starCount }, (_, i) => {
4040
<path d="M 600 490 C 460 590, 280 720, 60 940" class="kn-thread kn-thread-b" />
4141
<path d="M -40 180 C 200 160, 440 260, 560 340" class="kn-thread kn-thread-c" />
4242
<path d="M -60 780 C 300 740, 600 800, 900 720 S 1300 680, 1520 760" class="kn-thread kn-thread-d" />
43-
<path d="M -40 320 C 200 300, 420 380, 640 340 S 960 260, 1480 380" class="kn-thread kn-thread-claw" />
43+
<path id="thread-claw" d="M -40 320 C 200 300, 420 380, 640 340 S 960 260, 1480 380" class="kn-thread kn-thread-claw" />
4444
<path d="M 1100 -20 C 940 140, 780 300, 660 420" class="kn-thread kn-thread-claw-hi" />
4545
<path d="M 620 500 C 520 580, 380 700, 160 920" class="kn-thread kn-thread-claw-hi" />
4646
<path d="M 1520 200 C 1200 260, 900 180, 640 280 S 300 360, -40 240" class="kn-thread kn-thread-ocean" />
@@ -53,6 +53,23 @@ const stars = Array.from({ length: starCount }, (_, i) => {
5353
<circle cx="640" cy="462" r="30" fill="var(--kn-landing-accent-dim)" opacity="0.1" />
5454
<circle cx="800" cy="300" r="2" fill="var(--kn-landing-accent)" opacity="0.3" />
5555
<circle cx="800" cy="300" r="10" fill="var(--kn-landing-accent)" opacity="0.04" />
56+
57+
<!-- Thread energy pulse -->
58+
<circle r="3" fill="var(--kn-landing-accent-bright)" opacity="0.6" class="kn-thread-pulse">
59+
<animateMotion dur="12s" repeatCount="indefinite">
60+
<mpath href="#thread-claw" />
61+
</animateMotion>
62+
</circle>
63+
<circle r="8" fill="var(--kn-landing-accent)" opacity="0.12" class="kn-thread-pulse-glow">
64+
<animateMotion dur="12s" repeatCount="indefinite">
65+
<mpath href="#thread-claw" />
66+
</animateMotion>
67+
</circle>
68+
69+
<!-- Shooting stars -->
70+
<line x1="200" y1="80" x2="320" y2="160" class="kn-shooting-star kn-shooting-star--1" />
71+
<line x1="900" y1="120" x2="1020" y2="200" class="kn-shooting-star kn-shooting-star--2" />
72+
<line x1="1200" y1="50" x2="1320" y2="130" class="kn-shooting-star kn-shooting-star--3" />
5673
</svg>
5774
</div>
5875

@@ -65,6 +82,7 @@ const stars = Array.from({ length: starCount }, (_, i) => {
6582
r={star.r}
6683
fill="var(--kn-landing-star-color)"
6784
opacity={star.opacity}
85+
data-star-index={star.id}
6886
class:list={{ "kn-star-twinkle": star.twinkle }}
6987
style={star.twinkle ? `animation-delay:${star.delay}s` : undefined}
7088
/>

‎apps/marketing/src/components/CoreSurfaces.astro‎

Lines changed: 68 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,61 @@ interface Props {
1414
1515
const { surfaces } = Astro.props;
1616
const defaultId = surfaces[0]?.id ?? "";
17+
18+
/** CSS-only mockup visuals per surface */
19+
const surfaceVisuals: Record<string, string> = {
20+
threads: `<div class="sv-mockup sv-threads">
21+
<div class="sv-chrome"><span></span><span></span><span></span></div>
22+
<div class="sv-thread sv-thread--active"><span class="sv-thread-dot"></span><span class="sv-thread-label"></span></div>
23+
<div class="sv-thread"><span class="sv-thread-dot"></span><span class="sv-thread-label sv-thread-label--short"></span></div>
24+
<div class="sv-thread"><span class="sv-thread-dot"></span><span class="sv-thread-label"></span></div>
25+
<div class="sv-thread"><span class="sv-thread-dot"></span><span class="sv-thread-label sv-thread-label--short"></span></div>
26+
</div>`,
27+
diffs: `<div class="sv-mockup sv-diffs">
28+
<div class="sv-chrome"><span></span><span></span><span></span></div>
29+
<div class="sv-diff-line sv-diff-line--add"></div>
30+
<div class="sv-diff-line sv-diff-line--add sv-diff-line--short"></div>
31+
<div class="sv-diff-line sv-diff-line--ctx"></div>
32+
<div class="sv-diff-line sv-diff-line--remove"></div>
33+
<div class="sv-diff-line sv-diff-line--ctx sv-diff-line--short"></div>
34+
<div class="sv-diff-line sv-diff-line--add"></div>
35+
</div>`,
36+
preview: `<div class="sv-mockup sv-preview">
37+
<div class="sv-chrome"><span></span><span></span><span></span></div>
38+
<div class="sv-browser-bar"></div>
39+
<div class="sv-browser-body">
40+
<div class="sv-block sv-block--hero"></div>
41+
<div class="sv-block-row">
42+
<div class="sv-block sv-block--card"></div>
43+
<div class="sv-block sv-block--card"></div>
44+
</div>
45+
</div>
46+
</div>`,
47+
review: `<div class="sv-mockup sv-review">
48+
<div class="sv-chrome"><span></span><span></span><span></span></div>
49+
<div class="sv-comment">
50+
<div class="sv-comment-head"><span class="sv-avatar"></span><span class="sv-comment-name"></span><span class="sv-comment-badge">Approved</span></div>
51+
<div class="sv-comment-body"></div>
52+
<div class="sv-comment-body sv-comment-body--short"></div>
53+
</div>
54+
<div class="sv-comment">
55+
<div class="sv-comment-head"><span class="sv-avatar"></span><span class="sv-comment-name sv-comment-name--short"></span></div>
56+
<div class="sv-comment-body"></div>
57+
</div>
58+
</div>`,
59+
actions: `<div class="sv-mockup sv-actions">
60+
<div class="sv-chrome"><span></span><span></span><span></span></div>
61+
<div class="sv-action-row">
62+
<div class="sv-action-btn"></div>
63+
<div class="sv-action-btn"></div>
64+
</div>
65+
<div class="sv-terminal">
66+
<div class="sv-terminal-line"></div>
67+
<div class="sv-terminal-line sv-terminal-line--short"></div>
68+
<div class="sv-terminal-line sv-terminal-line--accent"></div>
69+
</div>
70+
</div>`
71+
};
1772
---
1873

1974
<section id="surfaces" class="spotlight" data-tab-group data-tab-default={defaultId} data-reveal>
@@ -53,14 +108,19 @@ const defaultId = surfaces[0]?.id ?? "";
53108
aria-hidden={item.id === defaultId ? "false" : "true"}
54109
data-active={item.id === defaultId ? "true" : "false"}
55110
>
56-
<p class="section-kicker">{item.kicker}</p>
57-
<h3>{item.title}</h3>
58-
<p>{item.body}</p>
59-
<ul class="detail-bullets">
60-
{item.bullets.map((bullet) => (
61-
<li>{bullet}</li>
62-
))}
63-
</ul>
111+
<div class="spotlight-panel-content">
112+
<div class="spotlight-panel-copy">
113+
<p class="section-kicker">{item.kicker}</p>
114+
<h3>{item.title}</h3>
115+
<p>{item.body}</p>
116+
<ul class="detail-bullets">
117+
{item.bullets.map((bullet) => (
118+
<li>{bullet}</li>
119+
))}
120+
</ul>
121+
</div>
122+
<div class="spotlight-panel-visual" aria-hidden="true" set:html={surfaceVisuals[item.id] ?? ""} />
123+
</div>
64124
</article>
65125
))}
66126
</div>

‎apps/marketing/src/components/FaqSection.astro‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,14 @@ const { faqs } = Astro.props;
4545
);
4646
})}
4747
</div>
48+
49+
<div class="faq-extra kn-card" data-reveal style="transition-delay: 0.15s">
50+
<p><strong>Still have questions?</strong></p>
51+
<p>Join the community on Discord and talk to other builders using OK Code.</p>
52+
<a href="https://discord.gg/jn4EGJjrvv" target="_blank" rel="noopener noreferrer" class="secondary-button faq-discord-btn">
53+
Join Discord
54+
</a>
55+
</div>
4856
</section>
4957

5058
<style>

‎apps/marketing/src/components/FeatureGrid.astro‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,31 @@ const icons = [
99
`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7h18"/><path d="M3 12h12"/><path d="M3 17h8"/><path d="M17 11l4 4-4 4"/></svg>`,
1010
`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"/></svg>`
1111
] as const;
12+
13+
const visuals = [
14+
// Card 1: Thread list pills
15+
`<div class="fv-threads">
16+
<div class="fv-thread fv-thread--active"></div>
17+
<div class="fv-thread"></div>
18+
<div class="fv-thread fv-thread--short"></div>
19+
<div class="fv-thread"></div>
20+
</div>`,
21+
// Card 2: Diff lines
22+
`<div class="fv-diff">
23+
<div class="fv-line fv-line--add"></div>
24+
<div class="fv-line fv-line--add fv-line--short"></div>
25+
<div class="fv-line fv-line--remove"></div>
26+
<div class="fv-line"></div>
27+
</div>`,
28+
// Card 3: Progress dots
29+
`<div class="fv-progress">
30+
<span class="fv-dot fv-dot--done"></span>
31+
<span class="fv-connector fv-connector--done"></span>
32+
<span class="fv-dot fv-dot--done"></span>
33+
<span class="fv-connector"></span>
34+
<span class="fv-dot"></span>
35+
</div>`
36+
] as const;
1237
---
1338

1439
<section id="features" class="feature-grid feature-grid--bento" aria-label="Core product pillars" data-reveal data-reveal-children>
@@ -22,6 +47,7 @@ const icons = [
2247
</div>
2348
</div>
2449
<p>{pillar.body}</p>
50+
<div class="feature-card-visual" aria-hidden="true" set:html={visuals[index] ?? visuals[0]} />
2551
</article>
2652
))}
2753
</section>

‎apps/marketing/src/components/FinalCta.astro‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,10 @@
1010
<div class="final-cta-orb final-cta-orb--2"></div>
1111
</div>
1212
<div class="final-cta-content">
13+
<div class="final-cta-mark" aria-hidden="true">
14+
<div class="final-cta-mark-glow"></div>
15+
<img src="/icon.png" alt="" width="48" height="48" class="final-cta-mark-img" />
16+
</div>
1317
<p class="section-kicker">Ready</p>
1418
<h2>Stop building through tab chaos.</h2>
1519
<p>
@@ -88,6 +92,30 @@
8892
z-index: 1;
8993
}
9094

95+
.final-cta-mark {
96+
position: relative;
97+
display: flex;
98+
justify-content: center;
99+
margin-bottom: 1rem;
100+
}
101+
102+
.final-cta-mark-glow {
103+
position: absolute;
104+
width: 6rem;
105+
height: 6rem;
106+
border-radius: 999px;
107+
background: radial-gradient(circle, rgba(202, 58, 41, 0.15), transparent 70%);
108+
filter: blur(16px);
109+
animation: float 6s ease-in-out infinite;
110+
pointer-events: none;
111+
}
112+
113+
.final-cta-mark-img {
114+
position: relative;
115+
border-radius: 1rem;
116+
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
117+
}
118+
91119
@keyframes float {
92120
0%, 100% { transform: translateY(0); }
93121
50% { transform: translateY(-12px); }

‎apps/marketing/src/components/Hero.astro‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,44 @@
5151
</a>
5252
</div>
5353

54+
<!-- Product visual mockup -->
55+
<div class="hero-visual-stage" aria-hidden="true">
56+
<div class="hero-stage-chrome">
57+
<div class="hero-stage-dots"><span></span><span></span><span></span></div>
58+
<span class="hero-stage-title">OK Code</span>
59+
<div class="hero-stage-badge">Thread</div>
60+
</div>
61+
<div class="hero-stage-body">
62+
<div class="hero-stage-sidebar">
63+
<div class="hero-stage-sidebar-title"></div>
64+
<div class="hero-stage-thread hero-stage-thread--active"></div>
65+
<div class="hero-stage-thread"></div>
66+
<div class="hero-stage-thread hero-stage-thread--short"></div>
67+
<div class="hero-stage-thread"></div>
68+
</div>
69+
<div class="hero-stage-main">
70+
<div class="hero-stage-msg hero-stage-msg--lg"></div>
71+
<div class="hero-stage-msg"></div>
72+
<div class="hero-stage-msg hero-stage-msg--sm"></div>
73+
<div class="hero-stage-msg hero-stage-msg--lg"></div>
74+
<div class="hero-stage-msg"></div>
75+
<div class="hero-stage-msg hero-stage-msg--xs"></div>
76+
</div>
77+
<div class="hero-stage-panel">
78+
<div class="hero-stage-panel-head">
79+
<span class="hero-stage-panel-label">Diff</span>
80+
<span class="hero-stage-panel-status">+3 −1</span>
81+
</div>
82+
<div class="hero-stage-line hero-stage-line--add"></div>
83+
<div class="hero-stage-line hero-stage-line--add hero-stage-line--short"></div>
84+
<div class="hero-stage-line hero-stage-line--remove"></div>
85+
<div class="hero-stage-line"></div>
86+
<div class="hero-stage-line hero-stage-line--add"></div>
87+
<div class="hero-stage-line hero-stage-line--short"></div>
88+
</div>
89+
</div>
90+
</div>
91+
5492
<div class="hero-meta hero-meta--centered">
5593
<a href="/download" class="other-platforms">Other platforms</a>
5694
<div class="hero-pills" aria-label="Product highlights">

‎apps/marketing/src/components/ThemeShowcase.astro‎

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,13 @@ interface Props {
1515
1616
const { themes } = Astro.props;
1717
const defaultId = themes[0]?.id ?? "";
18+
19+
/** Palette swatches per theme (bg, accent, secondary, text, muted) */
20+
const palettes: Record<string, string[]> = {
21+
"iridescent-void": ["#050507", "#67e8f9", "#a855f7", "#e8ecf0", "#4a5060"],
22+
"solar-witch": ["#0a0806", "#fb923c", "#fbbf24", "#e8ecf0", "#5a4a3a"],
23+
"deep-sea-terminal": ["#040810", "#22d3ee", "#5eead4", "#e8ecf0", "#3a4a5a"],
24+
};
1825
---
1926

2027
<section class="theme-section" data-tab-group data-tab-default={defaultId} data-reveal>
@@ -59,18 +66,32 @@ const defaultId = themes[0]?.id ?? "";
5966
>
6067
<div class="theme-preview-bar">
6168
<span></span><span></span><span></span>
69+
<span class="theme-preview-toolbar-label">OK Code</span>
6270
</div>
6371
<div class="theme-preview-body">
64-
<div class="theme-preview-sidebar"></div>
72+
<div class="theme-preview-sidebar">
73+
<div class="theme-sidebar-item theme-sidebar-item--active"></div>
74+
<div class="theme-sidebar-item"></div>
75+
<div class="theme-sidebar-item theme-sidebar-item--short"></div>
76+
</div>
6577
<div class="theme-preview-main">
6678
<div class="theme-preview-line theme-preview-line--short"></div>
6779
<div class="theme-preview-line"></div>
6880
<div class="theme-preview-line theme-preview-line--accent"></div>
6981
<div class="theme-preview-line theme-preview-line--medium"></div>
82+
<div class="theme-preview-line theme-preview-line--short"></div>
83+
<div class="theme-preview-line"></div>
84+
<div class="theme-preview-line theme-preview-line--accent theme-preview-line--medium"></div>
85+
<div class="theme-preview-line theme-preview-line--short"></div>
7086
</div>
7187
</div>
88+
<div class="theme-palette" aria-label="Color palette">
89+
{(palettes[theme.id] ?? []).map((color) => (
90+
<span class="theme-swatch" style={`background: ${color}`}></span>
91+
))}
92+
</div>
7293
</div>
73-
<div class="theme-note kn-card">
94+
<div class="theme-note kn-card" style={`border-left: 3px solid ${theme.accent}`}>
7495
<h3>{theme.label}</h3>
7596
<p class="theme-vibe">{theme.vibe}</p>
7697
<p>{theme.body}</p>

‎apps/marketing/src/components/TrustStrip.astro‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,16 +7,19 @@ const items = [
77
icon: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>`,
88
label: "Made for builders",
99
text: "Designed around real AI coding workflows",
10+
metric: "5 integrated surfaces",
1011
},
1112
{
1213
icon: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>`,
1314
label: "Calm by default",
1415
text: "Less context switching, more legible work",
16+
metric: "Zero context switching",
1517
},
1618
{
1719
icon: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg>`,
1820
label: "Close to the metal",
1921
text: "Open source, desktop-aware, release-friendly",
22+
metric: "100% open source — MIT",
2023
},
2124
];
2225
---
@@ -27,6 +30,7 @@ const items = [
2730
<span class="trust-icon" set:html={item.icon} />
2831
<span class="trust-label">{item.label}</span>
2932
<strong>{item.text}</strong>
33+
<span class="trust-metric">{item.metric}</span>
3034
</div>
3135
))}
3236
</section>
@@ -73,4 +77,12 @@ const items = [
7377
width: 100%;
7478
height: 100%;
7579
}
80+
81+
.trust-metric {
82+
display: block;
83+
margin-top: 0.5rem;
84+
font-size: 0.78rem;
85+
color: var(--kn-landing-text-dim, #4a5060);
86+
letter-spacing: 0.02em;
87+
}
7688
</style>

0 commit comments

Comments
 (0)