-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
- New
- Premium AI coding workspace for desktop + web
- →
-
-
-
-
-
-
- 
-
+
-
+
+
+ The AI Platform to
+
-
+
+
+
+
+ Now available for all platforms
+
- The beautiful workspace for shipping with AI.
+ +
+ The AI Platform to
+
+ Build & Ship Code
+
- - Chat, diffs, preview, PR review, and release actions in one glassy desktop + web - workspace — so you can stay in flow instead of juggling tabs, terminals, and disposable - prompts. + +
+ Transform your development workflow with AI-powered code generation, + intelligent debugging, and seamless collaboration. Ship faster than ever.
-
-
-
-
- Download OK Code
+
+
-
-
-
-
- OK Code
-
Thread
+
+
+
+
- 50K+
+ Developers
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+ 10M+
+ Lines Generated
+
+
+ 99.9%
+ Uptime
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/apps/marketing/src/components/Workflow.astro b/apps/marketing/src/components/Workflow.astro
new file mode 100644
index 000000000..2c666c709
--- /dev/null
+++ b/apps/marketing/src/components/Workflow.astro
@@ -0,0 +1,131 @@
+---
+const steps = [
+ {
+ number: "01",
+ title: "Describe Your Intent",
+ description: "Tell OK Code what you want to build using natural language. Describe features, components, or entire applications.",
+ icon: ``,
+ },
+ {
+ number: "02",
+ title: "Review & Refine",
+ description: "Preview generated code in real-time. Make adjustments, ask questions, and iterate until it is perfect.",
+ icon: ``,
+ },
+ {
+ number: "03",
+ title: "Ship to Production",
+ description: "Deploy with confidence. OK Code generates production-ready, tested code that follows best practices.",
+ icon: ``,
+ },
+];
+---
+
+
+
+
+
+
+
diff --git a/apps/marketing/src/layouts/Layout.astro b/apps/marketing/src/layouts/Layout.astro
index db3c6dc9e..013ada341 100644
--- a/apps/marketing/src/layouts/Layout.astro
+++ b/apps/marketing/src/layouts/Layout.astro
@@ -1,1359 +1,63 @@
---
-import "@fontsource-variable/dm-sans";
-import Background from "../components/Background.astro";
+import "@fontsource-variable/inter";
+import "@fontsource-variable/jetbrains-mono";
+import "../styles/global.css";
interface Props {
title?: string;
description?: string;
- /** Path for og:image, relative to site root (requires PUBLIC_SITE_URL at build). */
- ogImagePath?: string;
}
-const {
- title = "OK Code",
- description = "A minimal GUI for coding agents like Codex and Claude. Web and desktop.",
- ogImagePath = "/icon.png",
+const {
+ title = "OK Code - The AI Platform to Build & Ship Code",
+ description = "Transform your development workflow with AI-powered code generation, intelligent debugging, and seamless collaboration. Ship faster than ever."
} = Astro.props;
const canonical = Astro.site ? new URL(Astro.url.pathname, Astro.site).href : null;
-const ogImage = Astro.site ? new URL(ogImagePath, Astro.site).href : null;
+const ogImage = Astro.site ? new URL("/og-image.png", Astro.site).href : null;
---
-
+
+
-
-
+
+
{canonical && }
+
+
{ogImage && }
+
+
{ogImage && }
+
+
{title}
+
-
- Skip to content
-
-
+
+
+
-
-
-
-
diff --git a/apps/marketing/src/styles/global.css b/apps/marketing/src/styles/global.css
new file mode 100644
index 000000000..ada94175b
--- /dev/null
+++ b/apps/marketing/src/styles/global.css
@@ -0,0 +1,342 @@
+@import "tailwindcss";
+
+@theme {
+ --color-background: oklch(0.13 0.02 260);
+ --color-foreground: oklch(0.98 0 0);
+
+ --color-primary: oklch(0.55 0.25 290);
+ --color-primary-foreground: oklch(1 0 0);
+
+ --color-secondary: oklch(0.18 0.01 260);
+ --color-secondary-foreground: oklch(0.98 0 0);
+
+ --color-muted: oklch(0.22 0.01 260);
+ --color-muted-foreground: oklch(0.65 0.01 260);
+
+ --color-accent: oklch(0.6 0.22 290);
+ --color-accent-foreground: oklch(1 0 0);
+
+ --color-card: oklch(0.14 0.01 260);
+ --color-card-foreground: oklch(0.98 0 0);
+
+ --color-border: oklch(0.2 0.01 260);
+ --color-ring: oklch(0.55 0.25 290);
+
+ --radius-lg: 0.75rem;
+ --radius-xl: 1rem;
+ --radius-2xl: 1.5rem;
+
+ --font-family-sans: "Inter Variable", ui-sans-serif, system-ui, sans-serif;
+ --font-family-mono: "JetBrains Mono Variable", ui-monospace, monospace;
+
+ --animate-fade-in: fade-in 0.6s ease-out forwards;
+ --animate-fade-in-up: fade-in-up 0.6s ease-out forwards;
+ --animate-fade-in-down: fade-in-down 0.6s ease-out forwards;
+ --animate-scale-in: scale-in 0.5s ease-out forwards;
+ --animate-pulse-slow: pulse-slow 4s ease-in-out infinite;
+ --animate-float: float 6s ease-in-out infinite;
+ --animate-shimmer: shimmer 2s linear infinite;
+ --animate-glow-pulse: glow-pulse 3s ease-in-out infinite;
+
+ @keyframes fade-in {
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+ }
+
+ @keyframes fade-in-up {
+ from {
+ opacity: 0;
+ transform: translateY(20px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+ }
+
+ @keyframes fade-in-down {
+ from {
+ opacity: 0;
+ transform: translateY(-20px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+ }
+
+ @keyframes scale-in {
+ from {
+ opacity: 0;
+ transform: scale(0.95);
+ }
+ to {
+ opacity: 1;
+ transform: scale(1);
+ }
+ }
+
+ @keyframes pulse-slow {
+ 0%,
+ 100% {
+ opacity: 0.4;
+ transform: scale(1);
+ }
+ 50% {
+ opacity: 0.6;
+ transform: scale(1.05);
+ }
+ }
+
+ @keyframes float {
+ 0%,
+ 100% {
+ transform: translateY(0);
+ }
+ 50% {
+ transform: translateY(-10px);
+ }
+ }
+
+ @keyframes shimmer {
+ 0% {
+ background-position: -200% 0;
+ }
+ 100% {
+ background-position: 200% 0;
+ }
+ }
+
+ @keyframes glow-pulse {
+ 0%,
+ 100% {
+ box-shadow: 0 0 40px -10px oklch(0.55 0.25 290 / 0.4);
+ }
+ 50% {
+ box-shadow: 0 0 60px -10px oklch(0.55 0.25 290 / 0.6);
+ }
+ }
+}
+
+* {
+ border-color: var(--color-border);
+}
+
+html {
+ scroll-behavior: smooth;
+}
+
+body {
+ background-color: var(--color-background);
+ color: var(--color-foreground);
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+::selection {
+ background-color: oklch(0.55 0.25 290 / 0.3);
+ color: var(--color-foreground);
+}
+
+/* Utility classes */
+@utility text-gradient {
+ background: linear-gradient(
+ to right,
+ var(--color-primary),
+ oklch(0.7 0.2 300),
+ oklch(0.75 0.18 310)
+ );
+ -webkit-background-clip: text;
+ background-clip: text;
+ color: transparent;
+}
+
+@utility text-gradient-subtle {
+ background: linear-gradient(
+ to right,
+ var(--color-foreground),
+ var(--color-foreground),
+ var(--color-muted-foreground)
+ );
+ -webkit-background-clip: text;
+ background-clip: text;
+ color: transparent;
+}
+
+@utility glass {
+ background-color: oklch(1 0 0 / 0.03);
+ backdrop-filter: blur(24px);
+ border: 1px solid oklch(1 0 0 / 0.08);
+}
+
+@utility glass-strong {
+ background-color: oklch(1 0 0 / 0.06);
+ backdrop-filter: blur(40px);
+ border: 1px solid oklch(1 0 0 / 0.12);
+}
+
+@utility glow-primary {
+ box-shadow: 0 0 40px -10px oklch(0.55 0.25 290 / 0.5);
+}
+
+@utility glow-primary-strong {
+ box-shadow: 0 0 60px -5px oklch(0.55 0.25 290 / 0.6);
+}
+
+@utility glow-subtle {
+ box-shadow: 0 0 80px -20px oklch(0.55 0.25 290 / 0.25);
+}
+
+@utility gradient-mask-b {
+ mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
+}
+
+@utility gradient-mask-t {
+ mask-image: linear-gradient(to top, black 60%, transparent 100%);
+}
+
+/* Component classes */
+@utility section-padding {
+ padding-top: 6rem;
+ padding-bottom: 6rem;
+}
+
+@utility container-narrow {
+ max-width: 64rem;
+ margin-left: auto;
+ margin-right: auto;
+ padding-left: 1rem;
+ padding-right: 1rem;
+}
+
+@utility container-wide {
+ max-width: 80rem;
+ margin-left: auto;
+ margin-right: auto;
+ padding-left: 1rem;
+ padding-right: 1rem;
+}
+
+@media (min-width: 640px) {
+ .section-padding {
+ padding-top: 8rem;
+ padding-bottom: 8rem;
+ }
+ .container-narrow,
+ .container-wide {
+ padding-left: 1.5rem;
+ padding-right: 1.5rem;
+ }
+}
+
+@media (min-width: 1024px) {
+ .section-padding {
+ padding-top: 10rem;
+ padding-bottom: 10rem;
+ }
+ .container-narrow,
+ .container-wide {
+ padding-left: 2rem;
+ padding-right: 2rem;
+ }
+}
+
+/* Button styles */
+.btn-primary {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ padding: 0.75rem 1.5rem;
+ font-size: 0.875rem;
+ font-weight: 500;
+ border-radius: 0.75rem;
+ background-color: var(--color-primary);
+ color: var(--color-primary-foreground);
+ transition: all 0.3s;
+}
+
+.btn-primary:hover {
+ background-color: oklch(0.5 0.25 290);
+ transform: scale(1.02);
+}
+
+.btn-primary:active {
+ transform: scale(0.98);
+}
+
+.btn-secondary {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ padding: 0.75rem 1.5rem;
+ font-size: 0.875rem;
+ font-weight: 500;
+ border-radius: 0.75rem;
+ background-color: oklch(1 0 0 / 0.03);
+ backdrop-filter: blur(24px);
+ border: 1px solid oklch(1 0 0 / 0.08);
+ color: var(--color-foreground);
+ transition: all 0.3s;
+}
+
+.btn-secondary:hover {
+ background-color: oklch(1 0 0 / 0.1);
+ transform: scale(1.02);
+}
+
+.btn-secondary:active {
+ transform: scale(0.98);
+}
+
+.card-hover {
+ transition: all 0.5s;
+}
+
+.card-hover:hover {
+ transform: translateY(-4px);
+ box-shadow: 0 20px 40px -15px oklch(0.55 0.25 290 / 0.08);
+}
+
+.link-hover {
+ transition: color 0.2s;
+}
+
+.link-hover:hover {
+ color: var(--color-foreground);
+}
+
+/* Stagger animation delays */
+.stagger-1 {
+ animation-delay: 0.1s;
+}
+.stagger-2 {
+ animation-delay: 0.2s;
+}
+.stagger-3 {
+ animation-delay: 0.3s;
+}
+.stagger-4 {
+ animation-delay: 0.4s;
+}
+.stagger-5 {
+ animation-delay: 0.5s;
+}
+
+/* Initially hidden for animation */
+.animate-on-scroll {
+ opacity: 0;
+}
+
+/* Noise texture overlay */
+.noise-overlay::before {
+ content: "";
+ position: absolute;
+ inset: 0;
+ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
+ opacity: 0.02;
+ pointer-events: none;
+}
diff --git a/bun.lock b/bun.lock
index 9576d8ef6..dd72546c7 100644
--- a/bun.lock
+++ b/bun.lock
@@ -1,5 +1,6 @@
{
"lockfileVersion": 1,
+ "configVersion": 0,
"workspaces": {
"": {
"name": "@okcode/monorepo",
@@ -39,10 +40,14 @@
"version": "0.0.0",
"dependencies": {
"@fontsource-variable/dm-sans": "^5.2.8",
- "astro": "^6.0.4",
+ "@fontsource-variable/inter": "^5.1.1",
+ "@fontsource-variable/jetbrains-mono": "^5.1.1",
+ "astro": "^6.1.2",
},
"devDependencies": {
"@astrojs/check": "^0.9.7",
+ "@tailwindcss/vite": "^4.2.2",
+ "tailwindcss": "^4.0.0",
"typescript": "catalog:",
"vitest": "catalog:",
},
@@ -474,6 +479,10 @@
"@fontsource-variable/dm-sans": ["@fontsource-variable/dm-sans@5.2.8", "", {}, "sha512-AxkvMTvNWgfrmlyjiV05vlHYJa+nRQCf1EfvIrQAPBpFJW0O9VTz7oAFr9S3lvbWdmnFoBk7yFqQL86u64nl2g=="],
+ "@fontsource-variable/inter": ["@fontsource-variable/inter@5.2.8", "", {}, "sha512-kOfP2D+ykbcX/P3IFnokOhVRNoTozo5/JxhAIVYLpea/UBmCQ/YWPBfWIDuBImXX/15KH+eKh4xpEUyS2sQQGQ=="],
+
+ "@fontsource-variable/jetbrains-mono": ["@fontsource-variable/jetbrains-mono@5.2.8", "", {}, "sha512-WBA9elru6Jdp5df2mES55wuOO0WIrn3kpXnI4+W2ek5u3ZgLS9XS4gmIlcQhiZOWEKl95meYdvK7xI+ETLCq/Q=="],
+
"@formatjs/bigdecimal": ["@formatjs/bigdecimal@0.2.0", "", {}, "sha512-GeaxHZbUoYvHL9tC5eltHLs+1zU70aPw0s7LwqgktIzF5oMhNY4o4deEtusJMsq7WFJF3Ye2zQEzdG8beVk73w=="],
"@formatjs/ecma402-abstract": ["@formatjs/ecma402-abstract@3.2.0", "", { "dependencies": { "@formatjs/bigdecimal": "0.2.0", "@formatjs/fast-memoize": "3.1.1", "@formatjs/intl-localematcher": "0.8.2" } }, "sha512-dHnqHgBo6GXYGRsepaE1wmsC2etaivOWd5VaJstZd+HI2zR3DCUjbDVZRtoPGkkXZmyHvBwrdEUuqfvzhF/DtQ=="],
@@ -1528,7 +1537,7 @@
"isomorphic.js": ["isomorphic.js@0.2.5", "", {}, "sha512-PIeMbHqMt4DnUP3MA/Flc0HElYjMXArsw1qwJZcm9sqR8mq3l8NYizFMty0pWwE/tzIGH3EKK5+jes5mAr85yw=="],
- "jiti": ["jiti@2.6.1", "", { "bin": { "jiti": "lib/jiti-cli.mjs" } }, "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ=="],
+ "jiti": ["jiti@1.21.7", "", { "bin": { "jiti": "bin/jiti.js" } }, "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A=="],
"joi": ["joi@18.1.2", "", { "dependencies": { "@hapi/address": "^5.1.1", "@hapi/formula": "^3.0.2", "@hapi/hoek": "^11.0.7", "@hapi/pinpoint": "^2.0.1", "@hapi/tlds": "^1.1.1", "@hapi/topo": "^6.0.2", "@standard-schema/spec": "^1.1.0" } }, "sha512-rF5MAmps5esSlhCA+N1b6IYHDw9j/btzGaqfgie522jS02Ju/HXBxamlXVlKEHAxoMKQL77HWI8jlqWsFuekZA=="],
@@ -2358,6 +2367,8 @@
"@shikijs/primitive/@shikijs/types": ["@shikijs/types@4.0.2", "", { "dependencies": { "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4" } }, "sha512-qzbeRooUTPnLE+sHD/Z8DStmaDgnbbc/pMrU203950aRqjX/6AFHeDYT+j00y2lPdz0ywJKx7o/7qnqTivtlXg=="],
+ "@tailwindcss/node/jiti": ["jiti@2.6.1", "", { "bin": { "jiti": "lib/jiti-cli.mjs" } }, "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ=="],
+
"@tailwindcss/oxide-wasm32-wasi/@emnapi/core": ["@emnapi/core@1.9.1", "", { "dependencies": { "@emnapi/wasi-threads": "1.2.0", "tslib": "^2.4.0" }, "bundled": true }, "sha512-mukuNALVsoix/w1BJwFzwXBN/dHeejQtuVzcDsfOEsdpCumXb/E9j8w11h5S54tT1xhifGfbbSm/ICrObRb3KA=="],
"@tailwindcss/oxide-wasm32-wasi/@emnapi/runtime": ["@emnapi/runtime@1.9.1", "", { "dependencies": { "tslib": "^2.4.0" }, "bundled": true }, "sha512-VYi5+ZVLhpgK4hQ0TAjiQiZ6ol0oe4mBx7mVv7IflsiEp0OWoVsp/+f9Vc1hOhE0TtkORVrI1GvzyreqpgWtkA=="],
+
-
+
+
+
+
+
+
+
+ app.tsx
+
+
-
-
-
- Diff
- +3 −1
+
+
+
+
+
+
+
+
+ 1
2
3
4
5
6
7
8
9
10 +
+ 2
3
4
5
6
7
8
9
10 +
+ import {"{"} useState {"}"} from 'react'
+ import {"{"} Button {"}"} from '@/components/ui'
+
+ export function Counter() {"{"}
+ const [count, setCount] = useState(0)
+
+ return (
+ <Button onClick={"{"}() => setCount(c => c + 1){"}"}>
+ Count: {"{"}count{"}"}
+ </Button> +
+ + import {"{"} Button {"}"} from '@/components/ui'
+
+ export function Counter() {"{"}
+ const [count, setCount] = useState(0)
+
+ return (
+ <Button onClick={"{"}() => setCount(c => c + 1){"}"}>
+ Count: {"{"}count{"}"}
+ </Button> +
+
-
-
-
-
-
-
+
+ OK Code
+
+ Optimizing component with memoization...
- Other platforms
-
+
+
+
- Desktop + web
- Persistent threads
- Built-in diffs
- Local preview
- Open source
-
+
+
-
-
-
-
diff --git a/apps/marketing/src/components/Pricing.astro b/apps/marketing/src/components/Pricing.astro
new file mode 100644
index 000000000..a87911f9e
--- /dev/null
+++ b/apps/marketing/src/components/Pricing.astro
@@ -0,0 +1,136 @@
+---
+const plans = [
+ {
+ name: "Free",
+ price: "$0",
+ period: "",
+ description: "Perfect for trying out OK Code",
+ features: [
+ "50 AI generations per month",
+ "Basic code completion",
+ "Community support",
+ "Single project",
+ ],
+ cta: "Get Started",
+ highlighted: false,
+ },
+ {
+ name: "Pro",
+ price: "$20",
+ period: "/month",
+ description: "For professional developers",
+ features: [
+ "Unlimited AI generations",
+ "Advanced code analysis",
+ "Priority support",
+ "Unlimited projects",
+ "Team collaboration",
+ "Custom integrations",
+ ],
+ cta: "Start Free Trial",
+ highlighted: true,
+ },
+ {
+ name: "Enterprise",
+ price: "Custom",
+ period: "",
+ description: "For organizations at scale",
+ features: [
+ "Everything in Pro",
+ "SSO & SAML",
+ "Dedicated support",
+ "Custom AI training",
+ "On-premise deployment",
+ "SLA guarantee",
+ ],
+ cta: "Contact Sales",
+ highlighted: false,
+ },
+];
+
+const trustBadges = [
+ { icon: ``, label: "SOC 2 Compliant" },
+ { icon: ``, label: "Enterprise Security" },
+ { icon: ``, label: "Cancel Anytime" },
+];
+---
+
+
+ Scroll
+
+
+
+
+
+
+
+
+
+ Pricing
+
+ + Simple, transparent pricing +
++ Start free and scale as you grow. No hidden fees, no surprises. +
+
+ {plans.map((plan) => (
+
+
+
+
+ {plan.highlighted && (
+
+ ))}
+
+ Most Popular
+
+ )}
+
+
+
+
+ {plan.name}
+
+ {plan.price}
+ {plan.period && {plan.period}}
+
+ {plan.description}
+-
+ {plan.features.map((feature) => (
+
- + + {feature} + + ))} +
+ {trustBadges.map((badge) => (
+
+
+
+ ))}
+
+
+
+
+
+
+
+
+
+ How It Works
+
+ + From idea to production in minutes +
++ Our streamlined workflow gets you from concept to deployed code faster than ever before. +
+
+
+
+
+
+
+
+
+
+
+ {steps.map((step, index) => (
+
+
+
+ ))}
+
+
+
+
+
+ {index < steps.length - 1 && (
+
+ {step.number}
+
+
+
+
+
+
+ {step.title}
+{step.description}
+
+
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ # Your prompt
+
+
+
+
+ >
+ Create a responsive pricing table with three tiers: Free, Pro, and Enterprise.
+
+
+ >
+ Include monthly/yearly toggle and highlight the Pro plan as recommended.
+
+
+ >
+ Use modern styling with hover effects and smooth animations.
+
+
+
+
+
+ Generating
+
+ Creating production-ready pricing component...
+
-
-
-
-
-
-
-
-
-
-
-
+
+