Fancy 404 page with book icon, action buttons, and broken-link report form; v1.1.32

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "siteforge",
   "private": true,
-  "version": "1.1.31",
+  "version": "1.1.32",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/App.tsx

@@ -2528,14 +2528,132 @@ export default function App() {
 
 function NotFoundPage() {
   const location = useLocation()
+  const [showForm, setShowForm] = useState(false)
+  const [form, setForm] = useState({
+    firstName: '',
+    email: '',
+    message: `Hi Nate, I tried visiting "${location.pathname}" and got a 404. You may want to check if this link is broken.`,
+  })
+  const [submitStatus, setSubmitStatus] = useState<'idle' | 'busy' | 'sent' | 'error'>('idle')
+  const [errMsg, setErrMsg] = useState('')
+
   useEffect(() => {
     sendEvent('not_found', { path: location.pathname })
   }, [location.pathname])
+
+  async function handleReport(e: React.FormEvent) {
+    e.preventDefault()
+    setSubmitStatus('busy')
+    try {
+      const res = await fetch('/api/contact', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          firstName: form.firstName,
+          email: form.email,
+          message: form.message,
+          messageType: 'question',
+          _honey: '',
+        }),
+      })
+      const data = await res.json()
+      if (!res.ok) throw new Error(data.message ?? 'Something went wrong.')
+      setSubmitStatus('sent')
+    } catch (err) {
+      setErrMsg(err instanceof Error ? err.message : 'Something went wrong.')
+      setSubmitStatus('error')
+    }
+  }
+
   return (
-    <main style={{ padding: '4rem 2rem', textAlign: 'center' }}>
-      <h1>Page not found</h1>
-      <p>The page <code>{location.pathname}</code> doesn't exist.</p>
-      <Link to="/" style={{ marginTop: '1rem', display: 'inline-block' }}>← Back to home</Link>
+    <main className="thanks-page" aria-label="Page not found">
+      <div className="thanks-card">
+        <img
+          src="/book_icon.png"
+          alt=""
+          aria-hidden="true"
+          style={{ width: '72px', marginBottom: '0.75rem', opacity: 0.55 }}
+        />
+        <p className="eyebrow">404</p>
+        <h1>Page Not Found</h1>
+        <p>
+          The path <code style={{ fontSize: '0.95em', opacity: 0.85 }}>{location.pathname}</code>{' '}
+          doesn't exist — it may have moved or been removed.
+        </p>
+        <div style={{ display: 'flex', gap: '0.75rem', justifyContent: 'center', flexWrap: 'wrap', marginBottom: '2rem' }}>
+          <Link to="/" className="btn-primary">← Back to Home</Link>
+          <Link to="/episodes" className="btn-secondary">Browse Episodes</Link>
+        </div>
+        <div style={{ borderTop: '1px solid rgba(201,168,76,0.15)', paddingTop: '1.5rem' }}>
+          {submitStatus !== 'sent' ? (
+            <>
+              <p style={{ fontSize: '0.9rem', marginBottom: showForm ? '1rem' : 0 }}>
+                Think this is a broken link?{' '}
+                {!showForm && (
+                  <button
+                    onClick={() => setShowForm(true)}
+                    style={{
+                      background: 'none', border: 'none', color: 'var(--brand-gold)',
+                      cursor: 'pointer', fontFamily: 'inherit', fontSize: 'inherit',
+                      textDecoration: 'underline', padding: 0,
+                    }}
+                  >
+                    Let Nate know.
+                  </button>
+                )}
+              </p>
+              {showForm && (
+                <form className="contact-form" onSubmit={handleReport} style={{ textAlign: 'left' }}>
+                  <div style={{ display: 'flex', gap: '0.6rem', flexWrap: 'wrap' }}>
+                    <label style={{ flex: '1', minWidth: '120px' }}>
+                      Your name
+                      <input
+                        type="text"
+                        value={form.firstName}
+                        onChange={e => setForm(f => ({ ...f, firstName: e.target.value }))}
+                        placeholder="First name"
+                        required
+                        maxLength={100}
+                      />
+                    </label>
+                    <label style={{ flex: '2', minWidth: '180px' }}>
+                      Email
+                      <input
+                        type="email"
+                        value={form.email}
+                        onChange={e => setForm(f => ({ ...f, email: e.target.value }))}
+                        placeholder="you@example.com"
+                        required
+                      />
+                    </label>
+                  </div>
+                  <label>
+                    Message
+                    <textarea
+                      value={form.message}
+                      onChange={e => setForm(f => ({ ...f, message: e.target.value }))}
+                      rows={3}
+                      maxLength={3000}
+                      required
+                    />
+                  </label>
+                  <input type="text" name="_honey" style={{ display: 'none' }} aria-hidden="true" tabIndex={-1} />
+                  <div style={{ display: 'flex', alignItems: 'center', gap: '1rem', flexWrap: 'wrap' }}>
+                    <button type="submit" className="btn-secondary" disabled={submitStatus === 'busy'}>
+                      {submitStatus === 'busy' ? 'Sending…' : 'Report Broken Link'}
+                    </button>
+                    {submitStatus === 'error' && (
+                      <span style={{ color: '#e05c5c', fontSize: '0.9rem' }}>{errMsg}</span>
+                    )}
+                  </div>
+                </form>
+              )}
+            </>
+          ) : (
+            <p style={{ color: '#6fcf97' }}>Thanks! Nate will look into it.</p>
+          )}
+        </div>
+      </div>
     </main>
   )
 }