Frontend update

2026-06-26 21:51:27 -05:00
parent eef79e2403
commit 6dba6a017c
48 changed files with 5004 additions and 0 deletions
--- a/client/src/routes/public/Portal.jsx
+++ b/client/src/routes/public/Portal.jsx
@@ -0,0 +1,112 @@
+import { Link } from 'react-router-dom'
+import PublicLayout from '../../components/PublicLayout.jsx'
+import { useSite } from '../../contexts/SiteContext.jsx'
+
+const HERO_BG =
+  "linear-gradient(90deg,rgba(11,15,20,0.34) 0%,rgba(11,15,20,0.5) 36%,rgba(11,15,20,0.78) 62%,rgba(11,15,20,0.66) 100%),linear-gradient(180deg,rgba(11,15,20,0.08) 0%,rgba(11,15,20,0.72) 100%),url('/assets/img/uomysticmoon-main-hero.png')"
+
+const QUICK = [
+  { label: 'News', to: '/site/news' },
+  { label: 'Screenshots', to: '/site/screenshots' },
+  { label: 'Five on Friday', to: '/site/five-on-friday' },
+  { label: 'Monthly Newsletter', to: '/site/newsletter' },
+  { label: 'About', to: '/site/about' },
+]
+
+const DESTINATIONS = [
+  {
+    kicker: 'Public portal',
+    title: 'Mysticmoon Website',
+    body: 'Updates, screenshots, newsletters, and weekly community posts from the shard.',
+    to: '/site',
+  },
+  {
+    kicker: 'Knowledge base',
+    title: 'Mysticmoon Wiki',
+    body: 'Guides, maps, systems, items, monsters, crafting, lore, and rules.',
+    to: '/wiki',
+  },
+]
+
+export default function Portal() {
+  const { settings } = useSite()
+  const teaser =
+    settings.homepage_teaser ||
+    'Mysticmoon is still being shaped beneath a midnight sky — a quiet preview for the news, screenshots, guides, and community notes to come as the world wakes.'
+
+  return (
+    <PublicLayout header={false}>
+      <main style={{ minHeight: '100vh', display: 'flex', flexDirection: 'column' }}>
+        <section
+          style={{
+            position: 'relative',
+            display: 'grid',
+            alignContent: 'center',
+            minHeight: 'clamp(600px,72vh,860px)',
+            padding: '96px max(18px,calc((100% - 1080px)/2)) 96px',
+            overflow: 'hidden',
+            textAlign: 'center',
+            backgroundColor: 'var(--bg-deep)',
+            backgroundImage: HERO_BG,
+            backgroundPosition: 'left center',
+            backgroundRepeat: 'no-repeat',
+            backgroundSize: 'cover',
+          }}
+        >
+          <div style={{ maxWidth: 760, margin: '0 auto', textShadow: '0 2px 22px rgba(0,0,0,0.82)' }}>
+            <p className="eyebrow" style={{ color: '#c2d2e6', letterSpacing: '0.22em' }}>
+              Private shard project
+            </p>
+            <h1
+              className="display"
+              style={{ margin: 0, fontSize: 'clamp(3rem,8.5vw,5.75rem)', lineHeight: 1, letterSpacing: '0.02em' }}
+            >
+              UOMysticmoon
+            </h1>
+            <p style={{ margin: '22px auto 0', color: '#dbe2ea', fontSize: '1.32rem', fontStyle: 'italic' }}>
+              A private Ultima Online world in progress
+            </p>
+            <p style={{ maxWidth: 600, margin: '22px auto 0', color: '#c4cdd8', fontSize: '1.06rem' }}>{teaser}</p>
+            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, justifyContent: 'center', marginTop: 34 }}>
+              <Link to="/site" className="btn btn-primary">
+                Enter the Website
+              </Link>
+              <Link to="/wiki" className="btn btn-ghost">
+                Open the Wiki
+              </Link>
+            </div>
+          </div>
+        </section>
+
+        <div className="shell" style={{ padding: '56px 0 12px' }}>
+          <nav className="grid-2" aria-label="Main destinations">
+            {DESTINATIONS.map((d) => (
+              <Link key={d.to} to={d.to} className="card" style={{ padding: 30 }}>
+                <span className="card-kicker" style={{ letterSpacing: '0.16em', marginBottom: 14 }}>
+                  {d.kicker}
+                </span>
+                <strong
+                  className="display"
+                  style={{ fontSize: '1.7rem', color: 'var(--head)', marginBottom: 10, fontWeight: 600 }}
+                >
+                  {d.title}
+                </strong>
+                <span className="muted">{d.body}</span>
+              </Link>
+            ))}
+          </nav>
+        </div>
+
+        <div className="shell" style={{ padding: '24px 0 64px' }}>
+          <nav style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center', gap: 10 }} aria-label="Quick links">
+            {QUICK.map((q) => (
+              <Link key={q.to} to={q.to} className="pill">
+                {q.label}
+              </Link>
+            ))}
+          </nav>
+        </div>
+      </main>
+    </PublicLayout>
+  )
+}