Feat/footer

src/components/footer/index.tsx

@@ -1,28 +1,41 @@
-import { Box, FooterLanding } from '@vtex/brand-ui'
+import { Box, Flex, Link } from '@vtex/brand-ui'
 import styles from './styles'
 import {
   getDeveloperPortalURL,
-  getHelpCenterURL,
+  getGithubURL,
   getCommunityURL,
   getFeedbackURL,
+  getSiteMapURL,
+  getFacebookURL,
+  getInstagramURL,
+  getYoutubeURL,
+  getLinkedinURL,
+  getTwitterURL,
 } from 'utils/get-url'
 import { useIntl } from 'react-intl'
+import FacebookIcon from 'components/icons/facebook-icon'
+import LocaleSwitcherFooter from 'components/locale-switcher-footer'
+import VtexLogoFooter from 'components/icons/vtexLogoFooter'
+import InstagramIcon from 'components/icons/instagram-icon'
+import LinkedinIcon from 'components/icons/linkedin-icon'
+import YoutubeIcon from 'components/icons/youtube-icon'
+import TwitterIcon from 'components/icons/twitter-icon'
 
 const Footer = () => {
   const intl = useIntl()
 
   const links = [
     {
       message: intl.formatMessage({
-        id: 'landing_page_footer_developer_portal.message',
+        id: 'landing_page_footer_github.message',
       }),
-      to: () => getDeveloperPortalURL(),
+      to: () => getGithubURL(),
     },
     {
       message: intl.formatMessage({
-        id: 'landing_page_footer_help_center.message',
+        id: 'landing_page_footer_developer_portal.message',
       }),
-      to: () => getHelpCenterURL(),
+      to: () => getDeveloperPortalURL(),
     },
     {
       message: intl.formatMessage({
@@ -36,21 +49,54 @@ const Footer = () => {
       }),
       to: () => getFeedbackURL(),
     },
+    {
+      message: intl.formatMessage({
+        id: 'landing_page_footer_site_map.message',
+      }),
+      to: () => getSiteMapURL(),
+    },
+  ]
+
+  const socialIcons = [
+    {
+      to: () => getFacebookURL(),
+      component: <FacebookIcon sx={styles.icon} />,
+    },
+    {
+      to: () => getInstagramURL(),
+      component: <InstagramIcon sx={styles.icon} />,
+    },
+    {
+      to: () => getYoutubeURL(),
+      component: <YoutubeIcon sx={styles.icon} />,
+    },
+    {
+      to: () => getLinkedinURL(),
+      component: <LinkedinIcon sx={styles.icon} />,
+    },
+    {
+      to: () => getTwitterURL(),
+      component: <TwitterIcon sx={styles.icon} />,
+    },
   ]
   return (
-    <Box sx={styles.footerLinks}>
-      <FooterLanding>
+    <Box sx={styles.outerBox}>
+      <VtexLogoFooter sx={{ width: '61px', height: '22px' }} />
+      <Flex sx={styles.socialMediaIcons}>
+        {socialIcons.map((icon, index) => (
+          <Link key={index} href={icon.to()}>
+            {icon.component}
+          </Link>
+        ))}
+      </Flex>
+      <Flex sx={styles.textLinkItems}>
         {links.map((link, index) => (
-          <FooterLanding.Link
-            key={index}
-            href={link.to()}
-            target="_blank"
-            sx={index % 2 ? styles.footerRightLinks : styles.footerLeftLinks}
-          >
+          <Link sx={{ color: '#CCCED8' }} key={index} href={link.to()}>
             {link.message}
-          </FooterLanding.Link>
+          </Link>
         ))}
-      </FooterLanding>
+        <LocaleSwitcherFooter sx={styles.localeSwitchLanding} />
+      </Flex>
     </Box>
   )
 }

src/components/footer/styles.ts

@@ -1,37 +1,53 @@
 import { SxStyleProp } from '@vtex/brand-ui'
 
-const footerLeftLinks: SxStyleProp = {
-  ml: ['0px', '32px'],
-  mb: ['24px', '0px'],
-  textAlign: 'left',
+const outerBox: SxStyleProp = {
+  bg: '#142032;',
+  display: ['flex'],
+  flexDirection: ['column', 'row'],
+  padding: '48px 32px 48px 48px',
+  alignItems: ['flex-start', 'center'],
+  justifyContent: 'space-between',
+  flexWrap: 'wrap',
+  rowGap: '32px',
+  overflow: ['initial'],
 }
 
-const footerRightLinks: SxStyleProp = {
-  ...footerLeftLinks,
-  textAlign: 'right',
+const socialMediaIcons: SxStyleProp = {
+  gap: '16px',
+  alignItems: 'center',
+  paddingTop: '5px',
 }
 
-const footerLinks: SxStyleProp = {
-  '& > footer': {
-    px: ['0px', '32px'],
-    '& > div': {
-      flexDirection: ['column', 'row'],
-      alignItems: ['flex-start', 'center'],
-      px: ['32px', '0px'],
-      py: ['32px'],
-      width: ['100vw', '100%'],
-      '& > :last-child': {
-        mt: ['32px', '0px'],
-        display: ['grid', 'flex'],
-        justifyItems: ['stretch', 'initial'],
-        justifyContent: ['space-between', 'flex-end'],
-      },
-    },
+const textLinkItems: SxStyleProp = {
+  fontSize: '16px',
+  gap: ['48px', '30px', '45px'],
+  rowGap: ['45px'],
+  flexWrap: 'wrap',
+  justifyItems: 'left',
+  alignItems: 'center',
+}
+
+const localeSwitchLanding: SxStyleProp = {
+  marginLeft: '0',
+  justifySelf: 'left',
+  positionBottom: '5px',
+}
+
+const icon: SxStyleProp = {
+  size: 32,
+  color: '#CCCED7',
+  transition: 'all 0.3s ease-out',
+  borderRadius: '50%',
+  ':hover': {
+    color: 'white',
+    backgroundColor: 'rgba(204, 206, 215, 0.3)',
   },
 }
 
 export default {
-  footerLinks,
-  footerLeftLinks,
-  footerRightLinks,
+  localeSwitchLanding,
+  outerBox,
+  socialMediaIcons,
+  textLinkItems,
+  icon,
 }

src/components/icons/facebook-icon.tsx

@@ -0,0 +1,34 @@
+import type { IconProps } from '@vtex/brand-ui'
+import { Icon } from '@vtex/brand-ui'
+
+const FacebookIcon = (props: IconProps) => (
+  <Icon
+    {...props}
+    viewBox="0 0 33 33"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M31.5501 16.8379C31.5501 25.3976 24.6 32.3379 16.025 32.3379C7.45006 32.3379 0.5 25.3976 0.5 16.8379C0.5 8.27821 7.45006 1.33789 16.025 1.33789C24.6 1.33789 31.5501 8.27821 31.5501 16.8379Z"
+      stroke="#4D596A"
+    />
+    <g clipPath="url(#clip0_311_37415)">
+      <path
+        d="M17.5268 17.9629H19.4047L20.1559 14.9629H17.5268V13.4629C17.5268 12.6904 17.5268 11.9629 19.0291 11.9629H20.1559V9.44289C19.911 9.41064 18.9863 9.33789 18.0098 9.33789C15.9703 9.33789 14.5221 10.5806 14.5221 12.8629V14.9629H12.2686V17.9629H14.5221V24.3379H17.5268V17.9629Z"
+        fill="#CCCED7"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_311_37415">
+        <rect
+          width="18.0282"
+          height="18"
+          fill="white"
+          transform="translate(7.01074 7.83789)"
+        />
+      </clipPath>
+    </defs>
+  </Icon>
+)
+
+export default FacebookIcon

src/components/icons/instagram-icon.tsx

@@ -0,0 +1,34 @@
+import type { IconProps } from '@vtex/brand-ui'
+import { Icon } from '@vtex/brand-ui'
+
+const IgIcon = (props: IconProps) => (
+  <Icon
+    {...props}
+    viewBox="0 0 33 33"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M31.5999 16.8379C31.5999 25.3976 24.6498 32.3379 16.0748 32.3379C7.49986 32.3379 0.549805 25.3976 0.549805 16.8379C0.549805 8.27821 7.49986 1.33789 16.0748 1.33789C24.6498 1.33789 31.5999 8.27821 31.5999 16.8379Z"
+      stroke="#4D596A"
+    />
+    <g clipPath="url(#clip0_311_37416)">
+      <path
+        d="M16.0742 14.5879C15.4766 14.5879 14.9034 14.8249 14.4808 15.2469C14.0581 15.6689 13.8207 16.2412 13.8207 16.8379C13.8207 17.4346 14.0581 18.0069 14.4808 18.4289C14.9034 18.8508 15.4766 19.0879 16.0742 19.0879C16.6719 19.0879 17.2451 18.8508 17.6677 18.4289C18.0903 18.0069 18.3278 17.4346 18.3278 16.8379C18.3278 16.2412 18.0903 15.6689 17.6677 15.2469C17.2451 14.8249 16.6719 14.5879 16.0742 14.5879ZM16.0742 13.0879C17.0704 13.0879 18.0257 13.483 18.73 14.1862C19.4344 14.8895 19.8301 15.8433 19.8301 16.8379C19.8301 17.8325 19.4344 18.7863 18.73 19.4895C18.0257 20.1928 17.0704 20.5879 16.0742 20.5879C15.0781 20.5879 14.1228 20.1928 13.4184 19.4895C12.7141 18.7863 12.3184 17.8325 12.3184 16.8379C12.3184 15.8433 12.7141 14.8895 13.4184 14.1862C14.1228 13.483 15.0781 13.0879 16.0742 13.0879ZM20.9569 12.9004C20.9569 13.149 20.8579 13.3875 20.6819 13.5633C20.5058 13.7391 20.2669 13.8379 20.0179 13.8379C19.7689 13.8379 19.53 13.7391 19.3539 13.5633C19.1779 13.3875 19.0789 13.149 19.0789 12.9004C19.0789 12.6518 19.1779 12.4133 19.3539 12.2375C19.53 12.0617 19.7689 11.9629 20.0179 11.9629C20.2669 11.9629 20.5058 12.0617 20.6819 12.2375C20.8579 12.4133 20.9569 12.6518 20.9569 12.9004ZM16.0742 10.8379C14.2158 10.8379 13.9124 10.8431 13.0478 10.8814C12.4588 10.9091 12.0637 10.9879 11.6971 11.1304C11.3711 11.2564 11.136 11.4071 10.8859 11.6576C10.6508 11.8844 10.47 12.1613 10.3571 12.4676C10.2143 12.8351 10.1355 13.2289 10.1084 13.8161C10.0694 14.6441 10.0648 14.9336 10.0648 16.8379C10.0648 18.6934 10.0701 18.9964 10.1084 19.8596C10.1362 20.4469 10.2151 20.8421 10.3571 21.2074C10.4848 21.5336 10.635 21.7684 10.8844 22.0174C11.1375 22.2694 11.3726 22.4201 11.6956 22.5446C12.0667 22.6879 12.4618 22.7674 13.0478 22.7944C13.8771 22.8334 14.167 22.8379 16.0742 22.8379C17.9326 22.8379 18.2361 22.8326 19.1007 22.7944C19.6881 22.7666 20.084 22.6879 20.4506 22.5461C20.7758 22.4194 21.0125 22.2686 21.2618 22.0196C21.515 21.7669 21.666 21.5321 21.7907 21.2096C21.9334 20.8399 22.013 20.4446 22.0401 19.8596C22.0791 19.0316 22.0836 18.7421 22.0836 16.8379C22.0836 14.9824 22.0784 14.6794 22.0401 13.8161C22.0123 13.2296 21.9334 12.8336 21.7907 12.4676C21.6775 12.1616 21.497 11.8849 21.2626 11.6576C21.0355 11.4228 20.7582 11.2423 20.4513 11.1296C20.0833 10.9871 19.6881 10.9084 19.1007 10.8814C18.2714 10.8424 17.9815 10.8379 16.0742 10.8379ZM16.0742 9.33789C18.1152 9.33789 18.3698 9.34539 19.1706 9.38289C19.9706 9.42039 20.5152 9.54564 20.9944 9.73164C21.4902 9.92214 21.9079 10.1801 22.3255 10.5964C22.7075 10.9713 23.003 11.4248 23.1916 11.9254C23.3771 12.4031 23.5033 12.9476 23.5409 13.7464C23.5762 14.5459 23.586 14.8001 23.586 16.8379C23.586 18.8756 23.5785 19.1299 23.5409 19.9294C23.5033 20.7281 23.3771 21.2719 23.1916 21.7504C23.0036 22.2512 22.7079 22.7049 22.3255 23.0794C21.9499 23.4606 21.4957 23.7557 20.9944 23.9441C20.5159 24.1294 19.9706 24.2554 19.1706 24.2929C18.3698 24.3281 18.1152 24.3379 16.0742 24.3379C14.0333 24.3379 13.7787 24.3304 12.9779 24.2929C12.1779 24.2554 11.6333 24.1294 11.154 23.9441C10.6525 23.7562 10.1982 23.4611 9.82297 23.0794C9.44093 22.7045 9.14536 22.251 8.95687 21.7504C8.77058 21.2726 8.64513 20.7281 8.60757 19.9294C8.57227 19.1299 8.5625 18.8756 8.5625 16.8379C8.5625 14.8001 8.57001 14.5459 8.60757 13.7464C8.64513 12.9469 8.77058 12.4039 8.95687 11.9254C9.14484 11.4245 9.44047 10.9709 9.82297 10.5964C10.1983 10.2148 10.6526 9.91969 11.154 9.73164C11.6333 9.54564 12.1771 9.42039 12.9779 9.38289C13.7787 9.34764 14.0333 9.33789 16.0742 9.33789Z"
+        fill="#C5C7D1"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_311_37416">
+        <rect
+          width="18.0282"
+          height="18"
+          fill="white"
+          transform="translate(7.06055 7.83789)"
+        />
+      </clipPath>
+    </defs>
+  </Icon>
+)
+
+export default IgIcon

src/components/icons/linkedin-icon.tsx

@@ -0,0 +1,34 @@
+import type { IconProps } from '@vtex/brand-ui'
+import { Icon } from '@vtex/brand-ui'
+
+const LinkedinIcon = (props: IconProps) => (
+  <Icon
+    {...props}
+    viewBox="0 0 33 33"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M31.7005 16.8379C31.7005 25.3976 24.7504 32.3379 16.1754 32.3379C7.60045 32.3379 0.650391 25.3976 0.650391 16.8379C0.650391 8.27821 7.60045 1.33789 16.1754 1.33789C24.7504 1.33789 31.7005 8.27821 31.7005 16.8379Z"
+      stroke="#4D596A"
+    />
+    <g clipPath="url(#clip0_311_37418)">
+      <path
+        d="M20.9353 21.5921H18.9334V18.4594C18.9334 17.7124 18.9184 16.7509 17.8893 16.7509C16.8459 16.7509 16.6866 17.5639 16.6866 18.4046V21.5921H14.684V15.1504H16.607V16.0279H16.6333C16.9022 15.5224 17.5557 14.9876 18.5323 14.9876C20.5604 14.9876 20.936 16.3211 20.936 18.0559V21.5921H20.9353ZM12.423 14.2691C12.2701 14.2693 12.1188 14.2394 11.9776 14.1811C11.8363 14.1228 11.708 14.0372 11.6 13.9293C11.492 13.8213 11.4064 13.6932 11.348 13.5521C11.2897 13.4111 11.2599 13.26 11.2601 13.1074C11.2603 12.8778 11.3286 12.6533 11.4565 12.4625C11.5844 12.2717 11.7661 12.123 11.9787 12.0352C12.1912 11.9475 12.425 11.9247 12.6506 11.9696C12.8761 12.0145 13.0832 12.1252 13.2457 12.2877C13.4082 12.4502 13.5189 12.6571 13.5636 12.8824C13.6083 13.1076 13.5851 13.341 13.497 13.5531C13.4088 13.7652 13.2597 13.9464 13.0684 14.0739C12.8771 14.2013 12.6529 14.2693 12.423 14.2691ZM13.4265 21.5921H11.4186V15.1504H13.4273V21.5921H13.4265ZM21.9381 10.0879H10.4143C9.86146 10.0879 9.41602 10.5229 9.41602 11.0606V22.6151C9.41602 23.1529 9.86221 23.5879 10.4136 23.5879H21.9351C22.4864 23.5879 22.9371 23.1529 22.9371 22.6151V11.0606C22.9371 10.5229 22.4864 10.0879 21.9351 10.0879H21.9381Z"
+        fill="#C5C7D1"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_311_37418">
+        <rect
+          width="18.0282"
+          height="18"
+          fill="white"
+          transform="translate(7.16211 7.83789)"
+        />
+      </clipPath>
+    </defs>
+  </Icon>
+)
+
+export default LinkedinIcon

src/components/icons/twitter-icon.tsx

@@ -0,0 +1,22 @@
+import type { IconProps } from '@vtex/brand-ui'
+import { Icon } from '@vtex/brand-ui'
+
+const TwitterIcon = (props: IconProps) => (
+  <Icon
+    {...props}
+    viewBox="0 0 33 33"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M9.95605 9.54247C9.95868 9.54614 10.0339 9.65531 10.1232 9.78548C10.2126 9.91512 10.3477 10.1114 10.4234 10.2211C10.5874 10.4594 10.9296 10.9554 11.2356 11.3995C11.3581 11.5769 11.5463 11.8498 11.6535 12.0057C11.8307 12.2629 11.9773 12.4754 12.3842 13.0659C12.4599 13.1756 12.6245 13.4139 12.7496 13.596C12.8752 13.7776 12.9872 13.9409 12.9993 13.9582C13.0214 13.9902 13.0524 14.0348 13.607 14.84C13.7762 15.0851 14.0433 15.4724 14.2005 15.7008C14.3582 15.9285 14.5006 16.1359 14.518 16.1611C14.5469 16.2036 14.5485 16.2078 14.5411 16.2162C14.5364 16.2214 14.3713 16.4135 14.1742 16.6429C13.9771 16.8723 13.6816 17.216 13.5176 17.4061C13.3541 17.5966 13.1323 17.8538 13.0256 17.9782C12.9183 18.1026 12.708 18.3471 12.5577 18.5219C12.2191 18.915 11.0747 20.2451 10.6316 20.76C10.4507 20.9704 10.2215 21.2371 10.1227 21.352C10.0233 21.467 9.94238 21.562 9.94238 21.5635C9.94238 21.5651 10.1674 21.5656 10.4428 21.5651L10.9433 21.5635L11.1541 21.3189C11.7402 20.6382 11.8911 20.4629 12.084 20.2382C12.1997 20.1039 12.3369 19.9443 12.3895 19.884C12.4415 19.8231 12.9409 19.2436 13.4987 18.5954C14.0564 17.9472 14.621 17.2916 14.7524 17.1389C14.8844 16.9856 14.9943 16.8612 14.9974 16.8618C15 16.8623 15.0163 16.8838 15.0337 16.909C15.0742 16.9673 15.3391 17.352 15.6645 17.8238C15.8028 18.0243 16.0562 18.3918 16.227 18.64C16.3984 18.8883 16.6113 19.1974 16.7012 19.3276C16.7905 19.4572 16.9793 19.7312 17.1207 19.9364C17.2621 20.1411 17.3872 20.3233 17.3993 20.3406C17.4114 20.3579 17.5239 20.5206 17.649 20.7028C17.7741 20.8844 17.9134 21.0864 17.9581 21.1515C18.0033 21.2166 18.0764 21.3226 18.1211 21.3877C18.1663 21.4528 18.212 21.5194 18.2241 21.5362L18.2451 21.5662H19.9794H21.7136L21.7042 21.552C21.6994 21.5436 21.6069 21.4098 21.4997 21.2539C21.3924 21.098 21.2279 20.8592 21.1343 20.7237C20.7537 20.1716 20.5051 19.811 20.3784 19.6268C20.3043 19.5197 20.1529 19.3003 20.0414 19.1386C19.8233 18.8216 19.8054 18.7959 19.4179 18.2343C19.2765 18.0285 19.143 17.8354 19.1215 17.8039C19.1004 17.7729 19.0442 17.6921 18.9974 17.6244C18.9506 17.5567 18.8492 17.4087 18.7713 17.2964C18.6941 17.1835 18.6184 17.0738 18.6031 17.0523C18.5879 17.0308 18.5232 16.9363 18.4586 16.8423C18.3939 16.7484 18.3313 16.6576 18.3193 16.6403C18.3072 16.6229 18.2083 16.4802 18.1 16.3227C17.9918 16.1653 17.803 15.8913 17.6805 15.7139C17.3367 15.2158 17.2384 15.073 17.0755 14.8358L16.9241 14.6164L17.0834 14.4316C17.1706 14.3298 17.4335 14.0248 17.6669 13.7535C17.9008 13.4821 18.2115 13.1205 18.3582 12.9504C18.7955 12.4429 19.4116 11.727 20.3668 10.6174C20.8625 10.0416 21.2752 9.56241 21.2836 9.55349L21.2983 9.53617H20.7963H20.2948L19.869 10.028C19.4879 10.4683 19.0999 10.9192 17.0408 13.3126C16.7327 13.6706 16.4788 13.964 16.4772 13.9645C16.4757 13.965 16.4552 13.9377 16.4326 13.9041C16.4094 13.8705 16.2549 13.6454 16.0882 13.4045C15.9221 13.1635 15.7108 12.8565 15.6183 12.7221C15.5257 12.5878 15.4011 12.4072 15.3412 12.3206C15.2818 12.234 15.1041 11.9763 14.947 11.7485C14.7898 11.5202 14.6515 11.3197 14.6394 11.3024C14.6273 11.285 14.5285 11.1423 14.4202 10.9848C14.1463 10.5875 13.7994 10.0836 13.6679 9.89308C13.607 9.8049 13.5271 9.68891 13.4897 9.63432L13.4219 9.53617H11.6871C10.3004 9.53617 9.9529 9.53774 9.95605 9.54247ZM13.1917 10.587C13.2937 10.735 13.3867 10.8704 13.3988 10.8877C13.4203 10.9187 13.5581 11.1186 13.8472 11.5385C13.9271 11.654 14.0018 11.7627 14.0139 11.78C14.0259 11.7973 14.1248 11.9401 14.2331 12.0975C14.4507 12.414 14.7114 12.7919 15.3796 13.7614C15.6256 14.1177 15.8832 14.492 15.9526 14.5933C16.0667 14.7591 16.2796 15.0678 16.4741 15.3491C16.514 15.4068 16.6618 15.6204 16.8016 15.8241C16.9419 16.0277 17.0665 16.2083 17.0786 16.2256C17.0907 16.2429 17.2164 16.4245 17.3572 16.6298C17.4987 16.8345 17.7005 17.1273 17.8057 17.2806C18.1847 17.8296 18.611 18.4484 19.0557 19.094C19.1803 19.2746 19.3953 19.5864 19.5336 19.7869C19.6719 19.9874 19.8364 20.2262 19.899 20.317C19.9615 20.4078 20.0577 20.5474 20.1124 20.6266C20.1676 20.7059 20.2138 20.7741 20.2159 20.7778C20.2196 20.7825 20.063 20.7841 19.44 20.7841H18.6599L18.5742 20.6592C18.499 20.5505 18.252 20.1921 17.741 19.4509C17.6621 19.337 17.4745 19.0641 17.3231 18.8447C16.9362 18.2836 16.7984 18.0837 16.5976 17.7924C16.5014 17.6522 16.4126 17.5236 16.4005 17.5063C16.3705 17.4633 15.8548 16.7148 15.6624 16.4356C15.5005 16.1999 15.1467 15.6871 14.9785 15.4436C14.8413 15.2452 14.589 14.8793 14.2562 14.3965C14.1006 14.1697 13.9629 13.9703 13.9508 13.9529C13.9387 13.9356 13.8525 13.8102 13.7589 13.6748C13.3925 13.1425 12.8079 12.2954 12.7785 12.2524C12.7664 12.235 12.6933 12.1285 12.6155 12.0162C12.5382 11.9033 12.4625 11.7936 12.4473 11.7721C12.391 11.6913 12.0083 11.1354 11.715 10.7093C11.6351 10.5938 11.5626 10.4888 11.5536 10.4757C11.5447 10.4626 11.5163 10.4221 11.4911 10.3849L11.4453 10.3182H12.226H13.0061L13.1917 10.587Z"
+      fill="#C5C7D1"
+    />
+    <path
+      d="M31.7002 15.8379C31.7002 23.9917 24.7819 30.6394 16.2002 30.6394C7.61851 30.6394 0.700195 23.9917 0.700195 15.8379C0.700195 7.68404 7.61851 1.03638 16.2002 1.03638C24.7819 1.03638 31.7002 7.68404 31.7002 15.8379Z"
+      stroke="#4D596A"
+    />
+  </Icon>
+)
+
+export default TwitterIcon