cssify landing page

frontend/package.json

@@ -13,6 +13,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "@fontsource/cabin": "^5.0.8",
     "@iconify-icons/bi": "^1.2.17",
     "@iconify-icons/ic": "^1.2.13",
     "@iconify-icons/maki": "^1.2.18",

frontend/src/App.svelte

@@ -20,7 +20,7 @@
 
   import iconDiscord from "@iconify-icons/ic/outline-discord";
   import iconGithub from "@iconify-icons/bi/github";
-  import iconArrow from "@iconify-icons/maki/arrow";
+
   import Icon from "@iconify/svelte";
 
   import type { Transport } from "protocol";
@@ -50,6 +50,8 @@
   let showLogin = false;
   let chosenTracker: keyof typeof TrackerList | undefined;
 
+  let showTrackerList = false;
+
   function onTransportOpen() {
     console.log("Transport opened");
 
@@ -180,10 +182,11 @@
     </Card>
   </div>
 {:else if !import.meta.env.VITE_ADRIFT_DEV}
+  <div class="flex flex-col h-full">
     <div id="topbar" class="flex justify-between items-center p-4">
       <div id="logo">
         <Card type="">
-        <h3 class="text-xl">Adrift</h3>
+          <h3 class="text-xl">(logo goes here)</h3>
         </Card>
       </div>
       <div id="nav">
@@ -211,9 +214,38 @@
         </Card>
       </div>
     </div>
-  <div id="loginpage">
-    <div class="flex justify-evenly">
-      <Card type="filled">
+    <div class="flex flex-col flex-1">
+      <div class="flex m-4">
+        <Card
+          type="elevated"
+          extraOptions={{ class: "m3-container type-elevated w-9/12" }}
+        >
+          <div class="w-full">
+            <h2 class="text-6xl">Surf the web, Adrift</h2>
+            <h2 class="text-2xl">
+              A fast and modern decentralized proxy network
+            </h2>
+          </div>
+          <div class="mt-5">
+            <Button type="filled" on:click={() => (showTrackerList = true)}
+              >Start Browsing</Button
+            >
+          </div>
+        </Card>
+      </div>
+      <div
+        class="flex h-full justify-end m-4 transition-all"
+        class:opacity-0={!showTrackerList}
+      >
+        <Card
+          type="elevated"
+          extraOptions={{
+            class: "m3-container type-elevated w-9/12 flex flex-col",
+          }}
+        >
+          <h2 class="text-4xl">Select a Tracker</h2>
+          <h2 class="text-1xl">Trackers allow you to connect to Adrift</h2>
+          <div class="mt-5">
             <SegmentedButtonContainer>
               {#each Object.keys(TrackerList) as tracker}
                 <input
@@ -223,10 +255,14 @@
                   value={tracker}
                   bind:group={chosenTracker}
                 />
-            <SegmentedButtonItem input={tracker}>{tracker}</SegmentedButtonItem>
+                <SegmentedButtonItem input={tracker}
+                  >{tracker}</SegmentedButtonItem
+                >
               {/each}
             </SegmentedButtonContainer>
-
+          </div>
+          <div class="flex-1" />
+          <div class="mt-5 flex">
             {#if chosenTracker}
               <Button type="elevated" on:click={() => (showSwarmWarning = true)}
                 >Connect to the swarm</Button
@@ -235,12 +271,13 @@
                 >Connect with login</Button
               >
             {/if}
+          </div>
 
           <Dialog headline="WARNING" open={showSwarmWarning}>
             <h2 class="text-2xl">
               TLS has not currently been implemented for the Adrift Swarm. Your
-            data will not be private, and you should not sign into any accounts
-            that you care much about
+              data will not be private, and you should not sign into any
+              accounts that you care much about
             </h2>
             <br />
             <Button type="filled" on:click={() => (showLogin = false)}
@@ -268,6 +305,28 @@
           </Dialog>
         </Card>
       </div>
+      <div class="flex m-4">
+        <Card
+          type="elevated"
+          extraOptions={{ class: "m3-container type-elevated w-full" }}
+        >
+          <div class="flex space-x-10">
+            <a class="text-1xl" href="https://mercurywork.shop"
+              >© 2023 Mercury Workshop</a
+            >
+
+            <div class="space-x-3">
+              <a class="text-1xl" href="https://discord.gg/bAgNyGpXSx"
+                >discord</a
+              >
+              <a class="text-1xl" href="https://discord.gg/bAgNyGpXSx">github</a
+              >
+            </div>
+            <div />
+          </div>
+        </Card>
+      </div>
+    </div>
   </div>
 {:else}
   <div class="flex items-center justify-center h-full">

frontend/src/entry.ts

@@ -1,5 +1,7 @@
 import { registerRemoteListener } from "bare-client-custom";
 import App from "./App.svelte";
+import "@fontsource/cabin";
+
 import "./index.css";
 if (import.meta.env.VITE_ADRIFT_DEV) {
   console.log(

frontend/src/index.css

@@ -1,3 +1,6 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+*{
+    font-family: "Cabin";
+}

pnpm-lock.yaml

@@ -288,6 +288,9 @@ importers:
 
   frontend:
     dependencies:
+      '@fontsource/cabin':
+        specifier: ^5.0.8
+        version: 5.0.8
       '@iconify-icons/bi':
         specifier: ^1.2.17
         version: 1.2.17
@@ -3186,6 +3189,10 @@ packages:
     resolution: {integrity: sha512-Dq5rYfEpdeel0bLVN+nfD1VWmzCkK+pJbSjIawGE+RY4+NIJqhbUDDQjvV0NUK84fMfwxvtFoCtEe70HfZjFcw==}
     dev: false
 
+  /@fontsource/cabin@5.0.8:
+    resolution: {integrity: sha512-dKUwEkLe8ix9h/gntEILkSFJTa5IDtHKerQl3QXSsMELKYCxELblHuh5itwDA/sJz3O1rJDNybheBsWt59MlCg==}
+    dev: false
+
   /@google-cloud/firestore@6.7.0:
     resolution: {integrity: sha512-bkH2jb5KkQSUa+NAvpip9HQ+rpYhi77IaqHovWuN07adVmvNXX08gPpvPWEzoXYa/wDjEVI7LiAtCWkJJEYTNg==}
     engines: {node: '>=12.0.0'}