[S] Style welcome page

frontend/src/index.sass

@@ -1,8 +1,56 @@
+@tailwind base
+@tailwind components
+@tailwind utilities
+
+$c-default-text: #222
+
+$c-blue: rgb(28, 176, 246)
+$c-blue-shadow: rgb(24, 153, 214)
+$c-green: rgb(88, 204, 2)
+$c-green-shadow: rgb(88, 167, 0)
+$c-white-shadow: rgb(222, 222, 222)
+$border-radius: 16px
+$shadow-width: 0 4px 0
+
+.c-blue
+  color: $c-blue
+.c-green
+  color: $c-green
+
 body
   margin: 0
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif
   -webkit-font-smoothing: antialiased
   -moz-osx-font-smoothing: grayscale
 
+  color: $c-default-text
+
 code
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace
+
+button
+  background-color: $c-blue
+  border: none
+  border-radius: $border-radius
+  box-shadow: $shadow-width $c-blue-shadow
+  color: white
+  cursor: pointer
+  font-weight: 600
+  padding: 12px 16px
+  width: 100%
+  transition: all 0.2s ease-in-out
+
+button.green
+  background-color: $c-green
+  box-shadow: $shadow-width $c-green-shadow
+
+button.white
+  background-color: white
+  color: $c-blue
+  border: solid $c-white-shadow
+  border-width: 2px 2px 4px
+  box-shadow: none
+
+h1
+  font-size: 2em
+  margin-bottom: 0.5em

frontend/src/pages/Welcome.tsx

@@ -1,9 +1,15 @@
+import DuoSplash from "../assets/img/duo-splash.png";
+
 export default function Welcome()
 {
-  return <>
+  return <div className="flex flex-col h-screen justify-center">
-    <div>Duolingo++</div>
+    <div className="flex flex-col p-5 gap-5 items-center">
+      <img src={DuoSplash} alt="Duolingo Logo"></img>
 
-    <button>Login</button>
+      <h1>Duolingo Enhanced</h1>
-    <button>Signup</button>
+
-  </>
+      <button className="green">Login</button>
+      <button className="white">Signup</button>
+    </div>
+  </div>
 }