initial

src/components/HeaderHome.vue

@@ -0,0 +1,107 @@
+<template>
+  <div>
+    <div class="text-normal mb-5">
+      <div class="d-block w-100 text-normal txt-black">
+        <v-row align="center" justify="center">
+          <v-col cols="auto" sm="12" md="" align="center">
+            <v-img
+              :aspect-ratio="1"
+              src="../assets/logo-title.png"
+              width="600"
+            ></v-img>
+          </v-col>
+          <v-col align-self="center" align="center">
+            <div style="width: 90%">
+              สว. ระบบใหม่ <b>“แบ่งกลุ่มอาชีพ”</b> และ
+              <b>“เลือกกันเอง”</b>
+              ศึกษาให้พร้อมแล้วมาร่วมเป็นส่วนหนึ่งของกระบวนการเลือก สว.
+            </div>
+            <v-btn
+              elevated
+              color="#B2C573"
+              class="mt-4"
+              style="color: #0f470f"
+              size="large"
+              href="#started"
+            >
+              มาเริ่มกันเลย
+            </v-btn>
+          </v-col>
+        </v-row>
+      </div>
+    </div>
+    <div style="position: relative" class="bg-curve" id="started">
+      <v-row style="height: 100%" align="center" class="text-center">
+        <v-col cols="12" md="6">
+          <div style="position: relative">
+            <v-btn
+              elevated
+              color="#DD6C31"
+              class="text-normal"
+              stacked
+              height="110"
+              to="/check"
+            >
+              ตรวจสอบคุณสมบัติ
+              <br />
+              การเป็น สว.
+              <v-img
+                :aspect-ratio="1"
+                src="../assets/Group 9.png"
+                width="70"
+                style="position: absolute; bottom: -25px; left: -20px"
+              ></v-img>
+            </v-btn>
+          </div>
+        </v-col>
+        <v-col cols="12" md="6">
+          <v-btn
+            elevated
+            color="#DD6C31"
+            class="text-normal"
+            stacked
+            height="110"
+            to="/forms"
+          >
+            <v-img
+              :aspect-ratio="1"
+              src="../assets/Group 23.png"
+              width="80"
+              style="position: absolute; bottom: -30px; right: 0px"
+            ></v-img>
+            แสดงตนเป็นผู้สมัคร
+          </v-btn>
+        </v-col>
+      </v-row>
+    </div>
+  </div>
+</template>
+<script>
+export default {};
+</script>
+<style>
+.text-normal .v-btn--size-large {
+  --v-btn-height: 70px;
+}
+.v-btn {
+  border-radius: 20px;
+}
+.text-normal .v-btn__content {
+  font-size: 30px;
+  font-weight: 400;
+}
+
+.centered {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.bg-curve {
+  background-image: url("/src/assets/Path\ 14.png");
+  height: 400px;
+
+  background-position: center top;
+  /* background: #2b2b26 0% 0% no-repeat padding-box; */
+}
+</style>