fix: socials

src/js/components/Footer.tsx

@@ -4,6 +4,9 @@ import * as Icon from 'react-feather';
 import Container from './reusable/Container';
 import Heading from './reusable/Heading';
 import Link from './reusable/Link';
+import X from './svg/X';
+import TikTok from './svg/TikTok';
+import Telegram from './svg/Telegram';
 
 const Footer = () => {
   const year = new Date().getFullYear();
@@ -37,30 +40,54 @@ const Footer = () => {
             </Link.Default>
           </Container.FlexCols>
           <Container.FlexCols className="gap-4">
-            <Heading.H2 className="text-white">Socials</Heading.H2>
+            <Heading.H2 className="text-white">Follow Us On</Heading.H2>
             <Link.IconLink
-              href={'https://twitter.com/ekoketoken'}
+              href={'https://github.com/EKOKEtoken'}
               target="_blank"
               className="text-white"
             >
-              <Icon.Twitter className="mr-2 inline text-white" />
-              Twitter
+              <Icon.GitHub className="mr-2 inline text-white" />
+              GitHub
             </Link.IconLink>
             <Link.IconLink
-              href={'https://github.com/EKOKEtoken'}
+              href={'https://www.instagram.com/ekoketoken'}
               target="_blank"
               className="text-white"
             >
-              <Icon.GitHub className="mr-2 inline text-white" />
-              GitHub
+              <Icon.Instagram className="mr-2 inline text-white" />
+              Instagram
             </Link.IconLink>
             <Link.IconLink
-              href={'https://github.com/EKOKEtoken'}
+              href={'https://www.linkedin.com/company/ekoketoken'}
+              target="_blank"
+              className="text-white"
+            >
+              <Icon.Linkedin className="mr-2 inline text-white" />
+              LinkedIn
+            </Link.IconLink>
+            <Link.IconLink
+              href={'https://t.me/ekokeTOKENgroup'}
+              target="_blank"
+              className="text-white"
+            >
+              <Telegram fill="#ffffff" />
+              <span className="ml-2">Telegram</span>
+            </Link.IconLink>
+            <Link.IconLink
+              href={'https://www.tiktok.com/@ekoketoken?lang=en'}
+              target="_blank"
+              className="text-white"
+            >
+              <TikTok fill="#ffffff" />
+              <span className="ml-2">TikTok</span>
+            </Link.IconLink>
+            <Link.IconLink
+              href={'https://twitter.com/ekoketoken'}
               target="_blank"
               className="text-white"
             >
-              <Icon.Send className="mr-2 inline text-white" />
-              Telegram
+              <X />
+              <span className="ml-2">Twitter</span>
             </Link.IconLink>
           </Container.FlexCols>
         </Container.FlexResponsiveRow>

src/js/components/svg/Telegram.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+
+interface Props {
+  height?: number;
+  width?: number;
+  fill?: string;
+}
+
+const Telegram = (props: Props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={props.width ? props.width : 24}
+    height={props.height ? props.height : 24}
+    fill={props.fill}
+    xmlSpace="preserve"
+    style={{
+      fillRule: 'evenodd',
+      clipRule: 'evenodd',
+      strokeLinejoin: 'round',
+      strokeMiterlimit: 1.41421,
+    }}
+  >
+    <path d="M18.384 22.779a1.19 1.19 0 0 0 1.107.145 1.16 1.16 0 0 0 .724-.84C21.084 18 23.192 7.663 23.983 3.948a.78.78 0 0 0-.26-.758.8.8 0 0 0-.797-.14C18.733 4.602 5.82 9.447.542 11.4a.827.827 0 0 0-.542.799c.012.354.25.661.593.764 2.367.708 5.474 1.693 5.474 1.693s1.452 4.385 2.209 6.615c.095.28.314.5.603.576a.866.866 0 0 0 .811-.207l3.096-2.923s3.572 2.619 5.598 4.062Zm-11.01-8.677 1.679 5.538.373-3.507 10.185-9.186a.277.277 0 0 0 .033-.377.284.284 0 0 0-.376-.064L7.374 14.102Z" />
+  </svg>
+);
+
+export default Telegram;

src/js/components/svg/TikTok.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+
+interface Props {
+  height?: number;
+  width?: number;
+  fill?: string;
+}
+
+const TikTok = (props: Props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={props.width ? props.width : 24}
+    height={props.height ? props.height : 24}
+    viewBox="0 0 512 512"
+    fill={props.fill}
+  >
+    <path d="M412.19 118.66a109.27 109.27 0 0 1-9.45-5.5 132.87 132.87 0 0 1-24.27-20.62c-18.1-20.71-24.86-41.72-27.35-56.43h.1C349.14 23.9 350 16 350.13 16h-82.44v318.78c0 4.28 0 8.51-.18 12.69 0 .52-.05 1-.08 1.56 0 .23 0 .47-.05.71v.18a70 70 0 0 1-35.22 55.56 68.8 68.8 0 0 1-34.11 9c-38.41 0-69.54-31.32-69.54-70s31.13-70 69.54-70a68.9 68.9 0 0 1 21.41 3.39l.1-83.94a153.14 153.14 0 0 0-118 34.52 161.79 161.79 0 0 0-35.3 43.53c-3.48 6-16.61 30.11-18.2 69.24-1 22.21 5.67 45.22 8.85 54.73v.2c2 5.6 9.75 24.71 22.38 40.82A167.53 167.53 0 0 0 115 470.66v-.2l.2.2c39.91 27.12 84.16 25.34 84.16 25.34 7.66-.31 33.32 0 62.46-13.81 32.32-15.31 50.72-38.12 50.72-38.12a158.46 158.46 0 0 0 27.64-45.93c7.46-19.61 9.95-43.13 9.95-52.53V176.49c1 .6 14.32 9.41 14.32 9.41s19.19 12.3 49.13 20.31c21.48 5.7 50.42 6.9 50.42 6.9v-81.84c-10.14 1.1-30.73-2.1-51.81-12.61Z" />
+  </svg>
+);
+
+export default TikTok;

src/js/components/svg/X.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+
+interface Props {
+  height?: number;
+  width?: number;
+  fill?: string;
+}
+
+const X = (props: Props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={props.width ? props.width : 24}
+    height={props.height ? props.height : 24}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <polygon points="21.3,21.1 9.9,2.9 2.7,2.9 14.1,21.1 " />
+    <line x1="2.7" y1="21.1" x2="9.9" y2="14.5" />
+    <line x1="14.1" y1="9.5" x2="21.3" y2="2.9" />
+  </svg>
+);
+
+export default X;