Styling

web/pages/index.js

@@ -1,4 +1,6 @@
 import Layout from "../components/layout";
+import WantToButton from "../components/wanttobutton";
+import Link from "next/link";
 import { useFetchUser } from "../lib/user";
 
 function Home() {
@@ -6,19 +8,20 @@ function Home() {
 
   return (
     <Layout user={user} loading={loading}>
-      <h1 className="text-3xl font-bold underline">Hello world!</h1>
-
       {loading && <p>Loading login info...</p>}
 
       {!loading && !user && (
         <>
-          <p>
-            To test the login click in <i>Login</i>
-          </p>
-          <p>
-            Once you have logged in you should be able to click in{" "}
-            <i>Profile</i> and <i>Logout</i>
-          </p>
+          <div className="flex flex-col justify-center">
+            <p className="text-lg">I want to...</p>
+            <div className="flex flex-row mt-2">
+              <WantToButton href="/api/v1/login" text="login" />
+              <WantToButton
+                href="/api/v1/login"
+                text="stay anonymous"
+              />
+            </div>
+          </div>
         </>
       )}