Fix hero section: YakaJS syntax, Oatmeal styling, and interactive demo

[Copilot]

Hero section had incorrect YakaJS selector syntax (@ instead of _), used CSS-focused examples instead of demonstrating JavaScript capabilities, and lacked cohesive Oatmeal aesthetic. Grid lines at canvas boundaries were broken due to redundant positioning variables.

Changes

Core Fixes

• YakaJS selector syntax: Changed @() to _() throughout code examples (correct API convention)
• Interactive demo: Replaced auto-animated example with user-driven counter that responds to real clicks
• Grid container: Consolidated duplicate topDirection/bottomDirection variables into single directionClasses

Visual Enhancements

• Oatmeal color palette: Applied official colors (#0B0A08, #E7E5E4, #A8A29E, #2B2922) replacing generic grays
• Syntax highlighting: Warm Gruvbox colors (orange #e78a4e, green #a9b665, yellow #d8a657) instead of cold neon
• Code editor: Transparent background with thin border (border border-white/10) removes box-in-box effect
• Typography: Added Outfit font from Google Fonts for UI components
• Ghost cards: Counter and celebration use bg-transparent with subtle borders
• Button: Pill-shaped (rounded-full) with Oatmeal white background

Code Example

// Before (incorrect)
@('<button>')
  .text('Click Me!')
  .addClass('flex flex-col...')  // CSS-focused

// After (correct)
_('<button>')
  .text('Click Me!')
  .on('click', () => {            // JS-focused
    count++;
    _('#counter').text(`Clicked ${count} times`).fadeOut(100).fadeIn(200);
  })

Files modified: hero.tsx, editor.tsx, grid-container.tsx, layout.tsx, tailwind.config.js, header.tsx

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
yaka-js-documentation	Ready	Preview, Comment	Feb 15, 2026 4:17pm