260 lines
10 KiB
TypeScript
260 lines
10 KiB
TypeScript
import Image from "next/image";
|
||
import styles from "@/styles/Home.module.css";
|
||
import SiteLayout from "@/pages/components/SiteLayout";
|
||
|
||
const SOCIALS = [
|
||
{
|
||
name: "YouTube",
|
||
handle: "@bonelordbob",
|
||
url: "https://www.youtube.com/@bonelordbob",
|
||
icon: "▶",
|
||
color: "#ff0000",
|
||
},
|
||
{
|
||
name: "Instagram",
|
||
handle: "@bonelordbob",
|
||
url: "https://www.instagram.com/bonelordbob",
|
||
icon: "📷",
|
||
color: "#e1306c",
|
||
},
|
||
{
|
||
name: "Facebook",
|
||
handle: "Bone Lord Bob",
|
||
url: "https://www.facebook.com/profile.php?id=61580718487639",
|
||
icon: "f",
|
||
color: "#1877f2",
|
||
},
|
||
{
|
||
name: "X / Twitter",
|
||
handle: "@BoneLordBob",
|
||
url: "https://x.com/BoneLordBob",
|
||
icon: "𝕏",
|
||
color: "#e8dcc8",
|
||
},
|
||
{
|
||
name: "Patreon",
|
||
handle: "BoneLordBob",
|
||
url: "https://www.patreon.com/c/BoneLordBob",
|
||
icon: "P",
|
||
color: "#ff424d",
|
||
},
|
||
{
|
||
name: "TikTok",
|
||
handle: "@bonelordbob",
|
||
url: "https://www.tiktok.com/@bonelordbob",
|
||
icon: "♪",
|
||
color: "#69c9d0",
|
||
},
|
||
];
|
||
|
||
export default function Home() {
|
||
return (
|
||
<SiteLayout
|
||
title="Bone Lord Bob — American Anime"
|
||
description="Bone Lord Bob is an American Anime project — dark, brutal, beautiful. Coming soon."
|
||
keywords="Bone Lord Bob, BLB, American Anime, indie anime, dark fantasy anime, original anime series, animated series, dark fantasy, American animation, independent animation, bone kingdom"
|
||
canonical="/"
|
||
>
|
||
<div className={styles.page}>
|
||
{/* ── Hero ────────────────────────────────────────────────────── */}
|
||
<section className={styles.hero}>
|
||
<div className={styles.heroBg} />
|
||
<div className={styles.heroContent}>
|
||
<span className={styles.eyebrow}>American Anime</span>
|
||
<h1 className={styles.heroTitle}>
|
||
Bone Lord <em>Bob</em>
|
||
</h1>
|
||
<p className={styles.heroSub}>
|
||
A story born from the bones of American myth. Dark. Brutal. Alive.
|
||
An original anime series unlike anything you've seen before.
|
||
</p>
|
||
<div className={styles.heroCtas}>
|
||
<a href="#about" className={styles.btnPrimary}>
|
||
Enter the World
|
||
</a>
|
||
<a href="#follow" className={styles.btnSecondary}>
|
||
Stay Updated
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ── Divider ─────────────────────────────────────────────────── */}
|
||
<div className={styles.divider}>
|
||
{Array.from({ length: 10 }).map((_, i) => (
|
||
<span key={`l${i}`} className={styles.dividerSkull}>💀</span>
|
||
))}
|
||
<span className={styles.dividerText}>Coming Soon</span>
|
||
{Array.from({ length: 10 }).map((_, i) => (
|
||
<span key={`r${i}`} className={styles.dividerSkull}>💀</span>
|
||
))}
|
||
</div>
|
||
|
||
{/* ── About ───────────────────────────────────────────────────── */}
|
||
<section id="about" className={styles.about}>
|
||
<div>
|
||
<span className={styles.sectionLabel}>The Project</span>
|
||
<h2 className={styles.sectionTitle}>
|
||
American stories.
|
||
<br />
|
||
Anime soul.
|
||
</h2>
|
||
<p className={styles.sectionBody}>
|
||
Bone Lord Bob is an original American Anime project — a dark,
|
||
hand-crafted universe that pulls from the grit of American
|
||
storytelling and channels it through the visual language of anime.
|
||
</p>
|
||
<p className={styles.sectionBody}>
|
||
Not an adaptation. Not a tribute. Something new. A world of bone
|
||
and blood and meaning, built from scratch.
|
||
</p>
|
||
</div>
|
||
<div className={styles.aboutVisual}>
|
||
<Image
|
||
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>
|
||
</section>
|
||
|
||
{/* ── Characters ──────────────────────────────────────────────── */}
|
||
<section id="characters" className={styles.characters}>
|
||
<div className={styles.sectionHeader}>
|
||
<span className={styles.sectionLabel}>The Cast</span>
|
||
<h2 className={styles.sectionTitle}>Characters</h2>
|
||
<p className={styles.sectionBody}>
|
||
Every soul in this world has a price. Meet the ones who pay it.
|
||
</p>
|
||
</div>
|
||
<div className={styles.characterGrid}>
|
||
<div className={styles.characterCard}>
|
||
<span className={styles.characterEmoji}>🦴</span>
|
||
<h3 className={styles.characterName}>Bone Lord Bob</h3>
|
||
<p className={styles.characterRole}>The Protagonist</p>
|
||
<p className={styles.characterDesc}>
|
||
A man cursed to walk between worlds — carrying the weight of the
|
||
dead and the rage of the living. He answers to no one.
|
||
</p>
|
||
</div>
|
||
<div className={styles.characterCard}>
|
||
<span className={styles.characterEmoji}>🔥</span>
|
||
<h3 className={styles.characterName}>???</h3>
|
||
<p className={styles.characterRole}>Coming Soon</p>
|
||
<p className={styles.characterDesc}>
|
||
More characters will be revealed as the story unfolds. The
|
||
roster is deep. The world is darker than it looks.
|
||
</p>
|
||
</div>
|
||
<div className={styles.characterCard}>
|
||
<span className={styles.characterEmoji}>⚔️</span>
|
||
<h3 className={styles.characterName}>???</h3>
|
||
<p className={styles.characterRole}>Coming Soon</p>
|
||
<p className={styles.characterDesc}>
|
||
Every legend needs its foil. Every bone lord needs someone
|
||
willing to break them.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ── Follow CTA ──────────────────────────────────────────────── */}
|
||
<section id="follow" className={styles.cta}>
|
||
<div className={styles.ctaContent}>
|
||
<span className={styles.sectionLabel}>Stay in the loop</span>
|
||
<h2 className={styles.ctaTitle}>
|
||
The story is <em>coming</em>.
|
||
</h2>
|
||
<p className={styles.sectionBody}>
|
||
Bone Lord Bob is in active development. Follow along as the world
|
||
takes shape — art, lore, characters, and more.
|
||
</p>
|
||
|
||
{/* Social grid */}
|
||
<div
|
||
style={{
|
||
display: "grid",
|
||
gridTemplateColumns: "repeat(auto-fit, minmax(160px, 1fr))",
|
||
gap: "12px",
|
||
marginTop: "32px",
|
||
maxWidth: "700px",
|
||
width: "100%",
|
||
}}
|
||
>
|
||
{SOCIALS.map((s) => (
|
||
<a
|
||
key={s.name}
|
||
href={s.url}
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
style={{
|
||
display: "flex",
|
||
alignItems: "center",
|
||
gap: "10px",
|
||
padding: "12px 16px",
|
||
background: "#1a1510",
|
||
border: "1px solid rgba(232,220,200,0.12)",
|
||
borderRadius: "6px",
|
||
color: "#e8dcc8",
|
||
textDecoration: "none",
|
||
transition: "border-color 0.2s, background 0.2s",
|
||
}}
|
||
onMouseEnter={(e) => {
|
||
(e.currentTarget as HTMLAnchorElement).style.borderColor = s.color;
|
||
(e.currentTarget as HTMLAnchorElement).style.background = "#231e18";
|
||
}}
|
||
onMouseLeave={(e) => {
|
||
(e.currentTarget as HTMLAnchorElement).style.borderColor = "rgba(232,220,200,0.12)";
|
||
(e.currentTarget as HTMLAnchorElement).style.background = "#1a1510";
|
||
}}
|
||
>
|
||
<span
|
||
style={{
|
||
fontSize: "1.1rem",
|
||
width: "24px",
|
||
textAlign: "center",
|
||
color: s.color,
|
||
fontWeight: 700,
|
||
flexShrink: 0,
|
||
}}
|
||
>
|
||
{s.icon}
|
||
</span>
|
||
<div style={{ minWidth: 0 }}>
|
||
<div
|
||
style={{
|
||
fontSize: "0.8rem",
|
||
fontWeight: 700,
|
||
letterSpacing: "0.05em",
|
||
textTransform: "uppercase",
|
||
color: "#9e9080",
|
||
}}
|
||
>
|
||
{s.name}
|
||
</div>
|
||
<div
|
||
style={{
|
||
fontSize: "0.85rem",
|
||
color: "#e8dcc8",
|
||
overflow: "hidden",
|
||
textOverflow: "ellipsis",
|
||
whiteSpace: "nowrap",
|
||
}}
|
||
>
|
||
{s.handle}
|
||
</div>
|
||
</div>
|
||
</a>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</SiteLayout>
|
||
);
|
||
}
|