34b0f2ade9
- Replace all rgba(6,182,212,...) cyan focus borders and accents with rgba(249,115,22,...) ember orange across 21+ component files - Remove all var(--glass-border) references (undefined variable) with var(--color-border-default) across 24 files - Remove deprecated blur orbs and glass-morphism effects from SurveyPage, SurveyThankYouPage, and LoginPage - Migrate landing.css from hardcoded hex to CSS custom properties (~97 replacements for single-source theming) - Fix off-palette grays in FlowPilotAnalyticsPage chart styling (#8891a0 → #848b9b, #18191f → var(--color-bg-card)) - Update stale comments: "cyan brand" → "accent brand" in GlowEdge, "gradient cyan square" → "gradient orange square" in BrandLogo - Rename glow-cyan SVG filter ID to glow-accent - Fix category color comment: "cyan" → "deep orange" Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
79 lines
3.0 KiB
TypeScript
79 lines
3.0 KiB
TypeScript
import { useParams, Link } from 'react-router-dom'
|
|
import { ChevronRight, ArrowLeft } from 'lucide-react'
|
|
import { guides } from '@/data/guides'
|
|
import { GuideSection } from '@/components/guides/GuideSection'
|
|
|
|
export default function GuideDetailPage() {
|
|
const { slug } = useParams<{ slug: string }>()
|
|
const guide = guides.find(g => g.slug === slug)
|
|
|
|
if (!guide) {
|
|
return (
|
|
<div className="flex flex-col items-center justify-center h-full text-center p-6 overflow-y-auto">
|
|
<h2 className="text-lg font-heading font-semibold text-foreground mb-2">Guide Not Found</h2>
|
|
<p className="text-sm text-muted-foreground mb-4">The guide you're looking for doesn't exist.</p>
|
|
<Link
|
|
to="/guides"
|
|
className="bg-primary text-white font-semibold text-sm rounded-lg px-5 py-2 hover:brightness-110 active:scale-[0.98] transition-all"
|
|
>
|
|
Back to Guides
|
|
</Link>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const Icon = guide.icon
|
|
|
|
return (
|
|
<div className="overflow-y-auto h-full p-6 max-w-3xl mx-auto">
|
|
{/* Breadcrumb */}
|
|
<nav className="flex items-center gap-1.5 text-xs text-muted-foreground mb-6">
|
|
<Link to="/guides" className="hover:text-primary transition-colors">
|
|
User Guides
|
|
</Link>
|
|
<ChevronRight size={12} />
|
|
<span className="text-foreground">{guide.title}</span>
|
|
</nav>
|
|
|
|
{/* Header */}
|
|
<div className="card-flat rounded-2xl p-6 mb-6">
|
|
<div className="flex items-center gap-3 mb-3">
|
|
<div className="flex h-10 w-10 items-center justify-center rounded-xl bg-accent-dim">
|
|
<Icon size={20} className="text-primary" />
|
|
</div>
|
|
<div>
|
|
<h1 className="text-xl font-heading font-bold text-foreground">{guide.title}</h1>
|
|
<p className="text-sm text-muted-foreground">{guide.summary}</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-4 mt-4 pt-4 border-t" style={{ borderColor: 'var(--color-border-default)' }}>
|
|
<span className="font-sans text-xs text-[0.625rem] uppercase tracking-widest text-muted-foreground">
|
|
{guide.sections.length} {guide.sections.length === 1 ? 'section' : 'sections'}
|
|
</span>
|
|
<span className="font-sans text-xs text-[0.625rem] uppercase tracking-widest text-muted-foreground">
|
|
{guide.sections.reduce((acc, s) => acc + s.steps.length, 0)} steps
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Sections */}
|
|
<div className="card-flat rounded-2xl p-6">
|
|
{guide.sections.map((section, i) => (
|
|
<GuideSection key={i} section={section} index={i} />
|
|
))}
|
|
</div>
|
|
|
|
{/* Back link */}
|
|
<div className="mt-6">
|
|
<Link
|
|
to="/guides"
|
|
className="inline-flex items-center gap-1.5 text-sm text-muted-foreground hover:text-primary transition-colors"
|
|
>
|
|
<ArrowLeft size={14} />
|
|
Back to all guides
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|