Add TTRPG Player marketing landing site.

React/Vite landing with RU/EN i18n, live USD pricing, download links to updates.mailib.ru, and donate.stream checkout. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-06-28 11:58:31 +08:00
commit b0ab6cc729
70 changed files with 9151 additions and 0 deletions
@@ -0,0 +1,52 @@
+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>
+  );
+}