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

app/page.tsx

@@ -16,6 +16,8 @@ import { catalog } from "@/lib/catalog";
 import { leaderboard } from "@/lib/leaderboard";
 import { LeaderboardPreview } from "@/components/Leaderboard";
 import desktopRelease from "@/shared/desktop-release.json";
+import { FirstVisitIntro } from "@/components/FirstVisitIntro";
+import { SiteTrailer } from "@/components/SiteTrailer";
 export const dynamic = "force-dynamic";
 export default async function Home() {
   const { t, formatNumber } = await getI18n();
@@ -27,6 +29,7 @@ export default async function Home() {
   const locations = maps.reduce((total, map) => total + map.panorama_count, 0);
   return (
     <>
+      <FirstVisitIntro />
       <Header />
       <main className="home-page" id="main-content">
         <section className="hero">
@@ -171,6 +174,7 @@ export default async function Home() {
             </div>
           )}
         </section>
+        <SiteTrailer />
         <LeaderboardPreview data={rankings} />
         <section className="section home-panels">
           <article className="home-panel">