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:description" content="American Anime. Dark. Brutal. Beautiful. An original animated series unlike anything you've seen before." />
-        <meta property="og:image" content="https://bonelordbob.com/og-image.png" />
+        <meta property="og:image" content="https://www.bonelordbob.com/og-image.png" />
-        <meta property="og:url" content="https://bonelordbob.com/" />
+        <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" />
+        <meta name="twitter:image" content="https://www.bonelordbob.com/og-image.png" />
-        <link rel="icon" href="/favicon.ico" />
+        <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>
-            <li><a href="#characters">Characters</a></li>
+              <a href="#about">About</a>
-            <li><a href="#follow">Follow</a></li>
+            </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) => (
+          {["💀", "💀", "💀", "💀", "💀", "💀", "💀", "💀", "💀", "💀"].map(
-            <span key={i} className={styles.dividerSkull}>{s}</span>
+            (s, i) => (
-          ))}
+              <span key={i} className={styles.dividerSkull}>
                {s}
              </span>
            )
          )}
          <span className={styles.dividerText}>Coming Soon</span>
-          {["💀", "💀", "💀", "💀", "💀", "💀", "💀", "💀", "💀", "💀"].map((s, i) => (
+          {["💀", "💀", "💀", "💀", "💀", "💀", "💀", "💀", "💀", "💀"].map(
-            <span key={i} className={styles.dividerSkull}>{s}</span>
+            (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
+              Bone Lord Bob is an original American Anime project — a dark,
-              universe that pulls from the grit of American storytelling and channels it
+              hand-crafted universe that pulls from the grit of American
-              through the visual language of anime.
+              storytelling and channels it through the visual language of anime.
            </p>
            <p className={styles.sectionBody}>
-              Not an adaptation. Not a tribute. Something new.
+              Not an adaptation. Not a tribute. Something new. A world of bone
-              A world of bone and blood and meaning, built from scratch.
+              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
+                A man cursed to walk between worlds — carrying the weight of the
-                of the dead and the rage of the living. He answers to no one.
+                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.
+                More characters will be revealed as the story unfolds. The
-                The roster is deep. The world is darker than it looks.
+                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
+              Bone Lord Bob is in active development. Follow along as the world
-              world takes shape — art, lore, characters, and more.
+              takes shape — art, lore, characters, and more.
            </p>
-            <a
+
-              href="https://x.com/bonelordbob"
+            {/* Social grid */}
-              className={styles.btnPrimary}
+            <div
-              target="_blank"
+              style={{
-              rel="noopener noreferrer"
+                display: "grid",
                gridTemplateColumns: "repeat(auto-fit, minmax(160px, 1fr))",
                gap: "12px",
                marginTop: "32px",
                maxWidth: "700px",
                width: "100%",
              }}
            >
-              Follow on X
+              {SOCIALS.map((s) => (
-            </a>
+                <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}>
+          <div
-            © {new Date().getFullYear()} Mathison Projects Inc. All rights reserved.
+            style={{
-          </span>
+              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; }
 }