Unify page layouts, compact headers and shared UI styling

frontend/app/new-requests/NewRequestClient.tsx

@@ -1,5 +1,7 @@
 'use client'
 
+import PageHeading from '../ui/PageHeading'
+
 import { useEffect, useRef, useState } from 'react'
 import { useRouter } from 'next/navigation'
 import { authFetch, clearToken, getApiBase, getToken } from '../lib/auth'
@@ -318,18 +320,7 @@ export default function NewRequestClient() {
 
   return (
     <main className="card request-portal-page">
-      <header className="request-portal-hero">
-        <div>
-          <span className="section-kicker">New requests</span>
-          <h1>Find something worth watching.</h1>
-          <p>Choose what you want, find the right title, then tailor the request before it goes to Seerr.</p>
-        </div>
-        <div className="request-portal-route">
-          <span>Seerr</span><i aria-hidden="true" />
-          <span>{mediaType === 'tv' ? 'Sonarr' : mediaType === 'movie' ? 'Radarr' : 'Collector'}</span><i aria-hidden="true" />
-          <span>Grizzlyflix</span>
-        </div>
-      </header>
+      <PageHeading title="New request" description="Find a movie or TV show and choose what you want to watch." />
 
       <ol className="request-master-stepper" aria-label="New request progress">
         {['Type', 'Search', 'Select', 'Config', 'Submit'].map((label, index) => {