Add cinematic banner, real-site trailer, and first-visit intro

components/SiteTrailer.tsx

@@ -0,0 +1,55 @@
+import { getI18n } from "@/lib/i18n";
+import { Download, Film } from "lucide-react";
+
+export async function SiteTrailer() {
+  const { t } = await getI18n();
+  return (
+    <section
+      className="section site-trailer"
+      aria-labelledby="site-trailer-title"
+    >
+      <div className="section-heading">
+        <div>
+          <span className="eyebrow">
+            <Film size={14} aria-hidden="true" /> {t("THE EXPEDITION AWAITS")}
+          </span>
+          <h2 id="site-trailer-title">{t("A world worth getting lost in.")}</h2>
+        </div>
+        <span className="trailer-duration">
+          {t("30-second cinematic teaser")}
+        </span>
+      </div>
+      <video
+        className="site-trailer-player"
+        controls
+        preload="none"
+        playsInline
+        poster="/media/minegeo-trailer-poster.jpg"
+        aria-label={t("MineGeo cinematic teaser")}
+        aria-describedby="site-trailer-description"
+      >
+        <source src="/media/minegeo-trailer.mp4" type="video/mp4" />
+        <track
+          kind="captions"
+          src="/media/minegeo-trailer.vtt"
+          srcLang="en"
+          label={t("English")}
+        />
+        <p>
+          {t("Your browser cannot play this video.")}{" "}
+          <a href="/media/minegeo-trailer.mp4">{t("Download the trailer")}</a>
+        </p>
+      </video>
+      <div className="trailer-caption">
+        <p id="site-trailer-description">
+          {t(
+            "A tour of the real MineGeo homepage, community maps, map setup, and in-game panorama, blended with animated voxel landscapes. Ambient music; no spoken dialogue.",
+          )}
+        </p>
+        <a className="text-link" href="/media/minegeo-trailer.mp4" download>
+          <Download size={15} aria-hidden="true" /> {t("Download the trailer")}
+        </a>
+      </div>
+    </section>
+  );
+}