feat: adds footer messages social media urls and footer components

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={{ size: 32 }} />,
+    },
+    {
+      to: () => getInstagramURL(),
+      component: <InstagramIcon sx={{ size: 32 }} />,
+    },
+    {
+      to: () => getYoutubeURL(),
+      component: <YoutubeIcon sx={{ size: 32 }} />,
+    },
+    {
+      to: () => getLinkedinURL(),
+      component: <LinkedinIcon sx={{ size: 32 }} />,
+    },
+    {
+      to: () => getTwitterURL(),
+      component: <TwitterIcon sx={{ size: 32 }} />,
+    },
   ]
   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,47 @@
 import { SxStyleProp } from '@vtex/brand-ui'
 
-const footerLeftLinks: SxStyleProp = {
-  ml: ['0px', '32px'],
-  mb: ['24px', '0px'],
-  textAlign: 'left',
+const test: SxStyleProp = {
+  display: 'flex',
+  backgroundColor: 'aquamarine',
 }
 
-const footerRightLinks: SxStyleProp = {
-  ...footerLeftLinks,
-  textAlign: 'right',
+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: 'auto',
 }
 
-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 socialMediaIcons: SxStyleProp = {
+  gap: '16px',
+  alignItems: 'center',
+  paddingTop: '5px',
+}
+
+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',
 }
 
 export default {
-  footerLinks,
-  footerLeftLinks,
-  footerRightLinks,
+  localeSwitchLanding,
+  test,
+  outerBox,
+  socialMediaIcons,
+  textLinkItems,
 }

src/messages/en.json

@@ -39,8 +39,9 @@
   "landing_page_education_community.description": "Find solutions and share ideas on VTEX community.",
   "landing_page_education_community.textLink": "Meet the Community",
   "landing_page_support.title": "Support Resources",
-  "landing_page_footer_developer_portal.message": "Developer Portal",
-  "landing_page_footer_help_center.message": "Help Center",
+  "landing_page_footer_developer_portal.message": "Developers Portal",
+  "landing_page_footer_github.message": "Github",
+  "landing_page_footer_site_map.message": "Site Map",
   "landing_page_footer_community.message": "Community",
   "landing_page_footer_feedback.message": "Feedback",
   "landing_page_header_feedback.message": "Feedback",

src/messages/es.json

@@ -39,8 +39,9 @@
   "landing_page_education_community.description": "Encuentra solucciones y comparte ideas en la comunidad de VTEX.",
   "landing_page_education_community.textLink": "Únete à la comunidad",
   "landing_page_support.title": "Recursos de soporte",
-  "landing_page_footer_developer_portal.message": "Developer Portal",
-  "landing_page_footer_help_center.message": "Help Center",
+  "landing_page_footer_developer_portal.message": "Developers Portal",
+  "landing_page_footer_github.message": "Github",
+  "landing_page_footer_site_map.message": "Mapa del Sitio",
   "landing_page_footer_community.message": "Community",
   "landing_page_footer_feedback.message": "Feedback",
   "landing_page_header_feedback.message": "Feedback",

src/messages/pt.json

@@ -39,8 +39,9 @@
   "landing_page_education_community.description": "Encontre soluções e compartilhe ideias na comunidade VTEX.",
   "landing_page_education_community.textLink": "Junte-se à nossa comunidade",
   "landing_page_support.title": "Recursos adicionais",
-  "landing_page_footer_developer_portal.message": "Developer Portal",
-  "landing_page_footer_help_center.message": "Help Center",
+  "landing_page_footer_developer_portal.message": "Developers Portal",
+  "landing_page_footer_site_map.message": "Mapa do site",
+  "landing_page_footer_github.message": "Github",
   "landing_page_footer_community.message": "Comunidade",
   "landing_page_footer_feedback.message": "Feedback",
   "landing_page_header_feedback.message": "Feedback",

src/utils/get-url.tsx

@@ -6,8 +6,8 @@ export const getDeveloperPortalURL = () => {
   return `https://developers.vtex.com/`
 }
 
-export const getHelpCenterURL = () => {
-  return `https://help.vtex.com/`
+export const getGithubURL = () => {
+  return `https://github.com/vtexdocs/helpcenter`
 }
 
 export const getCommunityURL = () => {
@@ -21,3 +21,27 @@ export const getLearningCenterURL = () => {
 export const getSupportURL = () => {
   return 'https://help.vtex.com/en/support'
 }
+
+export const getSiteMapURL = () => {
+  return 'https://help.vtex.com/en/support' // TODO: get site map
+}
+
+export const getLinkedinURL = () => {
+  return 'https://linkedin.com/company/vtex'
+}
+
+export const getFacebookURL = () => {
+  return 'https://www.facebook.com/vtexcommerce/'
+}
+
+export const getInstagramURL = () => {
+  return 'https://www.instagram.com/vtexbrasil/'
+}
+
+export const getYoutubeURL = () => {
+  return 'https://www.youtube.com/c/VTEX-Commerce/featured'
+}
+
+export const getTwitterURL = () => {
+  return 'https://twitter.com/vtexonline'
+}