diff --git a/apps/marketing/src/components/Background.astro b/apps/marketing/src/components/Background.astro new file mode 100644 index 000000000..f75309175 --- /dev/null +++ b/apps/marketing/src/components/Background.astro @@ -0,0 +1,57 @@ +--- +const starCount = 160; +let seed = 42; +const rand = () => { + seed = (seed * 16807) % 2147483647; + return (seed - 1) / 2147483646; +}; + +const stars = Array.from({ length: starCount }, (_, i) => { + const twinkle = rand() < 0.3; + return { + id: i, + x: (rand() * 100).toFixed(3), + y: (rand() * 100).toFixed(3), + r: rand() < 0.85 ? (0.4 + rand() * 0.5).toFixed(3) : (0.8 + rand() * 0.6).toFixed(3), + opacity: (0.15 + rand() * 0.45).toFixed(3), + delay: (rand() * 8).toFixed(3), + twinkle, + }; +}); +--- + + + + diff --git a/apps/marketing/src/components/CoreSurfaces.astro b/apps/marketing/src/components/CoreSurfaces.astro index fcdec9644..94c9ce3e3 100644 --- a/apps/marketing/src/components/CoreSurfaces.astro +++ b/apps/marketing/src/components/CoreSurfaces.astro @@ -1,9 +1,4 @@ --- -/** - * Core Surfaces — tabbed spotlight section showing Threads, Diffs, Preview, PR Review, Actions. - * Uses CSS crossfade transitions and keyboard navigation. - */ - interface Surface { id: string; label: string; @@ -21,7 +16,7 @@ const { surfaces } = Astro.props; const defaultId = surfaces[0]?.id ?? ""; --- -
+

Core surfaces

Built for the way real AI coding sessions actually unfold.

@@ -51,7 +46,7 @@ const defaultId = surfaces[0]?.id ?? "";
{surfaces.map((item) => (
; } @@ -10,18 +6,38 @@ interface Props { const { faqs } = Astro.props; --- -
+

FAQ

What people need to know before they click.

-
- {faqs.map((item) => ( -
-

{item.question}

-

{item.answer}

-
- ))} +
+ {faqs.map((item, index) => { + const id = `faq-${index}`; + return ( +
+ +
+

{item.answer}

+
+
+ ); + })}
diff --git a/apps/marketing/src/components/FeatureGrid.astro b/apps/marketing/src/components/FeatureGrid.astro index f94f7e6b1..a67cccde7 100644 --- a/apps/marketing/src/components/FeatureGrid.astro +++ b/apps/marketing/src/components/FeatureGrid.astro @@ -1,20 +1,26 @@ --- -/** - * Feature grid — three core product pillars. - */ - interface Props { pillars: ReadonlyArray<{ eyebrow: string; title: string; body: string }>; } const { pillars } = Astro.props; +const icons = [ + ``, + ``, + `` +] as const; --- -
- {pillars.map((pillar) => ( -
-
{pillar.eyebrow}
-

{pillar.title}

+
+ {pillars.map((pillar, index) => ( +
+
+ +
+
{pillar.eyebrow}
+

{pillar.title}

+
+

{pillar.body}

))} diff --git a/apps/marketing/src/components/FinalCta.astro b/apps/marketing/src/components/FinalCta.astro index e67809d3e..752dd9fc7 100644 --- a/apps/marketing/src/components/FinalCta.astro +++ b/apps/marketing/src/components/FinalCta.astro @@ -4,7 +4,7 @@ */ --- -
+

Ready

Stop building through tab chaos.

diff --git a/apps/marketing/src/components/Hero.astro b/apps/marketing/src/components/Hero.astro index ddd7dc036..3af5d136a 100644 --- a/apps/marketing/src/components/Hero.astro +++ b/apps/marketing/src/components/Hero.astro @@ -1,14 +1,23 @@ --- /** - * Hero section — headline, CTA, and glassmorphic workspace mockup. + * Hero section — ClawDash-style centered hero with OK Code content. */ ---

-
-
- - AI-native code workspace +
+ + New + Premium AI coding workspace for desktop + web + + + +

The beautiful workspace for shipping with AI.

@@ -19,7 +28,7 @@ prompts.

-
+
Download OK Code @@ -35,7 +44,7 @@
-
+
Other platforms
Desktop + web @@ -46,81 +55,4 @@
- -
diff --git a/apps/marketing/src/components/ThemeShowcase.astro b/apps/marketing/src/components/ThemeShowcase.astro index 3f7fed607..0652c0f07 100644 --- a/apps/marketing/src/components/ThemeShowcase.astro +++ b/apps/marketing/src/components/ThemeShowcase.astro @@ -1,8 +1,4 @@ --- -/** - * Theme Showcase — tabbed visual identity section with CSS-driven crossfade between themes. - */ - interface Theme { id: string; label: string; @@ -58,7 +54,7 @@ const defaultId = themes[0]?.id ?? ""; data-active={theme.id === defaultId ? "true" : "false"} >
@@ -74,7 +70,7 @@ const defaultId = themes[0]?.id ?? "";
-
+

{theme.label}

{theme.vibe}

{theme.body}

diff --git a/apps/marketing/src/components/TrustStrip.astro b/apps/marketing/src/components/TrustStrip.astro index ee0b0bc6a..55fcb6f7a 100644 --- a/apps/marketing/src/components/TrustStrip.astro +++ b/apps/marketing/src/components/TrustStrip.astro @@ -5,15 +5,15 @@ ---
-
+
Made for builders Designed around real AI coding workflows
-
+
Calm by default Less context switching, more legible work
-
+
Close to the metal Open source, desktop-aware, release-friendly
diff --git a/apps/marketing/src/components/WorkflowSection.astro b/apps/marketing/src/components/WorkflowSection.astro index 26ea949b5..ece7d88f5 100644 --- a/apps/marketing/src/components/WorkflowSection.astro +++ b/apps/marketing/src/components/WorkflowSection.astro @@ -1,8 +1,4 @@ --- -/** - * Workflow section — four-step numbered cards. - */ - interface Props { steps: ReadonlyArray<{ step: string; title: string; body: string }>; } @@ -20,9 +16,9 @@ const { steps } = Astro.props;

-
+
{steps.map((item) => ( -
+
{item.step}

{item.title}

{item.body}

diff --git a/apps/marketing/src/layouts/Layout.astro b/apps/marketing/src/layouts/Layout.astro index c3e3f97f2..debfbb4d1 100644 --- a/apps/marketing/src/layouts/Layout.astro +++ b/apps/marketing/src/layouts/Layout.astro @@ -1,5 +1,6 @@ --- import "@fontsource-variable/dm-sans"; +import Background from "../components/Background.astro"; interface Props { title?: string; @@ -18,13 +19,13 @@ const canonical = Astro.site ? new URL(Astro.url.pathname, Astro.site).href : nu const ogImage = Astro.site ? new URL(ogImagePath, Astro.site).href : null; --- - + - + {canonical && } @@ -34,7 +35,6 @@ const ogImage = Astro.site ? new URL(ogImagePath, Astro.site).href : null; {ogImage && } - @@ -42,24 +42,31 @@ const ogImage = Astro.site ? new URL(ogImagePath, Astro.site).href : null; {title} -
- + +
+ Features + Surfaces + FAQ + +
+ +
@@ -67,29 +74,72 @@ const ogImage = Astro.site ? new URL(ogImagePath, Astro.site).href : null;
-