From e5c2fb7e3672fbd92c043154481ff249d9309a90 Mon Sep 17 00:00:00 2001
From: Maurice Heumann <mauriceheumann@gmail.com>
Date: Tue, 22 Apr 2025 15:18:50 +0200
Subject: [PATCH] Fix routing

---
 page/src/App.tsx         |   6 +-
 page/src/LandingPage.tsx | 248 ++++++++++++++++++++-------------------
 2 files changed, 129 insertions(+), 125 deletions(-)

diff --git a/page/src/App.tsx b/page/src/App.tsx
index 55b818ce..8aa5caec 100644
--- a/page/src/App.tsx
+++ b/page/src/App.tsx
@@ -1,5 +1,5 @@
 import { ThemeProvider } from "@/components/theme-provider";
-import { BrowserRouter, Route, Routes } from "react-router-dom";
+import { HashRouter, Route, Routes } from "react-router-dom";
 import { Playground } from "./Playground";
 import { LandingPage } from "./LandingPage";
 
@@ -8,12 +8,12 @@ import "./App.css";
 function App() {
   return (
     <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
-      <BrowserRouter>
+      <HashRouter>
         <Routes>
           <Route path="/" element={<LandingPage />} />
           <Route path="/playground" element={<Playground />} />
         </Routes>
-      </BrowserRouter>
+      </HashRouter>
     </ThemeProvider>
   );
 }
