From ecb1c55774532cabe881e7225bb0e7f56abeb1fd Mon Sep 17 00:00:00 2001 From: Jacob Mathison Date: Wed, 8 Apr 2026 13:44:34 -0500 Subject: [PATCH] =?UTF-8?q?feat:=20BLB=20landing=20page=20=E2=80=94=20dark?= =?UTF-8?q?=20hero,=20about,=20characters,=20follow=20CTA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/index.tsx | 208 +++++++++++------ styles/Home.module.css | 495 +++++++++++++++++++++++++++++++---------- styles/globals.css | 72 +++--- 3 files changed, 565 insertions(+), 210 deletions(-) diff --git a/pages/index.tsx b/pages/index.tsx index a26bc2b..6a819de 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,87 +1,163 @@ import Head from "next/head"; -import Image from "next/image"; -import { Geist, Geist_Mono } from "next/font/google"; import styles from "@/styles/Home.module.css"; -const geistSans = Geist({ - variable: "--font-geist-sans", - subsets: ["latin"], -}); - -const geistMono = Geist_Mono({ - variable: "--font-geist-mono", - subsets: ["latin"], -}); - export default function Home() { return ( <> - Create Next App - + Bone Lord Bob — American Anime + + + {/* Open Graph */} + + + -
-
- Next.js logo -
-

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 ────────────────────────────────────────────────────── */} +
+
+
+ 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. +

+ +
+
+ + {/* ── Divider ─────────────────────────────────────────────────── */} +
+ {["💀", "💀", "💀", "💀", "💀", "💀", "💀", "💀", "💀", "💀"].map((s, i) => ( + {s} + ))} + Coming Soon + {["💀", "💀", "💀", "💀", "💀", "💀", "💀", "💀", "💀", "💀"].map((s, i) => ( + {s} + ))} +
+ + {/* ── About ───────────────────────────────────────────────────── */} +
+
+ The Project +

+ 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.

-
+
+ 💀 +
+
+ + {/* ── 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. +

+
+
+
+ + {/* ── Follow CTA ──────────────────────────────────────────────── */} +
+
+ 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. +

- Vercel logomark - Deploy Now - - - Documentation + Follow on X
-
+ + + {/* ── 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; }