From b185a4b80b83652230a4f103a1e3dc09b74510a6 Mon Sep 17 00:00:00 2001 From: v0 Date: Wed, 1 Apr 2026 06:07:57 +0000 Subject: [PATCH 1/4] feat: build Optimus-style marketing landing page Add Tailwind CSS to Astro and create Optimus-themed components Co-authored-by: Val Alexander <68980965+BunsDev@users.noreply.github.com> --- apps/marketing/astro.config.mjs | 2 + apps/marketing/package.json | 6 +- .../src/components/Capabilities.astro | 64 + apps/marketing/src/components/Footer.astro | 145 ++ .../marketing/src/components/GlobalEdge.astro | 101 ++ apps/marketing/src/components/Header.astro | 52 + apps/marketing/src/components/Hero.astro | 225 +-- apps/marketing/src/components/Pricing.astro | 134 ++ apps/marketing/src/components/Workflow.astro | 104 ++ apps/marketing/src/layouts/Layout.astro | 1338 +-------------- apps/marketing/src/pages/index.astro | 1529 +---------------- apps/marketing/src/styles/global.css | 60 + apps/marketing/tailwind.config.mjs | 69 + bun.lock | 125 +- 14 files changed, 977 insertions(+), 2977 deletions(-) create mode 100644 apps/marketing/src/components/Capabilities.astro create mode 100644 apps/marketing/src/components/Footer.astro create mode 100644 apps/marketing/src/components/GlobalEdge.astro create mode 100644 apps/marketing/src/components/Header.astro create mode 100644 apps/marketing/src/components/Pricing.astro create mode 100644 apps/marketing/src/components/Workflow.astro create mode 100644 apps/marketing/src/styles/global.css create mode 100644 apps/marketing/tailwind.config.mjs diff --git a/apps/marketing/astro.config.mjs b/apps/marketing/astro.config.mjs index d1e9890bc..d2f0e2fb6 100644 --- a/apps/marketing/astro.config.mjs +++ b/apps/marketing/astro.config.mjs @@ -1,10 +1,12 @@ import { defineConfig } from "astro/config"; +import tailwind from "@astrojs/tailwind"; /** Set in deploy (e.g. preview URL) so canonical and Open Graph URLs resolve. */ const site = process.env.PUBLIC_SITE_URL; export default defineConfig({ ...(site ? { site } : {}), + integrations: [tailwind()], server: { port: Number(process.env.PORT ?? 4173), }, diff --git a/apps/marketing/package.json b/apps/marketing/package.json index 607e982c1..e58712db0 100644 --- a/apps/marketing/package.json +++ b/apps/marketing/package.json @@ -11,8 +11,12 @@ "test": "vitest run" }, "dependencies": { + "@astrojs/tailwind": "^6.0.2", "@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", + "tailwindcss": "^3.4.17" }, "devDependencies": { "@astrojs/check": "^0.9.7", diff --git a/apps/marketing/src/components/Capabilities.astro b/apps/marketing/src/components/Capabilities.astro new file mode 100644 index 000000000..a7a6e022b --- /dev/null +++ b/apps/marketing/src/components/Capabilities.astro @@ -0,0 +1,64 @@ +--- +const capabilities = [ + { + icon: ``, + title: "Lightning Fast Generation", + description: "Generate production-ready code in seconds with our optimized AI models trained on millions of repositories.", + }, + { + icon: ``, + title: "Enterprise Security", + description: "SOC 2 compliant with end-to-end encryption. Your code never leaves your infrastructure.", + }, + { + icon: ``, + title: "Multi-Language Support", + description: "Native support for 50+ programming languages including TypeScript, Python, Rust, Go, and more.", + }, + { + icon: ``, + title: "Team Collaboration", + description: "Real-time collaboration with shared context, code reviews, and seamless Git integration.", + }, + { + icon: ``, + title: "Intelligent Debugging", + description: "AI-powered error detection and automatic fixes. Debug smarter, not harder.", + }, + { + icon: ``, + title: "Context Aware", + description: "Understands your entire codebase. Get suggestions that fit your architecture and coding style.", + }, +]; +--- + +
+
+ +
+ + Capabilities + +

+ Everything you need to ship faster +

+

+ A complete toolkit designed for modern development teams who want to build and deploy with confidence. +

+
+ + +
+ {capabilities.map((capability) => ( +
+
+ +
+

{capability.title}

+

{capability.description}

+
+ ))} +
+
+
diff --git a/apps/marketing/src/components/Footer.astro b/apps/marketing/src/components/Footer.astro new file mode 100644 index 000000000..379398599 --- /dev/null +++ b/apps/marketing/src/components/Footer.astro @@ -0,0 +1,145 @@ +--- +const footerLinks = { + product: [ + { label: "Features", href: "#capabilities" }, + { label: "Pricing", href: "#pricing" }, + { label: "Changelog", href: "#" }, + { label: "Roadmap", href: "#" }, + ], + resources: [ + { label: "Documentation", href: "#" }, + { label: "API Reference", href: "#" }, + { label: "Guides", href: "#" }, + { label: "Blog", href: "#" }, + ], + company: [ + { label: "About", href: "#" }, + { label: "Careers", href: "#" }, + { label: "Contact", href: "#" }, + { label: "Press", href: "#" }, + ], + legal: [ + { label: "Privacy", href: "#" }, + { label: "Terms", href: "#" }, + { label: "Security", href: "#" }, + ], +}; + +const socialLinks = [ + { + label: "GitHub", + href: "https://github.com/OpenKnots/okcode", + icon: ``, + }, + { + label: "Twitter", + href: "#", + icon: ``, + }, + { + label: "Discord", + href: "#", + icon: ``, + }, +]; +--- + + diff --git a/apps/marketing/src/components/GlobalEdge.astro b/apps/marketing/src/components/GlobalEdge.astro new file mode 100644 index 000000000..21be8ac0a --- /dev/null +++ b/apps/marketing/src/components/GlobalEdge.astro @@ -0,0 +1,101 @@ +--- +const regions = [ + { name: "North America", latency: "12ms", x: "20%", y: "35%" }, + { name: "Europe", latency: "18ms", x: "48%", y: "28%" }, + { name: "Asia Pacific", latency: "25ms", x: "75%", y: "40%" }, + { name: "South America", latency: "35ms", x: "30%", y: "65%" }, + { name: "Australia", latency: "30ms", x: "82%", y: "70%" }, +]; +--- + +
+
+ +
+ + Infrastructure + +

+ Global edge network +

+

+ Lightning-fast responses from edge locations worldwide. Your AI assistant is always nearby. +

+
+ + +
+ +
+ +
+ + + + + + + + +
+ + +
+ + + + + + + + + + + + + + + + + + + {regions.map((region) => ( +
+ +
+ +
+ +
+
{region.name}
+
{region.latency} latency
+
+
+ ))} +
+
+ + +
+
+
50+
+
Edge Locations
+
+
+
<50ms
+
Avg Response
+
+
+
99.99%
+
Uptime SLA
+
+
+
6
+
Continents
+
+
+
+
diff --git a/apps/marketing/src/components/Header.astro b/apps/marketing/src/components/Header.astro new file mode 100644 index 000000000..d7ec0bcef --- /dev/null +++ b/apps/marketing/src/components/Header.astro @@ -0,0 +1,52 @@ +--- +const navLinks = [ + { href: "#capabilities", label: "Capabilities" }, + { href: "#workflow", label: "How It Works" }, + { href: "#global", label: "Infrastructure" }, + { href: "#pricing", label: "Pricing" }, +]; +--- + +
+
+
+ + +
+ + + +
+ OK Code + + + + + + +
+ + + Get Started + +
+
+
+
diff --git a/apps/marketing/src/components/Hero.astro b/apps/marketing/src/components/Hero.astro index 57adbd9c9..ffd6b1063 100644 --- a/apps/marketing/src/components/Hero.astro +++ b/apps/marketing/src/components/Hero.astro @@ -1,167 +1,106 @@ --- -/** - * Hero section — ClawDash-style centered hero with OK Code content. - */ --- -
-