Menu e sidebar

package.json

@@ -28,7 +28,7 @@
     "@types/probe-image-size": "^7.2.0",
     "@types/uuid": "^9.0.0",
     "@vtex/brand-ui": "^0.46.1",
-    "@vtexdocs/components": "https://github.com/vtexdocs/components.git#v1.2.0",
+    "@vtexdocs/components": "https://github.com/vtexdocs/components.git#v2.0.0",
     "algoliasearch": "^4.14.2",
     "chalk": "^5.2.0",
     "copy-text-to-clipboard": "^3.0.1",

src/components/documentation-card/index.tsx

@@ -26,7 +26,7 @@ const DocumentationCard = ({
       <a onClick={onClick} style={{ width: '100%' }}>
         <Box sx={cardContainer(containerType)}>
           <Flex sx={titleContainer(containerType)}>
-            <Icon size={24} />
+            <Icon size={24} sx={{ color: '#4A596B' }} />
             <Text className="title" sx={cardTitle(containerType)}>
               {title}
             </Text>

src/components/dropdown-menu/index.tsx

@@ -1,7 +1,11 @@
 import { Box } from '@vtex/brand-ui'
 
 import DocumentationCard from 'components/documentation-card'
-import { documentationData, updatesData } from 'utils/constants'
+import {
+  menuDocumentationData,
+  menuSupportData,
+  updatesData,
+} from 'utils/constants'
 import { useIntl } from 'react-intl'
 
 import styles from './styles'
@@ -15,7 +19,19 @@ const DropdownMenu = () => {
           sx={styles.documentationContainer}
           data-cy="dropdown-menu-first-section"
         >
-          {documentationData(intl).map((card) => (
+          {menuDocumentationData(intl).map((card) => (
+            <DocumentationCard
+              containerType="dropdown"
+              key={card.title}
+              {...card}
+            />
+          ))}
+        </Box>
+        <Box
+          sx={styles.updatesContainer}
+          data-cy="dropdown-menu-second-section"
+        >
+          {menuSupportData(intl).map((card) => (
             <DocumentationCard
               containerType="dropdown"
               key={card.title}

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/header/index.tsx

@@ -132,6 +132,8 @@ const Header = () => {
             <Flex sx={styles.dropdownButton(showDropdown)}>
               <GridIcon />
               <Text sx={styles.rightButtonsText} data-cy="docs-dropdown">
+                {' '}
+                {/*TODO: mudar data-cy no teste */}
                 <FormattedMessage id="landing_page_header_docs.message" />
               </Text>
             </Flex>
@@ -149,9 +151,14 @@ const Header = () => {
               <FormattedMessage id="landing_page_header_feedback.message" />
             </Text>
           </VtexLink>
-          <LocaleSwitcher />
+          <Flex sx={styles.containerHamburguerLocale}>
+            <HamburgerMenu />
+            <Box sx={styles.splitter}></Box>
+            <Box sx={styles.localeSwitcherContainer}>
+              <LocaleSwitcher />
+            </Box>
+          </Flex>
         </HeaderBrand.RightLinks>
-        <HamburgerMenu />
       </HeaderBrand>
     </Box>
   )

src/components/header/styles.ts

@@ -51,12 +51,21 @@ const logoSize: SxStyleProp = {
 }
 
 const rightLinks: SxStyleProp = {
-  display: ['none', 'none', 'none', 'flex !important'],
-  width: 'auto',
+  display: ['flex !important'],
+  width: '100%',
   height: '100%',
+  textTransform: 'none',
+  alignItems: 'center',
 }
 
 const rightLinksItem: SxStyleProp = {
+  display: [
+    'none !important',
+    'none !important',
+    'none !important',
+    'flex !important',
+  ],
+  visibility: 'visible',
   alignItems: 'center',
   padding: '0 !important',
   margin: '0 0 0 32px !important',
@@ -73,6 +82,12 @@ const rightLinksItem: SxStyleProp = {
 }
 
 const dropdownContainer: SxStyleProp = {
+  display: [
+    'none !important',
+    'none !important',
+    'none !important',
+    'flex !important',
+  ],
   textTransform: 'none',
   justifyContent: 'flex-end',
   height: 'calc(100% + 1px)',
@@ -159,8 +174,49 @@ const arrowIconActive: SxStyleProp = {
   color: '#D71D55',
 }
 
+const localeSwitcherContainer: SxStyleProp = {
+  display: 'flex',
+  visibility: 'visible',
+  ml: [0, 0, 0, 0, 0],
+  pr: ['0px', 0],
+  zIndex: 1,
+  justifyContent: 'center',
+  ' & button': {
+    borderLeft: 'none !important',
+    padding: '0px',
+  },
+}
+
+const containerHamburguerLocale: SxStyleProp = {
+  display: 'flex',
+  padding: '8px',
+  alignItems: 'center',
+  height: '100%',
+  borderLeft: ['none', 'none', 'none', '1px solid #e7e9ed'],
+  marginLeft: ['0', '0', '0', '32px'],
+  gap: '20px',
+
+  '& > :first-of-type': {
+    '& > button:first-of-type': {
+      borderLeft: 'none',
+      padding: '0px 0px 0px 0px',
+      width: '24px',
+      height: '24px',
+    },
+  },
+}
+
+const splitter: SxStyleProp = {
+  display: ['block', 'block', 'block', 'none'],
+  width: '1px',
+  height: '36px',
+  background: '#E7E9EE',
+}
+
 export default {
+  splitter,
   menuContainer,
+  containerHamburguerLocale,
   cardContainer,
   sideMenuContainer,
   logoSize,
@@ -181,4 +237,5 @@ export default {
   innerCardContainer,
   arrowIcon,
   arrowIconActive,
+  localeSwitcherContainer,
 }

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