feat: HomeLab CSS art hero with Proxmox, Switch, NAS

- Add homelab-device-hero component (Proxmox VE + Router icon, Switch, TrueNAS)
- Dashed lines for network connections between devices
- Custom not-found page (replace Next.js 404)
- Homelab page uses CSS hero instead of feature image

Co-authored-by: Cursor <cursoragent@cursor.com>

app/not-found.tsx

@@ -0,0 +1,25 @@
+import Link from 'next/link';
+
+export default function NotFound() {
+  return (
+    <div className="flex min-h-[60vh] flex-col items-center justify-center px-4">
+      <div className="max-w-md text-center">
+        <h1 className="type-display mb-2 text-6xl font-bold text-slate-300 dark:text-slate-600">
+          404
+        </h1>
+        <h2 className="mb-4 text-xl font-semibold text-slate-800 dark:text-slate-200">
+          找不到頁面
+        </h2>
+        <p className="mb-8 text-slate-600 dark:text-slate-400">
+          您造訪的連結可能已失效或不存在。
+        </p>
+        <Link
+          href="/"
+          className="inline-flex items-center rounded-lg bg-slate-800 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2 dark:bg-slate-200 dark:text-slate-900 dark:hover:bg-slate-300"
+        >
+          返回首頁
+        </Link>
+      </div>
+    </div>
+  );
+}

app/pages/[slug]/page.tsx

@@ -11,6 +11,7 @@ import { ScrollReveal } from '@/components/scroll-reveal';
 import { SectionDivider } from '@/components/section-divider';
 import { JsonLd } from '@/components/json-ld';
 import { DevEnvDeviceHero } from '@/components/dev-env-device-hero';
+import { HomeLabDeviceHero } from '@/components/homelab-device-hero';
 
 export function generateStaticParams() {
   const params = allPages.map((page) => ({
@@ -76,11 +77,11 @@ export default async function StaticPage({ params }: Props) {
     <>
       <JsonLd data={webPageSchema} />
       <ReadingProgress />
-      <PostLayout hasToc={hasToc} contentKey={slug} wide={slug === 'dev-env'}>
-        <div className={slug === 'dev-env' ? 'space-y-4' : 'space-y-8'}>
+      <PostLayout hasToc={hasToc} contentKey={slug} wide={slug === 'dev-env' || slug === 'homelab'}>
+        <div className={slug === 'dev-env' || slug === 'homelab' ? 'space-y-4' : 'space-y-8'}>
           <SectionDivider>
             <ScrollReveal>
-              <header className={slug === 'dev-env' ? 'mb-4 space-y-3 text-center' : 'mb-6 space-y-4 text-center'}>
+              <header className={slug === 'dev-env' || slug === 'homelab' ? 'mb-4 space-y-3 text-center' : 'mb-6 space-y-4 text-center'}>
                 {page.published_at && (
                   <p className="type-small text-slate-500 dark:text-slate-500">
                     {new Date(page.published_at).toLocaleDateString(
@@ -118,6 +119,8 @@ export default async function StaticPage({ params }: Props) {
               >
                 {slug === 'dev-env' ? (
                   <DevEnvDeviceHero />
+                ) : slug === 'homelab' ? (
+                  <HomeLabDeviceHero />
                 ) : (
                   page.feature_image && (
                     <div className="-mx-4 mb-8 transition-all duration-500 sm:-mx-12 lg:-mx-20 group-[.toc-open]:lg:-mx-4">