feat(web): Next.js 15 shell — design tokens, landing, auth pages

apps/web/components/code-block.tsx

@@ -0,0 +1,65 @@
+'use client';
+
+import { useState } from 'react';
+import { Check, Copy } from 'lucide-react';
+import { cn } from '@/lib/cn';
+
+export interface CodeBlockProps {
+  code: string;
+  language?: string;
+  label?: string;
+  className?: string;
+}
+
+export function CodeBlock({ code, language, label, className }: CodeBlockProps) {
+  const [copied, setCopied] = useState(false);
+
+  async function onCopy() {
+    try {
+      await navigator.clipboard.writeText(code);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    } catch {}
+  }
+
+  return (
+    <div className={cn('panel-subtle relative overflow-hidden', className)}>
+      {(label || language) && (
+        <div className="flex items-center justify-between border-b border-[--color-border] px-3 py-2">
+          <span className="mono text-[11px] uppercase tracking-wider text-[--color-fg-subtle]">
+            {label ?? language}
+          </span>
+          <button
+            type="button"
+            onClick={onCopy}
+            aria-label="Copy"
+            className="inline-flex items-center gap-1.5 rounded-sm text-[11px] text-[--color-fg-subtle] transition-colors duration-200 ease-out hover:text-[--color-fg]"
+          >
+            {copied ? (
+              <>
+                <Check size={12} /> copied
+              </>
+            ) : (
+              <>
+                <Copy size={12} /> copy
+              </>
+            )}
+          </button>
+        </div>
+      )}
+      {!label && !language && (
+        <button
+          type="button"
+          onClick={onCopy}
+          aria-label="Copy"
+          className="absolute right-2 top-2 inline-flex items-center gap-1.5 rounded-sm border border-[--color-border] bg-[--color-bg-elevated] px-2 py-1 text-[11px] text-[--color-fg-subtle] transition-colors duration-200 ease-out hover:text-[--color-fg]"
+        >
+          {copied ? <Check size={12} /> : <Copy size={12} />}
+        </button>
+      )}
+      <pre className="mono overflow-x-auto px-3 py-3 text-[12.5px] leading-relaxed text-[--color-fg]">
+        <code>{code}</code>
+      </pre>
+    </div>
+  );
+}