267 lines
8.4 KiB
TypeScript
267 lines
8.4 KiB
TypeScript
import Image from "next/image";
|
|
import SiteLayout from "@/pages/components/SiteLayout";
|
|
|
|
const s = {
|
|
page: {
|
|
maxWidth: "1100px",
|
|
margin: "0 auto",
|
|
padding: "64px 32px 96px",
|
|
} as React.CSSProperties,
|
|
hero: {
|
|
marginBottom: "56px",
|
|
textAlign: "center" as const,
|
|
} as React.CSSProperties,
|
|
eyebrow: {
|
|
display: "block",
|
|
fontSize: "0.75rem",
|
|
fontWeight: 700,
|
|
letterSpacing: "0.18em",
|
|
textTransform: "uppercase" as const,
|
|
color: "#c0392b",
|
|
marginBottom: "16px",
|
|
} as React.CSSProperties,
|
|
h1: {
|
|
fontFamily: "'Georgia', 'Times New Roman', serif",
|
|
fontSize: "clamp(2.4rem, 6vw, 4rem)",
|
|
fontWeight: 700,
|
|
color: "#e8dcc8",
|
|
lineHeight: 1.1,
|
|
marginBottom: "20px",
|
|
} as React.CSSProperties,
|
|
heroSub: {
|
|
fontSize: "1.05rem",
|
|
color: "#9e9080",
|
|
maxWidth: "520px",
|
|
margin: "0 auto",
|
|
lineHeight: 1.7,
|
|
} as React.CSSProperties,
|
|
grid: {
|
|
display: "grid",
|
|
gridTemplateColumns: "repeat(3, 1fr)",
|
|
gap: "20px",
|
|
marginBottom: "40px",
|
|
} as React.CSSProperties,
|
|
card: {
|
|
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: {
|
|
width: "100%",
|
|
aspectRatio: "2/3",
|
|
position: "relative" as const,
|
|
overflow: "hidden",
|
|
} as React.CSSProperties,
|
|
cardImageWide: {
|
|
width: "100%",
|
|
aspectRatio: "3/2",
|
|
position: "relative" as const,
|
|
overflow: "hidden",
|
|
} as React.CSSProperties,
|
|
cardBody: {
|
|
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.3rem",
|
|
fontWeight: 700,
|
|
color: "#e8dcc8",
|
|
marginBottom: "6px",
|
|
} as React.CSSProperties,
|
|
cardRole: {
|
|
fontSize: "0.75rem",
|
|
fontWeight: 700,
|
|
letterSpacing: "0.12em",
|
|
textTransform: "uppercase" as const,
|
|
color: "#c0392b",
|
|
marginBottom: "14px",
|
|
} as React.CSSProperties,
|
|
cardDesc: {
|
|
fontSize: "0.92rem",
|
|
color: "#9e9080",
|
|
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.82rem",
|
|
color: "#9e9080",
|
|
marginTop: "8px",
|
|
letterSpacing: "0.04em",
|
|
} as React.CSSProperties,
|
|
};
|
|
|
|
export default function Characters() {
|
|
return (
|
|
<SiteLayout
|
|
title="Characters"
|
|
description="Meet the cast of Bone Lord Bob — a dark American Anime. Warriors, ghosts, and things that defy naming."
|
|
keywords="Bone Lord Bob, characters, cast, dark fantasy, American Anime, character art, Aaron Pressey"
|
|
>
|
|
<div style={s.page}>
|
|
{/* Hero */}
|
|
<div style={s.hero}>
|
|
<span style={s.eyebrow}>Characters</span>
|
|
<h1 style={s.h1}>The Cast</h1>
|
|
<p style={s.heroSub}>
|
|
Every soul in this world has a price. Meet the ones who pay it.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Grid */}
|
|
<div style={s.grid}>
|
|
|
|
{/* BLB — full-width featured card */}
|
|
<div style={s.featuredCard}>
|
|
<div style={s.featuredImage}>
|
|
<Image
|
|
src="/char-blb-throne.png"
|
|
alt="Bone Lord Bob on his throne"
|
|
fill
|
|
style={{ objectFit: "cover", objectPosition: "top center" }}
|
|
sizes="50vw"
|
|
priority
|
|
/>
|
|
</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>
|
|
|
|
{/* 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}>???</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't speak. He doesn'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>
|
|
</div>
|
|
</SiteLayout>
|
|
);
|
|
}
|