feat: 4 new Aaron art assets — throne BLB hero, bone squad, horned warrior, skull knight across characters + gallery pages

pages/index.tsx

@@ -111,11 +111,12 @@ export default function Home() {
           </div>
           <div className={styles.aboutVisual}>
             <Image
-              src="/blb-logo.png"
-              alt="Bone Lord Bob"
-              width={400}
-              height={600}
+              src="/char-blb-throne.png"
+              alt="Bone Lord Bob on his throne"
+              width={500}
+              height={500}
               className={styles.aboutLogo}
+              style={{ borderRadius: "8px", border: "1px solid rgba(160,100,255,0.2)" }}
               priority
             />
           </div>

pages/world/characters.tsx

@@ -37,113 +37,89 @@ const s = {
   } as React.CSSProperties,
   grid: {
     display: "grid",
-    gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))",
-    gap: "24px",
+    gridTemplateColumns: "repeat(3, 1fr)",
+    gap: "20px",
     marginBottom: "40px",
   } as React.CSSProperties,
   card: {
-    background: "rgba(15, 8, 24, 0.82)",
-    border: "1px solid rgba(180,140,255,0.18)",
-    borderRadius: "6px",
-    overflow: "hidden" as const,
+    background: "rgba(15, 5, 28, 0.72)",
+    border: "1px solid rgba(160, 100, 255, 0.18)",
+    borderRadius: "8px",
+    overflow: "hidden",
+    backdropFilter: "blur(6px)",
+    display: "flex",
+    flexDirection: "column" as const,
     transition: "border-color 0.2s, transform 0.2s",
   } as React.CSSProperties,
   cardImage: {
-    position: "relative" as const,
-    aspectRatio: "2/3",
     width: "100%",
-    background: "#06030f",
-    overflow: "hidden" as const,
+    aspectRatio: "2/3",
+    position: "relative" as const,
+    overflow: "hidden",
   } as React.CSSProperties,
-  cardImagePlaceholder: {
-    position: "absolute" as const,
-    inset: 0,
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    fontSize: "4rem",
-    opacity: 0.12,
+  cardImageWide: {
+    width: "100%",
+    aspectRatio: "3/2",
+    position: "relative" as const,
+    overflow: "hidden",
   } as React.CSSProperties,
   cardBody: {
-    padding: "20px 22px 24px",
+    padding: "24px 24px 28px",
+  } as React.CSSProperties,
+  cardEmoji: {
+    fontSize: "2.4rem",
+    display: "block",
+    marginBottom: "16px",
   } as React.CSSProperties,
   cardName: {
     fontFamily: "'Georgia', 'Times New Roman', serif",
-    fontSize: "1.2rem",
+    fontSize: "1.3rem",
     fontWeight: 700,
     color: "#e8dcc8",
-    marginBottom: "4px",
+    marginBottom: "6px",
   } as React.CSSProperties,
   cardRole: {
-    fontSize: "0.72rem",
+    fontSize: "0.75rem",
     fontWeight: 700,
-    letterSpacing: "0.14em",
+    letterSpacing: "0.12em",
     textTransform: "uppercase" as const,
     color: "#c0392b",
-    marginBottom: "12px",
+    marginBottom: "14px",
   } as React.CSSProperties,
   cardDesc: {
-    fontSize: "0.88rem",
+    fontSize: "0.92rem",
     color: "#9e9080",
-    lineHeight: 1.7,
+    lineHeight: 1.65,
+  } as React.CSSProperties,
+  featuredCard: {
+    gridColumn: "1 / -1",
+    display: "grid",
+    gridTemplateColumns: "1fr 1fr",
+    background: "rgba(15, 5, 28, 0.72)",
+    border: "1px solid rgba(192, 57, 43, 0.35)",
+    borderRadius: "8px",
+    overflow: "hidden",
+    backdropFilter: "blur(6px)",
+  } as React.CSSProperties,
+  featuredImage: {
+    position: "relative" as const,
+    minHeight: "420px",
+  } as React.CSSProperties,
+  featuredBody: {
+    padding: "48px 40px",
+    display: "flex",
+    flexDirection: "column" as const,
+    justifyContent: "center" as const,
   } as React.CSSProperties,
   credit: {
     textAlign: "center" as const,
-    fontSize: "0.8rem",
+    fontSize: "0.82rem",
     color: "#9e9080",
-    opacity: 0.55,
     marginTop: "8px",
     letterSpacing: "0.04em",
   } as React.CSSProperties,
 };
 
