Add twitter community link (#25)

docusaurus.config.js

@@ -132,7 +132,7 @@ module.exports = {
               {
                 html: `
                 <a href="/use-cases" class="footer__social-link">Use cases</a>`,
-              }
+              },
             ],
           },
           {

src/components/Links/index.tsx

@@ -1,39 +1,49 @@
-import Discord from "@site/static/img/discord-icon.svg";
-import Telegram from "@site/static/img/telegram-icon.svg";
-import clsx from "clsx";
-import React from "react";
+import Link from '@docusaurus/Link'
+import DiscordIcon from '@site/static/img/discord-icon.svg'
+import TelegramIcon from '@site/static/img/telegram-icon.svg'
+import XIcon from '@site/static/img/x-icon.svg'
+import clsx from 'clsx'
+import React from 'react'
 
-import styles from "./styles.module.css";
+import styles from './styles.module.css'
 
 export default function Links(): JSX.Element {
   return (
-    <div className={clsx("links", styles.links)}>
-      <p className={clsx("links__title", styles.linksTitle)} data-aos="fade-up">
+    <div className={clsx('links', styles.links)}>
+      <p className={clsx('links__title', styles.linksTitle)} data-aos="fade-up">
         Join the community
       </p>
       <div
-        className={clsx("links__content", styles.linksContent)}
+        className={clsx('links__content', styles.linksContent)}
         data-aos="fade-up"
       >
-        <a
-          className={clsx("links__item", styles.linksItem)}
+        <Link
+          className={clsx('links__item', styles.linksItem)}
           href="https://discord.gg/cfrH3Fe7ke"
           target="_blank"
           rel="nofollow noopener noreferrer"
         >
-          <Discord />
+          <DiscordIcon />
           Discord
-        </a>
-        <a
-          className={clsx("links__item", styles.linksItem)}
+        </Link>
+        <Link
+          className={clsx('links__item', styles.linksItem)}
           href="https://t.me/rarimoprotocol"
           target="_blank"
           rel="nofollow noopener noreferrer"
         >
-          <Telegram />
+          <TelegramIcon />
           Telegram
-        </a>
+        </Link>
+        <Link
+          className={clsx('links__item', styles.linksItem)}
+          href="https://twitter.com/Rarimo_protocol"
+          target="_blank"
+          rel="nofollow noopener noreferrer"
+        >
+          <XIcon />Х (Twitter)
+        </Link>
       </div>
     </div>
-  );
+  )
 }

src/components/Links/styles.module.css

@@ -16,9 +16,12 @@
 }
 
 .linksContent {
-  display: flex;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
   gap: 1rem;
-  justify-content: center;
+  max-width: 56rem;
+  width: 100%;
+  margin: 0 auto;
 }
 
 .linksItem {
@@ -30,8 +33,6 @@
   align-items: start;
   gap: 1.5rem;
   color: var(--primary-text-color-light);
-  max-width: 18.75rem;
-  width: 100%;
   font-weight: 600;
 }
 
@@ -45,4 +46,14 @@
     margin-top: 3.5rem;
     margin-bottom: 2rem;
   }
+
+  .linksContent {
+    grid-template-columns: 1fr;
+    gap: 1rem;
+  }
+
+  .linksItem {
+    padding: 1rem;
+    flex-direction: row;
+  }
 }

src/components/News/styles.module.css

@@ -81,7 +81,7 @@
   .newsTitle {
     font-size: 1.5rem;
     line-height: normal;
-    margin-top: 3.5rem;
+    margin-top: 6rem;
   }
 
   .newsSwiper {