feat: add nice demo

stijlmassi · Jan 3, 2023 · d50c7d2 · d50c7d2
1 parent 4dc8b36
commit d50c7d2
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 7 deletions.
diff --git a/frontend/app/App.svelte b/frontend/app/App.svelte
@@ -1,14 +1,16 @@
 <script lang="ts">
   import Router from "svelte-spa-router";
   import { wrap } from "svelte-spa-router/wrap";
-  import Home from "./pages/Home.svelte";
 
-  import NotFound from "./pages/NotFound.svelte";
+  import Home from "./routes/Home.svelte";
+  import NotFound from "./routes/NotFound.svelte";
 
   const routes = {
     "/": Home,
     "*": NotFound,
   };
 </script>
 
-<Router {routes} />
+<div class="bg-black">
+  <Router {routes} />
+</div>
diff --git a/frontend/app/pages/Home.svelte b/frontend/app/pages/Home.svelte
diff --git a/frontend/app/routes/Home.svelte b/frontend/app/routes/Home.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+
+  let count = 0;
+
+  onMount(() => {
+    const ih = setInterval(() => {
+      count = count + 1;
+    }, 1000);
+
+    return () => clearInterval(ih);
+  });
+</script>
+
+<div class="w-full h-screen text-white grid place-items-center">
+  <div class="flex flex-col gap-6 text-center">
+    <h1 class="text-red-400 text-3xl">Welcome to Svelte SPA!</h1>
+    <p class="max-w-2xl">
+      This is a Svelte SPA. So everything on this page including the text and
+      wiggly counter below are rendered using javascript on client-side.
+    </p>
+    <p class="animate-bounce text-xl">{count}</p>
+    <div class="mt-6">
+      <a
+        class="rounded-md py-4 px-12 text-white bg-gradient-to-br from-red-500 to-cyan-600 p-1 hover:border font-medium"
+        href="/">Go Home</a
+      >
+    </div>
+  </div>
+</div>
diff --git a/frontend/app/pages/NotFound.svelte → frontend/app/routes/NotFound.svelte b/frontend/app/pages/NotFound.svelte → frontend/app/routes/NotFound.svelte
diff --git a/frontend/index.html b/frontend/index.html
@@ -8,6 +8,21 @@
     <link rel="stylesheet" href="./globals.css" />
   </head>
   <body>
-    <h1 class="text-red-400">Welcome</h1>
+    <div class="w-screen h-screen bg-black grid place-items-center">
+      <div class="flex flex-col text-center gap-2">
+        <h1 class="text-red-400 text-3xl">Welcome to landing page!</h1>
+        <p class="text-white max-w-xl">
+          This page is completely static-generated HTML for better SEO.
+          View-source to confirm.
+        </p>
+        <div class="mt-6">
+          <a
+            class="rounded-md py-4 px-12 text-white bg-gradient-to-br from-red-500 to-cyan-600 p-1 hover:border font-medium"
+            href="/app/"
+            >Try App</a
+          >
+        </div>
+      </div>
+    </div>
   </body>
 </html>