feat: update app pages and layout

app/uses/page.tsx

@@ -1,12 +1,77 @@
-import Hero from "@/components/content/Hero";
 import type { Metadata } from "next";
+import Hero from "@/components/content/Hero";
+import SectionLabel from "@/components/layout/SectionLabel";
 
 export const metadata: Metadata = {
   title: "Uses — Angel Mankel",
 };
 
+type Section =
+  | { label: string; kind: "list"; items: string[] }
+  | { label: string; kind: "prose"; paragraphs: string[] };
+
+const sections: Section[] = [
+  {
+    label: "Hardware",
+    kind: "list",
+    items: [
+      "Custom desktop — i9-12900H, 32GB RAM, Intel Iris Xe",
+      "Nobara Linux 43 · KDE Plasma 6 · Wayland",
+      "Headphones / keyboard / monitor — placeholder",
+    ],
+  },
+  {
+    label: "Editor & Shell",
+    kind: "list",
+    items: [
+      "VS Code with a personal extension pack — placeholder",
+      "Bash / zsh — placeholder for shell",
+      "JetBrains Mono as the editor font",
+      "Theme — placeholder",
+    ],
+  },
+  {
+    label: "AI Workflow",
+    kind: "prose",
+    paragraphs: [
+      "Claude Code is the daily driver — custom slash commands, MCP servers wired into my editor, and agent workflows that handle the repeat work so I can stay in the design problem.",
+      "Placeholder paragraph two — name a specific workflow and the time it saves.",
+    ],
+  },
+  {
+    label: "Self-hosting",
+    kind: "list",
+    items: [
+      "Bare-metal home server, exposed to the internet through Traefik",
+      "This site lives on it — Next.js standalone build, no managed host",
+      "Other services — placeholder",
+    ],
+  },
+];
+
 export default function UsesPage() {
   return (
-    <Hero label="Uses" subtitle="Tools and technologies I use in my work."/>
+    <div className="space-y-14">
+      <Hero label="Uses" subtitle="What I reach for daily." />
+
+      {sections.map((section) => (
+        <section key={section.label} className="space-y-4">
+          <SectionLabel label={section.label} />
+          {section.kind === "list" ? (
+            <ul className="space-y-2 text-[15px] leading-[1.65] text-neutral-200">
+              {section.items.map((item) => (
+                <li key={item}>{item}</li>
+              ))}
+            </ul>
+          ) : (
+            <div className="space-y-4 text-[15px] leading-[1.65] text-neutral-200">
+              {section.paragraphs.map((p) => (
+                <p key={p}>{p}</p>
+              ))}
+            </div>
+          )}
+        </section>
+      ))}
+    </div>
   );
 }