feat(frontend): refactor and modernize welcome page (#3614)

* feat(frontend): refactor and modernize welcome page - also fixes navbar issue.

Closes: #1533

* fix(frontend): lint issues & use standard variables instead of the constants from error.vue

* fix(frontend): remove creator count as it's not a count of all users

* fix(frontend): lang reshuffle

* feat: rinthbot

* fix: lint issues

* fix: sizing of bot on mobile & scss cleanup for error.vue

* fix: lint issues

* fix: ui lint

apps/frontend/src/pages/auth/welcome.vue

@@ -1,10 +1,20 @@
 <template>
-  <div>
-    <h1>{{ formatMessage(messages.welcomeLongTitle) }}</h1>
+  <div class="welcome-box has-bot">
+    <img :src="WavingRinthbot" alt="Waving Modrinth Bot" class="welcome-box__waving-bot" />
+    <div class="welcome-box__top-glow" />
+    <div class="welcome-box__body">
+      <h1 class="welcome-box__title">
+        {{ formatMessage(messages.welcomeLongTitle) }}
+      </h1>
 
-    <section class="auth-form">
-      <p>
-        {{ formatMessage(messages.welcomeDescription) }}
+      <p class="welcome-box__subtitle">
+        <IntlFormatted :message-id="messages.welcomeDescription">
+          <template #bold="{ children }">
+            <strong>
+              <component :is="() => normalizeChildren(children)" />
+            </strong>
+          </template>
+        </IntlFormatted>
       </p>
 
       <Checkbox
@@ -14,11 +24,12 @@
         :description="formatMessage(messages.subscribeCheckbox)"
       />
 
-      <button class="btn btn-primary continue-btn centered-btn" @click="continueSignUp">
-        {{ formatMessage(commonMessages.continueButton) }} <RightArrowIcon />
+      <button class="btn btn-primary centered-btn" @click="continueSignUp">
+        {{ formatMessage(commonMessages.continueButton) }}
+        <RightArrowIcon />
       </button>
 
-      <p>
+      <p class="tos-text">
         <IntlFormatted :message-id="messages.tosLabel">
           <template #terms-link="{ children }">
             <NuxtLink to="/legal/terms" class="text-link">
@@ -32,12 +43,15 @@
           </template>
         </IntlFormatted>
       </p>
-    </section>
+    </div>
   </div>
 </template>
+
 <script setup>
 import { Checkbox, commonMessages } from "@modrinth/ui";
-import { RightArrowIcon } from "@modrinth/assets";
+import { RightArrowIcon, WavingRinthbot } from "@modrinth/assets";
+
+const route = useRoute();
 
 const { formatMessage } = useVIntl();
 
@@ -54,7 +68,7 @@ const messages = defineMessages({
   welcomeDescription: {
     id: "auth.welcome.description",
     defaultMessage:
-      "Thank you for creating an account. You can now follow and create projects, receive updates about your favorite projects, and more!",
+      "You’re now part of the awesome community of creators & explorers already building, downloading, and staying up-to-date with awazing mods.",
   },
   welcomeLongTitle: {
     id: "auth.welcome.long-title",
@@ -72,20 +86,18 @@ useHead({
 
 const subscribe = ref(true);
 
-async function continueSignUp() {
-  const route = useRoute();
-
+onMounted(async () => {
   await useAuth(route.query.authToken);
   await useUser();
+});
 
+async function continueSignUp() {
   if (subscribe.value) {
     try {
       await useBaseFetch("auth/email/subscribe", {
         method: "POST",
       });
-    } catch {
-      /* empty */
-    }
+    } catch {}
   }
 
   if (route.query.redirect) {
@@ -95,3 +107,84 @@ async function continueSignUp() {
   }
 }
 </script>
+
+<style lang="scss" scoped>
+.welcome-box {
+  background-color: var(--color-raised-bg);
+  border-radius: var(--size-rounded-lg);
+  padding: 1.75rem 2rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+  box-shadow: var(--shadow-card);
+  position: relative;
+
+  &.has-bot {
+    margin-block: 120px;
+  }
+
+  p {
+    margin: 0;
+  }
+  a {
+    color: var(--color-brand);
+    font-weight: var(--weight-bold);
+    &:hover,
+    &:focus {
+      filter: brightness(1.125);
+      text-decoration: underline;
+    }
+  }
+
+  &__waving-bot {
+    --bot-height: 112px;
+    position: absolute;
+    top: calc(-1 * var(--bot-height));
+    right: 5rem;
+    height: var(--bot-height);
+    width: auto;
+
+    @media (max-width: 768px) {
+      --bot-height: 70px;
+      right: 2rem;
+    }
+  }
+
+  &__top-glow {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 1px;
+    opacity: 0.4;
+    background: linear-gradient(
+      to right,
+      transparent 2rem,
+      var(--color-green) calc(100% - 13rem),
+      var(--color-green) calc(100% - 5rem),
+      transparent calc(100% - 2rem)
+    );
+  }
+
+  &__body {
+    display: flex;
+    flex-direction: column;
+    gap: 1.25rem;
+  }
+
+  &__title {
+    font-size: var(--text-32);
+    font-weight: var(--weight-extrabold);
+    margin: 0;
+  }
+
+  &__subtitle {
+    font-size: var(--text-18);
+  }
+
+  .tos-text {
+    font-size: var(--text-14);
+    line-height: 1.5;
+  }
+}
+</style>