ジョブボードへの導線を実装した

Author: 448jp

apps/web/app/components/SponsorPageSection.vue

@@ -187,6 +187,16 @@ const personalSponsorInfo: PersonalSponsorInfo = {
           personal: personalSponsorInfo,
         }"
       />
+      <div class="sponsor-buttons">
+        <VFLinkButton
+          class="sponsor-button"
+          href="./jobboard"
+          background-color="vue-green/200"
+          color="white"
+        >
+          {{ $t('sponsor.seeJobboard') }}
+        </VFLinkButton>
+      </div>
     </article>
   </div>
 </template>

apps/web/app/lang/en.json

@@ -116,7 +116,8 @@
     "handson": "Hands-on",
     "media": "Media",
     "tool": "Tool",
-    "personal": "Personal Sponsor"
+    "personal": "Personal Sponsor",
+    "seeJobboard": "Job Board"
   },
   "ticket": {
     "title": "Ticket",

apps/web/app/lang/ja.json

@@ -134,7 +134,8 @@
     "handson": "ハンズオン",
     "media": "メディア",
     "tool": "ツール",
-    "personal": "個人スポンサー"
+    "personal": "個人スポンサー",
+    "seeJobboard": "ジョブボードを見る"
   },
   "ticket": {
     "title": "チケット",

apps/web/app/pages/jobboard.vue

@@ -39,6 +39,17 @@ useHead({
         </nuxt-link>
       </li>
     </ul>
+    <div class="back">
+      <VFLinkButton
+        class="back-action"
+        background-color="white"
+        color="vue-blue"
+        target=""
+        :href="`${localePath}/`"
+      >
+        {{ t('back_to_top') }}
+      </VFLinkButton>
+    </div>
   </div>
 </template>
 
@@ -126,4 +137,34 @@ useHead({
     display: block;
   }
 }
+
+.back {
+  margin: 40px auto 120px;
+  width: 100%;
+  max-width: 260px;
+}
+.back-action {
+  --height-button: 66px;
+
+  height: var(--height-button);
+  border-radius: var(--height-button);
+}
+
+@media (--tablet) {
+  .back-action {
+    --height-button: 58px;
+  }
+}
+
+@media (--mobile) {
+  .back {
+    width: 100%;
+    padding: 0 23.5px;
+    margin-top: 30px;
+    margin-bottom: 60px;
+  }
+  .back-action {
+    --height-button: 58px;
+  }
+}
 </style>