silma-bone-lord-bob/pages/world.tsx

import SiteLayout from "./components/SiteLayout";
import layoutStyles from "@/styles/Layout.module.css";
import styles from "@/styles/World.module.css";

export default function WorldPage() {
  return (
    <SiteLayout
      title="World"
      description="Explore the world of Bone Lord Bob — its kingdoms, landscapes, and forgotten places."
      keywords="Bone Lord Bob world, BLB setting, dark fantasy world, anime setting, bone kingdom"
      canonical="/world"
    >
      {/* Hero */}
      <div className={layoutStyles.pageHero}>
        <span className={layoutStyles.pageEyebrow}>The Setting</span>
        <h1 className={layoutStyles.pageTitle}>
          The <em>World</em>
        </h1>
        <p className={layoutStyles.pageSub}>
          Not a land you&apos;d want to be born into. But one you won&apos;t be able to look away from.
        </p>
      </div>

      <div className={layoutStyles.pageContent}>
        <div className={styles.worldIntro}>
          <p className={styles.worldText}>
            The world of Bone Lord Bob exists somewhere between myth and memory — a place where
            the rules of death are more like suggestions, and the landscape itself remembers every
            war ever fought on it.
          </p>
          <p className={styles.worldText}>
            There are no safe cities. Only cities that haven&apos;t fallen yet.
          </p>
        </div>

        {/* Location cards */}
        <div className={styles.locationGrid}>
          <div className={styles.locationCard}>
            <div className={styles.locationHeader}>
              <span className={styles.locationIcon}>🦴</span>
              <h2 className={styles.locationName}>The Bonefield</h2>
            </div>
            <p className={styles.locationDesc}>
              A vast plain where the remains of an ancient battle stretch beyond the horizon.
              Travelers say you can still hear the war if you press your ear to the ground at midnight.
            </p>
          </div>

          <div className={styles.locationCard}>
            <div className={styles.locationHeader}>
              <span className={styles.locationIcon}>🏰</span>
              <h2 className={styles.locationName}>The Throne of Ash</h2>
            </div>
            <p className={styles.locationDesc}>
              No one sits there now. No one has for a hundred years. But something still answers
              when the right name is spoken in its hall.
            </p>
          </div>

          <div className={styles.locationCard}>
            <div className={styles.locationHeader}>
              <span className={styles.locationIcon}>🌑</span>
              <h2 className={styles.locationName}>The Hollow Dark</h2>
            </div>
            <p className={styles.locationDesc}>
              Below every kingdom is the Hollow Dark — the underworld that isn&apos;t quite the afterlife.
              Bob knows this place better than anyone alive.
            </p>
          </div>
        </div>

        <div className={layoutStyles.comingSoon}>
          <span className={layoutStyles.comingSoonSkull}>🗺️</span>
          <p className={layoutStyles.comingSoonText}>World map and full region guide — coming with Episode 1</p>
        </div>
      </div>
    </SiteLayout>
  );
}