Merge pull request #909 from webdev403/feature/footer-social-menubar

Add social menubar on footer

src/components/Footer/Footer.tsx

@@ -1,15 +1,86 @@
 import React from 'react';
-import { Box } from '@material-ui/core';
-import { ReactComponent as QuickIcon } from 'assets/images/quickIcon.svg';
+import { Box, Grid } from '@material-ui/core';
+import QUICKLogo from 'assets/images/quickLogo.png';
 import 'components/styles/Footer.scss';
+import { useHistory } from 'react-router-dom';
 
 const Footer: React.FC = () => {
+  const history = useHistory();
   const copyrightYear = new Date().getFullYear();
 
+  const socialMenuItems = [
+    {
+      title: 'Services',
+      items: [
+        { title: 'Swap', link: '/swap' },
+        { title: 'Pool', link: '/pools' },
+        { title: 'Farm', link: '/farm' },
+        { title: 'Dragons Lair', link: '/dragons' },
+        { title: 'Convert', link: '/convert' },
+        { title: 'Analytics', link: '/analytics' },
+      ],
+    },
+    {
+      title: 'Developers',
+      items: [
+        { title: 'Github', link: 'https://github.com/QuickSwap' },
+        { title: 'Docs', link: 'https://docs.quickswap.exchange/' },
+      ],
+    },
+    {
+      title: 'Governance',
+      items: [
+        { title: 'Proposals', link: 'https://snapshot.org/#/quickvote.eth' },
+      ],
+    },
+  ];
+
   return (
     <Box className='footer'>
-      <QuickIcon />
-      <p>© {copyrightYear} QuickSwap.</p>
+      <Box className='footerContainer'>
+        <Grid container spacing={4} className='socialMenuWrapper'>
+          <Grid item xs={12} sm={12} md={4}>
+            <img src={QUICKLogo} alt='QUICK' height={40} />
+            <Box mt={2} maxWidth='240px'>
+              <small className='text-secondary'>
+                Our community is building a comprehensive decentralized trading
+                platform for the future of finance. Join us!
+              </small>
+            </Box>
+          </Grid>
+          <Grid item container xs={12} sm={12} md={8} spacing={4}>
+            {socialMenuItems.map((item) => (
+              <Grid key={item.title} item xs={12} sm={6} md={4}>
+                <small>{item.title}</small>
+                <Box mt={3}>
+                  {item.items.map((socialItem) => (
+                    <Box
+                      key={socialItem.title}
+                      className='cursor-pointer'
+                      my={1.5}
+                      onClick={() => {
+                        if (socialItem.link.includes('http')) {
+                          window.open(socialItem.link, '_blank');
+                        } else {
+                          history.push(socialItem.link);
+                        }
+                      }}
+                    >
+                      <small className='text-secondary'>
+                        {socialItem.title}
+                      </small>
+                    </Box>
+                  ))}
+                </Box>
+              </Grid>
+            ))}
+          </Grid>
+        </Grid>
+        <Box className='copyrightWrapper'>
+          <small className='text-secondary'>© {copyrightYear} QuickSwap.</small>
+          <small className='text-secondary'>Terms of Use</small>
+        </Box>
+      </Box>
     </Box>
   );
 };

src/components/styles/Footer.scss

@@ -1,12 +1,27 @@
 @use 'styles/variables' as *;
 
 .footer {
-  text-align: center;
-  padding-bottom: 110px;
+  border-top: 1px solid $divider;
   position: relative;
-  & p {
-    font-size: 14px;
-    line-height: 24px;
-    margin-top: 20px;
-  }
-}
+  display: flex;
+  justify-content: center;
+}
+
+.footerContainer {
+  max-width: 1296px;
+  width: 100%;
+  overflow: hidden;
+  padding: 0 24px;
+}
+
+.socialMenuWrapper {
+  padding: 40px 0;
+}
+
+.copyrightWrapper {
+  border-top: 1px solid $divider;
+  display: flex;
+  padding: 16px 0;
+  justify-content: space-between;
+  align-items: center;
+}

src/pages/LandingPage/LandingPage.tsx

@@ -19,13 +19,14 @@ import Rewards from 'assets/images/featured/Rewards.svg';
 import FeaturedSwap from 'assets/images/featured/Swap.svg';
 import { ReactComponent as CoingeckoIcon } from 'assets/images/social/Coingecko.svg';
 import { ReactComponent as DiscordIcon } from 'assets/images/social/Discord.svg';
-import { ReactComponent as MediumIcon } from 'assets/images/social/Medium.svg';
+import { ReactComponent as BlogIcon } from 'assets/images/social/Blog.svg';
 import { ReactComponent as RedditIcon } from 'assets/images/social/Reddit.svg';
 import { ReactComponent as TelegramIcon } from 'assets/images/social/Telegram.svg';
 import { ReactComponent as TwitterIcon } from 'assets/images/social/Twitter.svg';
 import { ReactComponent as YouTubeIcon } from 'assets/images/social/YouTube.svg';
 import { ReactComponent as GeckoterminalIcon } from 'assets/images/social/Geckoterminal.svg';
 import TikTokIcon from 'assets/images/social/TikTok_Qs.png';
+import CoinpaprikaIcon from 'assets/images/social/coinpaprika-logo.png';
 import 'pages/styles/landing.scss';
 import { useIsV2 } from 'state/application/hooks';
 import { getConfig } from 'config';
@@ -94,9 +95,9 @@ const LandingPage: React.FC = () => {
       title: 'Twitter',
     },
     {
-      link: 'https://quickswap-layer2.medium.com/',
-      icon: <MediumIcon />,
-      title: 'Medium',
+      link: 'https://blog.quickswap.exchange/',
+      icon: <BlogIcon />,
+      title: 'Blog',
     },
     {
       link: 'https://www.youtube.com/channel/UCrPlF-DBwD-UzLFDzJ4Z5Fw',
@@ -113,6 +114,11 @@ const LandingPage: React.FC = () => {
       icon: <CoingeckoIcon />,
       title: 'CoinGecko',
     },
+    {
+      link: 'https://coinpaprika.com/exchanges/quickswap-v3/',
+      icon: <img src={CoinpaprikaIcon} alt='Coinpaprika' />,
+      title: 'Coinpaprika',
+    },
     {
       link: 'https://www.geckoterminal.com/polygon_pos/quickswap_v3/pools',
       icon: <GeckoterminalIcon />,