Skip to content

Commit a04658f

Browse files
BunsDevBunsDev
authored
feat(marketing): prepare okcode marketing updates (#145)
1 parent 7a6b966 commit a04658f

11 files changed

Lines changed: 794 additions & 256 deletions

File tree

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

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
---
2+
const starCount = 160;
3+
let seed = 42;
4+
const rand = () => {
5+
seed = (seed * 16807) % 2147483647;
6+
return (seed - 1) / 2147483646;
7+
};
8+
9+
const stars = Array.from({ length: starCount }, (_, i) => {
10+
const twinkle = rand() < 0.3;
11+
return {
12+
id: i,
13+
x: (rand() * 100).toFixed(3),
14+
y: (rand() * 100).toFixed(3),
15+
r: rand() < 0.85 ? (0.4 + rand() * 0.5).toFixed(3) : (0.8 + rand() * 0.6).toFixed(3),
16+
opacity: (0.15 + rand() * 0.45).toFixed(3),
17+
delay: (rand() * 8).toFixed(3),
18+
twinkle,
19+
};
20+
});
21+
---
22+
23+
<div class="kn-threads" aria-hidden="true">
24+
<svg viewBox="0 0 1440 900" preserveAspectRatio="xMidYMid slice" fill="none" xmlns="http://www.w3.org/2000/svg" class="kn-threads-svg">
25+
<path d="M -80 520 C 180 440, 380 620, 620 460 S 980 340, 1520 480" class="kn-thread kn-thread-a" />
26+
<path d="M 1260 -40 C 1060 160, 860 300, 680 400" class="kn-thread kn-thread-b" />
27+
<path d="M 600 490 C 460 590, 280 720, 60 940" class="kn-thread kn-thread-b" />
28+
<path d="M -40 180 C 200 160, 440 260, 560 340" class="kn-thread kn-thread-c" />
29+
<path d="M -60 780 C 300 740, 600 800, 900 720 S 1300 680, 1520 760" class="kn-thread kn-thread-d" />
30+
<path d="M -40 320 C 200 300, 420 380, 640 340 S 960 260, 1480 380" class="kn-thread kn-thread-claw" />
31+
<path d="M 1100 -20 C 940 140, 780 300, 660 420" class="kn-thread kn-thread-claw-hi" />
32+
<path d="M 620 500 C 520 580, 380 700, 160 920" class="kn-thread kn-thread-claw-hi" />
33+
<path d="M 1520 200 C 1200 260, 900 180, 640 280 S 300 360, -40 240" class="kn-thread kn-thread-ocean" />
34+
<path d="M -40 660 C 200 620, 500 700, 780 640 S 1200 560, 1520 640" class="kn-thread kn-thread-ocean-hi" />
35+
<circle cx="640" cy="462" r="3" class="kn-dot" />
36+
<circle cx="640" cy="462" r="14" class="kn-glow" />
37+
<circle cx="640" cy="462" r="30" fill="var(--kn-landing-accent-dim)" opacity="0.1" />
38+
<circle cx="800" cy="300" r="2" fill="var(--kn-landing-accent)" opacity="0.3" />
39+
<circle cx="800" cy="300" r="10" fill="var(--kn-landing-accent)" opacity="0.04" />
40+
</svg>
41+
</div>
42+
43+
<div class="kn-stars" aria-hidden="true">
44+
<svg width="100%" height="100%" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
45+
{stars.map((star) => (
46+
<circle
47+
cx={`${star.x}%`}
48+
cy={`${star.y}%`}
49+
r={star.r}
50+
fill="var(--kn-landing-star-color)"
51+
opacity={star.opacity}
52+
class:list={{ "kn-star-twinkle": star.twinkle }}
53+
style={star.twinkle ? `animation-delay:${star.delay}s` : undefined}
54+
/>
55+
))}
56+
</svg>
57+
</div>

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

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,4 @@
11
---
2-
/**
3-
* Core Surfaces — tabbed spotlight section showing Threads, Diffs, Preview, PR Review, Actions.
4-
* Uses CSS crossfade transitions and keyboard navigation.
5-
*/
6-
72
interface Surface {
83
id: string;
94
label: string;
@@ -21,7 +16,7 @@ const { surfaces } = Astro.props;
2116
const defaultId = surfaces[0]?.id ?? "";
2217
---
2318

24-
<section class="spotlight" data-tab-group data-tab-default={defaultId} data-reveal>
19+
<section id="surfaces" class="spotlight" data-tab-group data-tab-default={defaultId} data-reveal>
2520
<div class="spotlight-copy">
2621
<p class="section-kicker">Core surfaces</p>
2722
<h2 class="section-title">Built for the way real AI coding sessions actually unfold.</h2>
@@ -51,7 +46,7 @@ const defaultId = surfaces[0]?.id ?? "";
5146
<div class="spotlight-panels">
5247
{surfaces.map((item) => (
5348
<article
54-
class="spotlight-panel"
49+
class="spotlight-panel kn-card"
5550
id={`panel-${item.id}`}
5651
data-tab-panel={item.id}
5752
role="tabpanel"

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

Lines changed: 28 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,43 @@
11
---
2-
/**
3-
* FAQ section — two-column grid of Q&A cards.
4-
*/
5-
62
interface Props {
73
faqs: ReadonlyArray<{ question: string; answer: string }>;
84
}
95
106
const { faqs } = Astro.props;
117
---
128

13-
<section class="faq-section" aria-label="Frequently asked questions" data-reveal>
9+
<section id="faq" class="faq-section" aria-label="Frequently asked questions" data-reveal>
1410
<div class="section-heading">
1511
<p class="section-kicker">FAQ</p>
1612
<h2 class="section-title">What people need to know before they click.</h2>
1713
</div>
1814

19-
<div class="faq-grid">
20-
{faqs.map((item) => (
21-
<article class="faq-card">
22-
<h3>{item.question}</h3>
23-
<p>{item.answer}</p>
24-
</article>
25-
))}
15+
<div class="faq-shell kn-card" data-faq-root>
16+
{faqs.map((item, index) => {
17+
const id = `faq-${index}`;
18+
return (
19+
<article class="faq-item" data-faq-item>
20+
<button
21+
type="button"
22+
class="faq-trigger"
23+
aria-expanded={index === 0 ? "true" : "false"}
24+
aria-controls={`${id}-panel`}
25+
data-faq-trigger
26+
>
27+
<span>{item.question}</span>
28+
<span class="faq-chevron" aria-hidden="true">⌄</span>
29+
</button>
30+
<div
31+
id={`${id}-panel`}
32+
class="faq-panel"
33+
data-faq-panel
34+
aria-hidden={index === 0 ? "false" : "true"}
35+
style={index === 0 ? "max-height: 220px; opacity: 1;" : "max-height: 0px; opacity: 0;"}
36+
>
37+
<p>{item.answer}</p>
38+
</div>
39+
</article>
40+
);
41+
})}
2642
</div>
2743
</section>

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

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,26 @@
11
---
2-
/**
3-
* Feature grid — three core product pillars.
4-
*/
5-
62
interface Props {
73
pillars: ReadonlyArray<{ eyebrow: string; title: string; body: string }>;
84
}
95
106
const { pillars } = Astro.props;
7+
const icons = [
8+
`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v20"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7H14.5a3.5 3.5 0 0 1 0 7H6"/></svg>`,
9+
`<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>`,
10+
`<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>`
11+
] as const;
1112
---
1213

13-
<section class="feature-grid" aria-label="Core product pillars" data-reveal>
14-
{pillars.map((pillar) => (
15-
<article class="feature-card">
16-
<div class="feature-eyebrow">{pillar.eyebrow}</div>
17-
<h2>{pillar.title}</h2>
14+
<section id="features" class="feature-grid feature-grid--bento" aria-label="Core product pillars" data-reveal>
15+
{pillars.map((pillar, index) => (
16+
<article class={`feature-card feature-card--bento feature-card--${index + 1}`}>
17+
<div class="feature-card-head">
18+
<span class="kn-ico-wrap feature-icon" set:html={icons[index] ?? icons[0]} />
19+
<div class="feature-card-copy">
20+
<div class="feature-eyebrow">{pillar.eyebrow}</div>
21+
<h2>{pillar.title}</h2>
22+
</div>
23+
</div>
1824
<p>{pillar.body}</p>
1925
</article>
2026
))}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
*/
55
---
66

7-
<section class="final-cta" data-reveal>
7+
<section class="final-cta kn-card" data-reveal>
88
<p class="section-kicker">Ready</p>
99
<h2>Stop building through tab chaos.</h2>
1010
<p>

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

Lines changed: 16 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,23 @@
11
---
22
/**
3-
* Hero section — headline, CTA, and glassmorphic workspace mockup.
3+
* Hero section — ClawDash-style centered hero with OK Code content.
44
*/
55
---
66

77
<section class="hero" data-reveal>
8-
<div class="hero-copy">
9-
<div class="eyebrow">
10-
<span class="eyebrow-dot" aria-hidden="true"></span>
11-
AI-native code workspace
8+
<div class="hero-copy hero-copy--centered">
9+
<a href="https://github.com/OpenKnots/okcode/releases" class="kn-pill">
10+
<span class="kn-pill-badge">New</span>
11+
<span class="kn-pill-text">Premium AI coding workspace for desktop + web</span>
12+
<span class="kn-pill-arrow" aria-hidden="true">&rarr;</span>
13+
</a>
14+
15+
<div class="hero-mark" aria-hidden="true">
16+
<div class="hero-mark-glow hero-mark-glow--violet"></div>
17+
<div class="hero-mark-glow hero-mark-glow--cyan"></div>
18+
<div class="hero-mark-core">
19+
<img src="/icon.png" alt="" width="88" height="88" />
20+
</div>
1221
</div>
1322

1423
<h1 class="tagline">The beautiful workspace for shipping with AI.</h1>
@@ -19,7 +28,7 @@
1928
prompts.
2029
</p>
2130

22-
<div class="hero-actions">
31+
<div class="hero-actions hero-actions--centered">
2332
<a id="download-btn" href="https://github.com/OpenKnots/okcode/releases" class="hero-button">
2433
<span class="hero-button-shine" aria-hidden="true"></span>
2534
<span id="download-label">Download OK Code</span>
@@ -35,7 +44,7 @@
3544
</a>
3645
</div>
3746

38-
<div class="hero-meta">
47+
<div class="hero-meta hero-meta--centered">
3948
<a href="/download" class="other-platforms">Other platforms</a>
4049
<div class="hero-pills" aria-label="Product highlights">
4150
<span>Desktop + web</span>
@@ -46,81 +55,4 @@
4655
</div>
4756
</div>
4857
</div>
49-
50-
<div class="hero-visual" aria-hidden="true">
51-
<div class="hero-glow hero-glow--violet"></div>
52-
<div class="hero-glow hero-glow--cyan"></div>
53-
54-
<div class="orb orb--one"></div>
55-
<div class="orb orb--two"></div>
56-
57-
<div class="glass-stage">
58-
<div class="glass-toolbar">
59-
<div class="traffic-lights"><span></span><span></span><span></span></div>
60-
<div class="glass-label">OK Code</div>
61-
<div class="glass-badge">Live workspace</div>
62-
</div>
63-
64-
<div class="glass-body">
65-
<aside class="rail rail--sidebar">
66-
<div class="rail-title"></div>
67-
<div class="rail-chip rail-chip--active"></div>
68-
<div class="rail-chip"></div>
69-
<div class="rail-chip"></div>
70-
<div class="rail-chip rail-chip--short"></div>
71-
</aside>
72-
73-
<section class="center-stack">
74-
<div class="panel panel--thread">
75-
<div class="panel-head">
76-
<span class="panel-kicker">Thread</span>
77-
<span class="panel-status">Agent warm</span>
78-
</div>
79-
<div class="message message--large"></div>
80-
<div class="message"></div>
81-
<div class="message message--short"></div>
82-
</div>
83-
84-
<div class="panel-row">
85-
<div class="panel panel--diff">
86-
<div class="panel-head">
87-
<span class="panel-kicker">Latest diff</span>
88-
</div>
89-
<div class="code-line code-line--add"></div>
90-
<div class="code-line"></div>
91-
<div class="code-line code-line--remove"></div>
92-
<div class="code-line code-line--short"></div>
93-
</div>
94-
95-
<div class="panel panel--preview">
96-
<div class="panel-head">
97-
<span class="panel-kicker">Preview</span>
98-
</div>
99-
<div class="preview-window">
100-
<div class="preview-nav"></div>
101-
<div class="preview-card"></div>
102-
<div class="preview-line"></div>
103-
<div class="preview-line preview-line--short"></div>
104-
</div>
105-
</div>
106-
</div>
107-
</section>
108-
109-
<aside class="rail rail--meta">
110-
<div class="meta-card">
111-
<span class="meta-label">Review ready</span>
112-
<strong>3 files changed</strong>
113-
</div>
114-
<div class="meta-card">
115-
<span class="meta-label">Project action</span>
116-
<strong>Release flow saved</strong>
117-
</div>
118-
<div class="meta-card">
119-
<span class="meta-label">Mode</span>
120-
<strong>Calm dark glass</strong>
121-
</div>
122-
</aside>
123-
</div>
124-
</div>
125-
</div>
12658
</section>

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

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,4 @@
11
---
2-
/**
3-
* Theme Showcase — tabbed visual identity section with CSS-driven crossfade between themes.
4-
*/
5-
62
interface Theme {
73
id: string;
84
label: string;
@@ -58,7 +54,7 @@ const defaultId = themes[0]?.id ?? "";
5854
data-active={theme.id === defaultId ? "true" : "false"}
5955
>
6056
<div
61-
class="theme-preview-card"
57+
class="theme-preview-card kn-card"
6258
style={`--theme-gradient:${theme.gradient}; --theme-border:${theme.border}; --theme-accent:${theme.accent};`}
6359
>
6460
<div class="theme-preview-bar">
@@ -74,7 +70,7 @@ const defaultId = themes[0]?.id ?? "";
7470
</div>
7571
</div>
7672
</div>
77-
<div class="theme-note">
73+
<div class="theme-note kn-card">
7874
<h3>{theme.label}</h3>
7975
<p class="theme-vibe">{theme.vibe}</p>
8076
<p>{theme.body}</p>

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,15 @@
55
---
66

77
<section class="trust-strip" aria-label="Why teams use OK Code" data-reveal>
8-
<div class="trust-item">
8+
<div class="trust-item kn-card">
99
<span class="trust-label">Made for builders</span>
1010
<strong>Designed around real AI coding workflows</strong>
1111
</div>
12-
<div class="trust-item">
12+
<div class="trust-item kn-card">
1313
<span class="trust-label">Calm by default</span>
1414
<strong>Less context switching, more legible work</strong>
1515
</div>
16-
<div class="trust-item">
16+
<div class="trust-item kn-card">
1717
<span class="trust-label">Close to the metal</span>
1818
<strong>Open source, desktop-aware, release-friendly</strong>
1919
</div>

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

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,4 @@
11
---
2-
/**
3-
* Workflow section — four-step numbered cards.
4-
*/
5-
62
interface Props {
73
steps: ReadonlyArray<{ step: string; title: string; body: string }>;
84
}
@@ -20,9 +16,9 @@ const { steps } = Astro.props;
2016
</p>
2117
</div>
2218

23-
<div class="workflow-grid">
19+
<div class="workflow-grid workflow-grid--cards">
2420
{steps.map((item) => (
25-
<article class="workflow-card">
21+
<article class="workflow-card kn-card">
2622
<span class="workflow-step">{item.step}</span>
2723
<h3>{item.title}</h3>
2824
<p>{item.body}</p>

0 commit comments

Comments
 (0)