feat: add command palette, accessibility, scroll animations, and keyboard navigation
Implements COMP-139 (command palette), COMP-140 (accessibility), COMP-141 (scroll animations), COMP-145 (keyboard navigation) Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-Claude) Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
This commit is contained in:
Vectry
@@ -1,5 +1,6 @@
|
||||
import { RepoInput } from "@/components/repo-input";
|
||||
import { ExampleRepoCard } from "@/components/example-repo-card";
|
||||
import { ScrollSection } from "@/components/scroll-section";
|
||||
import {
|
||||
Link2,
|
||||
Code2,
|
||||
@@ -287,41 +288,45 @@ export default function HomePage() {
|
||||
|
||||
<section id="how-it-works" className="py-20 lg:py-32">
|
||||
<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-3xl sm:text-4xl font-bold text-white mb-4">
|
||||
How It Works
|
||||
</h2>
|
||||
<p className="text-zinc-400 max-w-xl mx-auto">
|
||||
Four simple steps to comprehensive codebase documentation
|
||||
</p>
|
||||
</div>
|
||||
<ScrollSection>
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-3xl sm:text-4xl font-bold text-white mb-4">
|
||||
How It Works
|
||||
</h2>
|
||||
<p className="text-zinc-400 max-w-xl mx-auto">
|
||||
Four simple steps to comprehensive codebase documentation
|
||||
</p>
|
||||
</div>
|
||||
</ScrollSection>
|
||||
|
||||
<div className="relative">
|
||||
<div className="hidden lg:block absolute top-24 left-[12.5%] right-[12.5%] h-px bg-gradient-to-r from-transparent via-zinc-700 to-transparent" />
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
{steps.map((step) => (
|
||||
<div key={step.number} className="relative group">
|
||||
<div className="text-center">
|
||||
<div className="text-6xl font-bold text-zinc-800/50 mb-4 group-hover:text-blue-500/20 transition-colors">
|
||||
{step.number}
|
||||
{steps.map((step, i) => (
|
||||
<ScrollSection key={step.number} delay={i + 1}>
|
||||
<div className="relative group">
|
||||
<div className="text-center">
|
||||
<div className="text-6xl font-bold text-zinc-800/50 mb-4 group-hover:text-blue-500/20 transition-colors">
|
||||
{step.number}
|
||||
</div>
|
||||
|
||||
<div className="relative inline-flex items-center justify-center w-16 h-16 rounded-2xl glass mb-6 group-hover:border-blue-500/30 transition-colors">
|
||||
<step.icon className="w-7 h-7 text-blue-400" />
|
||||
|
||||
<div className="absolute inset-0 rounded-2xl bg-blue-500/20 blur-xl opacity-0 group-hover:opacity-100 transition-opacity" />
|
||||
</div>
|
||||
|
||||
<h3 className="text-lg font-semibold text-white mb-2">
|
||||
{step.title}
|
||||
</h3>
|
||||
|
||||
<p className="text-sm text-zinc-400 leading-relaxed">
|
||||
{step.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="relative inline-flex items-center justify-center w-16 h-16 rounded-2xl glass mb-6 group-hover:border-blue-500/30 transition-colors">
|
||||
<step.icon className="w-7 h-7 text-blue-400" />
|
||||
|
||||
<div className="absolute inset-0 rounded-2xl bg-blue-500/20 blur-xl opacity-0 group-hover:opacity-100 transition-opacity" />
|
||||
</div>
|
||||
|
||||
<h3 className="text-lg font-semibold text-white mb-2">
|
||||
{step.title}
|
||||
</h3>
|
||||
|
||||
<p className="text-sm text-zinc-400 leading-relaxed">
|
||||
{step.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</ScrollSection>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
@@ -330,22 +335,26 @@ export default function HomePage() {
|
||||
|
||||
<section className="py-20 lg:py-32">
|
||||
<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="text-center mb-16">
|
||||
<div className="inline-flex items-center gap-2 px-4 py-2 rounded-full glass mb-6">
|
||||
<Github className="w-4 h-4 text-blue-400" />
|
||||
<span className="text-sm text-zinc-300">Try It Out</span>
|
||||
<ScrollSection>
|
||||
<div className="text-center mb-16">
|
||||
<div className="inline-flex items-center gap-2 px-4 py-2 rounded-full glass mb-6">
|
||||
<Github className="w-4 h-4 text-blue-400" />
|
||||
<span className="text-sm text-zinc-300">Try It Out</span>
|
||||
</div>
|
||||
<h2 className="text-3xl sm:text-4xl font-bold text-white mb-4">
|
||||
Featured Examples
|
||||
</h2>
|
||||
<p className="text-zinc-400 max-w-xl mx-auto">
|
||||
Pre-generated docs ready to explore — or paste any repo URL above
|
||||
</p>
|
||||
</div>
|
||||
<h2 className="text-3xl sm:text-4xl font-bold text-white mb-4">
|
||||
Featured Examples
|
||||
</h2>
|
||||
<p className="text-zinc-400 max-w-xl mx-auto">
|
||||
Pre-generated docs ready to explore — or paste any repo URL above
|
||||
</p>
|
||||
</div>
|
||||
</ScrollSection>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{exampleRepos.map((repo) => (
|
||||
<ExampleRepoCard key={repo.name} repo={repo} />
|
||||
{exampleRepos.map((repo, i) => (
|
||||
<ScrollSection key={repo.name} delay={(i % 3) + 1}>
|
||||
<ExampleRepoCard repo={repo} />
|
||||
</ScrollSection>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
@@ -353,40 +362,41 @@ export default function HomePage() {
|
||||
|
||||
<section id="features" className="py-20 lg:py-32">
|
||||
<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-3xl sm:text-4xl font-bold text-white mb-4">
|
||||
Everything You Need
|
||||
</h2>
|
||||
<p className="text-zinc-400 max-w-xl mx-auto">
|
||||
Comprehensive documentation generated automatically from your codebase
|
||||
</p>
|
||||
</div>
|
||||
<ScrollSection>
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-3xl sm:text-4xl font-bold text-white mb-4">
|
||||
Everything You Need
|
||||
</h2>
|
||||
<p className="text-zinc-400 max-w-xl mx-auto">
|
||||
Comprehensive documentation generated automatically from your codebase
|
||||
</p>
|
||||
</div>
|
||||
</ScrollSection>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{features.map((feature) => (
|
||||
<div
|
||||
key={feature.title}
|
||||
className="group relative p-8 rounded-2xl glass hover:bg-white/[0.05] transition-all duration-300 hover:-translate-y-1"
|
||||
>
|
||||
<div className="absolute inset-0 rounded-2xl bg-gradient-to-r from-blue-500/20 via-indigo-500/20 to-purple-500/20 opacity-0 group-hover:opacity-100 transition-opacity -z-10 blur-xl" />
|
||||
{features.map((feature, i) => (
|
||||
<ScrollSection key={feature.title} delay={(i % 2) + 1}>
|
||||
<div className="group relative p-8 rounded-2xl glass hover:bg-white/[0.05] transition-all duration-300 hover:-translate-y-1">
|
||||
<div className="absolute inset-0 rounded-2xl bg-gradient-to-r from-blue-500/20 via-indigo-500/20 to-purple-500/20 opacity-0 group-hover:opacity-100 transition-opacity -z-10 blur-xl" />
|
||||
|
||||
<div className="flex items-start gap-5">
|
||||
<div className="flex-shrink-0">
|
||||
<div className="w-12 h-12 rounded-xl bg-gradient-to-br from-blue-500/20 to-purple-500/20 flex items-center justify-center border border-white/10 group-hover:border-blue-500/30 transition-colors">
|
||||
<feature.icon className="w-6 h-6 text-blue-400" />
|
||||
<div className="flex items-start gap-5">
|
||||
<div className="flex-shrink-0">
|
||||
<div className="w-12 h-12 rounded-xl bg-gradient-to-br from-blue-500/20 to-purple-500/20 flex items-center justify-center border border-white/10 group-hover:border-blue-500/30 transition-colors">
|
||||
<feature.icon className="w-6 h-6 text-blue-400" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1">
|
||||
<h3 className="text-xl font-semibold text-white mb-2 group-hover:text-blue-300 transition-colors">
|
||||
{feature.title}
|
||||
</h3>
|
||||
<p className="text-zinc-400 leading-relaxed">
|
||||
{feature.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1">
|
||||
<h3 className="text-xl font-semibold text-white mb-2 group-hover:text-blue-300 transition-colors">
|
||||
{feature.title}
|
||||
</h3>
|
||||
<p className="text-zinc-400 leading-relaxed">
|
||||
{feature.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ScrollSection>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
@@ -394,6 +404,7 @@ export default function HomePage() {
|
||||
|
||||
<section className="py-20 lg:py-32">
|
||||
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<ScrollSection>
|
||||
<div className="relative rounded-3xl glass-strong p-8 sm:p-12 lg:p-16 overflow-hidden">
|
||||
<div className="absolute top-0 right-0 w-64 h-64 bg-gradient-to-br from-blue-500/20 to-purple-500/20 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2" />
|
||||
<div className="absolute bottom-0 left-0 w-48 h-48 bg-gradient-to-tr from-indigo-500/10 to-cyan-500/10 rounded-full blur-3xl translate-y-1/2 -translate-x-1/2" />
|
||||
@@ -446,6 +457,7 @@ export default function HomePage() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ScrollSection>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user