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'
+}