From ef6aa3ee5fd37c64bfb06204daae10724cafc154 Mon Sep 17 00:00:00 2001
From: Sam <sam@sam.wf>
Date: Sat, 25 Mar 2023 03:02:44 +0100
Subject: [PATCH] feat(frontend): actual front page

---
 frontend/src/routes/+page.svelte | 90 +++++++++++++++++++++++++-------
 1 file changed, 71 insertions(+), 19 deletions(-)

diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index fd37ee8..3261975 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import { PUBLIC_BASE_URL } from "$env/static/public";
+  import { Button } from "sveltestrap";
 </script>
 
 <svelte:head>
@@ -9,25 +10,76 @@
   <meta property="og:url" content={PUBLIC_BASE_URL} />
 </svelte:head>
 
-<h1>pronouns.cc</h1>
+<div>
+  <h1><b>pronouns</b>.cc</h1>
 
-<p>
-  pronouns.cc is a service to create and share pronoun cards, similar to
-  <a href="https://pronouns.page" rel="noreferrer" target="_blank">pronouns.page</a> and
-  <a href="https://pronouny.xyz" rel="noreferrer" target="_blank">pronouny.xyz</a>.
-</p>
+  <p class="fs-3">Create and share <em>all</em> your pronouns</p>
 
-<p>
-  You're be able to create multiple profiles that are linked together, useful for plurality (<a
-    href="https://morethanone.info"
-    rel="noreferrer"
-    target="_blank">what?</a
-  >) and kin, or even just for fun!
-</p>
+  <p>
+    <Button href="/auth/login" color="success" size="lg">Log in or sign up</Button>
+  </p>
+</div>
 
-<p>
-  pronouns.cc is currently in a <b>closed beta</b>. Sign ups will be opened Soon™. You can check out
-  the source code on
-  <a href="https://codeberg.org/u1f320/pronouns.cc" rel="noreferrer" target="_blank">Codeberg</a>!
-  &lt;3
-</p>
+<div class="row">
+  <div class="col fs-5">
+    <p>
+      Everybody uses pronouns to refer to others. Whether it be he/him, she/her, they/them, or
+      anything else (or nothing at all!), everybody has preferences. But how do you know which
+      pronouns you should use?
+    </p>
+    <p>
+      pronouns.cc is a service where you can create and share a list of your preferred names,
+      pronouns, and terms to share with other people! But not just <em>one</em> set: you can create
+      <em>multiple</em>
+      lists and have all of them linked on your main profile.
+    </p>
+    <p>This is useful for plural systems, people who kin, and anyone else too!</p>
+  </div>
+</div>
+
+<div class="row row-cols-1 row-cols-md-3">
+  <div>
+    <h5>In beta</h5>
+    <p>
+      pronouns.cc is currently <strong>in beta</strong>. There might be issues and some
+      functionality is not available or unfinished. Issue reports and pull requests
+      <a href="https://codeberg.org/u1f320/pronouns.cc" rel="noreferrer" target="_blank"
+        >in the repository</a
+      > are welcome!
+    </p>
+  </div>
+  <div>
+    <h5>Isn't this similar to Pronouns.page?</h5>
+    <p>
+      Yes! <a href="https://pronouns.page" rel="noreferrer" target="_blank">Pronouns.page</a>, along
+      with <a href="https://pronouny.xyz" rel="noreferrer" target="_blank">pronouny.xyz</a>, was a
+      direct inspiration for pronouns.cc. If those sites are working fine for you, that's great,
+      they're good projects!
+    </p>
+  </div>
+  <div>
+    <h5>Open source</h5>
+    <p>
+      pronouns.cc is
+      <a href="https://codeberg.org/u1f320/pronouns.cc" rel="noreferrer" target="_blank"
+        >open source</a
+      >, and licensed under the GNU Affero General Public License. Feel free to contribute!
+    </p>
+  </div>
+  <div>
+    <h5>This is useful!</h5>
+    <p>thank you :3</p>
+  </div>
+  <div>
+    <h5>This website sucks!</h5>
+    <p>oh no :&lpar;</p>
+  </div>
+  <div>
+    <h5>Support pronouns.cc</h5>
+    <p>
+      If you like pronouns.cc and want to support me financially, check out the <a
+        href="/page/about">about page</a
+      >!
+    </p>
+  </div>
+</div>