feat: add telegram btn

Author: utkarsha-deriv

src/components/Footer/Footer.module.scss

@@ -10,7 +10,7 @@
 
   @media screen and (max-width: 992px) {
     flex-direction: column;
-    gap: rem(2);
+    gap: rem(4);
     padding: rem(4);
   }
 
@@ -47,14 +47,29 @@
       color: var(--ifm-color-danger);
       padding: 0 rem(0.5);
     }
+    .Communities {
+      display: flex;
+      align-items: center;
+      gap: rem(1.7);
+    }
     .communityButton {
       font-family: 'Ubuntu', sans-serif;
       color: var(--ifm-color-white);
       border: 2px solid var(--ifm-color-secondary-darkest);
-      padding: rem(0.5);
-      border-radius: rem(1);
+      padding: rem(0.8) rem(1.6);
+      border-radius: rem(1.7);
       font-size: rem(1.4);
       font-weight: bold;
     }
+    .Telegram {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      gap: rem(0.8);
+    }
+    .TelegramIcon {
+      width: rem(2);
+      height: rem(1.657);
+    }
   }
 }

src/components/Footer/index.tsx

@@ -12,15 +12,31 @@ const Footer = () => {
         <p className={styles.FooterBodyContent}>
           Discuss ideas and share solutions with developers worldwide.
         </p>
-        <a
-          data-testid='community-link'
-          style={{ textDecoration: 'none' }}
-          href='https://deriv.vanillacommunity.com/'
-          target='_blank'
-          rel='noreferrer'
-        >
-          <button className={styles.communityButton}>Join our community</button>
-        </a>
+        <div className={styles.Communities}>
+          <a
+            data-testid='community-link'
+            style={{ textDecoration: 'none' }}
+            href='https://deriv.vanillacommunity.com/'
+            target='_blank'
+            rel='noreferrer'
+          >
+            <button className={styles.communityButton}>Join our community</button>
+          </a>
+          <a
+            data-testid='telegram-link'
+            style={{ textDecoration: 'none' }}
+            href='https://t.me/+g6FV5tFY1u9lZGE1'
+            target='_blank'
+            rel='noreferrer'
+          >
+            <button className={styles.communityButton}>
+              <div className={styles.Telegram}>
+                <img src='/img/telegram.svg' className={styles.TelegramIcon} />
+                <p>Telegram</p>
+              </div>
+            </button>
+          </a>
+        </div>
       </section>
       <section className={styles.FooterBody}>
         <Text type='subtitle-1' as='h2' align='center' className={styles.FooterContent}>