Frontend update

client/src/routes/public/Status.jsx

@@ -0,0 +1,86 @@
+import PublicLayout from '../../components/PublicLayout.jsx'
+import PageHeader from '../../components/PageHeader.jsx'
+import { Loading, ErrorState } from '../../components/PageState.jsx'
+import { useAsync } from '../../lib/useAsync.js'
+import { api } from '../../api/client.js'
+
+export default function Status() {
+  const { loading, error, data } = useAsync(() => api.status())
+  const mode = data?.mode || 'live'
+  const statusMessage = data?.status_message || ''
+  const isLive = mode === 'live'
+
+  const stats = [
+    { value: isLive ? 'Live' : 'Maint.', label: 'Site mode' },
+    { value: isLive ? 'Open' : 'Closed', label: 'Public login' },
+    { value: statusMessage || '—', label: 'Latest note' },
+  ]
+
+  return (
+    <PublicLayout section="website">
+      <div className="shell-narrow page-body">
+        <PageHeader eyebrow="Live" title="Shard Status" />
+
+        {loading && <Loading />}
+        {error && <ErrorState message="Could not load status right now." />}
+
+        {!loading && !error && (
+          <>
+            <section
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: 16,
+                padding: '24px 26px',
+                border: `1px solid ${isLive ? 'rgba(95,185,138,0.45)' : '#5a4a2a'}`,
+                borderRadius: 10,
+                background: isLive
+                  ? 'linear-gradient(180deg,rgba(22,46,34,0.5),rgba(16,26,20,0.4))'
+                  : 'linear-gradient(180deg,rgba(58,46,22,0.5),rgba(30,26,16,0.4))',
+                marginBottom: 24,
+              }}
+            >
+              <span
+                style={{
+                  flex: 'none',
+                  width: 12,
+                  height: 12,
+                  borderRadius: '50%',
+                  background: isLive ? 'var(--mode-live)' : 'var(--mode-maint)',
+                  boxShadow: `0 0 12px ${isLive ? 'rgba(95,185,138,0.7)' : 'rgba(230,194,106,0.7)'}`,
+                }}
+              />
+              <div>
+                <strong
+                  className="display"
+                  style={{ display: 'block', fontSize: '1.2rem', color: isLive ? '#bfe6cf' : '#f0e3c4' }}
+                >
+                  {isLive ? 'Live — the gates are open' : 'Maintenance — building in progress'}
+                </strong>
+                <span style={{ color: isLive ? '#a9cdb8' : '#cdbf9a', fontSize: '0.98rem' }}>
+                  {statusMessage || (isLive ? 'The shard is online.' : 'The gates are closed while we shape the world. Public login is not open yet.')}
+                </span>
+              </div>
+            </section>
+
+            <section className="grid-3" style={{ gap: 14, marginBottom: 30 }}>
+              {stats.map((s) => (
+                <div key={s.label} className="panel" style={{ padding: 20, textAlign: 'center' }}>
+                  <div className="display" style={{ fontSize: '1.6rem', color: 'var(--head)' }}>
+                    {s.value}
+                  </div>
+                  <div
+                    className="sans"
+                    style={{ color: 'var(--accent)', fontSize: '0.7rem', letterSpacing: '0.12em', textTransform: 'uppercase', marginTop: 6 }}
+                  >
+                    {s.label}
+                  </div>
+                </div>
+              ))}
+            </section>
+          </>
+        )}
+      </div>
+    </PublicLayout>
+  )
+}