-
To get started, edit the index.tsx file.
-- Looking for a starting point or more instructions? Head over to{" "} - - Templates - {" "} - or the{" "} - - Learning - {" "} - center. + +
+
+ {/* ── Nav ─────────────────────────────────────────────────────── */}
+
+
+ {/* ── Hero ────────────────────────────────────────────────────── */}
+
+
+
+
+ {/* ── Divider ─────────────────────────────────────────────────── */}
+
+
+ American Anime
+
+ + Bone Lord Bob +
++ A story born from the bones of American myth. Dark. Brutal. Alive. + An original anime series unlike anything you've seen before. +
+ +
+ {["💀", "💀", "💀", "💀", "💀", "💀", "💀", "💀", "💀", "💀"].map((s, i) => (
+ {s}
+ ))}
+ Coming Soon
+ {["💀", "💀", "💀", "💀", "💀", "💀", "💀", "💀", "💀", "💀"].map((s, i) => (
+ {s}
+ ))}
+
+
+ {/* ── About ───────────────────────────────────────────────────── */}
+
+ The Project
+
+ American stories.
+
-
+ American stories.
Anime soul.
+
+ + 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. +
++ Not an adaptation. Not a tribute. Something new. + A world of bone and blood and meaning, built from scratch.
+
+
+
+ {/* ── Follow CTA ──────────────────────────────────────────────── */}
+
+
+
+ {/* ── Footer ──────────────────────────────────────────────────── */}
+
+
);
diff --git a/styles/Home.module.css b/styles/Home.module.css
index 59dea42..f900331 100644
--- a/styles/Home.module.css
+++ b/styles/Home.module.css
@@ -1,141 +1,412 @@
+/* ── Layout ──────────────────────────────────────────────────────────────── */
.page {
- --background: #fafafa;
- --foreground: #fff;
-
- --text-primary: #000;
- --text-secondary: #666;
-
- --button-primary-hover: #383838;
- --button-secondary-hover: #f2f2f2;
- --button-secondary-border: #ebebeb;
-
- display: flex;
min-height: 100vh;
- align-items: center;
- justify-content: center;
- font-family: var(--font-geist-sans);
- background-color: var(--background);
+ display: flex;
+ flex-direction: column;
}
-.main {
+/* ── Nav ─────────────────────────────────────────────────────────────────── */
+.nav {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ z-index: 100;
display: flex;
- min-height: 100vh;
- width: 100%;
- max-width: 800px;
- flex-direction: column;
- align-items: flex-start;
+ align-items: center;
justify-content: space-between;
- background-color: var(--foreground);
- padding: 120px 60px;
+ padding: 1rem 2.5rem;
+ background: rgba(10, 8, 6, 0.85);
+ backdrop-filter: blur(12px);
+ border-bottom: 1px solid var(--border);
}
-.intro {
+.navLogo {
+ font-family: var(--font-display);
+ font-size: 1.15rem;
+ font-weight: 700;
+ letter-spacing: 0.12em;
+ text-transform: uppercase;
+ color: var(--bone);
+}
+
+.navLogo span {
+ color: var(--red);
+}
+
+.navLinks {
display: flex;
- flex-direction: column;
- align-items: flex-start;
- text-align: left;
- gap: 24px;
+ gap: 2rem;
+ list-style: none;
}
-.intro h1 {
- max-width: 320px;
- font-size: 40px;
- font-weight: 600;
- line-height: 48px;
- letter-spacing: -2.4px;
- text-wrap: balance;
- color: var(--text-primary);
+.navLinks a {
+ font-size: 0.8rem;
+ letter-spacing: 0.15em;
+ text-transform: uppercase;
+ color: var(--bone-dim);
+ transition: color 0.2s;
}
-.intro p {
- max-width: 440px;
- font-size: 18px;
- line-height: 32px;
- text-wrap: balance;
- color: var(--text-secondary);
+.navLinks a:hover {
+ color: var(--bone);
}
-.intro a {
- font-weight: 500;
- color: var(--text-primary);
-}
-
-.ctas {
+/* ── Hero ─────────────────────────────────────────────────────────────────── */
+.hero {
+ position: relative;
+ min-height: 100vh;
display: flex;
- flex-direction: row;
- width: 100%;
- max-width: 440px;
- gap: 16px;
- font-size: 14px;
-}
-
-.ctas a {
- display: flex;
- justify-content: center;
align-items: center;
- height: 40px;
- padding: 0 16px;
- border-radius: 128px;
- border: 1px solid transparent;
- transition: 0.2s;
+ justify-content: center;
+ text-align: center;
+ padding: 8rem 2rem 4rem;
+ overflow: hidden;
+}
+
+.heroBg {
+ position: absolute;
+ inset: 0;
+ background:
+ radial-gradient(ellipse 80% 60% at 50% 40%, rgba(192, 57, 43, 0.08) 0%, transparent 70%),
+ radial-gradient(ellipse 60% 40% at 50% 80%, rgba(192, 57, 43, 0.05) 0%, transparent 70%),
+ var(--dark);
+ z-index: 0;
+}
+
+/* Grain texture overlay */
+.heroBg::after {
+ content: '';
+ position: absolute;
+ inset: 0;
+ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
+ opacity: 0.4;
+ pointer-events: none;
+}
+
+.heroContent {
+ position: relative;
+ z-index: 1;
+ max-width: 820px;
+}
+
+.eyebrow {
+ display: inline-block;
+ font-size: 0.7rem;
+ letter-spacing: 0.3em;
+ text-transform: uppercase;
+ color: var(--red);
+ margin-bottom: 1.5rem;
+ padding: 0.35rem 1rem;
+ border: 1px solid rgba(192, 57, 43, 0.4);
+ border-radius: 2px;
+}
+
+.heroTitle {
+ font-family: var(--font-display);
+ font-size: clamp(3rem, 8vw, 6.5rem);
+ font-weight: 700;
+ line-height: 0.95;
+ letter-spacing: -0.02em;
+ color: var(--bone);
+ margin-bottom: 1.5rem;
+ text-shadow: 0 0 80px rgba(232, 220, 200, 0.08);
+}
+
+.heroTitle em {
+ font-style: normal;
+ color: var(--red);
+ text-shadow: 0 0 40px var(--red-glow);
+}
+
+.heroSub {
+ font-size: 1.05rem;
+ color: var(--bone-dim);
+ max-width: 520px;
+ margin: 0 auto 2.5rem;
+ line-height: 1.7;
+}
+
+.heroCtas {
+ display: flex;
+ gap: 1rem;
+ justify-content: center;
+ flex-wrap: wrap;
+}
+
+.btnPrimary {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.5rem;
+ padding: 0.85rem 2rem;
+ background: var(--red);
+ color: var(--bone);
+ font-size: 0.8rem;
+ font-weight: 600;
+ letter-spacing: 0.12em;
+ text-transform: uppercase;
+ border: none;
cursor: pointer;
- width: fit-content;
- font-weight: 500;
+ transition: background 0.2s, box-shadow 0.2s;
}
-a.primary {
- background: var(--text-primary);
- color: var(--background);
- gap: 8px;
+.btnPrimary:hover {
+ background: #a93226;
+ box-shadow: 0 0 24px var(--red-glow);
}
-a.secondary {
- border-color: var(--button-secondary-border);
+.btnSecondary {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.5rem;
+ padding: 0.85rem 2rem;
+ background: transparent;
+ color: var(--bone);
+ font-size: 0.8rem;
+ font-weight: 600;
+ letter-spacing: 0.12em;
+ text-transform: uppercase;
+ border: 1px solid var(--border);
+ cursor: pointer;
+ transition: border-color 0.2s, color 0.2s;
}
-/* Enable hover only on non-touch devices */
-@media (hover: hover) and (pointer: fine) {
- a.primary:hover {
- background: var(--button-primary-hover);
- border-color: transparent;
- }
-
- a.secondary:hover {
- background: var(--button-secondary-hover);
- border-color: transparent;
- }
+.btnSecondary:hover {
+ border-color: var(--bone-dim);
+ color: var(--bone);
}
-@media (max-width: 600px) {
- .main {
- padding: 48px 24px;
- }
-
- .intro {
- gap: 16px;
- }
-
- .intro h1 {
- font-size: 32px;
- line-height: 40px;
- letter-spacing: -1.92px;
- }
+/* ── Divider ─────────────────────────────────────────────────────────────── */
+.divider {
+ display: flex;
+ align-items: center;
+ gap: 1.5rem;
+ padding: 2rem 2.5rem;
+ border-top: 1px solid var(--border);
+ border-bottom: 1px solid var(--border);
+ background: var(--dark-mid);
+ overflow: hidden;
}
-@media (prefers-color-scheme: dark) {
- .logo {
- filter: invert();
- }
-
- .page {
- --background: #000;
- --foreground: #000;
-
- --text-primary: #ededed;
- --text-secondary: #999;
-
- --button-primary-hover: #ccc;
- --button-secondary-hover: #1a1a1a;
- --button-secondary-border: #1a1a1a;
- }
+.dividerSkull {
+ font-size: 1.2rem;
+ opacity: 0.4;
+ flex-shrink: 0;
+}
+
+.dividerText {
+ font-size: 0.7rem;
+ letter-spacing: 0.25em;
+ text-transform: uppercase;
+ color: var(--bone-dim);
+ white-space: nowrap;
+}
+
+/* ── About section ───────────────────────────────────────────────────────── */
+.about {
+ padding: 6rem 2.5rem;
+ max-width: 1100px;
+ margin: 0 auto;
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 5rem;
+ align-items: center;
+}
+
+.sectionLabel {
+ display: block;
+ font-size: 0.68rem;
+ letter-spacing: 0.3em;
+ text-transform: uppercase;
+ color: var(--red);
+ margin-bottom: 1rem;
+}
+
+.sectionTitle {
+ font-family: var(--font-display);
+ font-size: clamp(1.8rem, 3.5vw, 2.8rem);
+ line-height: 1.15;
+ color: var(--bone);
+ margin-bottom: 1.25rem;
+}
+
+.sectionBody {
+ font-size: 0.95rem;
+ color: var(--bone-dim);
+ line-height: 1.8;
+ margin-bottom: 1.25rem;
+}
+
+.aboutVisual {
+ position: relative;
+ aspect-ratio: 4/5;
+ background: var(--dark-card);
+ border: 1px solid var(--border);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ overflow: hidden;
+}
+
+.aboutPlaceholder {
+ font-size: 6rem;
+ opacity: 0.15;
+}
+
+.aboutVisual::before {
+ content: '';
+ position: absolute;
+ inset: 0;
+ background: linear-gradient(135deg, rgba(192,57,43,0.06) 0%, transparent 60%);
+}
+
+/* ── Characters section ──────────────────────────────────────────────────── */
+.characters {
+ padding: 6rem 2.5rem;
+ background: var(--dark-mid);
+ border-top: 1px solid var(--border);
+ border-bottom: 1px solid var(--border);
+}
+
+.sectionHeader {
+ text-align: center;
+ max-width: 600px;
+ margin: 0 auto 4rem;
+}
+
+.characterGrid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+ gap: 1.5rem;
+ max-width: 1100px;
+ margin: 0 auto;
+}
+
+.characterCard {
+ background: var(--dark-card);
+ border: 1px solid var(--border);
+ padding: 2rem 1.75rem;
+ position: relative;
+ overflow: hidden;
+ transition: border-color 0.2s, transform 0.2s;
+}
+
+.characterCard:hover {
+ border-color: rgba(232, 220, 200, 0.25);
+ transform: translateY(-3px);
+}
+
+.characterCard::before {
+ content: '';
+ position: absolute;
+ top: 0; left: 0; right: 0;
+ height: 2px;
+ background: var(--red);
+ transform: scaleX(0);
+ transform-origin: left;
+ transition: transform 0.3s;
+}
+
+.characterCard:hover::before {
+ transform: scaleX(1);
+}
+
+.characterEmoji {
+ font-size: 2.5rem;
+ margin-bottom: 1rem;
+ display: block;
+}
+
+.characterName {
+ font-family: var(--font-display);
+ font-size: 1.2rem;
+ color: var(--bone);
+ margin-bottom: 0.5rem;
+}
+
+.characterRole {
+ font-size: 0.72rem;
+ letter-spacing: 0.15em;
+ text-transform: uppercase;
+ color: var(--red);
+ margin-bottom: 0.75rem;
+}
+
+.characterDesc {
+ font-size: 0.88rem;
+ color: var(--bone-dim);
+ line-height: 1.65;
+}
+
+/* ── CTA section ─────────────────────────────────────────────────────────── */
+.cta {
+ padding: 6rem 2.5rem;
+ text-align: center;
+ position: relative;
+ overflow: hidden;
+}
+
+.cta::before {
+ content: '';
+ position: absolute;
+ inset: 0;
+ background: radial-gradient(ellipse 60% 80% at 50% 50%, rgba(192, 57, 43, 0.07) 0%, transparent 70%);
+ pointer-events: none;
+}
+
+.ctaContent {
+ position: relative;
+ z-index: 1;
+ max-width: 560px;
+ margin: 0 auto;
+}
+
+.ctaTitle {
+ font-family: var(--font-display);
+ font-size: clamp(2rem, 4vw, 3rem);
+ color: var(--bone);
+ margin-bottom: 1rem;
+ line-height: 1.2;
+}
+
+.ctaTitle em {
+ font-style: normal;
+ color: var(--red);
+}
+
+/* ── Footer ──────────────────────────────────────────────────────────────── */
+.footer {
+ padding: 2rem 2.5rem;
+ border-top: 1px solid var(--border);
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ flex-wrap: wrap;
+ gap: 1rem;
+}
+
+.footerLogo {
+ font-family: var(--font-display);
+ font-size: 0.85rem;
+ letter-spacing: 0.12em;
+ text-transform: uppercase;
+ color: var(--bone-dim);
+}
+
+.footerLogo span {
+ color: var(--red);
+}
+
+.footerNote {
+ font-size: 0.75rem;
+ color: var(--bone-dim);
+ opacity: 0.5;
+}
+
+/* ── Responsive ──────────────────────────────────────────────────────────── */
+@media (max-width: 768px) {
+ .nav { padding: 1rem 1.25rem; }
+ .navLinks { display: none; }
+ .about { grid-template-columns: 1fr; gap: 2.5rem; }
+ .footer { flex-direction: column; text-align: center; }
}
diff --git a/styles/globals.css b/styles/globals.css
index e3734be..d2e0296 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -1,33 +1,33 @@
-:root {
- --background: #ffffff;
- --foreground: #171717;
-}
-
-@media (prefers-color-scheme: dark) {
- :root {
- --background: #0a0a0a;
- --foreground: #ededed;
- }
-}
-
-html,
-body {
- max-width: 100vw;
- overflow-x: hidden;
-}
-
-body {
- color: var(--foreground);
- background: var(--background);
- font-family: Arial, Helvetica, sans-serif;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-}
-
-* {
+*, *::before, *::after {
box-sizing: border-box;
- padding: 0;
margin: 0;
+ padding: 0;
+}
+
+:root {
+ --bone: #e8dcc8;
+ --bone-dim: #9e9080;
+ --red: #c0392b;
+ --red-glow: rgba(192, 57, 43, 0.4);
+ --dark: #0a0806;
+ --dark-mid: #120f0a;
+ --dark-card: #1a1510;
+ --border: rgba(232, 220, 200, 0.12);
+ --font-display: 'Georgia', 'Times New Roman', serif;
+ --font-body: 'Segoe UI', system-ui, -apple-system, sans-serif;
+}
+
+html {
+ scroll-behavior: smooth;
+}
+
+body {
+ background: var(--dark);
+ color: var(--bone);
+ font-family: var(--font-body);
+ line-height: 1.6;
+ min-height: 100vh;
+ overflow-x: hidden;
}
a {
@@ -35,8 +35,16 @@ a {
text-decoration: none;
}
-@media (prefers-color-scheme: dark) {
- html {
- color-scheme: dark;
- }
+img {
+ max-width: 100%;
}
+
+::selection {
+ background: var(--red);
+ color: var(--bone);
+}
+
+/* Scrollbar */
+::-webkit-scrollbar { width: 6px; }
+::-webkit-scrollbar-track { background: var(--dark); }
+::-webkit-scrollbar-thumb { background: var(--red); border-radius: 3px; }
+ 💀
+
+
+
+ {/* ── Characters ──────────────────────────────────────────────── */}
+
+ The Cast
+
+ Characters
++ Every soul in this world has a price. Meet the ones who pay it. +
+
+
+
+ 🦴
+
+ Bone Lord Bob
+The Protagonist
++ A man cursed to walk between worlds — carrying the weight + of the dead and the rage of the living. He answers to no one. +
+
+ 🔥
+
+ ???
+Coming Soon
++ More characters will be revealed as the story unfolds. + The roster is deep. The world is darker than it looks. +
+
+ ⚔️
+
+ ???
+Coming Soon
++ Every legend needs its foil. Every bone lord needs someone + willing to break them. +
+
+ Stay in the loop
+
-
+ + The story is coming. +
++ Bone Lord Bob is in active development. Follow along as the + world takes shape — art, lore, characters, and more. +
-