303a558432
3,200+ hardcoded color values replaced with CSS variable-backed Tailwind classes (bg-card, text-foreground, border-border, etc.). Enables light mode via CSS variable swap. Only syntax highlighting colors and intentional one-offs remain hardcoded (~15 values). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
34 lines
1.2 KiB
TypeScript
34 lines
1.2 KiB
TypeScript
import { BookOpen } from 'lucide-react'
|
|
import { PageMeta } from '@/components/common/PageMeta'
|
|
import { guides } from '@/data/guides'
|
|
import { GuideCard } from '@/components/guides/GuideCard'
|
|
|
|
export default function GuidesHubPage() {
|
|
return (
|
|
<div className="overflow-y-auto h-full">
|
|
<PageMeta title="Guides" />
|
|
<div className="p-6 max-w-5xl mx-auto">
|
|
{/* Header */}
|
|
<div className="mb-8">
|
|
<div className="flex items-center gap-3 mb-2">
|
|
<div className="flex h-10 w-10 items-center justify-center rounded-xl bg-accent-dim">
|
|
<BookOpen size={20} className="text-primary" />
|
|
</div>
|
|
<h1 className="text-2xl font-heading font-bold text-foreground">User Guides</h1>
|
|
</div>
|
|
<p className="text-sm text-muted-foreground ml-[52px]">
|
|
Learn how to use ResolutionFlow with step-by-step instructions for every feature.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Guide cards grid */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
{guides.map(guide => (
|
|
<GuideCard key={guide.slug} guide={guide} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|