feat: socials grid, cookie consent (GDPR/CCPA/PIPEDA), privacy & terms pages, enhanced SEO meta tags

- index.tsx: full socials section (YouTube, X, Instagram, Facebook, TikTok, Patreon) - index.tsx: enhanced meta description + keywords - _document.tsx: global meta keywords, proper OG image dimensions, twitter:creator - _app.tsx: cookie consent component mounted globally - CookieConsent.tsx: GDPR/CCPA/PIPEDA compliant banner with accept/decline + localStorage + GA disable - pages/privacy.tsx: full Privacy Policy (GDPR, CCPA/CPRA, PIPEDA sections) - pages/terms.tsx: Terms & Conditions (IP, governing law NE, disclaimers) - Home.module.css: socialGrid/socialBtn styles, footerLinks, legal page styles - footer: Privacy Policy + Terms links on all pages
2026-04-11 08:43:19 -05:00
parent e616b6efe5
commit f44909eca9
7 changed files with 1022 additions and 45 deletions
@@ -1,6 +1,12 @@
 import "@/styles/globals.css";
 import type { AppProps } from "next/app";
+import CookieConsent from "./components/CookieConsent";

 export default function App({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />;
+  return (
+    <>
+      <Component {...pageProps} />
+      <CookieConsent />
+    </>
+  );
 }
@@ -5,21 +5,43 @@ export default function Document() {
    <Html lang="en">
      <Head>
        <meta charSet="utf-8" />
-        <meta name="description" content="Bone Lord Bob is an American Anime project — dark, brutal, beautiful. Coming soon." />
+        {/* Primary SEO */}
+        <meta name="description" content="Bone Lord Bob is an American Anime project — dark, brutal, beautiful. An original animated series unlike anything you've seen before." />
+        <meta name="keywords" content="Bone Lord Bob, American Anime, indie animation, dark fantasy anime, animated series, original anime, BLB, dark fantasy, indie anime, anime art, American animation, bone lord" />
+        <meta name="author" content="Mathison Projects Inc." />
+        <meta name="robots" content="index, follow" />
+        <meta name="theme-color" content="#0a0806" />
+
        {/* Open Graph */}
+        <meta property="og:site_name" content="Bone Lord Bob" />
        <meta property="og:title" content="Bone Lord Bob — American Anime" />
-        <meta property="og:description" content="American Anime. Dark. Brutal. Beautiful." />
-        <meta property="og:image" content="https://bonelordbob.com/og-image.png" />
-        <meta property="og:url" content="https://bonelordbob.com/" />
+        <meta property="og:description" content="American Anime. Dark. Brutal. Beautiful. An original animated series unlike anything you've seen before." />
+        <meta property="og:image" content="https://www.bonelordbob.com/og-image.png" />
+        <meta property="og:image:width" content="1536" />
+        <meta property="og:image:height" content="1024" />
+        <meta property="og:image:alt" content="Bone Lord Bob — American Anime" />
+        <meta property="og:url" content="https://www.bonelordbob.com/" />
        <meta property="og:type" content="website" />
-        {/* Twitter Card */}
+        <meta property="og:locale" content="en_US" />
+
+        {/* Twitter / X Card */}
        <meta name="twitter:card" content="summary_large_image" />
        <meta name="twitter:site" content="@bonelordbob" />
+        <meta name="twitter:creator" content="@bonelordbob" />
        <meta name="twitter:title" content="Bone Lord Bob — American Anime" />
        <meta name="twitter:description" content="American Anime. Dark. Brutal. Beautiful." />
-        <meta name="twitter:image" content="https://bonelordbob.com/og-image.png" />
-        <link rel="icon" href="/favicon.ico" />
+        <meta name="twitter:image" content="https://www.bonelordbob.com/og-image.png" />
+        <meta name="twitter:image:alt" content="Bone Lord Bob — American Anime" />
+
+        {/* Icons */}
+        <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" />
+        <link rel="manifest" href="/manifest.json" />
+
+        {/* Canonical */}
+        <link rel="canonical" href="https://www.bonelordbob.com/" />
+
        {/* Google Analytics GA4 — G-6EJVCK4931 */}
        <script async src="https://www.googletagmanager.com/gtag/js?id=G-6EJVCK4931" />
        <script
@@ -28,7 +50,11 @@ export default function Document() {
              window.dataLayer = window.dataLayer || [];
              function gtag(){dataLayer.push(arguments);}
              gtag('js', new Date());
-              gtag('config', 'G-6EJVCK4931');
+              // Respect declined cookie consent
+              var consent = typeof localStorage !== 'undefined' ? localStorage.getItem('blb_cookie_consent') : null;
+              if (consent !== 'declined') {
+                gtag('config', 'G-6EJVCK4931', { anonymize_ip: true });
+              }
            `,
          }}
        />
@@ -0,0 +1,96 @@
+import { useState, useEffect } from "react";
+import Link from "next/link";
+
+export default function CookieConsent() {
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    try {
+      const consent = localStorage.getItem("blb_cookie_consent");
+      if (!consent) {
+        setVisible(true);
+      }
+    } catch {
+      // localStorage not available
+    }
+  }, []);
+
+  function accept() {
+    try {
+      localStorage.setItem("blb_cookie_consent", "true");
+    } catch {
+      // ignore
+    }
+    setVisible(false);
+  }
+
+  if (!visible) return null;
+
+  return (
+    <div
+      style={{
+        position: "fixed",
+        bottom: 0,
+        left: 0,
+        right: 0,
+        zIndex: 9999,
+        background: "#1a1510",
+        borderTop: "1px solid rgba(232,220,200,0.18)",
+        padding: "16px 24px",
+        display: "flex",
+        flexWrap: "wrap",
+        alignItems: "center",
+        gap: "12px",
+        justifyContent: "space-between",
+      }}
+    >
+      <p
+        style={{
+          color: "#e8dcc8",
+          fontSize: "0.92rem",
+          lineHeight: 1.5,
+          maxWidth: "680px",
+          margin: 0,
+        }}
+      >
+        We use cookies to improve your experience and analyze site traffic. By
+        continuing, you agree to our cookie policy.
+      </p>
+      <div style={{ display: "flex", gap: "10px", flexShrink: 0 }}>
+        <Link
+          href="/privacy"
+          style={{
+            padding: "9px 18px",
+            border: "1px solid rgba(232,220,200,0.3)",
+            borderRadius: "4px",
+            color: "#e8dcc8",
+            fontSize: "0.88rem",
+            cursor: "pointer",
+            background: "transparent",
+            textDecoration: "none",
+            lineHeight: 1,
+            display: "inline-flex",
+            alignItems: "center",
+          }}
+        >
+          Privacy Policy
+        </Link>
+        <button
+          onClick={accept}
+          style={{
+            padding: "9px 18px",
+            background: "#c0392b",
+            border: "none",
+            borderRadius: "4px",
+            color: "#e8dcc8",
+            fontSize: "0.88rem",
+            cursor: "pointer",
+            fontWeight: 600,
+          }}
+        >
+          Accept
+        </button>
+      </div>
+    </div>
+  );
+}
@@ -1,13 +1,66 @@
 import Head from "next/head";
 import Image from "next/image";
+import Link from "next/link";
 import styles from "@/styles/Home.module.css";

+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 (
    <>
      <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="description"
+          content="Bone Lord Bob is an American Anime project — dark, brutal, beautiful. Coming soon."
+        />
+        <meta
+          name="keywords"
+          content="Bone Lord Bob, BLB, American Anime, indie anime, dark fantasy anime, original anime series, animated series, dark fantasy, American animation, independent animation, bone kingdom"
+        />
        <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" />
@@ -15,30 +68,43 @@ export default function Home() {

        {/* Open Graph */}
        <meta property="og:title" content="Bone Lord Bob" />
-        <meta property="og:description" content="American Anime. Dark. Brutal. Beautiful." />
+        <meta
+          property="og:description"
+          content="American Anime. Dark. Brutal. Beautiful."
+        />
        <meta property="og:type" content="website" />
+        <meta property="og:url" content="https://www.bonelordbob.com" />
        <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:site" content="@BoneLordBob" />
        <meta name="twitter:title" content="Bone Lord Bob" />
-        <meta name="twitter:description" content="American Anime. Dark. Brutal. Beautiful." />
+        <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>
+            <li>
+              <a href="#about">About</a>
+            </li>
+            <li>
+              <a href="#characters">Characters</a>
+            </li>
+            <li>
+              <a href="#follow">Follow</a>
+            </li>
          </ul>
        </nav>

@@ -67,13 +133,21 @@ export default function Home() {

        {/* ── Divider ─────────────────────────────────────────────────── */}
        <div className={styles.divider}>
-          {["💀", "💀", "💀", "💀", "💀", "💀", "💀", "💀", "💀", "💀"].map((s, i) => (
-            <span key={i} className={styles.dividerSkull}>{s}</span>
-          ))}
+          {["💀", "💀", "💀", "💀", "💀", "💀", "💀", "💀", "💀", "💀"].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>
-          ))}
+          {["💀", "💀", "💀", "💀", "💀", "💀", "💀", "💀", "💀", "💀"].map(
+            (s, i) => (
+              <span key={i} className={styles.dividerSkull}>
+                {s}
+              </span>
+            )
+          )}
        </div>

        {/* ── About ───────────────────────────────────────────────────── */}
@@ -81,16 +155,18 @@ export default function Home() {
          <div>
            <span className={styles.sectionLabel}>The Project</span>
            <h2 className={styles.sectionTitle}>
-              American stories.<br />Anime soul.
+              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.
+              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.
+              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}>
@@ -120,8 +196,8 @@ export default function Home() {
              <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.
+                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}>
@@ -129,8 +205,8 @@ export default function Home() {
              <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.
+                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}>
@@ -153,17 +229,91 @@ export default function Home() {
              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.
+              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"
+
+            {/* Social grid */}
+            <div
+              style={{
+                display: "grid",
+                gridTemplateColumns: "repeat(auto-fit, minmax(160px, 1fr))",
+                gap: "12px",
+                marginTop: "32px",
+                maxWidth: "700px",
+                width: "100%",
+              }}
            >
-              Follow on X
-            </a>
+              {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>

@@ -172,11 +322,44 @@ export default function Home() {
          <span className={styles.footerLogo}>
            Bone Lord <span>Bob</span>
          </span>
-          <span className={styles.footerNote}>
-            © {new Date().getFullYear()} Mathison Projects Inc. All rights reserved.
-          </span>
+          <div
+            style={{
+              display: "flex",
+              flexWrap: "wrap",
+              alignItems: "center",
+              justifyContent: "center",
+              gap: "16px",
+              marginTop: "8px",
+            }}
+          >
+            <span className={styles.footerNote}>
+              © {new Date().getFullYear()} Mathison Projects Inc. All rights
+              reserved.
+            </span>
+            <span style={{ color: "rgba(232,220,200,0.2)" }}>|</span>
+            <Link
+              href="/privacy"
+              style={{
+                color: "#9e9080",
+                fontSize: "0.82rem",
+                textDecoration: "none",
+              }}
+            >
+              Privacy Policy
+            </Link>
+            <span style={{ color: "rgba(232,220,200,0.2)" }}>|</span>
+            <Link
+              href="/terms"
+              style={{
+                color: "#9e9080",
+                fontSize: "0.82rem",
+                textDecoration: "none",
+              }}
+            >
+              Terms &amp; Conditions
+            </Link>
+          </div>
        </footer>
-
      </div>
    </>
  );
@@ -0,0 +1,405 @@
+import Head from "next/head";
+import Link from "next/link";
+
+const s = {
+  page: {
+    minHeight: "100vh",
+    background: "#0a0806",
+    color: "#e8dcc8",
+    fontFamily: "'Segoe UI', system-ui, -apple-system, sans-serif",
+    lineHeight: 1.7 as const,
+  } as React.CSSProperties,
+  nav: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: "20px 32px",
+    borderBottom: "1px solid rgba(232,220,200,0.1)",
+  } as React.CSSProperties,
+  logo: {
+    fontFamily: "'Georgia', 'Times New Roman', serif",
+    fontSize: "1.2rem",
+    fontWeight: 700,
+    letterSpacing: "0.04em",
+    textDecoration: "none",
+    color: "#e8dcc8",
+  } as React.CSSProperties,
+  logoSpan: { color: "#c0392b" } as React.CSSProperties,
+  backLink: {
+    fontSize: "0.88rem",
+    color: "#9e9080",
+    textDecoration: "none",
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "4px",
+  } as React.CSSProperties,
+  main: {
+    maxWidth: "780px",
+    margin: "0 auto",
+    padding: "56px 32px 80px",
+  } as React.CSSProperties,
+  eyebrow: {
+    display: "block",
+    fontSize: "0.78rem",
+    fontWeight: 700,
+    letterSpacing: "0.14em",
+    textTransform: "uppercase" as const,
+    color: "#c0392b",
+    marginBottom: "12px",
+  } as React.CSSProperties,
+  h1: {
+    fontFamily: "'Georgia', 'Times New Roman', serif",
+    fontSize: "clamp(2rem, 5vw, 2.8rem)",
+    fontWeight: 700,
+    color: "#e8dcc8",
+    marginBottom: "8px",
+    lineHeight: 1.2,
+  } as React.CSSProperties,
+  updated: {
+    fontSize: "0.85rem",
+    color: "#9e9080",
+    marginBottom: "48px",
+    paddingBottom: "32px",
+    borderBottom: "1px solid rgba(232,220,200,0.1)",
+  } as React.CSSProperties,
+  h2: {
+    fontFamily: "'Georgia', 'Times New Roman', serif",
+    fontSize: "1.35rem",
+    fontWeight: 700,
+    color: "#e8dcc8",
+    marginTop: "40px",
+    marginBottom: "12px",
+  } as React.CSSProperties,
+  p: {
+    fontSize: "0.95rem",
+    color: "#c8bfae",
+    marginBottom: "14px",
+  } as React.CSSProperties,
+  ul: {
+    paddingLeft: "20px",
+    marginBottom: "14px",
+  } as React.CSSProperties,
+  li: {
+    fontSize: "0.95rem",
+    color: "#c8bfae",
+    marginBottom: "6px",
+  } as React.CSSProperties,
+  a: {
+    color: "#c0392b",
+    textDecoration: "underline",
+  } as React.CSSProperties,
+  footer: {
+    borderTop: "1px solid rgba(232,220,200,0.1)",
+    padding: "28px 32px",
+    textAlign: "center" as const,
+    fontSize: "0.82rem",
+    color: "#9e9080",
+  } as React.CSSProperties,
+};
+
+import React from "react";
+
+export default function Privacy() {
+  return (
+    <>
+      <Head>
+        <title>Privacy Policy — Bone Lord Bob</title>
+        <meta
+          name="description"
+          content="Privacy Policy for Bone Lord Bob — how we collect, use, and protect your data."
+        />
+        <meta
+          name="keywords"
+          content="Bone Lord Bob, privacy policy, cookies, GDPR, CCPA, CASL, American Anime"
+        />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="icon" href="/favicon.ico" sizes="any" />
+        <meta property="og:title" content="Privacy Policy — Bone Lord Bob" />
+        <meta
+          property="og:description"
+          content="Privacy Policy for Bone Lord Bob."
+        />
+        <meta property="og:type" content="website" />
+        <meta
+          property="og:url"
+          content="https://www.bonelordbob.com/privacy"
+        />
+        <meta property="og:image" content="/og-image.png" />
+        <meta name="twitter:card" content="summary" />
+        <meta name="twitter:site" content="@BoneLordBob" />
+        <meta name="twitter:title" content="Privacy Policy — Bone Lord Bob" />
+      </Head>
+
+      <div style={s.page}>
+        {/* Nav */}
+        <nav style={s.nav}>
+          <Link href="/" style={s.logo}>
+            Bone Lord <span style={s.logoSpan}>Bob</span>
+          </Link>
+          <Link href="/" style={s.backLink}>
+            ← Back to Home
+          </Link>
+        </nav>
+
+        {/* Content */}
+        <main style={s.main}>
+          <span style={s.eyebrow}>Legal</span>
+          <h1 style={s.h1}>Privacy Policy</h1>
+          <p style={s.updated}>Last updated: April 2026</p>
+
+          <p style={s.p}>
+            Bone Lord Bob (&quot;we&quot;, &quot;us&quot;, &quot;our&quot;) is
+            operated by Mathison Projects Inc. We respect your privacy and are
+            committed to protecting any personal data we collect. This policy
+            explains what we collect, how we use it, and your rights.
+          </p>
+
+          <h2 style={s.h2}>1. Information We Collect</h2>
+          <p style={s.p}>
+            We collect limited information when you visit{" "}
+            <strong>www.bonelordbob.com</strong>:
+          </p>
+          <ul style={s.ul}>
+            <li style={s.li}>
+              <strong>Usage data</strong> — pages visited, browser type,
+              device, IP address, and referral source, collected automatically
+              via analytics tools.
+            </li>
+            <li style={s.li}>
+              <strong>Cookie consent preference</strong> — stored locally in
+              your browser&apos;s localStorage.
+            </li>
+            <li style={s.li}>
+              <strong>Contact information</strong> — only if you email us
+              directly at{" "}
+              <a href="mailto:hello@bonelordbob.com" style={s.a}>
+                hello@bonelordbob.com
+              </a>
+              .
+            </li>
+          </ul>
+
+          <h2 style={s.h2}>2. Cookies &amp; Analytics</h2>
+          <p style={s.p}>
+            We use <strong>Google Analytics</strong> to understand how visitors
+            interact with our site. Google Analytics places cookies on your
+            device to collect anonymized data about your visit (e.g., pages
+            viewed, session duration, geographic region).
+          </p>
+          <p style={s.p}>
+            You can opt out of Google Analytics tracking by installing the{" "}
+            <a
+              href="https://tools.google.com/dlpage/gaoptout"
+              target="_blank"
+              rel="noopener noreferrer"
+              style={s.a}
+            >
+              Google Analytics Opt-out Browser Add-on
+            </a>
+            .
+          </p>
+          <p style={s.p}>
+            We also use a localStorage key (<code>blb_cookie_consent</code>) to
+            remember your cookie consent choice. This is not transmitted to any
+            server.
+          </p>
+
+          <h2 style={s.h2}>3. Third-Party Services</h2>
+          <p style={s.p}>
+            Our site links to and embeds content from third-party platforms.
+            Each has its own privacy policy:
+          </p>
+          <ul style={s.ul}>
+            <li style={s.li}>
+              <strong>YouTube</strong> —{" "}
+              <a
+                href="https://policies.google.com/privacy"
+                target="_blank"
+                rel="noopener noreferrer"
+                style={s.a}
+              >
+                Google Privacy Policy
+              </a>
+            </li>
+            <li style={s.li}>
+              <strong>Instagram</strong> —{" "}
+              <a
+                href="https://privacycenter.instagram.com/policy"
+                target="_blank"
+                rel="noopener noreferrer"
+                style={s.a}
+              >
+                Meta Privacy Policy
+              </a>
+            </li>
+            <li style={s.li}>
+              <strong>X (Twitter)</strong> —{" "}
+              <a
+                href="https://twitter.com/en/privacy"
+                target="_blank"
+                rel="noopener noreferrer"
+                style={s.a}
+              >
+                X Privacy Policy
+              </a>
+            </li>
+            <li style={s.li}>
+              <strong>Facebook</strong> —{" "}
+              <a
+                href="https://www.facebook.com/privacy/policy"
+                target="_blank"
+                rel="noopener noreferrer"
+                style={s.a}
+              >
+                Meta Privacy Policy
+              </a>
+            </li>
+            <li style={s.li}>
+              <strong>Patreon</strong> —{" "}
+              <a
+                href="https://www.patreon.com/policy/privacy"
+                target="_blank"
+                rel="noopener noreferrer"
+                style={s.a}
+              >
+                Patreon Privacy Policy
+              </a>
+            </li>
+            <li style={s.li}>
+              <strong>TikTok</strong> —{" "}
+              <a
+                href="https://www.tiktok.com/legal/page/us/privacy-policy/en"
+                target="_blank"
+                rel="noopener noreferrer"
+                style={s.a}
+              >
+                TikTok Privacy Policy
+              </a>
+            </li>
+          </ul>
+          <p style={s.p}>
+            We are not responsible for the privacy practices of these
+            third-party platforms. Visiting their links is subject to their
+            respective policies.
+          </p>
+
+          <h2 style={s.h2}>4. How We Use Your Information</h2>
+          <p style={s.p}>
+            We use the data we collect to:
+          </p>
+          <ul style={s.ul}>
+            <li style={s.li}>Analyze and improve site performance</li>
+            <li style={s.li}>Understand audience demographics and interests</li>
+            <li style={s.li}>
+              Respond to inquiries you send via email
+            </li>
+          </ul>
+          <p style={s.p}>
+            We do <strong>not</strong> sell, rent, or trade your personal
+            information to third parties.
+          </p>
+
+          <h2 style={s.h2}>5. Your Rights</h2>
+
+          <p style={s.p}>
+            <strong>GDPR (European Union):</strong> If you are located in the
+            EU/EEA, you have the right to access, rectify, erase, restrict, or
+            object to processing of your personal data. You also have the right
+            to data portability. To exercise these rights, contact us at{" "}
+            <a href="mailto:hello@bonelordbob.com" style={s.a}>
+              hello@bonelordbob.com
+            </a>
+            .
+          </p>
+
+          <p style={s.p}>
+            <strong>CCPA (California, USA):</strong> California residents have
+            the right to know what personal information we collect, to request
+            deletion of that information, and to opt out of the sale of personal
+            information. We do not sell personal information. To submit a
+            request, contact{" "}
+            <a href="mailto:hello@bonelordbob.com" style={s.a}>
+              hello@bonelordbob.com
+            </a>
+            .
+          </p>
+
+          <p style={s.p}>
+            <strong>CASL (Canada):</strong> We do not send commercial electronic
+            messages unless you have given express or implied consent. If you
+            wish to withdraw consent or unsubscribe from any communications,
+            contact us at{" "}
+            <a href="mailto:hello@bonelordbob.com" style={s.a}>
+              hello@bonelordbob.com
+            </a>
+            .
+          </p>
+
+          <h2 style={s.h2}>6. Data Retention</h2>
+          <p style={s.p}>
+            Analytics data is retained by Google Analytics per their default
+            retention settings (26 months). We do not store personal data on
+            our own servers beyond what is needed to respond to direct inquiries.
+          </p>
+
+          <h2 style={s.h2}>7. Children&apos;s Privacy</h2>
+          <p style={s.p}>
+            Bone Lord Bob is intended for mature audiences. We do not knowingly
+            collect personal information from children under 13. If you believe
+            a child has provided us with personal data, please contact us
+            immediately.
+          </p>
+
+          <h2 style={s.h2}>8. Changes to This Policy</h2>
+          <p style={s.p}>
+            We may update this Privacy Policy from time to time. We will post
+            the updated version on this page with a revised &quot;Last
+            updated&quot; date. Continued use of the site after changes
+            constitutes acceptance.
+          </p>
+
+          <h2 style={s.h2}>9. Contact</h2>
+          <p style={s.p}>
+            For any privacy-related questions, requests, or concerns, contact
+            us at:
+          </p>
+          <p style={s.p}>
+            <strong>Mathison Projects Inc.</strong>
+            <br />
+            Email:{" "}
+            <a href="mailto:hello@bonelordbob.com" style={s.a}>
+              hello@bonelordbob.com
+            </a>
+            <br />
+            Website:{" "}
+            <a
+              href="https://www.bonelordbob.com"
+              target="_blank"
+              rel="noopener noreferrer"
+              style={s.a}
+            >
+              www.bonelordbob.com
+            </a>
+          </p>
+        </main>
+
+        <footer style={s.footer}>
+          <div>
+            © {new Date().getFullYear()} Mathison Projects Inc. All rights
+            reserved. &nbsp;|&nbsp;{" "}
+            <Link href="/" style={{ color: "#9e9080", textDecoration: "none" }}>
+              Home
+            </Link>{" "}
+            &nbsp;|&nbsp;{" "}
+            <Link
+              href="/terms"
+              style={{ color: "#9e9080", textDecoration: "none" }}
+            >
+              Terms &amp; Conditions
+            </Link>
+          </div>
+        </footer>
+      </div>
+    </>
+  );
+}
@@ -0,0 +1,162 @@
+import Head from "next/head";
+import Link from "next/link";
+import styles from "@/styles/Home.module.css";
+
+const UPDATED = "April 11, 2025";
+
+export default function Terms() {
+  return (
+    <>
+      <Head>
+        <title>Terms &amp; Conditions | Bone Lord Bob</title>
+        <meta
+          name="description"
+          content="Terms and Conditions for Bone Lord Bob — rules governing your use of www.bonelordbob.com and all associated content."
+        />
+        <meta name="keywords" content="Bone Lord Bob terms and conditions, terms of service, legal, usage policy" />
+        <meta property="og:title" content="Terms &amp; Conditions — Bone Lord Bob" />
+        <meta property="og:description" content="Terms and Conditions governing your use of Bone Lord Bob." />
+        <meta property="og:url" content="https://www.bonelordbob.com/terms" />
+        <link rel="canonical" href="https://www.bonelordbob.com/terms" />
+      </Head>
+
+      <div className={styles.page}>
+        <nav className={styles.nav}>
+          <Link href="/" className={styles.navLogo}>
+            Bone Lord <span>Bob</span>
+          </Link>
+          <ul className={styles.navLinks}>
+            <li><Link href="/">Home</Link></li>
+            <li><Link href="/privacy">Privacy</Link></li>
+          </ul>
+        </nav>
+
+        <main className={styles.legal}>
+          <h1 className={styles.legalTitle}>Terms &amp; Conditions</h1>
+          <span className={styles.legalUpdated}>Last updated: {UPDATED}</span>
+
+          <div className={styles.legalSection}>
+            <p>
+              These Terms and Conditions (&ldquo;Terms&rdquo;) govern your use of{" "}
+              <strong>www.bonelordbob.com</strong> (the &ldquo;Site&rdquo;), operated by Mathison Projects
+              Inc. (&ldquo;we,&rdquo; &ldquo;our,&rdquo; or &ldquo;us&rdquo;). By accessing or using the Site, you agree
+              to be bound by these Terms. If you do not agree, do not use the Site.
+            </p>
+          </div>
+
+          <div className={styles.legalSection}>
+            <h2>1. Use of the Site</h2>
+            <p>You agree to use the Site only for lawful purposes. You must not:</p>
+            <ul>
+              <li>Use the Site in any way that violates applicable local, national, or international laws or regulations</li>
+              <li>Attempt to gain unauthorized access to any part of the Site or its infrastructure</li>
+              <li>Transmit any unsolicited or unauthorized advertising or promotional material</li>
+              <li>Scrape, copy, or harvest Site content in bulk without prior written permission</li>
+              <li>Impersonate Bone Lord Bob, Mathison Projects Inc., or any of their personnel</li>
+            </ul>
+          </div>
+
+          <div className={styles.legalSection}>
+            <h2>2. Intellectual Property</h2>
+            <p>
+              All content on this Site — including but not limited to artwork, characters, logos,
+              animation, text, names, and branding — is the exclusive intellectual property of
+              Mathison Projects Inc. and/or its creative collaborators, and is protected by
+              copyright, trademark, and other applicable intellectual property laws.
+            </p>
+            <p>
+              <strong>Bone Lord Bob</strong>, all character names, and all associated artwork
+              are original creations. All rights reserved.
+            </p>
+            <p>
+              You may not reproduce, distribute, modify, publicly display, or create derivative
+              works from any Site content without our prior written consent.
+            </p>
+          </div>
+
+          <div className={styles.legalSection}>
+            <h2>3. User-Generated Content</h2>
+            <p>
+              This Site does not currently accept user submissions. Fan art, fan fiction, and other
+              community content shared on third-party platforms (social media, forums) remain the
+              property of their creators, but by tagging or associating such content with Bone Lord
+              Bob, you grant us a non-exclusive, royalty-free right to reshare or reference that
+              content for promotional purposes, with credit given where possible.
+            </p>
+          </div>
+
+          <div className={styles.legalSection}>
+            <h2>4. Third-Party Links</h2>
+            <p>
+              The Site contains links to third-party platforms (YouTube, X, Instagram, Facebook,
+              TikTok, Patreon, and others). These links are provided for convenience. We are not
+              responsible for the content, privacy practices, or terms of those platforms. Their
+              use is governed by their own terms and policies.
+            </p>
+          </div>
+
+          <div className={styles.legalSection}>
+            <h2>5. Disclaimers</h2>
+            <p>
+              THE SITE AND ITS CONTENT ARE PROVIDED &ldquo;AS IS&rdquo; WITHOUT WARRANTIES OF ANY KIND,
+              EXPRESS OR IMPLIED. WE DO NOT WARRANT THAT THE SITE WILL BE UNINTERRUPTED, ERROR-FREE,
+              OR FREE OF VIRUSES OR OTHER HARMFUL COMPONENTS.
+            </p>
+            <p>
+              Bone Lord Bob content is intended for mature audiences. The series depicts dark
+              fantasy themes including violence and death. Viewer discretion is advised.
+            </p>
+          </div>
+
+          <div className={styles.legalSection}>
+            <h2>6. Limitation of Liability</h2>
+            <p>
+              TO THE FULLEST EXTENT PERMITTED BY LAW, MATHISON PROJECTS INC. SHALL NOT BE LIABLE
+              FOR ANY INDIRECT, INCIDENTAL, SPECIAL, CONSEQUENTIAL, OR PUNITIVE DAMAGES ARISING
+              FROM YOUR USE OF OR INABILITY TO USE THE SITE OR ITS CONTENT.
+            </p>
+          </div>
+
+          <div className={styles.legalSection}>
+            <h2>7. Governing Law</h2>
+            <p>
+              These Terms shall be governed by and construed in accordance with the laws of the
+              State of Nebraska, United States of America, without regard to its conflict of law
+              principles. Any disputes shall be resolved in the courts of Omaha, Nebraska.
+            </p>
+          </div>
+
+          <div className={styles.legalSection}>
+            <h2>8. Changes to These Terms</h2>
+            <p>
+              We reserve the right to modify these Terms at any time. Changes will be reflected by
+              updating the &ldquo;Last updated&rdquo; date above. Your continued use of the Site after
+              any changes constitutes acceptance of the revised Terms.
+            </p>
+          </div>
+
+          <div className={styles.legalSection}>
+            <h2>9. Contact Us</h2>
+            <p>
+              Mathison Projects Inc.<br />
+              Omaha, Nebraska, USA<br />
+              Email:{" "}
+              <a href="mailto:hello@bonelordbob.com">hello@bonelordbob.com</a>
+            </p>
+          </div>
+        </main>
+
+        <footer className={styles.footer}>
+          <span className={styles.footerLogo}>Bone Lord <span>Bob</span></span>
+          <div className={styles.footerLinks}>
+            <Link href="/privacy">Privacy Policy</Link>
+            <Link href="/terms">Terms &amp; Conditions</Link>
+          </div>
+          <span className={styles.footerNote}>
+            © {new Date().getFullYear()} Mathison Projects Inc. All rights reserved.
+          </span>
+        </footer>
+      </div>
+    </>
+  );
+}
@@ -410,10 +410,109 @@
  opacity: 0.5;
 }

+/* ── Social buttons ──────────────────────────────────────────────────────── */
+.socialGrid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  justify-content: center;
+  margin-top: 1.75rem;
+}
+
+.socialBtn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.65rem 1.25rem;
+  background: var(--dark-card);
+  color: var(--bone-dim);
+  border: 1px solid var(--border);
+  font-size: 0.8rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  transition: border-color 0.2s, color 0.2s, background 0.2s;
+  white-space: nowrap;
+}
+
+.socialBtn:hover {
+  border-color: var(--red);
+  color: var(--bone);
+  background: rgba(192, 57, 43, 0.08);
+}
+
+/* ── Footer links ────────────────────────────────────────────────────────── */
+.footerLinks {
+  display: flex;
+  gap: 1.5rem;
+  font-size: 0.75rem;
+  color: var(--bone-dim);
+  opacity: 0.7;
+}
+
+.footerLinks a:hover {
+  opacity: 1;
+  color: var(--bone);
+}
+
+/* ── Legal pages (privacy / terms) ──────────────────────────────────────── */
+.legal {
+  max-width: 820px;
+  margin: 0 auto;
+  padding: 8rem 2.5rem 6rem;
+}
+
+.legalTitle {
+  font-family: var(--font-display);
+  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
+  color: var(--bone);
+  margin-bottom: 0.5rem;
+}
+
+.legalUpdated {
+  font-size: 0.75rem;
+  color: var(--bone-dim);
+  opacity: 0.5;
+  margin-bottom: 3rem;
+  display: block;
+}
+
+.legalSection {
+  margin-bottom: 2.5rem;
+}
+
+.legalSection h2 {
+  font-family: var(--font-display);
+  font-size: 1.15rem;
+  color: var(--bone);
+  margin-bottom: 0.75rem;
+  padding-bottom: 0.4rem;
+  border-bottom: 1px solid var(--border);
+}
+
+.legalSection p,
+.legalSection li {
+  font-size: 0.9rem;
+  color: var(--bone-dim);
+  line-height: 1.8;
+  margin-bottom: 0.75rem;
+}
+
+.legalSection ul {
+  padding-left: 1.5rem;
+}
+
+.legalSection a {
+  color: var(--red);
+  text-decoration: underline;
+}
+
 /* ── 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; }
+  .footerLinks { justify-content: center; }
+  .socialGrid { gap: 0.5rem; }
+  .legal { padding: 6rem 1.25rem 4rem; }
 }