From 624edc2763439309145fa173c033adcbbf97c29a Mon Sep 17 00:00:00 2001
From: AdConsole Dev <dev@adconsole.local>
Date: Fri, 21 Aug 2026 18:30:26 +0800
Subject: [PATCH] Redirect root to legacy tool and add migration notice

- Remove landing page, redirect directly to /adconsole.html
- Add migration banner with GitHub link to legacy tool
- Clean up references to React port progress
---
 app/page.tsx          | 117 ++----------------------------------------
 public/adconsole.html |   5 ++
 2 files changed, 10 insertions(+), 112 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index 3c7303b..a8dd538 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,119 +1,12 @@
 import type { Metadata } from "next";
-import { promises as fs } from "node:fs";
-import path from "node:path";
+import { redirect } from "next/navigation";
 
 export const metadata: Metadata = {
-  title: "AdConsole",
-  description: "Amazon PPC teaching simulator",
+  title: "AdConsole - Amazon PPC Simulator",
+  description: "Amazon PPC teaching simulator - Migrating to React",
 };
 
-async function getLegacyStats() {
-  try {
-    const filePath = path.join(process.cwd(), "public", "adconsole.html");
-    const stat = await fs.stat(filePath);
-    return {
-      bytes: stat.size,
-      kb: Math.round(stat.size / 1024),
-      modified: stat.mtime.toLocaleString("sv-SE"),
-    };
-  } catch (e) {
-    if (process.env.NODE_ENV !== "production") {
-      console.warn("adconsole.html not found:", e);
-    }
-    return null;
-  }
-}
-
 export default async function Home() {
-  const stats = await getLegacyStats();
-
-  return (
-    <div className="min-h-screen bg-gradient-to-b from-zinc-50 to-white dark:from-black dark:to-zinc-950">
-      <main className="mx-auto flex min-h-screen w-full max-w-5xl flex-col items-stretch justify-center gap-10 px-6 py-16 sm:px-10">
-        <header className="flex flex-col gap-3">
-          <span className="inline-flex w-fit items-center gap-2 rounded-full border border-emerald-200 bg-emerald-50 px-3 py-1 text-xs font-medium text-emerald-700 dark:border-emerald-900/50 dark:bg-emerald-950/40 dark:text-emerald-300">
-            <span className="size-1.5 rounded-full bg-emerald-500" />
-            Next.js shell ready
-          </span>
-          <h1 className="text-4xl font-semibold tracking-tight text-zinc-900 dark:text-zinc-50 sm:text-5xl">
-            AdConsole
-          </h1>
-          <p className="max-w-2xl text-base leading-7 text-zinc-600 dark:text-zinc-400">
-            Amazon PPC teaching simulator. The legacy static page is preserved
-            at <code className="rounded bg-zinc-100 px-1.5 py-0.5 text-sm dark:bg-zinc-900">/adconsole.html</code>{" "}
-            while we port it into React components. Pick a path below to keep
-            moving.
-          </p>
-        </header>
-
-        <section className="grid gap-4 sm:grid-cols-2">
-          <a
-            href="/adconsole.html"
-            className="group flex flex-col gap-3 rounded-2xl border border-zinc-200 bg-white p-6 transition-all hover:border-zinc-300 hover:shadow-sm dark:border-zinc-800 dark:bg-zinc-950 dark:hover:border-zinc-700"
-          >
-            <div className="flex items-center justify-between">
-              <h2 className="text-lg font-semibold text-zinc-900 dark:text-zinc-50">
-                Open legacy page
-              </h2>
-              <span className="text-zinc-400 transition-transform group-hover:translate-x-0.5">
-                →
-              </span>
-            </div>
-            <p className="text-sm leading-6 text-zinc-600 dark:text-zinc-400">
-              Jump straight into the original AdConsole HTML — works exactly as
-              before, no rebuild required.
-            </p>
-            {stats && (
-              <dl className="mt-2 grid grid-cols-2 gap-3 border-t border-zinc-100 pt-3 text-xs text-zinc-500 dark:border-zinc-900">
-                <div>
-                  <dt className="font-medium text-zinc-400">Size</dt>
-                  <dd className="text-zinc-700 dark:text-zinc-300">
-                    {stats.kb} KB
-                  </dd>
-                </div>
-                <div>
-                  <dt className="font-medium text-zinc-400">Last modified</dt>
-                  <dd className="text-zinc-700 dark:text-zinc-300">
-                    {stats.modified}
-                  </dd>
-                </div>
-              </dl>
-            )}
-          </a>
-
-          <div className="flex flex-col gap-3 rounded-2xl border border-dashed border-zinc-300 bg-white/50 p-6 dark:border-zinc-800 dark:bg-zinc-950/40">
-            <h2 className="text-lg font-semibold text-zinc-900 dark:text-zinc-50">
-              Build the React port
-            </h2>
-            <p className="text-sm leading-6 text-zinc-600 dark:text-zinc-400">
-              Start migrating the simulator into <code className="rounded bg-zinc-100 px-1.5 py-0.5 text-sm dark:bg-zinc-900">app/</code>{" "}
-              route by route. The static HTML is the source of truth until the
-              port lands.
-            </p>
-            <ul className="mt-2 space-y-1.5 text-sm text-zinc-600 dark:text-zinc-400">
-              <li className="flex items-center gap-2">
-                <span className="size-1.5 rounded-full bg-zinc-300 dark:bg-zinc-700" />
-                <code>app/page.tsx</code> — landing shell
-              </li>
-              <li className="flex items-center gap-2">
-                <span className="size-1.5 rounded-full bg-zinc-300 dark:bg-zinc-700" />
-                <code>app/simulator/page.tsx</code> — main UI (TBD)
-              </li>
-              <li className="flex items-center gap-2">
-                <span className="size-1.5 rounded-full bg-zinc-300 dark:bg-zinc-700" />
-                <code>public/adconsole.html</code> — legacy reference
-              </li>
-            </ul>
-          </div>
-        </section>
-
-        <footer className="mt-4 flex flex-wrap items-center justify-between gap-3 border-t border-zinc-200 pt-6 text-xs text-zinc-500 dark:border-zinc-900">
-          <span>
-            Next.js · App Router · TypeScript · Tailwind v4
-          </span>
-          <span>Run <code className="rounded bg-zinc-100 px-1.5 py-0.5 dark:bg-zinc-900">npm run dev</code> to start</span>
-        </footer>
-      </main>
-    </div>
-  );
+  // Redirect directly to the legacy tool
+  redirect("/adconsole.html");
 }
diff --git a/public/adconsole.html b/public/adconsole.html
index 4c2de51..e07211b 100644
--- a/public/adconsole.html
+++ b/public/adconsole.html
@@ -546,6 +546,11 @@
 </head>
 <body>
 
+<div id="migration-banner" style="background: linear-gradient(90deg, #232F3E 0%, #131921 100%); color: #fff; padding: 12px 20px; text-align: center; font-size: 14px; position: relative; z-index: 100;">
+  <strong>Migration in Progress:</strong> This simulator is being migrated to React. 
+  <a href="https://github.com/projectamazonph/Amazon-ad-console" target="_blank" rel="noopener noreferrer" style="color: #FF9900; text-decoration: underline; margin-left: 8px;">View the new React version on GitHub &rarr;</a>
+</div>
+
 <header id="topbar">
   <div class="tb-left">
     <button class="tb-icon" data-act="burger" aria-label="Toggle navigation">