176 lines
8.2 KiB
TypeScript
176 lines
8.2 KiB
TypeScript
import Head from "next/head";
|
||
import styles from "@/styles/Home.module.css";
|
||
|
||
export default function Home() {
|
||
return (
|
||
<>
|
||
<Head>
|
||
<title>Bone Lord Bob — American Anime</title>
|
||
<meta name="description" content="Bone Lord Bob is an American Anime project — dark, brutal, beautiful. Coming soon." />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<link rel="icon" href="/favicon.ico" sizes="any" />
|
||
<link rel="icon" href="/icon-192.png" type="image/png" sizes="192x192" />
|
||
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
|
||
|
||
{/* Open Graph */}
|
||
<meta property="og:title" content="Bone Lord Bob" />
|
||
<meta property="og:description" content="American Anime. Dark. Brutal. Beautiful." />
|
||
<meta property="og:type" content="website" />
|
||
<meta property="og:image" content="/og-image.png" />
|
||
<meta property="og:image:width" content="1536" />
|
||
<meta property="og:image:height" content="1024" />
|
||
|
||
{/* Twitter Card */}
|
||
<meta name="twitter:card" content="summary_large_image" />
|
||
<meta name="twitter:title" content="Bone Lord Bob" />
|
||
<meta name="twitter:description" content="American Anime. Dark. Brutal. Beautiful." />
|
||
<meta name="twitter:image" content="/og-image.png" />
|
||
</Head>
|
||
|
||
<div className={styles.page}>
|
||
|
||
{/* ── Nav ─────────────────────────────────────────────────────── */}
|
||
<nav className={styles.nav}>
|
||
<span className={styles.navLogo}>
|
||
Bone Lord <span>Bob</span>
|
||
</span>
|
||
<ul className={styles.navLinks}>
|
||
<li><a href="#about">About</a></li>
|
||
<li><a href="#characters">Characters</a></li>
|
||
<li><a href="#follow">Follow</a></li>
|
||
</ul>
|
||
</nav>
|
||
|
||
{/* ── 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}>
|
||
{["💀", "💀", "💀", "💀", "💀", "💀", "💀", "💀", "💀", "💀"].map((s, i) => (
|
||
<span key={i} className={styles.dividerSkull}>{s}</span>
|
||
))}
|
||
<span className={styles.dividerText}>Coming Soon</span>
|
||
{["💀", "💀", "💀", "💀", "💀", "💀", "💀", "💀", "💀", "💀"].map((s, i) => (
|
||
<span key={i} className={styles.dividerSkull}>{s}</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}>
|
||
<span className={styles.aboutPlaceholder}>💀</span>
|
||
</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>
|
||
<a
|
||
href="https://x.com/bonelordbob"
|
||
className={styles.btnPrimary}
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
>
|
||
Follow on X
|
||
</a>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ── Footer ──────────────────────────────────────────────────── */}
|
||
<footer className={styles.footer}>
|
||
<span className={styles.footerLogo}>
|
||
Bone Lord <span>Bob</span>
|
||
</span>
|
||
<span className={styles.footerNote}>
|
||
© {new Date().getFullYear()} Mathison Projects Inc. All rights reserved.
|
||
</span>
|
||
</footer>
|
||
|
||
</div>
|
||
</>
|
||
);
|
||
}
|