Repository navigation
feat(website): landing page redesign — CSS, components, animations - #171
Merged
Merged
Conversation
🔍 Cora AI Code ReviewReview powered by cora-cli · BYOK · MIT |
added 6 commits
June 6, 2026 00:17
Adds 25+ CSS classes used by +page.svelte landing page template: - Section layouts: .section, .section-hero, .section-compact, .section-tall - Glass card with backdrop blur and hover glow - Feature icon, connect line, timeline steps - Landing buttons: .btn-primary (glow hover), .btn-ghost (border hover) - Badges: .accent-badge, .badge-dot - Terminal internals: .terminal, .terminal-header, .terminal-body, .terminal-title - Terminal dots: .terminal-dot, .terminal-dot-red/yellow/green - Syntax highlighting: .syntax-cmd, .syntax-flag, .syntax-highlight, .syntax-string - UI helpers: .typing-cursor, .copy-btn (reveal on hover) - Comparison table: .cora-col, .symbol-check, .symbol-cross - Animations: .animate-fade-in-up, .delay-*, .scroll-reveal with .revealed state All classes use oklch design system variables. Docs CSS untouched. Respects prefers-reduced-motion. Closes #168
Extract monolithic 558-line +page.svelte into 11 reusable components: Reusable: - TerminalBlock: shared terminal chrome (header + dots + body + copy) - FeatureCard: glass card with icon, title, accent, description - StepCard: numbered step card for How It Works - TimelineStep: numbered timeline item with optional terminal snippet Sections: - HeroSection: badge, gradient headline, install terminal, CTAs - KpiStats: 3 glass metric cards - LiveDemo: terminal with typing animation (self-contained state) - HowItWorks: 3 steps with connectors - FeatureGrid: 9 feature cards in responsive grid - ComparisonTable: vs CodeRabbit/Copilot/SonarQube - QuickStart: 4 timeline steps + CTA + footer - +page.svelte reduced to 47 lines (imports + composition) - Replaced inline SVGs with @lucide/svelte icons (ArrowRight, Star, etc.) - GitHub logo kept as inline SVG (trademark) - All components use Svelte 5 runes ($state, $props, $effect) - Animation logic preserved (IntersectionObserver for scroll-reveal) Also adds @lucide/svelte dependency. Closes #169
Adds animation enhancements for all landing page sections:
- Scroll reveal: fade-in-up on intersection (already existed, refined)
- Hero cascade: badge → headline → subtitle → terminal → CTAs (100ms steps)
- Terminal typing: line-by-line fade-in with color coding
- Feature cards: staggered entrance via [transition-delay] on grid items
- Comparison table: row-by-row stagger animation (60ms per row)
- Timeline numbers: pulse glow animation on reveal
- Smooth scrolling: html { scroll-behavior: smooth }
- prefers-reduced-motion: all animations disabled, scroll-behavior: auto
Pure CSS transitions + IntersectionObserver. No JS animation library.
Closes #170
…sue links - Fix WithElementRef missing from utils.ts (shadcn-svelte vega compat) - Fix lucide-svelte to @lucide/svelte type imports (Icon not default) - Fix HTMLElement vs HTMLDivElement type mismatch in LiveDemo - Rewrite roadmap page: linked to GitHub issues (like uteke pattern) - Rebased on develop to resolve merge conflicts
ajianaz
force-pushed
the
feat/landing-page-redesign
branch
from
June 6, 2026 00:24
e9ce3ac to
411266a
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Complete landing page overhaul addressing 3 issues:
Closes #168 — Missing CSS
Closes #169 — Component Extraction
+page.svelteinto 11 Svelte 5 components+page.sveltereduced to 55 lines@lucide/sveltefor icon system (GitHub logo kept as inline SVG)Closes #170 — Animations & Micro-interactions
prefers-reduced-motion: all animations disabledscroll-behavior: smoothTest Plan
npm run buildpasses ✅prefers-reduced-motiondisables animations