{item.kicker}
-{item.title}
-{item.body}
--
- {item.bullets.map((bullet) => (
-
- {bullet} - ))} -
diff --git a/.gitignore b/.gitignore index 7a0c8121b..d7a9c8b7e 100644 --- a/.gitignore +++ b/.gitignore @@ -5,6 +5,7 @@ node_modules *.log *.tsbuildinfo apps/*/dist +.next .astro packages/*/dist .env diff --git a/.oxlintrc.json b/.oxlintrc.json index 8ea8fbf2b..497cb1522 100644 --- a/.oxlintrc.json +++ b/.oxlintrc.json @@ -6,7 +6,8 @@ "node_modules", "bun.lock", "*.tsbuildinfo", - "**/routeTree.gen.ts" + "**/routeTree.gen.ts", + "**/next-env.d.ts" ], "plugins": ["eslint", "oxc", "react", "unicorn", "typescript"], "categories": { diff --git a/apps/desktop/resources/icon.ico b/apps/desktop/resources/icon.ico index 78d8b23d8..1a0738673 100644 Binary files a/apps/desktop/resources/icon.ico and b/apps/desktop/resources/icon.ico differ diff --git a/apps/marketing/MARKETING_IMPROVEMENTS.md b/apps/marketing/MARKETING_IMPROVEMENTS.md deleted file mode 100644 index fdd722d4c..000000000 --- a/apps/marketing/MARKETING_IMPROVEMENTS.md +++ /dev/null @@ -1,1009 +0,0 @@ -# Marketing Page Improvement Recommendations - -Comprehensive audit and recommendations to bring the OK Code marketing site to production-level quality comparable to OpenAI, Vercel, and Linear marketing pages. - ---- - -## Table of Contents - -1. [Critical Issues](#1-critical-issues) -2. [Accessibility](#2-accessibility) -3. [Visual Design & Polish](#3-visual-design--polish) -4. [Animation & Interaction](#4-animation--interaction) -5. [Layout & Spacing](#5-layout--spacing) -6. [Responsive Design](#6-responsive-design) -7. [Performance](#7-performance) -8. [SEO & Meta](#8-seo--meta) -9. [Content & Copy](#9-content--copy) -10. [Architecture & Code Quality](#10-architecture--code-quality) -11. [New Sections & Features](#11-new-sections--features) -12. [Reference Benchmarks](#12-reference-benchmarks) - ---- - -## 1. Critical Issues - -These must be fixed before considering the page production-ready. - -### 1.1 Missing Focus Indicators (WCAG 2.1 AA Failure) - -**Problem:** Zero `:focus-visible` styles exist on any interactive element -- buttons, links, tabs, FAQ triggers, nav links, or form elements. This is a WCAG 2.1 Level AA violation and makes the site unusable for keyboard-only users. - -**Affected elements:** - -- `.hero-button`, `.secondary-button` -- `.kn-nav-link`, `.kn-nav-signin` -- `.tab-chip`, `.spotlight-item` -- `.faq-trigger` -- `.kn-pill` (hero badge link) -- All footer links -- Logo cloud items (if made focusable) - -**Fix:** Add a global focus-visible rule in Layout.astro: - -```css -:focus-visible { - outline: 2px solid var(--kn-landing-accent-bright); - outline-offset: 2px; - border-radius: var(--radius-sm); -} - -/* Subtle ring for buttons/interactive elements */ -.hero-button:focus-visible, -.secondary-button:focus-visible, -.tab-chip:focus-visible, -.spotlight-item:focus-visible, -.faq-trigger:focus-visible { - outline: 2px solid var(--kn-landing-accent-bright); - outline-offset: 2px; - box-shadow: 0 0 0 4px rgba(255, 78, 65, 0.15); -} -``` - -### 1.2 Duplicate / Conflicting Style Definitions - -**Problem:** Animation and component styles are defined in both `Layout.astro` and `index.astro` with conflicting values. Whichever loads last wins, creating unpredictable behavior. - -**Specific conflicts:** -| Style | Layout.astro | index.astro | Delta | -|-------|-------------|-------------|-------| -| `[data-reveal]` transition | `0.8s` | `0.7s` | 0.1s mismatch | -| `.hero-button` styles | Full definition | Full redefinition | Competing specificity | -| `.hero-button-shine` | Defined | Redefined | Duplicate | -| `.section-title` | Defined | Redefined | Duplicate | -| Card shared styles | Defined in Layout | Overridden in index | Cascading conflicts | - -**Fix:** Establish a single source of truth: - -- Layout.astro owns: CSS variables, base resets, nav, footer, card base, reveal system, utility classes -- index.astro owns: page-specific layout (hero layout, grid arrangements, section spacing) -- Components own: their scoped hover/interaction styles - -### 1.3 Hardcoded FAQ Max-Height - -**Problem:** The first FAQ panel has `style="max-height: 220px"` hardcoded inline. If content exceeds 220px (e.g., longer answers, larger font size, narrow viewport), it will be clipped with no scroll. - -**Fix:** Use `scrollHeight` calculation on mount, or switch to CSS `grid-template-rows: 0fr / 1fr` animation pattern which naturally sizes to content: - -```css -.faq-panel { - display: grid; - grid-template-rows: 0fr; - transition: grid-template-rows 0.35s ease; -} -.faq-item[data-open="true"] .faq-panel { - grid-template-rows: 1fr; -} -.faq-panel > div { - overflow: hidden; -} -``` - ---- - -## 2. Accessibility - -### 2.1 Mobile Menu Focus Trap - -**Problem:** When the mobile hamburger menu opens, keyboard focus is not trapped inside the overlay. Users can Tab into content behind the menu. - -**Fix:** Implement a focus trap that cycles between the first and last focusable element in the menu. Close on Escape (already implemented) and restore focus to the trigger button on close. - -### 2.2 Icon-Only Elements Missing Labels - -**Problem:** Several SVG icons serve as the sole content of interactive or informational elements but lack `aria-label`: - -- Trust strip icons (decorative only -- acceptable since text follows) -- Logo cloud items -- SVGs have no accessible name -- Mobile hamburger button -- check that `aria-label="Menu"` is present -- Feature grid icons -- decorative, but `kn-ico-wrap` has no role - -**Fix for LogoCloud:** - -```html -
Core surfaces
-- Explore the surfaces that make OK Code feel coherent: thinking, reviewing, previewing, - and shipping without the usual tab chaos. -
-{item.kicker}
-{item.body}
-FAQ
-{item.answer}
-Still have questions?
-Join the community on Discord and talk to other builders using OK Code.
- - Join Discord - -{pillar.body}
- -Ready
-- Bring chat, code review, preview, and release flow into one calm workspace built for serious - AI-assisted work. -
- -- 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. -
- - - - - - - -Works with the tools you already use
-Visual identity
-- Designed to feel calm, sharp, and expensive: true blacks, soft glass, restrained color, - and enough personality to make long sessions feel better. -
-{theme.vibe}
-{theme.body}
-Workflow
-- OK Code keeps the whole loop visible: start the work, inspect the change, verify it, - and move toward release without blowing up your focus. -
-{item.body}
- {index < steps.length - 1 && } -- Loading latest release… - -
- -- Looking for older versions? Check the - - GitHub releases page - -
-Create Next App
+
+ Get started by editing src/pages/index.tsx.
+
- Start here -
-- Open a project folder, jump back into something recent, or create a new thread - without digging through the sidebar first. -
- -