feat: SiteLayout template + World menu with 5 new pages (Lore, World, Characters, Music, Gallery)

- SiteLayout.tsx: shared layout component with nav dropdown, mobile hamburger drawer, full footer - Nav: World dropdown menu (Lore, World, Characters, Music, Gallery) + Follow link - Footer: 3-column (World links, Social links, Legal links) + tagline - pages/lore.tsx: lore entry grid with placeholder canon entries - pages/world.tsx: location/setting cards with worldbuilding teaser - pages/characters.tsx: character roster with locked/revealed states - pages/music.tsx: soundtrack page with Patreon CTA (inspired by silmaai.com music page) - pages/gallery.tsx: tabbed Official / Fan Art gallery with empty states and social tag CTAs - styles/Layout.module.css: shared nav, dropdown, footer, page hero, coming-soon styles - styles/World.module.css: lore, location, character, music styles - styles/Gallery.module.css: tabs, grid, card, empty state styles - All pages: SEO meta, canonical URLs, OG tags
2026-04-11 10:46:24 -05:00
parent b04d65f062
commit 8afb112eee
14 changed files with 2070 additions and 710 deletions
@@ -0,0 +1,63 @@
+import SiteLayout from "./components/SiteLayout";
+import layoutStyles from "@/styles/Layout.module.css";
+import styles from "@/styles/World.module.css";
+
+export default function Lore() {
+  return (
+    <SiteLayout
+      title="Lore"
+      description="The mythology and deep lore of Bone Lord Bob — a world built on bone, blood, and ancient power."
+      keywords="Bone Lord Bob lore, BLB mythology, dark fantasy lore, anime worldbuilding"
+      canonical="/lore"
+    >
+      {/* Hero */}
+      <div className={layoutStyles.pageHero}>
+        <span className={layoutStyles.pageEyebrow}>The Deep Canon</span>
+        <h1 className={layoutStyles.pageTitle}>Lore</h1>
+        <p className={layoutStyles.pageSub}>
+          Every world has rules. Every myth has teeth. Here begins the canon of Bone Lord Bob.
+        </p>
+      </div>
+
+      <div className={layoutStyles.pageContent}>
+        {/* Placeholder lore entries */}
+        <div className={styles.loreGrid}>
+          <div className={styles.loreCard}>
+            <span className={styles.loreIcon}>💀</span>
+            <h2 className={styles.loreTitle}>The Bone Covenant</h2>
+            <p className={styles.loreText}>
+              In the beginning there was only the great silence — and then the crack. From that first
+              fracture, the Bone Kingdom was born. Those who heard it gained dominion over death itself.
+            </p>
+            <span className={styles.loreLocked}>More coming soon</span>
+          </div>
+
+          <div className={styles.loreCard}>
+            <span className={styles.loreIcon}>🔥</span>
+            <h2 className={styles.loreTitle}>The Cursed Tongue</h2>
+            <p className={styles.loreText}>
+              There is a language older than memory. Those who speak it fluently enough can unmake a
+              living thing — or bind the dead to their will. Very few have lived long enough to master it.
+            </p>
+            <span className={styles.loreLocked}>More coming soon</span>
+          </div>
+
+          <div className={styles.loreCard}>
+            <span className={styles.loreIcon}>⚔️</span>
+            <h2 className={styles.loreTitle}>The Three Kingdoms</h2>
+            <p className={styles.loreText}>
+              The world is divided not by geography, but by allegiance to one of three ancient powers.
+              The war between them has lasted longer than any living creature can remember.
+            </p>
+            <span className={styles.loreLocked}>More coming soon</span>
+          </div>
+        </div>
+
+        <div className={layoutStyles.comingSoon}>
+          <span className={layoutStyles.comingSoonSkull}>📜</span>
+          <p className={layoutStyles.comingSoonText}>Full lore archive unlocking as the series releases</p>
+        </div>
+      </div>
+    </SiteLayout>
+  );
+}