feat(30-02): build full-screen catalog-driven onboarding flow UI

Implements 5-step onboarding: Welcome, Hobby Picker, Item Browser,
Review, and Done. Includes hobby card selection, popular item grid
with check/uncheck, review list with remove, CSS step transitions,
and responsive grid layout.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/client/components/onboarding/OnboardingHobbyPicker.tsx

@@ -0,0 +1,47 @@
+import { HOBBIES } from "@/shared/hobbyConfig";
+import { HobbyCard } from "./HobbyCard";
+
+interface OnboardingHobbyPickerProps {
+	selectedHobbies: string[];
+	onToggleHobby: (hobbyId: string) => void;
+	onContinue: () => void;
+}
+
+export function OnboardingHobbyPicker({
+	selectedHobbies,
+	onToggleHobby,
+	onContinue,
+}: OnboardingHobbyPickerProps) {
+	return (
+		<div className="flex flex-col items-center justify-center min-h-screen px-8">
+			<div className="max-w-2xl text-center">
+				<h1 className="text-3xl font-bold text-gray-900 mb-2">
+					What are you into?
+				</h1>
+				<p className="text-base text-gray-500 mb-8">
+					Pick one or more — we'll show you popular gear for each.
+				</p>
+				<div className="flex flex-wrap justify-center gap-4 mb-8">
+					{HOBBIES.map((hobby) => (
+						<HobbyCard
+							key={hobby.id}
+							name={hobby.name}
+							icon={hobby.icon}
+							descriptor={hobby.descriptor}
+							selected={selectedHobbies.includes(hobby.id)}
+							onClick={() => onToggleHobby(hobby.id)}
+						/>
+					))}
+				</div>
+				<button
+					type="button"
+					onClick={onContinue}
+					disabled={selectedHobbies.length === 0}
+					className="px-8 py-3 bg-gray-700 hover:bg-gray-800 disabled:opacity-50 disabled:cursor-not-allowed text-white font-medium rounded-lg transition-colors"
+				>
+					Continue
+				</button>
+			</div>
+		</div>
+	);
+}