Christian ManivongandClaude Sonnet 5
38c7fb1db9
Every abbreviation and technical term used in the site's copy (RBAC, NAPALM, config drift, ...) now links to a new /glossary page and shows a short definition on hover, wherever it appears in body text. Product and vendor brand names are deliberately excluded — the glossary stays a dictionary of vocabulary, not a company directory. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
41 lines
1.2 KiB
TypeScript
41 lines
1.2 KiB
TypeScript
import { useLang } from '../context/LangContext'
|
|
import { linkify } from '../lib/glossary'
|
|
|
|
function Section({ title, items }: { title: string; items: string[] }) {
|
|
return (
|
|
<div>
|
|
<h2 className="text-xl font-semibold text-slate-200 mb-4 pb-2 border-b border-slate-800">
|
|
{title}
|
|
</h2>
|
|
<ul className="space-y-2">
|
|
{items.map((item) => (
|
|
<li key={item} className="flex items-start gap-2 text-sm text-slate-400 leading-relaxed">
|
|
<span className="mt-1 h-1.5 w-1.5 shrink-0 rounded-full bg-sky-500" />
|
|
{linkify(item)}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default function Features() {
|
|
const { t } = useLang()
|
|
|
|
return (
|
|
<div className="py-16 md:py-24">
|
|
<div className="max-w-7xl mx-auto px-6">
|
|
<div className="mb-16">
|
|
<h1 className="text-4xl md:text-5xl font-bold text-slate-100 mb-4">{t.features.heading}</h1>
|
|
<p className="text-base text-slate-400 leading-relaxed max-w-xl">{t.features.sub}</p>
|
|
</div>
|
|
<div className="grid md:grid-cols-2 gap-12">
|
|
{t.features.sections.map((s) => (
|
|
<Section key={s.title} title={s.title} items={s.items} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|