diff --git a/src/components/footer/index.tsx b/src/components/footer/index.tsx index 275312f3..9b7b2bab 100644 --- a/src/components/footer/index.tsx +++ b/src/components/footer/index.tsx @@ -1,12 +1,25 @@ -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() @@ -14,15 +27,15 @@ const Footer = () => { 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: , + }, + { + to: () => getInstagramURL(), + component: , + }, + { + to: () => getYoutubeURL(), + component: , + }, + { + to: () => getLinkedinURL(), + component: , + }, + { + to: () => getTwitterURL(), + component: , + }, ] return ( - - + + + + {socialIcons.map((icon, index) => ( + + {icon.component} + + ))} + + {links.map((link, index) => ( - + {link.message} - + ))} - + + ) } diff --git a/src/components/footer/styles.ts b/src/components/footer/styles.ts index 4abd978b..933d8257 100644 --- a/src/components/footer/styles.ts +++ b/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, } diff --git a/src/messages/en.json b/src/messages/en.json index 4a9465c0..917cc0a3 100644 --- a/src/messages/en.json +++ b/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", diff --git a/src/messages/es.json b/src/messages/es.json index 38722ddd..262879d8 100644 --- a/src/messages/es.json +++ b/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", diff --git a/src/messages/pt.json b/src/messages/pt.json index e91c665b..170dd08f 100644 --- a/src/messages/pt.json +++ b/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", diff --git a/src/utils/get-url.tsx b/src/utils/get-url.tsx index 0330a341..a6fcca85 100644 --- a/src/utils/get-url.tsx +++ b/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' +}