TtrpgPlayerLanding/src/components/sections/Hero.tsx

import { HERO_HIGHLIGHT_IDS, SITE_LINKS } from "../../data/siteContent";
import { useLocale } from "../../i18n/LocaleProvider";
import { Button } from "../ui/Button";
import { HeroMockup } from "./HeroMockup";

import styles from "./Hero.module.css";

export function Hero() {
  const { copy } = useLocale();

  return (
    <section id="top" className={styles.hero}>
      <div className={styles.inner}>
        <div className={styles.content}>
          <p className={styles.eyebrow}>
            <span className={styles.spark} aria-hidden="true">
              ✦
            </span>
            {copy.hero.eyebrow}
          </p>

          <h1 className={styles.title}>{copy.brand}</h1>
          <p className={styles.tagline}>{copy.hero.tagline}</p>
          <p className={styles.description}>{copy.hero.description}</p>

          <div className={styles.cta}>
            <Button href={SITE_LINKS.download}>{copy.cta.downloadFree}</Button>
            <Button href={SITE_LINKS.buy} variant="secondary">
              {copy.cta.buyLicense}
            </Button>
          </div>

          <p className={styles.platforms}>{copy.hero.platformsLine}</p>

          <div className={styles.highlights}>
            {HERO_HIGHLIGHT_IDS.map((id) => {
              const item = copy.hero.highlights[id];
              return (
                <div key={id} className={styles.highlight}>
                  <strong>{item.title}</strong>
                  <span>{item.description}</span>
                </div>
              );
            })}
          </div>
        </div>

        <HeroMockup />
      </div>
    </section>
  );
}