import { Link } from 'react-router-dom' import { MagnifyingGlassIcon, ChartBarIcon, WrenchScrewdriverIcon, PuzzlePieceIcon, ShieldCheckIcon, } from '@heroicons/react/24/outline' import { useLang } from '../context/LangContext' import { linkify } from '../lib/glossary' const DRIVERS = [ 'Fritz!Box', 'HPE OfficeConnect', 'HPE ProCurve / Aruba', 'Linux', 'Netgear', 'OpenMediaVault', 'OpenWrt', 'OPNsense', 'Proxmox VE', 'QNAP QTS', 'Sonos', 'TP-Link JetStream', 'Yealink', 'Zyxel VMG', ] function Screenshot({ src, label, alt }: { src: string; label: string; alt: string }) { return (
{label}
{alt}
) } export default function Home() { const { t } = useLang() const h = t.home return ( <> {/* 1 — Hero */}

{h.hero.line1}
{h.hero.line2}

{linkify(h.hero.sub)}

{h.hero.cta1} {h.hero.cta2}
{/* 2 — Problem Statement */}

{linkify(h.problem)}

{/* 3 — Core Capabilities */}

{h.cap1.title}

{linkify(h.cap1.body)}

{h.cap2.title}

{linkify(h.cap2.body)}

{h.cap3.title}

{linkify(h.cap3.body)}

{/* 4 — Driver Grid */}

{h.driversHeading}

{linkify(h.driversSub)}

{DRIVERS.map((d) => ( {d} ))}
{h.driversLink}
{/* 5 — Screenshot Walkthrough */}

{h.screenshot1.heading}

{linkify(h.screenshot1.body)}

{h.screenshot2.heading}

{linkify(h.screenshot2.body)}

{h.screenshot3.heading}

{linkify(h.screenshot3.body)}

{h.screenshot4.heading}

{linkify(h.screenshot4.body)}

{h.screenshot5.heading}

{linkify(h.screenshot5.body)}

{h.screenshot6.heading}

{linkify(h.screenshot6.body)}

{/* 5b — NIS2 */}

{h.nis2Label}

{h.nis2Heading}

{linkify(h.nis2Body)}

{h.nis2Link}
{h.nis2Items.map((m) => (
{m.art}

{m.label}

{linkify(m.detail)}

))}
{/* 6 — Plugin System */}

{h.pluginsHeading}

{linkify(h.pluginsBody)}

{h.pluginsLink}
{/* 7 — Deployment */}

{h.deployHeading}

{linkify(h.deployBody)}

              {`# Clone + configure
git clone https://gitea.example.com/netork/netork.git
cp .env.example .env
# edit .env (DB URL, Redis password, secret key)

# Deploy
bash scripts/deploy.sh 192.168.1.10`}
{/* 8 — CTA */}

{h.ctaHeading}

{h.ctaBody}

{h.ctaButton}
) }