diff --git a/page/src/LandingPage.tsx b/page/src/LandingPage.tsx
index 96f6dcb0..02eef848 100644
--- a/page/src/LandingPage.tsx
+++ b/page/src/LandingPage.tsx
@@ -9,7 +9,7 @@ import {
   Terminal,
   ExternalLink,
   Github,
-  Play
+  Play,
 } from "lucide-react";
 
 export function LandingPage() {
@@ -52,42 +52,43 @@ export function LandingPage() {
   ];
 
   return (
-    <div className="flex flex-col min-h-screen">
-      {/* Hero Section */}
-      <header className="bg-gradient-to-r from-blue-600 to-cyan-500 py-16 md:py-24">
-        <div className="container mx-auto px-4 md:px-6">
-          <div className="flex flex-col md:flex-row items-center justify-between">
-            <div className="w-full md:w-1/2 space-y-6 text-center md:text-left text-white">
-              <h1 className="text-4xl md:text-6xl font-bold tracking-tight">
-                Sogen
-              </h1>
-              <p className="text-xl md:text-2xl font-light">
-                High-performance Windows user space emulator operating at
-                syscall level
-              </p>
-              <div className="flex flex-wrap gap-4 justify-center md:justify-start">
-                <a href="./playground" target="_blank">
-                  <Button
-                    size="lg"
-                    className="bg-white text-blue-700 hover:bg-blue-50"
-                  >
-                    <Play className="mr-2 h-5 w-5" />
-                    Try Online
-                  </Button>
-                </a>
-                <a href="https://github.com/momo5502/sogen" target="_blank">
-                  <Button
-                    size="lg"
-                    variant="outline"
-                    className="border-white text-white hover:bg-white/10"
-                  >
-                    <Github className="mr-2 h-5 w-5" />
-                    GitHub
-                  </Button>
-                </a>
+    <>
+      <div className="flex flex-col min-h-screen">
+        {/* Hero Section */}
+        <header className="bg-gradient-to-r from-blue-600 to-cyan-500 py-16 md:py-24">
+          <div className="container mx-auto px-4 md:px-6">
+            <div className="flex flex-col md:flex-row items-center justify-between">
+              <div className="w-full md:w-1/2 space-y-6 text-center md:text-left text-white">
+                <h1 className="text-4xl md:text-6xl font-bold tracking-tight">
+                  Sogen
+                </h1>
+                <p className="text-xl md:text-2xl font-light">
+                  High-performance Windows user space emulator operating at
+                  syscall level
+                </p>
+                <div className="flex flex-wrap gap-4 justify-center md:justify-start">
+                  <a href="#/playground" target="_blank">
+                    <Button
+                      size="lg"
+                      className="bg-white text-blue-700 hover:bg-blue-50"
+                    >
+                      <Play className="mr-2 h-5 w-5" />
+                      Try Online
+                    </Button>
+                  </a>
+                  <a href="https://github.com/momo5502/sogen" target="_blank">
+                    <Button
+                      size="lg"
+                      variant="outline"
+                      className="border-white text-white hover:bg-white/10"
+                    >
+                      <Github className="mr-2 h-5 w-5" />
+                      GitHub
+                    </Button>
+                  </a>
+                </div>
               </div>
-            </div>
-            {/*<div className="w-full md:w-1/2 mt-8 md:mt-0 flex justify-center md:justify-end">
+              {/*<div className="w-full md:w-1/2 mt-8 md:mt-0 flex justify-center md:justify-end">
               <div className="relative w-full max-w-md">
                 <div className="absolute inset-0 bg-gradient-to-r from-blue-500/20 to-indigo-500/20 rounded-lg blur-xl"></div>
                 <img
@@ -97,93 +98,96 @@ export function LandingPage() {
                 />
               </div>
             </div>*/}
-          </div>
-        </div>
-      </header>
-
-      {/* Key Features */}
-      <section className="py-16 md:py-24">
-        <div className="container mx-auto px-4 md:px-6">
-          <div className="text-center mb-12">
-            <h2 className="text-3xl md:text-4xl font-bold mb-4">
-              Key Features
-            </h2>
-          </div>
-
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-            {features.map((feature, index) => (
-              <Card key={index} className="hover:shadow-lg transition-shadow">
-                <CardHeader>
-                  <div className="mb-2">{feature.icon}</div>
-                  <CardTitle>{feature.title}</CardTitle>
-                </CardHeader>
-                <CardContent>
-                  <p className="text-gray-600 dark:text-gray-400">
-                    {feature.description}
-                  </p>
-                </CardContent>
-              </Card>
-            ))}
-          </div>
-        </div>
-      </section>
-
-      {/* Video Section */}
-      <section className="bg-zinc-900 py-16 md:py-24">
-        <div className="container mx-auto px-4 md:px-6">
-          <div className="text-center mb-12">
-            <h2 className="text-3xl md:text-4xl font-bold mb-4">
-              See Sogen in Action
-            </h2>
-            <p className="text-lg text-gray-600 dark:text-gray-400 max-w-3xl mx-auto">
-              Watch an overview of the emulator's capabilities and see how it
-              can help with your research.
-            </p>
-          </div>
-
-          <div className="max-w-4xl mx-auto">
-            <div className="relative aspect-video rounded-2xl shadow-2xl">
-              <iframe
-                className="rounded-2xl"
-                width="100%"
-                height="100%"
-                src="https://www.youtube.com/embed/wY9Q0DhodOQ?si=ag_zebGFpQPXBsTx"
-                title="YouTube video player"
-                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-              ></iframe>
-            </div>
-            <div className="mt-4 text-center"></div>
-          </div>
-        </div>
-      </section>
-
-      {/* Footer */}
-      <footer className="py-12">
-        <div className="container mx-auto px-4 md:px-6">
-          <div className="flex flex-col md:flex-row justify-between items-center">
-            <div className="mb-6 md:mb-0">
-              <h2 className="text-2xl font-bold">Sogen</h2>
-              <p className="mt-2 text-gray-400">Windows User Space Emulator</p>
-            </div>
-            <div className="flex space-x-6">
-              <a
-                href="https://github.com/momo5502/sogen"
-                target="_blank"
-                className="hover:text-blue-400"
-              >
-                <Github className="h-6 w-6" />
-              </a>
-              <a
-                href="./playground"
-                target="_blank"
-                className="hover:text-blue-400"
-              >
-                <ExternalLink className="h-6 w-6" />
-              </a>
             </div>
           </div>
-        </div>
-      </footer>
-    </div>
+        </header>
+
+        {/* Key Features */}
+        <section className="py-16 md:py-24">
+          <div className="container mx-auto px-4 md:px-6">
+            <div className="text-center mb-12">
+              <h2 className="text-3xl md:text-4xl font-bold mb-4">
+                Key Features
+              </h2>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+              {features.map((feature, index) => (
+                <Card key={index} className="hover:shadow-lg transition-shadow">
+                  <CardHeader>
+                    <div className="mb-2">{feature.icon}</div>
+                    <CardTitle>{feature.title}</CardTitle>
+                  </CardHeader>
+                  <CardContent>
+                    <p className="text-gray-600 dark:text-gray-400">
+                      {feature.description}
+                    </p>
+                  </CardContent>
+                </Card>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        {/* Video Section */}
+        <section className="bg-zinc-900 py-16 md:py-24">
+          <div className="container mx-auto px-4 md:px-6">
+            <div className="text-center mb-12">
+              <h2 className="text-3xl md:text-4xl font-bold mb-4">
+                See Sogen in Action
+              </h2>
+              <p className="text-lg text-gray-600 dark:text-gray-400 max-w-3xl mx-auto">
+                Watch an overview of the emulator's capabilities and see how it
+                can help with your research.
+              </p>
+            </div>
+
+            <div className="max-w-4xl mx-auto">
+              <div className="relative aspect-video rounded-2xl shadow-2xl">
+                <iframe
+                  className="rounded-2xl"
+                  width="100%"
+                  height="100%"
+                  src="https://www.youtube.com/embed/wY9Q0DhodOQ?si=ag_zebGFpQPXBsTx"
+                  title="YouTube video player"
+                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                ></iframe>
+              </div>
+              <div className="mt-4 text-center"></div>
+            </div>
+          </div>
+        </section>
+
+        {/* Footer */}
+        <footer className="py-12">
+          <div className="container mx-auto px-4 md:px-6">
+            <div className="flex flex-col md:flex-row justify-between items-center">
+              <div className="mb-6 md:mb-0">
+                <h2 className="text-2xl font-bold">Sogen</h2>
+                <p className="mt-2 text-gray-400">
+                  Windows User Space Emulator
+                </p>
+              </div>
+              <div className="flex space-x-6">
+                <a
+                  href="https://github.com/momo5502/sogen"
+                  target="_blank"
+                  className="hover:text-blue-400"
+                >
+                  <Github className="h-6 w-6" />
+                </a>
+                <a
+                  href="#/playground"
+                  target="_blank"
+                  className="hover:text-blue-400"
+                >
+                  <ExternalLink className="h-6 w-6" />
+                </a>
+              </div>
+            </div>
+          </div>
+        </footer>
+      </div>
+    </>
   );
 }