-const CHARACTERS = [
-  {
-    image: null,
-    emoji: "🦴",
-    name: "Bone Lord Bob",
-    role: "The Protagonist",
-    desc: "A man cursed to walk between worlds — carrying the weight of the dead and the rage of the living. He answers to no one.",
-  },
-  {
-    image: "/character-cat.jpg",
-    imageAlt: "Character — ???",
-    emoji: "🐾",
-    name: "???",
-    role: "Coming Soon",
-    desc: "A creature that shouldn't exist — and yet here it is, collar and all. Whatever side it's on, it has teeth.",
-  },
-  {
-    image: "/character-bookie.jpg",
-    imageAlt: "Character — ???",
-    emoji: "📖",
-    name: "???",
-    role: "Coming Soon",
-    desc: "Knowledge is power in the Bone Kingdom. This one has both — and charges accordingly. The ledger is always open.",
-  },
-  {
-    image: null,
-    emoji: "🔥",
-    name: "???",
-    role: "Coming Soon",
-    desc: "A figure from the oldest part of the war. Their allegiance changes everything.",
-  },
-  {
-    image: null,
-    emoji: "⚔️",
-    name: "???",
-    role: "Coming Soon",
-    desc: "Every legend needs its foil. Every bone lord needs someone willing to break them.",
-  },
-  {
-    image: null,
-    emoji: "🌑",
-    name: "???",
-    role: "Coming Soon",
-    desc: "Some figures are felt before they are seen. This one you feel first.",
-  },
-];
-
 export default function Characters() {
   return (
     <SiteLayout
@@ -163,31 +139,124 @@ export default function Characters() {
 
         {/* Grid */}
         <div style={s.grid}>
-          {CHARACTERS.map((c, i) => (
-            <div key={i} style={s.card}>
-              {/* Art panel */}
-              <div style={s.cardImage}>
-                {c.image ? (
+
+          {/* BLB — full-width featured card */}
+          <div style={s.featuredCard}>
+            <div style={s.featuredImage}>
               <Image
-                    src={c.image}
-                    alt={c.imageAlt || c.name}
+                src="/char-blb-throne.png"
+                alt="Bone Lord Bob on his throne"
                 fill
-                    style={{ objectFit: "cover", objectPosition: "top" }}
-                    sizes="(max-width: 768px) 100vw, 33vw"
+                style={{ objectFit: "cover", objectPosition: "top center" }}
+                sizes="50vw"
+                priority
               />
-                ) : (
-                  <div style={s.cardImagePlaceholder}>{c.emoji}</div>
-                )}
+            </div>
+            <div style={s.featuredBody}>
+              <span style={s.eyebrow}>The Protagonist</span>
+              <div style={{ ...s.cardName, fontSize: "2rem", marginBottom: "12px" }}>Bone Lord Bob</div>
+              <div style={{ ...s.cardRole, marginBottom: "20px" }}>Lord of the Bone Kingdom</div>
+              <p style={{ ...s.cardDesc, fontSize: "1rem" }}>
+                A man cursed to walk between worlds — carrying the weight of the
+                dead and the rage of the living. Seated on a throne of skulls,
+                flanked by candlelight, commanding what others cannot name.
+                He answers to no one.
+              </p>
+            </div>
           </div>
 
-              {/* Info */}
+          {/* Unknown character 1 — skeleton dragon-thing */}
+          <div style={s.card}>
+            <div style={s.cardImage}>
+              <Image
+                src="/char-unknown-1.jpg"
+                alt="Unknown character — identity unrevealed"
+                fill
+                style={{ objectFit: "cover", objectPosition: "top" }}
+                sizes="33vw"
+              />
+            </div>
             <div style={s.cardBody}>
-                <div style={s.cardName}>{c.name}</div>
-                <div style={s.cardRole}>{c.role}</div>
-                <p style={s.cardDesc}>{c.desc}</p>
+              <div style={s.cardName}>???</div>
+              <div style={s.cardRole}>???</div>
+              <p style={s.cardDesc}>
+                The bone tag around its neck says something. No one has gotten close enough to read it.
+              </p>
             </div>
           </div>
-          ))}
+
+          {/* Unknown character 2 — robed scholar */}
+          <div style={s.card}>
+            <div style={s.cardImage}>
+              <Image
+                src="/char-unknown-2.jpg"
+                alt="Unknown character — identity unrevealed"
+                fill
+                style={{ objectFit: "cover", objectPosition: "top" }}
+                sizes="33vw"
+              />
+            </div>
+            <div style={s.cardBody}>
+              <div style={s.cardName}>???</div>
+              <div style={s.cardRole}>???</div>
+              <p style={s.cardDesc}>
+                A robed scholar of the dead. The book glows. The eyes glow brighter. What it reads, it remembers forever.
+              </p>
+            </div>
+          </div>
+
+          {/* Unknown character 3 — horned warrior */}
+          <div style={s.card}>
+            <div style={s.cardImage}>
+              <Image
+                src="/char-unknown-3.jpg"
+                alt="Unknown character — identity unrevealed"
+                fill
+                style={{ objectFit: "cover", objectPosition: "top" }}
+                sizes="33vw"
+              />
+            </div>
+            <div style={s.cardBody}>
+              <div style={s.cardName}>???</div>
+              <div style={s.cardRole}>???</div>
+              <p style={s.cardDesc}>
+                She stands in armor forged from shadow and gold. The horns are not a costume. The sword is not decorative.
+              </p>
+            </div>
+          </div>
+
+          {/* Unknown character 4 — skull knight */}
+          <div style={s.card}>
+            <div style={s.cardImage}>
+              <Image
+                src="/char-unknown-4.jpg"
+                alt="Unknown character — identity unrevealed"
+                fill
+                style={{ objectFit: "cover", objectPosition: "top" }}
+                sizes="33vw"
+              />
+            </div>
+            <div style={s.cardBody}>
+              <div style={s.cardName}>???</div>
+              <div style={s.cardRole}>???</div>
+              <p style={s.cardDesc}>
+                Skull-adorned armor. A blade that has ended things that should not have been ended. He doesn&apos;t speak. He doesn&apos;t need to.
+              </p>
+            </div>
+          </div>
+
+          {/* Coming Soon placeholder */}
+          <div style={s.card}>
+            <div style={s.cardBody}>
+              <span style={s.cardEmoji}>🔮</span>
+              <div style={s.cardName}>???</div>
+              <div style={s.cardRole}>Coming Soon</div>
+              <p style={s.cardDesc}>
+                More characters will be revealed as the story unfolds. The roster goes deeper than you think.
+              </p>
+            </div>
+          </div>
+
         </div>
 
         <p style={s.credit}>Character art by Aaron Pressey</p>

pages/world/gallery.tsx

@@ -1,4 +1,5 @@
 import { useState } from "react";
+import Image from "next/image";
 import SiteLayout from "@/pages/components/SiteLayout";
 
 type Tab = "official" | "fan";
@@ -136,13 +137,41 @@ export default function Gallery() {
 
         {/* Tab content */}
         {activeTab === "official" && (
-          <div style={s.card}>
-            <span style={s.cardIcon}>⚔️</span>
-            <div style={s.cardTitle}>Official Art</div>
-            <p style={s.cardDesc}>
-              Official artwork coming soon.
-              <br />
-              Art by Aaron Pressey.
+          <div>
+            <div style={{
+              display: "grid",
+              gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))",
+              gap: "16px",
+              marginBottom: "24px",
+            }}>
+              {[
+                { src: "/char-blb-throne.png", alt: "Bone Lord Bob on his throne — art by Aaron Pressey" },
+                { src: "/art-bone-squad.png", alt: "The Bone Squad — four skeletal figures — art by Aaron Pressey" },
+                { src: "/char-unknown-1.jpg", alt: "Unknown character — art by Aaron Pressey" },
+                { src: "/char-unknown-2.jpg", alt: "Unknown robed scholar — art by Aaron Pressey" },
+                { src: "/char-unknown-3.jpg", alt: "Unknown horned warrior — art by Aaron Pressey" },
+                { src: "/char-unknown-4.jpg", alt: "Unknown skull knight — art by Aaron Pressey" },
+              ].map((img, i) => (
+                <div key={i} style={{
+                  position: "relative",
+                  aspectRatio: img.src.includes("bone-squad") ? "16/9" : "2/3",
+                  borderRadius: "8px",
+                  overflow: "hidden",
+                  border: "1px solid rgba(160, 100, 255, 0.2)",
+                  background: "rgba(15, 5, 28, 0.6)",
+                }}>
+                  <Image
+                    src={img.src}
+                    alt={img.alt}
+                    fill
+                    style={{ objectFit: "cover", objectPosition: "top" }}
+                    sizes="(max-width: 768px) 100vw, 33vw"
+                  />
+                </div>
+              ))}
+            </div>
+            <p style={{ textAlign: "center", fontSize: "0.82rem", color: "#9e9080", marginTop: "8px" }}>
+              Art by Aaron Pressey · More coming soon
             </p>
           </div>
         )}