feat: integrate official ROMeo mascot artwork and site favicon

src/components/Navbar.astro

@@ -17,16 +17,13 @@ const { user = null } = Astro.props;
 <header class="sticky top-0 z-40 border-b border-zinc-900/80 bg-zinc-950/80 backdrop-blur-xl">
   <div class="mx-auto flex h-16 max-w-7xl items-center gap-4 px-4 sm:px-6 lg:px-8">
     <a href="/" class="flex shrink-0 items-center gap-2.5">
-      <span
-        class="grid h-9 w-9 place-items-center rounded-lg bg-gradient-to-br from-cyan-400/20 to-purple-500/20 ring-1 ring-inset ring-cyan-400/30"
-      >
-        <svg viewBox="0 0 24 24" fill="none" class="h-5 w-5 text-cyan-300" aria-hidden="true">
-          <rect x="2.5" y="7" width="19" height="11" rx="5.5" stroke="currentColor" stroke-width="1.6" />
-          <path d="M7 11v4M5 13h4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" />
-          <circle cx="16" cy="12" r="1.1" fill="currentColor" />
-          <circle cx="18.5" cy="14.2" r="1.1" fill="currentColor" />
-        </svg>
-      </span>
+      <img
+        src="/images/romeo-logo.png"
+        alt=""
+        width="36"
+        height="36"
+        class="h-9 w-9 rounded-lg object-contain shadow-md shadow-cyan-500/10 transition-transform duration-200 hover:scale-105"
+      />
       <span class="hidden flex-col leading-none sm:flex">
         <span class="text-sm font-semibold tracking-tight text-zinc-100">OpenROM</span>
         <span class="text-[0.7rem] font-medium tracking-wide text-zinc-500">MARKETPLACE</span>

src/layouts/Layout.astro

