jacob-mathison
8afb112eee
- 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
78 lines
2.7 KiB
TypeScript
78 lines
2.7 KiB
TypeScript
import SiteLayout from "./components/SiteLayout";
|
|
import layoutStyles from "@/styles/Layout.module.css";
|
|
import styles from "@/styles/World.module.css";
|
|
|
|
const CHARACTERS = [
|
|
{
|
|
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. He owes everyone.",
|
|
revealed: true,
|
|
},
|
|
{
|
|
emoji: "🔥",
|
|
name: "???",
|
|
role: "Coming Soon",
|
|
desc: "A figure from the oldest part of the war. Their allegiance changes everything.",
|
|
revealed: false,
|
|
},
|
|
{
|
|
emoji: "⚔️",
|
|
name: "???",
|
|
role: "Coming Soon",
|
|
desc: "Every legend needs its foil. Every bone lord needs someone willing to break them.",
|
|
revealed: false,
|
|
},
|
|
{
|
|
emoji: "🌑",
|
|
name: "???",
|
|
role: "Coming Soon",
|
|
desc: "They were there at the beginning. They will be there at the end. What happens in between is the story.",
|
|
revealed: false,
|
|
},
|
|
];
|
|
|
|
export default function Characters() {
|
|
return (
|
|
<SiteLayout
|
|
title="Characters"
|
|
description="Meet the characters of Bone Lord Bob — heroes, villains, and everything in between."
|
|
keywords="Bone Lord Bob characters, BLB cast, dark fantasy characters, anime characters"
|
|
canonical="/characters"
|
|
>
|
|
{/* Hero */}
|
|
<div className={layoutStyles.pageHero}>
|
|
<span className={layoutStyles.pageEyebrow}>The Cast</span>
|
|
<h1 className={layoutStyles.pageTitle}>Characters</h1>
|
|
<p className={layoutStyles.pageSub}>
|
|
Every soul in this world has a price. Meet the ones who pay it.
|
|
</p>
|
|
</div>
|
|
|
|
<div className={layoutStyles.pageContent}>
|
|
<div className={styles.characterGrid}>
|
|
{CHARACTERS.map((c, i) => (
|
|
<div key={i} className={`${styles.characterCard} ${!c.revealed ? styles.characterCardLocked : ""}`}>
|
|
<div className={styles.characterArt}>
|
|
<span className={styles.characterEmoji}>{c.emoji}</span>
|
|
{!c.revealed && <div className={styles.characterLockedOverlay}>?</div>}
|
|
</div>
|
|
<div className={styles.characterInfo}>
|
|
<span className={styles.characterRole}>{c.role}</span>
|
|
<h2 className={styles.characterName}>{c.name}</h2>
|
|
<p className={styles.characterDesc}>{c.desc}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className={layoutStyles.comingSoon}>
|
|
<span className={layoutStyles.comingSoonSkull}>👤</span>
|
|
<p className={layoutStyles.comingSoonText}>Full character profiles reveal with each episode</p>
|
|
</div>
|
|
</div>
|
|
</SiteLayout>
|
|
);
|
|
}
|