[ajianaz]

Overview

Overhaul landing page cora-cli dengan mengadopsi design patterns dari uteke (ajianaz/uteke).

Closes #163

Changes

Design System (from uteke)

• Added .hero-gradient, .glow-text, .glow-purple — hero section effects
• Added .terminal-block — code blocks with top accent line
• Added .feature-card — hover lift + border highlight cards
• Added .cta-primary / .cta-secondary — button patterns with hover glow
• Added .cmd-highlight/.cmd-flag/.cmd-string/.cmd-comment — syntax coloring
• Added .separator-gradient — gradient section dividers
• Added .compare-table .highlight-col — highlighted comparison column
• Added .animate-fade-in + delay variants (1-4) — staggered animations
• Added .grid-bg — subtle background pattern
• New CSS vars: --accent-dim, --accent-bright, --border-subtle

Landing Page Sections

• Hero: Gradient text, glow badge, staggered fade-in animations
• Terminal Demo: 4 auto-cycling CLI commands (4s interval) with syntax highlighting
• Social Proof: Inline badges with feature-card style
• Problem/Solution: Cards with feature-card hover effect
• Features Grid: 3-column layout with hover lift
• Quick Start: 3-step numbered guide with grid-bg background
• Comparison Table: Progressive column hiding (responsive) + highlight-col
• FAQ: Feature-card pattern with smooth accordion
• Final CTA: Gradient text, cta-primary/cta-secondary buttons
• Footer: Gradient separator above footer

Architecture Fixes

• ✅ ssr: false → ssr: true (SEO fix)
• ✅ target="__blank" → target="_blank" (typo fix)
• ✅ Duplicate font loading removed

Files Changed (4 files, +735/−573 lines)

File	Change
website/src/app.css	+412 lines — new design system classes
website/src/routes/+page.svelte	Overhauled — new sections + styling
website/src/routes/+layout.ts	SSR enabled
website/src/app.html	Duplicate fonts removed

Testing

• ✅ npm run build succeeds
• ✅ Static output generated (build/)

[github-actions]

🔍 Cora AI Code Review

❌ Blocked — critical issues found.

🔴 Error (3)

• website/src/routes/+page.svelte:268 — The setInterval callback captures the initial value of visibleCmd (which is 0) in its closure. Since visibleCmd is a Svelte 5 $state variable, the expression visibleCmd + 1 inside the plain setInterval callback will always evaluate to 0 + 1 = 1, so the cycling will only ever alternate between 0 and 1 instead of cycling through all commands. In Svelte 5, $state creates a signal — reading it inside a non-reactive context like setInterval reads the initial value. You need to use $effect or read the signal's current value reactively.
• website/src/routes/+page.svelte:345 — The {#each commands} block renders all 4 command entries simultaneously (with opacity toggling). Each command has a min-h-[260px] container AND each renders its full output text. This means all 4 outputs exist in the DOM at all times, which is wasteful. More importantly, the min-h-[260px] is on the parent div but each command's output varies significantly in height, so the inactive commands still take up space due to the opacity-only approach (they're invisible but still affect layout).
• website/src/app.html:17 — The Google Fonts <link> for Inter and JetBrains Mono was removed from app.html, and the @import url(...) was removed from app.css. If no system font stack or alternative font source is configured elsewhere (e.g., in Tailwind config), the site will fall back to browser defaults (Times New Roman on many systems). The CSS still references var(--font-sans) and var(--font-mono) but their definitions aren't shown in the diff. This could result in a broken visual experience.

---

Review powered by cora-cli · BYOK · MIT