@@ -45,7 +45,10 @@ if (session) {
     <meta property="og:title" content={fullTitle} />
     <meta property="og:description" content={description} />
     <meta property="og:type" content="website" />
-    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
+    <meta property="og:image" content="/images/romeo-banner.png" />
+    <meta property="og:image:alt" content="ROMeo, the OpenROM mascot, in a retro arcade shop" />
+    <link rel="icon" type="image/png" href="/images/romeo-logo.png" />
+    <link rel="apple-touch-icon" href="/images/romeo-logo.png" />
   </head>
   <body class="min-h-screen bg-zinc-950 text-zinc-200 antialiased">
     <Navbar user={user} />

src/pages/404.astro

@@ -0,0 +1,50 @@
+---
+import Layout from '../layouts/Layout.astro';
+import Icon from '../components/Icon.astro';
+
+export const prerender = false;
+
+Astro.response.status = 404;
+---
+
+<Layout
+  title="Page not found"
+  description="Whoops! ROMeo got lost in the bitstream. That page does not exist on the OpenROM Marketplace."
+>
+  <main class="relative mx-auto flex max-w-2xl flex-col items-center px-4 py-20 text-center sm:px-6 lg:px-8">
+    <div
+      class="pointer-events-none absolute left-1/2 top-24 h-64 w-64 -translate-x-1/2 rounded-full bg-cyan-500/10 blur-3xl"
+      aria-hidden="true"
+    >
+    </div>
+    <img
+      src="/images/romeo-error.png"
+      alt="ROMeo, the OpenROM mascot, looking dizzy with a bandage on his head"
+      width="140"
+      height="140"
+      class="relative h-[140px] w-[140px] object-contain drop-shadow-[0_0_28px_rgba(34,211,238,0.25)]"
+    />
+    <h1 class="relative mt-6 text-3xl font-bold tracking-tight text-white">
+      Whoops! ROMeo got lost in the bitstream (404).
+    </h1>
+    <p class="relative mt-3 max-w-md text-sm leading-relaxed text-zinc-400">
+      That page does not exist — it may have been renamed, moved, or the link that brought you here
+      is out of date.
+    </p>
+    <div class="relative mt-8 flex flex-wrap items-center justify-center gap-3">
+      <a
+        href="/"
+        class="inline-flex h-11 items-center gap-2 rounded-lg bg-gradient-to-r from-cyan-500 to-purple-500 px-5 text-sm font-semibold text-zinc-950 transition hover:from-cyan-400 hover:to-purple-400"
+      >
+        <Icon name="arrow-left" class="h-4 w-4" />
+        Back to Safety
+      </a>
+      <a
+        href="/#catalog"
+        class="inline-flex h-11 items-center gap-2 rounded-lg border border-zinc-800 px-5 text-sm font-medium text-zinc-200 transition hover:border-zinc-700 hover:text-white"
+      >
+        Browse extensions
+      </a>
+    </div>
+  </main>
+</Layout>

src/pages/index.astro

@@ -40,32 +40,51 @@ const total = plugins.length;
     <div class="grid-lines pointer-events-none absolute inset-0" aria-hidden="true"></div>
 
     <section class="relative mx-auto max-w-7xl px-4 pb-10 pt-16 sm:px-6 lg:px-8">
-      <p class="inline-flex items-center gap-2 rounded-full border border-zinc-800 bg-zinc-900/50 px-3 py-1 text-xs text-zinc-400">
-        <span class="h-1.5 w-1.5 rounded-full bg-cyan-400"></span>
-        Live catalog · served from Cloudflare D1
-      </p>
-      <h1 class="mt-5 max-w-3xl text-balance text-4xl font-bold tracking-tight text-white sm:text-5xl">
-        Extend your OpenROM preservation workflow
-      </h1>
-      <p class="mt-4 max-w-2xl text-pretty text-base leading-relaxed text-zinc-400">
-        {SITE.description} Every download count below is a real, live number — nothing here is
-        simulated.
-      </p>
+      <div class="grid items-center gap-10 lg:grid-cols-[minmax(0,1fr)_minmax(0,1fr)]">
+        <div>
+          <p class="inline-flex items-center gap-2 rounded-full border border-zinc-800 bg-zinc-900/50 px-3 py-1 text-xs text-zinc-400">
+            <span class="h-1.5 w-1.5 rounded-full bg-cyan-400"></span>
+            Live catalog · served from Cloudflare D1
+          </p>
+          <h1 class="mt-5 max-w-3xl text-balance text-4xl font-bold tracking-tight text-white sm:text-5xl">
+            Extend your OpenROM preservation workflow
+          </h1>
+          <p class="mt-4 max-w-2xl text-pretty text-base leading-relaxed text-zinc-400">
+            {SITE.description} Every download count below is a real, live number — nothing here is
+            simulated.
+          </p>
 
-      <div class="mt-7 flex flex-wrap items-center gap-3">
-        <a
-          href="#catalog"
-          class="inline-flex h-11 items-center gap-2 rounded-lg bg-gradient-to-r from-cyan-500 to-purple-500 px-5 text-sm font-semibold text-zinc-950 transition hover:from-cyan-400 hover:to-purple-400"
-        >
-          Browse extensions
-          <Icon name="chevron-right" class="h-4 w-4" />
-        </a>
-        <a
-          href={SITE.contributing}
-          class="inline-flex h-11 items-center gap-2 rounded-lg border border-zinc-800 px-5 text-sm font-medium text-zinc-200 transition hover:border-zinc-700 hover:text-white"
-        >
-          Publish an Extension
-        </a>
+          <div class="mt-7 flex flex-wrap items-center gap-3">
+            <a
+              href="#catalog"
+              class="inline-flex h-11 items-center gap-2 rounded-lg bg-gradient-to-r from-cyan-500 to-purple-500 px-5 text-sm font-semibold text-zinc-950 transition hover:from-cyan-400 hover:to-purple-400"
+            >
+              Browse extensions
+              <Icon name="chevron-right" class="h-4 w-4" />
+            </a>
+            <a
+              href={SITE.contributing}
+              class="inline-flex h-11 items-center gap-2 rounded-lg border border-zinc-800 px-5 text-sm font-medium text-zinc-200 transition hover:border-zinc-700 hover:text-white"
+            >
+              Publish an Extension
+            </a>
+          </div>
+        </div>
+
+        <div class="relative">
+          <div
+            class="pointer-events-none absolute -inset-4 rounded-[2rem] bg-gradient-to-tr from-cyan-500/20 via-transparent to-purple-500/20 blur-2xl"
+            aria-hidden="true"
+          >
+          </div>
+          <img
+            src="/images/romeo-banner.png"
+            alt="ROMeo, the OpenROM mascot, standing in a retro arcade shop"
+            width="1200"
+            height="670"
+            class="relative w-full rounded-2xl border border-zinc-800 object-cover shadow-xl shadow-cyan-950/20"
+          />
+        </div>
       </div>
     </section>
   </div>
@@ -82,19 +101,28 @@ const total = plugins.length;
         </div>
       ) : total === 0 ? (
         <div
-          class="relative overflow-hidden rounded-2xl border border-zinc-800 bg-zinc-900/30 px-6 py-20 text-center"
+          class="relative overflow-hidden rounded-2xl border border-zinc-800 bg-zinc-900/30 px-6 py-16 text-center"
           data-empty-state
         >
-          <div class="mx-auto grid h-16 w-16 place-items-center rounded-2xl bg-gradient-to-br from-cyan-400/15 to-purple-500/15 text-cyan-300 ring-1 ring-inset ring-zinc-700/60">
-            <Icon name="inbox" class="h-7 w-7" />
+          <div
+            class="pointer-events-none absolute left-1/2 top-0 h-56 w-56 -translate-x-1/2 rounded-full bg-cyan-500/10 blur-3xl"
+            aria-hidden="true"
+          >
           </div>
-          <h2 class="mt-6 text-xl font-semibold text-white">{EMPTY_STATE.title}</h2>
-          <p class="mx-auto mt-2 max-w-md text-sm leading-relaxed text-zinc-400">
+          <img
+            src="/images/romeo-search.png"
+            alt="ROMeo, the OpenROM mascot, looking puzzled through a magnifying glass"
+            width="140"
+            height="140"
+            class="relative mx-auto h-[140px] w-[140px] object-contain drop-shadow-[0_0_24px_rgba(34,211,238,0.25)]"
+          />
+          <h2 class="relative mt-6 text-xl font-semibold text-white">{EMPTY_STATE.title}</h2>
+          <p class="relative mx-auto mt-2 max-w-md text-sm leading-relaxed text-zinc-400">
             {EMPTY_STATE.body}
           </p>
           <a
             href={SITE.contributing}
-            class="mt-7 inline-flex h-11 items-center gap-2 rounded-lg bg-gradient-to-r from-cyan-500 to-purple-500 px-5 text-sm font-semibold text-zinc-950 transition hover:from-cyan-400 hover:to-purple-400"
+            class="relative mt-7 inline-flex h-11 items-center gap-2 rounded-lg bg-gradient-to-r from-cyan-500 to-purple-500 px-5 text-sm font-semibold text-zinc-950 transition hover:from-cyan-400 hover:to-purple-400"
           >
             {EMPTY_STATE.cta}
             <Icon name="external-link" class="h-4 w-4" />
@@ -126,17 +154,37 @@ const total = plugins.length;
 
             <div
               data-no-results
-              class="hidden rounded-xl border border-zinc-800 bg-zinc-900/30 px-6 py-16 text-center"
+              class="hidden rounded-2xl border border-zinc-800 bg-zinc-900/30 px-6 py-14 text-center"
             >
-              <Icon name="search" class="mx-auto h-6 w-6 text-zinc-600" />
-              <p class="mt-3 text-sm text-zinc-400">No extensions match your filters.</p>
-              <button
-                type="button"
-                data-clear-filters
-                class="mt-4 rounded-lg border border-zinc-800 px-4 py-2 text-xs font-medium text-zinc-300 transition hover:border-zinc-700 hover:text-white"
-              >
-                Clear filters
-              </button>
+              <img
+                src="/images/romeo-search.png"
+                alt="ROMeo, the OpenROM mascot, looking puzzled through a magnifying glass"
+                width="128"
+                height="128"
+                class="mx-auto h-32 w-32 object-contain drop-shadow-[0_0_24px_rgba(34,211,238,0.25)]"
+              />
+              <h3 class="mt-5 text-lg font-semibold text-white">
+                ROMeo couldn&rsquo;t find any extensions!
+              </h3>
+              <p class="mx-auto mt-2 max-w-md text-sm leading-relaxed text-zinc-400">
+                Try a different search term, or be the first to build this extension for OpenROM!
+              </p>
+              <div class="mt-6 flex flex-wrap items-center justify-center gap-3">
+                <a
+                  href={SITE.contributing}
+                  class="inline-flex h-10 items-center gap-2 rounded-lg bg-gradient-to-r from-cyan-500 to-purple-500 px-4 text-sm font-semibold text-zinc-950 transition hover:from-cyan-400 hover:to-purple-400"
+                >
+                  Publish an Extension
+                  <Icon name="external-link" class="h-4 w-4" />
+                </a>
+                <button
+                  type="button"
+                  data-clear-filters
+                  class="inline-flex h-10 items-center gap-2 rounded-lg border border-zinc-800 px-4 text-sm font-medium text-zinc-300 transition hover:border-zinc-700 hover:text-white"
+                >
+                  Clear filters
+                </button>
+              </div>
             </div>
           </section>
         </div>

src/pages/plugin/[id].astro

@@ -56,6 +56,9 @@ const manifest = plugin
   : null;
 
 const heading = dbError ? 'Plugin unavailable' : 'Plugin not found';
+const displayHeading = dbError
+  ? 'Plugin unavailable'
+  : 'Whoops! ROMeo got lost in the bitstream (404).';
 const body = dbError
   ? 'We could not load this plugin right now. This is usually temporary — please try again shortly.'
   : `No plugin exists with the id “${id}”. It may have been renamed, or the link that brought you here may be out of date.`;
@@ -64,13 +67,22 @@ const body = dbError
 <Layout title={plugin?.name ?? heading} description={plugin?.description ?? body}>
   {
     !plugin ? (
-      <main class="mx-auto flex max-w-2xl flex-col items-center px-4 py-24 text-center sm:px-6 lg:px-8">
-        <div class="grid h-16 w-16 place-items-center rounded-2xl bg-gradient-to-br from-cyan-400/15 to-purple-500/15 text-cyan-300 ring-1 ring-inset ring-zinc-700/60">
-          <Icon name={dbError ? 'wrench' : 'search'} class="h-7 w-7" />
+      <main class="relative mx-auto flex max-w-2xl flex-col items-center px-4 py-24 text-center sm:px-6 lg:px-8">
+        <div
+          class="pointer-events-none absolute left-1/2 top-28 h-56 w-56 -translate-x-1/2 rounded-full bg-cyan-500/10 blur-3xl"
+          aria-hidden="true"
+        >
         </div>
-        <h1 class="mt-6 text-2xl font-bold tracking-tight text-white">{heading}</h1>
-        <p class="mt-3 max-w-md text-sm leading-relaxed text-zinc-400">{body}</p>
-        <div class="mt-8 flex flex-wrap items-center justify-center gap-3">
+        <img
+          src="/images/romeo-error.png"
+          alt="ROMeo, the OpenROM mascot, looking dizzy with a bandage on his head"
+          width="140"
+          height="140"
+          class="relative h-[140px] w-[140px] object-contain drop-shadow-[0_0_28px_rgba(34,211,238,0.25)]"
+        />
+        <h1 class="relative mt-6 text-2xl font-bold tracking-tight text-white">{displayHeading}</h1>
+        <p class="relative mt-3 max-w-md text-sm leading-relaxed text-zinc-400">{body}</p>
+        <div class="relative mt-8 flex flex-wrap items-center justify-center gap-3">
           <a
             href="/"
             class="inline-flex h-10 items-center gap-2 rounded-lg border border-zinc-800 px-4 text-sm font-medium text-zinc-200 transition hover:border-zinc-700 hover:text-white"

src/pages/publisher/[id].astro

@@ -37,6 +37,9 @@ const initials = initialsFor(publisher?.name ?? id);
 const memberSince = publisher?.createdAt?.slice(0, 10) ?? '';
 
 const fallbackHeading = dbError ? 'Publisher unavailable' : 'Publisher not found';
+const fallbackDisplayHeading = dbError
+  ? 'Publisher unavailable'
+  : 'Whoops! ROMeo got lost in the bitstream (404).';
 const fallbackBody = dbError
   ? 'We could not load this publisher right now. This is usually temporary — please try again shortly.'
   : `No publisher exists with the id “${id}”. It may have been renamed, or the link that brought you here may be out of date.`;
@@ -48,13 +51,24 @@ const fallbackBody = dbError
 >
   {
     !publisher ? (
-      <main class="mx-auto flex max-w-2xl flex-col items-center px-4 py-24 text-center sm:px-6 lg:px-8">
-        <div class="grid h-16 w-16 place-items-center rounded-2xl bg-gradient-to-br from-cyan-400/15 to-purple-500/15 text-cyan-300 ring-1 ring-inset ring-zinc-700/60">
-          <Icon name={dbError ? 'wrench' : 'search'} class="h-7 w-7" />
+      <main class="relative mx-auto flex max-w-2xl flex-col items-center px-4 py-24 text-center sm:px-6 lg:px-8">
+        <div
+          class="pointer-events-none absolute left-1/2 top-28 h-56 w-56 -translate-x-1/2 rounded-full bg-cyan-500/10 blur-3xl"
+          aria-hidden="true"
+        >
         </div>
-        <h1 class="mt-6 text-2xl font-bold tracking-tight text-white">{fallbackHeading}</h1>
-        <p class="mt-3 max-w-md text-sm leading-relaxed text-zinc-400">{fallbackBody}</p>
-        <div class="mt-8 flex flex-wrap items-center justify-center gap-3">
+        <img
+          src="/images/romeo-error.png"
+          alt="ROMeo, the OpenROM mascot, looking dizzy with a bandage on his head"
+          width="140"
+          height="140"
+          class="relative h-[140px] w-[140px] object-contain drop-shadow-[0_0_28px_rgba(34,211,238,0.25)]"
+        />
+        <h1 class="relative mt-6 text-2xl font-bold tracking-tight text-white">
+          {fallbackDisplayHeading}
+        </h1>
+        <p class="relative mt-3 max-w-md text-sm leading-relaxed text-zinc-400">{fallbackBody}</p>
+        <div class="relative mt-8 flex flex-wrap items-center justify-center gap-3">
           <a
             href="/"
             class="inline-flex h-10 items-center gap-2 rounded-lg border border-zinc-800 px-4 text-sm font-medium text-zinc-200 transition hover:border-zinc-700 hover:text-white"