Unify page layouts, compact headers and shared UI styling

frontend/app/profile/invites/page.tsx

@@ -1,5 +1,7 @@
 'use client'
 
+import PageHeading from '../../ui/PageHeading'
+
 import { useRouter } from 'next/navigation'
 import { useEffect, useMemo, useState } from 'react'
 import { authFetch, clearToken, getApiBase, getToken } from '../../lib/auth'
@@ -225,14 +227,8 @@ export default function ProfileInvitesPage() {
   if (loading) return <main className="card">Loading invite workspace…</main>
 
   return (
-    <main className="card">
-      <div className="user-directory-panel-header profile-page-header">
-        <div>
-          <span className="section-kicker">04 · Invites</span>
-          <h1>Invite someone to Grizzlyflix</h1>
-          <p className="lede">Create a secure invitation one simple decision at a time.</p>
-        </div>
-      </div>
+    <main className="card invites-page">
+      <PageHeading title="Invites" description="Invite someone to Grizzlyflix and manage the links you share." />
       {error && <div className="error-banner">{error}</div>}
       {status && <div className="status-banner">{status}</div>}
 

frontend/app/profile/page.tsx

@@ -1,5 +1,7 @@
 'use client'
 
+import PageHeading from '../ui/PageHeading'
+
 import { useCallback, useEffect, useState, type FormEvent, type KeyboardEvent } from 'react'
 import { useRouter } from 'next/navigation'
 import { authFetch, clearToken, getApiBase, getToken } from '../lib/auth'
@@ -167,10 +169,9 @@ export default function ProfilePage() {
 
   return (
     <main className="account-page">
-      <header className="account-heading">
-        <div><span className="account-eyebrow">YOUR ACCOUNT</span><h1>My profile</h1></div>
-        {user && <div className="account-identity"><span className="account-avatar" aria-hidden="true">{user.username.slice(0, 1).toUpperCase()}</span><div><strong>{user.username}</strong><span>{user.role === 'admin' ? 'Administrator' : 'Member'}</span></div></div>}
-      </header>
+      <PageHeading title="My profile" description="Your contact details, security, and activity." actions={
+        user && <div className="account-identity"><span className="account-avatar" aria-hidden="true">{user.username.slice(0, 1).toUpperCase()}</span><div><strong>{user.username}</strong><span>{user.role === 'admin' ? 'Administrator' : 'Member'}</span></div></div>
+      } />
 
       {loading ? <p className="account-empty" role="status">Loading your profile…</p> : loadError ? (
         <div className="account-empty"><p role="alert">{loadError}</p><button type="button" className="account-secondary" onClick={() => void loadProfile()}>Try again</button></div>