feat: branded error routes, project skeleton, footer contact, creator tab URL (#117 #120 #122 #125)

src/app/creator/page.tsx

@@ -1,6 +1,7 @@
 'use client'
 
-import { useState } from 'react'
+import { Suspense, useCallback } from 'react'
+import { useRouter, useSearchParams } from 'next/navigation'
 import { useTranslations } from 'next-intl'
 import { Tag } from '@/components'
 import { CreatorApplication } from '@/screens/creator/CreatorApplication'
@@ -9,9 +10,38 @@ import { CreatorDashboard } from '@/screens/creator/CreatorDashboard'
 
 type CreatorTab = 'apply' | 'build' | 'dashboard'
 
-export default function CreatorPage() {
+const VALID_TABS = new Set<CreatorTab>(['apply', 'build', 'dashboard'])
+
+function toTab(value: string | null): CreatorTab {
+  if (value && VALID_TABS.has(value as CreatorTab)) return value as CreatorTab
+  return 'apply'
+}
+
+/**
+ * Inner component — holds useSearchParams so the Suspense boundary in the
+ * default export can provide a fallback during static prerendering, satisfying
+ * Next.js's requirement without deopting the whole route.
+ */
+function CreatorPageInner() {
   const t = useTranslations('Creator')
-  const [tab, setTab] = useState<CreatorTab>('apply')
+  const router = useRouter()
+  const searchParams = useSearchParams()
+
+  const tab = toTab(searchParams.get('tab'))
+
+  /**
+   * Write the new tab into ?tab= using replace so tab switches don't push
+   * entries onto the history stack — back/forward navigates between pages,
+   * not between tabs on the same page.
+   */
+  const setTab = useCallback(
+    (next: CreatorTab) => {
+      const params = new URLSearchParams(searchParams.toString())
+      params.set('tab', next)
+      router.replace(`/creator?${params.toString()}`, { scroll: false })
+    },
+    [router, searchParams],
+  )
 
   const TABS: { id: CreatorTab; label: string }[] = [
     { id: 'apply', label: t('tabApply') },
@@ -50,18 +80,18 @@ export default function CreatorPage() {
 
       <div
         role="tablist"
-        aria-label="Creator space sections"
+        aria-label={t('tabsLabel')}
         style={{ display: 'flex', gap: 8, marginBottom: 32, flexWrap: 'wrap' }}
       >
-        {TABS.map((t) => (
+        {TABS.map((tb) => (
           <Tag
-            key={t.id}
-            selected={tab === t.id}
-            onClick={() => setTab(t.id)}
+            key={tb.id}
+            selected={tab === tb.id}
+            onClick={() => setTab(tb.id)}
             role="tab"
-            aria-selected={tab === t.id}
+            aria-selected={tab === tb.id}
           >
-            {t.label}
+            {tb.label}
           </Tag>
         ))}
       </div>
@@ -79,3 +109,16 @@ export default function CreatorPage() {
     </main>
   )
 }
+
+/**
+ * Creator page — wraps the inner component in Suspense so Next.js can
+ * statically prerender the shell while useSearchParams resolves on the client.
+ * The fallback is a minimal height reservation to avoid layout shift.
+ */
+export default function CreatorPage() {
+  return (
+    <Suspense fallback={<div style={{ minHeight: 'calc(100dvh - 140px)' }} />}>
+      <CreatorPageInner />
+    </Suspense>
+  )
+}

src/app/error.tsx

@@ -0,0 +1,147 @@
+'use client'
+
+import { useEffect } from 'react'
+import { Helio } from '../brand/Helio'
+
+/**
+ * App-level error boundary — runtime errors in any route segment bubble here
+ * instead of the framework default crash screen.
+ *
+ * Must be a Client Component (Next.js requirement for error.tsx).
+ * Logs the error to the console and offers a recovery action.
+ */
+export default function GlobalError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string }
+  reset: () => void
+}) {
+  useEffect(() => {
+    // In production wire this to your error-reporting service (e.g. Sentry).
+    console.error('[Heliobond] unhandled error:', error)
+  }, [error])
+
+  return (
+    <main
+      id="main-content"
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        minHeight: 'calc(100dvh - 140px)',
+        padding: '64px 32px',
+        textAlign: 'center',
+      }}
+    >
+      <div aria-hidden="true" style={{ marginBottom: 32, opacity: 0.75 }}>
+        <Helio size={160} motes={3} breathe={false} />
+      </div>
+
+      <p
+        style={{
+          fontFamily: 'var(--font-data)',
+          fontSize: 13,
+          letterSpacing: '0.1em',
+          color: 'var(--solar)',
+          margin: '0 0 12px',
+          textTransform: 'uppercase',
+        }}
+      >
+        Something went wrong
+      </p>
+
+      <h1
+        style={{
+          fontFamily: 'var(--font-display)',
+          fontWeight: 800,
+          fontSize: 'clamp(2rem, 4vw, 3rem)',
+          lineHeight: 1.05,
+          letterSpacing: '-0.02em',
+          color: 'var(--ink)',
+          margin: '0 0 14px',
+        }}
+      >
+        An unexpected error occurred
+      </h1>
+
+      <p
+        style={{
+          fontFamily: 'var(--font-body)',
+          fontSize: 16,
+          lineHeight: 1.6,
+          color: 'var(--ink-60)',
+          maxWidth: 440,
+          margin: '0 0 8px',
+        }}
+      >
+        The application hit an unexpected problem. You can try recovering, or go
+        back to the home page.
+      </p>
+
+      {error.digest && (
+        <p
+          style={{
+            fontFamily: 'var(--font-data)',
+            fontSize: 12,
+            color: 'var(--ink-40)',
+            margin: '0 0 32px',
+          }}
+        >
+          Error ref: {error.digest}
+        </p>
+      )}
+      {!error.digest && <div style={{ marginBottom: 32 }} />}
+
+      <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', justifyContent: 'center' }}>
+        <button
+          type="button"
+          onClick={reset}
+          style={{
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            height: 44,
+            padding: '0 20px',
+            fontFamily: 'var(--font-body)',
+            fontWeight: 600,
+            fontSize: 15,
+            lineHeight: 1,
+            borderRadius: 'var(--radius-pill)',
+            background: 'var(--solar)',
+            color: 'var(--ink)',
+            border: '1px solid transparent',
+            cursor: 'pointer',
+            transition: 'background var(--dur-press) var(--ease-out)',
+          }}
+        >
+          Try again
+        </button>
+
+        <a
+          href="/"
+          style={{
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            height: 44,
+            padding: '0 20px',
+            fontFamily: 'var(--font-body)',
+            fontWeight: 600,
+            fontSize: 15,
+            lineHeight: 1,
+            borderRadius: 'var(--radius-pill)',
+            background: 'transparent',
+            color: 'var(--ink)',
+            border: '1px solid var(--ink)',
+            textDecoration: 'none',
+            transition: 'background var(--dur-press) var(--ease-out)',
+          }}
+        >
+          Go home
+        </a>
+      </div>
+    </main>
+  )
+}

src/app/not-found.tsx

@@ -0,0 +1,91 @@
+import Link from 'next/link'
+import { Helio } from '../brand/Helio'
+
+/**
+ * App-level 404 — unknown routes fall here instead of the framework default.
+ * Branded: Helio orb at reduced size, display-type heading, solar accent, back
+ * to the landing CTA. Pure Server Component — no client hooks needed.
+ */
+export default function NotFound() {
+  return (
+    <main
+      id="main-content"
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        minHeight: 'calc(100dvh - 140px)',
+        padding: '64px 32px',
+        textAlign: 'center',
+      }}
+    >
+      <div aria-hidden="true" style={{ marginBottom: 32, opacity: 0.85 }}>
+        <Helio size={160} motes={4} breathe={false} />
+      </div>
+
+      <p
+        style={{
+          fontFamily: 'var(--font-data)',
+          fontSize: 13,
+          letterSpacing: '0.1em',
+          color: 'var(--solar)',
+          margin: '0 0 12px',
+          textTransform: 'uppercase',
+        }}
+      >
+        404
+      </p>
+
+      <h1
+        style={{
+          fontFamily: 'var(--font-display)',
+          fontWeight: 800,
+          fontSize: 'clamp(2rem, 4vw, 3rem)',
+          lineHeight: 1.05,
+          letterSpacing: '-0.02em',
+          color: 'var(--ink)',
+          margin: '0 0 14px',
+        }}
+      >
+        Page not found
+      </h1>
+
+      <p
+        style={{
+          fontFamily: 'var(--font-body)',
+          fontSize: 16,
+          lineHeight: 1.6,
+          color: 'var(--ink-60)',
+          maxWidth: 400,
+          margin: '0 0 36px',
+        }}
+      >
+        The route you followed doesn&apos;t exist — it may have moved or never existed.
+      </p>
+
+      <Link
+        href="/"
+        style={{
+          display: 'inline-flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          height: 44,
+          padding: '0 20px',
+          fontFamily: 'var(--font-body)',
+          fontWeight: 600,
+          fontSize: 15,
+          lineHeight: 1,
+          borderRadius: 'var(--radius-pill)',
+          background: 'var(--solar)',
+          color: 'var(--ink)',
+          textDecoration: 'none',
+          border: '1px solid transparent',
+          transition: 'background var(--dur-press) var(--ease-out)',
+        }}
+      >
+        Back to Heliobond
+      </Link>
+    </main>
+  )
+}