feat: dev-env page - Mac mini + 螢幕 mockup with Arch/Ubuntu/Linux SVG logos

- Add DevEnvDeviceHero component with 3D device mockup
- Terminal window displays Arch, Ubuntu, Tux logos (react-icons Simple Icons)
- 4:3 screen ratio, taller display for full logo visibility
- Remove dock for cleaner layout

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

components/dev-env-device-hero.tsx

@@ -0,0 +1,97 @@
+'use client';
+
+import { SiArchlinux, SiUbuntu, SiLinux } from 'react-icons/si';
+
+/**
+ * Mac mini + 螢幕 3D 裝置展示
+ * 使用純 CSS 3D transforms，取代開發工作環境頁的 feature_image
+ */
+export function DevEnvDeviceHero() {
+  return (
+    <div
+      className="dev-env-device-hero -mx-4 mb-8 flex justify-center py-8 sm:-mx-12 sm:py-12 lg:-mx-20 group-[.toc-open]:lg:-mx-4"
+      role="img"
+      aria-label="Mac mini、鍵盤與外接螢幕的 3D 裝置展示"
+    >
+      <div className="dev-env-device-scene">
+        {/* Monitor */}
+        <div className="dev-env-monitor">
+          {/* Bezel */}
+          <div className="dev-env-bezel">
+            {/* Screen */}
+            <div className="dev-env-screen">
+              {/* macOS Desktop mockup */}
+              <div className="dev-env-desktop">
+                {/* macOS Menu bar - 半透明毛玻璃 */}
+                <div className="dev-env-menubar">
+                  <span className="dev-env-apple" aria-hidden>{'\uF8FF'}</span>
+                  <span className="dev-env-app-name">Terminal</span>
+                  <span className="dev-env-spacer" />
+                  <span className="dev-env-menubar-right">
+                    <span className="dev-env-menubar-icon" aria-hidden />
+                    <span className="dev-env-menubar-icon" aria-hidden />
+                    <span className="dev-env-menubar-icon" aria-hidden />
+                    <span className="dev-env-time">14:30</span>
+                  </span>
+                </div>
+                {/* Window - Terminal 顯示 Arch / Ubuntu / Tux 三個 Logo */}
+                <div className="dev-env-window">
+                  <div className="dev-env-window-titlebar">
+                    <span className="dev-env-traffic-light dev-env-traffic-red" aria-hidden />
+                    <span className="dev-env-traffic-light dev-env-traffic-yellow" aria-hidden />
+                    <span className="dev-env-traffic-light dev-env-traffic-green" aria-hidden />
+                  </div>
+                  <div className="dev-env-window-content">
+                    <div className="dev-env-terminal-prompt">
+                      <span className="dev-env-prompt">$</span> neofetch --ascii_distro arch,ubuntu,tux
+                    </div>
+                    <div className="dev-env-terminal-logos">
+                      <div className="dev-env-logo-svg" aria-label="Arch Linux logo">
+                        <SiArchlinux className="dev-env-svg-arch" size={36} />
+                      </div>
+                      <div className="dev-env-logo-svg" aria-label="Ubuntu logo">
+                        <SiUbuntu className="dev-env-svg-ubuntu" size={36} />
+                      </div>
+                      <div className="dev-env-logo-svg" aria-label="Tux Linux penguin logo">
+                        <SiLinux className="dev-env-svg-tux" size={36} />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          {/* Monitor stand */}
+          <div className="dev-env-stand" />
+        </div>
+
+        {/* Desk surface - Mac mini 與鍵盤均勻放置 */}
+        <div className="dev-env-desk">
+          {/* 鍵盤 - Magic Keyboard 風格，鍵帽網格 */}
+          <div className="dev-env-keyboard">
+            <div className="dev-env-keyboard-body">
+              <div className="dev-env-keyboard-keys">
+                {[14, 14, 13, 12].map((keyCount, row) => (
+                  <div key={row} className="dev-env-keyboard-row">
+                    {Array.from({ length: keyCount }).map((_, col) => (
+                      <div key={col} className="dev-env-key" />
+                    ))}
+                  </div>
+                ))}
+                <div className="dev-env-keyboard-row dev-env-keyboard-row-space">
+                  <div className="dev-env-key dev-env-key-space" />
+                </div>
+              </div>
+            </div>
+          </div>
+          {/* Mac mini M4 2024 - 頂視，避免 3D 偽影 */}
+          <div className="dev-env-macmini">
+            <div className="dev-env-macmini-top">
+              <span className="dev-env-macmini-apple" aria-hidden>{'\uF8FF'}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}