Frontend update

client/src/routes/public/Screenshots.jsx

@@ -0,0 +1,62 @@
+import PublicLayout from '../../components/PublicLayout.jsx'
+import PageHeader from '../../components/PageHeader.jsx'
+import { Loading, ErrorState, EmptyState } from '../../components/PageState.jsx'
+import { useAsync } from '../../lib/useAsync.js'
+import { api } from '../../api/client.js'
+
+const HATCH = 'repeating-linear-gradient(135deg,#141a21,#141a21 13px,#181f29 13px,#181f29 26px)'
+
+export default function Screenshots() {
+  const { loading, error, data } = useAsync(() => api.posts('screenshots'))
+  const shots = data || []
+
+  return (
+    <PublicLayout section="website">
+      <div className="shell page-body">
+        <PageHeader
+          eyebrow="Gallery"
+          title="Gameplay Pictures"
+          lead="Glimpses of towns, dungeons, events, and daily life on the shard."
+        />
+        {loading && <Loading />}
+        {error && <ErrorState message="Could not load the gallery right now." />}
+        {!loading && !error && shots.length === 0 && <EmptyState>No screenshots posted yet.</EmptyState>}
+        <section className="grid-3">
+          {shots.map((s) => (
+            <figure key={s.id} className="panel-flat" style={{ margin: 0, boxShadow: 'var(--shadow-card)' }}>
+              {s.image_url ? (
+                <img
+                  src={s.image_url}
+                  alt={s.title || ''}
+                  style={{ display: 'block', width: '100%', aspectRatio: '16 / 10', objectFit: 'cover' }}
+                />
+              ) : (
+                <div
+                  style={{
+                    aspectRatio: '16 / 10',
+                    display: 'flex',
+                    alignItems: 'flex-end',
+                    padding: 12,
+                    background: HATCH,
+                    color: 'var(--dim)',
+                    fontFamily: 'ui-monospace,Menlo,monospace',
+                    fontSize: '0.7rem',
+                  }}
+                >
+                  image · {s.slug || s.id}
+                </div>
+              )}
+              {(s.excerpt || s.title) && (
+                <figcaption
+                  style={{ padding: '14px 16px', color: 'var(--text)', fontSize: '0.96rem', borderTop: '1px solid var(--line)' }}
+                >
+                  {s.excerpt || s.title}
+                </figcaption>
+              )}
+            </figure>
+          ))}
+        </section>
+      </div>
+    </PublicLayout>
+  )
+}