feat: i18n contact us form

Resolves #5

Author: TheAlexLichter

components/ContactUsModal.vue

@@ -37,7 +37,7 @@
             v-show="$v.name.$error"
             class="text-sm self-start ml-2 mb-4 text-red-light"
           >
-            Please type a valid name
+            {{ $t('contact.errors.name') }}
           </span>
           <div
             :class="{'shadow-white': focusedElement === 'email', 'shadow-red': $v.email.$error}"
@@ -62,7 +62,7 @@
             v-show="$v.email.$error"
             class="text-sm self-start ml-2 mb-4 text-red-light"
           >
-            Please insert a valid E-Mail
+            {{ $t('contact.errors.email') }}
           </span>
           <div
             :class="{'shadow-white': focusedElement === 'msg', 'shadow-red': $v.msg.$error}"
@@ -87,17 +87,16 @@
             v-show="$v.msg.$error"
             class="text-xm self-start ml-2 mb-4 text-red-light"
           >
-            Please provide a valid message with at least 25 characters
+            {{ $t('contact.errors.message') }}
           </span>
           <p class="text-xs md:text-base my-4 px-2 text-grey-light">
-            We use the data you provide us through this form only to process your contact request! You
-            find more information in our
+            {{ $t('contact.privacy.text') }}
             <NuxtLink
               :to="localePath('privacy')"
               tabindex="-1"
               class="text-white hover:text-developmint-lighter"
             >
-              Privacy Policy
+              {{ $t('contact.privacy.policy') }}
             </NuxtLink>
           </p>
           <div class="flex justify-between lg:block lg:ml-auto">
@@ -120,13 +119,13 @@
           v-show="isSubmitted"
           class="text-2xl text-developmint"
         >
-          Thanks for your submission!
+          {{ $t('contact.message.success') }}
         </div>
         <div
           v-if="error"
           class="text-2xl text-red-dark"
         >
-          An error occurred!
+          {{ $t('contact.message.error') }}
         </div>
       </div>
     </div>

i18n/de.js

@@ -18,11 +18,24 @@ module.exports = {
   contact: {
     heading: 'Kommen Sie ihrem Ziel einen Schritt näher',
     fields: {
-      tell: 'Erzählen Sie uns mehr!'
+      tell: 'Wie können wir Ihnen weiterhelfen?'
     },
     buttons: {
       back: 'Zurück',
       submit: 'Absenden'
+    },
+    error: {
+      name: 'Bitte geben Sie einen gültigen Namen (Vor- und Nachnamen) ein.',
+      email: 'Bitte nutzen Sie eine valide E-Mail.',
+      message: 'Bitte geben Sie eine gültige Nachricht mit mindestens 25 Zeichen ein.'
+    },
+    privacy: {
+      text: `Wir nutzen die von Ihnen hier eingegebenen Daten nur um die Kontaktanfrage zu verarbeiten. Mehr Informationen finde Sie in unserer`,
+      policy: 'Datenschutzbestimmung'
+    },
+    message: {
+      success: 'Danke für die Anfrage! Wir werden Sie schnellstmöglich kontaktieren.',
+      error: `Ein unbekannter Fehler ist aufgetreten. Das sollte nicht passieren, aber wir wurden bereits informiert.`
     }
   },
   index: {

i18n/en.js

@@ -18,11 +18,24 @@ module.exports = {
   contact: {
     heading: 'One step closer to your goal',
     fields: {
-      tell: 'Tell us more!'
+      tell: 'Tell us more about your inquiry!'
     },
     buttons: {
       back: 'Back',
       submit: 'Submit'
+    },
+    error: {
+      name: 'Please type in a valid name.',
+      email: 'Please insert a valid email.',
+      message: 'Please provide a valid message with at least 25 characters.'
+    },
+    privacy: {
+      text: `We use the data you provide us through this form only to process your contact request! You can find more information in our`,
+      policy: 'Privacy Policy'
+    },
+    message: {
+      success: 'Thanks for your submission! We will contact you as soon as possible.',
+      error: 'An unknown error occurred. This should not happen, but we were already notified.'
     }
   },
   index: {