Add Discord Link

Author: Amirerfan

pages/contact-us.vue

@@ -3,6 +3,12 @@
     <div class="container contact-us__wrapper">
       <h3 class="contact-us__title">Contact Us</h3>
       <div class="contact-us__body">
+        <div class="contact-us__link-with-icon"> 
+          <p class="contact-us__link-with-icon__link" @click="visitLink('https://discord.gg/zFXKG77vq3')">
+            Join Aura's Discord Channel 
+          </p> 
+        </div>
+
         <p class="contact-us__text">
           If you have any questions, feedbacks, bugs, or suggestions, please
           feel free to contact us. fill out the form below and we will get back
@@ -12,24 +18,25 @@
           v-model="email"
           data-testid="contact-us-email"
           placeholder="email (optional)"
-          style="margin-bottom: 20px"
+          style="margin: 0 0 20px 0; width: 100%"
         ></AppInput>
         <AppSelectInput
           :options="feedbackOptions"
           :selected-item="selectedFeedbackOption"
           data-testid="contact-us-category"
           placeholder="-- feedback type * --"
-          style="margin-bottom: 20px"
+          style="margin: 0 0 20px 0; width: 100%"
           @handleItemClicked="setSelectedFeedbackOption"
         />
         <AppInput
           v-model="body"
           data-testid="contact-us-text"
           placeholder="description *"
-          style="margin-bottom: 20px"
+          style="margin: 0 0 20px 0; width: 100%"
           type="textarea"
         ></AppInput>
         <AppButton data-testid="contact-us-submit" @click.native="handleSendFeedback">Send</AppButton>
+      
       </div>
     </div>
   </section>
@@ -116,6 +123,9 @@ export default {
         }
       }
     },
+    visitLink(link) {
+      window.open(link, '_blank');
+    },
     setSelectedFeedbackOption(item) {
       this.selectedFeedbackOption = item
     },

pages/index.vue

@@ -17,7 +17,8 @@
           But take care, for making poor decisions will drain your power and
           harm those around you.
         </p>
-        <p class="landing__link" @click="visitLink('https://www.brightid.org/about-us')"> Learn More about BrightID </p>
+        <p class="landing__link" style="margin-top: 30px;" @click="visitLink('https://www.brightid.org/about-us')"> Learn More about BrightID </p>
+        <p class="landing__link" @click="visitLink('https://discord.gg/zFXKG77vq3')"> Join Aura's Discord community</p>
       </div>
       <div class="landing__input-form">
         <h3 class="landing__input-name">Early Access</h3>

static/images/discord.png

@@ -18,7 +18,7 @@
     @include semi;
     display: flex;
     justify-content: center;
-    align-items: center;
+    align-items: flex-start;
     font-size: 24px;
     line-height: 130%;
     letter-spacing: -0.03em;
@@ -39,7 +39,37 @@
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
-    text-align: center;
+    text-align: start;
     margin-bottom: 32px;
   }
+
+  &__link-with-icon {
+    display: flex;
+    flex-direction: row;
+    text-align: left;
+    float: left;
+    align-self: flex-start;
+    align-items: flex-start;
+    justify-content: left;
+    column-gap: 0.5rem;
+    cursor: pointer;
+
+    &__link {
+      @include med;
+      font-size: 16px;
+      line-height: 150%;
+      color: #dfdfdf;
+      display: flex;
+      column-gap: 0.3rem;
+      
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+
+    &__icon {
+      width: 25px;
+      height: auto;
+    }
+  }
 }

styles/pages/contact-us.scss

@@ -3,7 +3,7 @@
 
   &__link {
     @include med;
-    margin-top: 30px;
+    margin-top: 10px;
     font-size: 16px;
     line-height: 150%;
     color: '#fff';