Title: feat: build user profile settings page (#8)

[Emeka000]

Body:

Summary

• Adds /settings/profile route with a fully functional profile editing form
• Implements useProfileForm hook (React Hook Form + Zod) with mock save handler, dirty-state tracking, and cancel-to-last-saved behaviour
• Redesigns the settings shell with a dark-mode layout, proper page header, and a SettingsNav client component that highlights the active tab via usePathname()

What's included

New files

• src/app/(dashboard)/settings/profile/page.tsx — route entry point
• src/components/settings/ProfileForm.tsx — two-column settings-row layout (label + description left, control right) with a live profile preview card at the top
• src/components/settings/SettingsNav.tsx — client component for active-tab detection
• src/hooks/useProfileForm.ts — form state, Zod validation, mock save (900 ms delay), and cancel reset

Modified files

• src/app/(dashboard)/settings/layout.tsx — dark header, page subtitle, uses SettingsNav
• src/lib/validations/profile.ts — replaced website field with avatarUrl (URL format validated)

Acceptance criteria checklist

• Route /settings/profile renders inside the existing dashboard shell
• Fields: display name, email (read-only with badge), bio, avatar URL
• Bio validated ≤ 300 chars client-side; counter turns amber at 270+
• Avatar URL validated as a proper URL; live preview updates in the card above
• Save button disabled when form is pristine; shows "Saving…" during in-flight request
• Cancel resets all fields to the last successfully saved values
• Success / error inline feedback after mock save
• Mobile responsive — single-column stacked layout below md breakpoint
• Email field documented as read-only (inline badge + description text)
• npm run lint and tsc --noEmit pass with zero errors

Notes

• The save handler in useProfileForm.ts is a mock (setTimeout 900 ms). Swap the try block body for a real API call when the backend endpoint is ready — the loading/success/error states are already wired up.
• next/image is used for the avatar preview to satisfy the @next/next/no-img-element lint rule. External image domains will need to be allow-listed in next.config once real URLs are in use.