feat: add components to index page (WIP)

client/src/assets/css/colors.scss

@@ -10,3 +10,22 @@ $text-error-color: #ff8000;
 
 $background-overlay-color: rgba(40, 40, 56, 90%);
 
+
+// Box
+$box-primary-background-color: $background-primary-color;
+$box-primary-text-color: $text-primary-color;
+$box-primary-border: 1px solid #e0e0e0;
+
+
+// Button
+$button-background-color: #00a0e0;
+$button-text-color: #304048;
+$button-border: 4px solid #007098;
+
+$button-hover-background-color: $button-background-color;
+$button-hover-text-color: #ffffff;
+$button-hover-border: $button-border;
+
+$button-disabled-background-color: #006080;
+$button-disabled-text-color: #102028;
+$button-disabled-border: 4px solid #004060;

client/src/components/Button.vue

@@ -0,0 +1,63 @@
+<template>
+  <button class="button__button" :class="{ disabled, border }">
+    <slot />
+  </button>
+</template>
+
+<script setup>
+defineProps({
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  border: {
+    type: Boolean,
+    default: true,
+  },
+})
+</script>
+
+<style lang="scss">
+@import '~/assets/css/components';
+
+.button {
+  &__button {
+    display: inline-block;
+    margin: auto;
+    padding: 4px 24px;
+    background-color: inherit;
+    color: $text-secondary-color;
+    text-align: center;
+    font-family: $secondary-font;
+    font-weight: bold;
+    font-size: 24px;
+    border: none;
+    cursor: pointer;
+
+    &:hover {
+      color: $text-secondary-hover-color;
+    }
+
+    &.border {
+      background-color: $button-background-color;
+      color: $button-text-color;
+      border: $button-border;
+      border-radius: 8px;
+
+      &:hover {
+        border: $button-hover-border;
+        background-color: $button-hover-background-color;
+        color: $button-hover-text-color;
+      }
+    }
+
+    &.disabled,
+    &:hover.disabled {
+      cursor: default;
+      background-color: $button-disabled-background-color;
+      border: $button-disabled-border;
+      color: $button-disabled-text-color;
+    }
+  }
+}
+</style>

client/src/components/LoginBox.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="login-box__container">
+    <Button>123456</Button>
+    <Button>646162</Button>
+  </div>
+</template>
+
+<style lang="scss">
+.login-box {
+  &__container {
+    display: flex;
+    justify-content: center;
+  }
+}
+</style>

client/src/components/TitleBox.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="titlebox__container">
+    <div class="titlebox__titleborderbox2" />
+    <div class="titlebox__titleborderbox3" />
+    <div class="titlebox__titleborderbox1">
+      <h1 class="titlebox__title">
+        Know Your Teammates!
+      </h1>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+@import '~/assets/css/components';
+
+.titlebox {
+  &__container {
+    position: relative;
+    padding: 80px 0;
+    display: flex;
+    justify-content: center;
+  }
+
+  &__titleborderbox1,
+  &__titleborderbox2,
+  &__titleborderbox3 {
+    border: $box-primary-border;
+    border-radius: 16px;
+    background-color: $box-primary-background-color;
+  }
+
+  &__titleborderbox1 {
+    display: flex;
+    width: 600px;
+    height: 200px;
+    justify-content: center;
+    align-items: center;
+    z-index: 3;
+  }
+
+  &__titleborderbox2 {
+    position: absolute;
+    top: 120px;
+    width: 720px;
+    height: 120px;
+    z-index: 2;
+  }
+
+  &__titleborderbox3 {
+    position: absolute;
+    top: 160px;
+    width: 760px;
+    height: 40px;
+    z-index: 1;
+  }
+
+  &__title {
+    font-size: 64px;
+    font-family: $primary-font;
+    color: $box-primary-text-color;
+    text-align: center;
+  }
+}
+</style>

client/src/pages/index.vue

@@ -1,14 +1,17 @@
 <template>
   <div>
-    yay
+    <TitleBox />
+    <LoginBox />
   </div>
 </template>
 
 <style lang="scss">
-@import '~/assets/css/colors';
+@import '~/assets/css/components';
 
 body {
   background-color: $background-primary-color;
   color: $text-primary-color;
+  
+  margin: 0;
 }
 </style>