From f80c8817dc37d963490c8168fdc9f13330f163a8 Mon Sep 17 00:00:00 2001
From: Carolina Menezes <carolinamenezes@hotmail.com.br>
Date: Thu, 13 Apr 2023 17:14:56 -0300
Subject: [PATCH] feat(next.config.js): set up locales

---
 next.config.js                                |   5 +-
 package.json                                  |   6 +-
 src/components/contributors/index.tsx         |  13 +-
 .../documentation-section-card/index.tsx      |  12 +-
 .../documentation-section/index.tsx           |  11 +-
 src/components/dropdown-menu/index.tsx        |   6 +-
 src/components/education-section/index.tsx    |  73 +++--
 src/components/feedback-modal/index.tsx       |  15 +-
 src/components/feedback-section/index.tsx     |  23 +-
 src/components/footer/index.tsx               |  83 +++---
 src/components/header/hamburger-menu.tsx      |   6 +-
 src/components/header/index.tsx               |  12 +-
 src/components/icons/vtex-devportal-icon.tsx  |  38 ---
 src/components/icons/vtex-helpcenter-icon.tsx |  23 ++
 src/components/last-updates-section/index.tsx |   8 +-
 .../markdown-renderer/components.tsx          |   5 +-
 src/components/newsletter-section/index.tsx   |  28 +-
 src/components/on-this-page/index.tsx         |   8 +-
 src/components/release-note/functions.tsx     |  10 +-
 src/components/release-section/index.tsx      |   8 +-
 .../search-filter-tab-bar/index.tsx           |   6 +-
 src/components/search-input/results-box.tsx   |  10 +-
 src/components/search-input/search-box.tsx    |   9 +-
 src/components/search-results/index.tsx       |   4 +-
 src/components/search-sections/index.tsx      |   6 +-
 src/components/see-also-section/functions.ts  |   4 +-
 .../sidebar-section-filter/index.tsx          |   9 +-
 src/components/sidebar-section/index.tsx      |   4 +-
 src/components/sidebar/index.tsx              |   6 +-
 src/messages/{language.json => en.json}       |  22 +-
 src/messages/es.json                          |  94 +++++++
 src/messages/pt.json                          |  94 +++++++
 src/pages/_app.tsx                            |  43 +--
 src/pages/docs/guides/index.tsx               |  26 +-
 src/pages/updates/announcements/index.tsx     |  16 +-
 src/utils/constants.ts                        | 264 +++++++++++-------
 src/utils/get-messages.tsx                    |  20 +-
 37 files changed, 668 insertions(+), 362 deletions(-)
 delete mode 100644 src/components/icons/vtex-devportal-icon.tsx
 create mode 100644 src/components/icons/vtex-helpcenter-icon.tsx
 rename src/messages/{language.json => en.json} (86%)
 create mode 100644 src/messages/es.json
 create mode 100644 src/messages/pt.json

diff --git a/next.config.js b/next.config.js
index b11a64ad..21daae8c 100644
--- a/next.config.js
+++ b/next.config.js
@@ -35,7 +35,8 @@ const nextConfig = {
     return config
   },
   env: {
-    navigationJsonUrl: 'https://developers.vtex.com/navigation.json',
+    navigationJsonUrl:
+      'https://leafy-mooncake-7c2e5e.netlify.app/navigation.json',
     contentOrg: '',
     contentRepo: '',
     contentBranch: '',
@@ -44,7 +45,7 @@ const nextConfig = {
     return []
   },
   i18n: {
-    locales: ['en'],
+    locales: ['en', 'pt', 'es'],
     defaultLocale: 'en',
   },
 }
diff --git a/package.json b/package.json
index d69c5f39..1bd88417 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "devportal",
-  "version": "1.9.8",
+  "version": "1.9.6",
   "private": true,
   "engines": {
     "npm": "please-use-yarn",
@@ -31,7 +31,8 @@
     "algoliasearch": "^4.14.2",
     "chalk": "^5.2.0",
     "copy-text-to-clipboard": "^3.0.1",
-    "googleapis": "^39.2.0",
+    "google-auth-library": "^8.7.0",
+    "googleapis": "^117.0.0",
     "highlight.js": "^11.6.0",
     "highlightjs-curl": "^1.3.0",
     "http-proxy": "^1.18.1",
@@ -52,6 +53,7 @@
     "react-dom": "^18.2.0",
     "react-instantsearch-dom": "^6.37.0",
     "react-intersection-observer": "^9.2.2",
+    "react-intl": "^6.3.2",
     "react-markdown": "^8.0.3",
     "react-toastify": "^9.1.1",
     "rehype-highlight": "^5.0.2",
diff --git a/src/components/contributors/index.tsx b/src/components/contributors/index.tsx
index 021b1650..151ef7b5 100644
--- a/src/components/contributors/index.tsx
+++ b/src/components/contributors/index.tsx
@@ -2,8 +2,7 @@ import { useEffect, useLayoutEffect, useRef, useState } from 'react'
 import { Box, Flex, Grid, IconCaret, Text } from '@vtex/brand-ui'
 
 import Tooltip from 'components/tooltip'
-
-import { getMessages } from 'utils/get-messages'
+import { useIntl } from 'react-intl'
 
 import styles from './styles'
 import { ContributorsType } from 'utils/getFileContributors'
@@ -14,7 +13,7 @@ interface Props {
 }
 
 const Contributors = ({ contributors }: Props) => {
-  const messages = getMessages()
+  const intl = useIntl()
 
   const [showAll, setShowAll] = useState(false)
   const [pageWidth, setPageWidth] = useState(0)
@@ -46,7 +45,9 @@ const Contributors = ({ contributors }: Props) => {
     <Flex sx={styles.container}>
       <Flex sx={styles.titleContainer}>
         <Text sx={styles.title}>
-          {messages['api_guide_documentation_page_contributors.title']}
+          {intl.formatMessage({
+            id: 'api_guide_documentation_page_contributors.title',
+          })}
         </Text>
         <Text sx={styles.count}>{contributors.length}</Text>
       </Flex>
@@ -87,7 +88,9 @@ const Contributors = ({ contributors }: Props) => {
         >
           <Text>
             {showAll
-              ? messages['api_guide_documentation_page_contributors.toggleText']
+              ? intl.formatMessage({
+                  id: 'api_guide_documentation_page_contributors.toggleText',
+                })
               : `+ ${
                   contributors.length - minRows * photosPerRow
                 } contributors`}
diff --git a/src/components/documentation-section-card/index.tsx b/src/components/documentation-section-card/index.tsx
index 21ee5d5e..312ff99f 100644
--- a/src/components/documentation-section-card/index.tsx
+++ b/src/components/documentation-section-card/index.tsx
@@ -1,11 +1,11 @@
 import Link from 'next/link'
 import { Flex, Text } from '@vtex/brand-ui'
 
-import { getMessages } from 'utils/get-messages'
 import type { DocDataElement } from 'utils/typings/types'
 import Tooltip from 'components/tooltip'
 import styles from './styles'
 import { useEffect, useRef, useState } from 'react'
+import { useIntl } from 'react-intl'
 
 const DocumentationSectionCard = ({
   Icon,
@@ -13,7 +13,7 @@ const DocumentationSectionCard = ({
   description,
   link,
 }: DocDataElement) => {
-  const messages = getMessages()
+  const intl = useIntl()
   const [tooltipState, setTooltipState] = useState(false)
   const [tooltipDescription, setTooltipDescription] = useState(description)
   const descriptionRef = useRef<HTMLElement>()
@@ -57,11 +57,9 @@ const DocumentationSectionCard = ({
             sx={styles.quickStartedContainer}
           >
             <Text className="learnMoreText" sx={styles.learnMoreText}>
-              {
-                messages[
-                  'landing_page_documentation_documentation_card.learnMoreText'
-                ]
-              }
+              {intl.formatMessage({
+                id: 'landing_page_documentation_documentation_card.learnMoreText',
+              })}
             </Text>
           </Flex>
         </Flex>
diff --git a/src/components/documentation-section/index.tsx b/src/components/documentation-section/index.tsx
index b68f1828..54c8d4d2 100644
--- a/src/components/documentation-section/index.tsx
+++ b/src/components/documentation-section/index.tsx
@@ -2,22 +2,25 @@ import { Box, Flex, Text } from '@vtex/brand-ui'
 
 import DocumentationSectionCard from '../documentation-section-card'
 
-import { messages } from 'utils/constants'
-import { documentationData as cards } from 'utils/constants'
+import { documentationData } from 'utils/constants'
 
 import styles from './styles'
+import { useIntl } from 'react-intl'
 
 const DocumentationSection = () => {
+  const intl = useIntl()
   return (
     <Box sx={styles.sectionContainer}>
       <Text sx={styles.title}>
-        {messages['landing_page_documentation.title']}
+        {intl.formatMessage({
+          id: 'landing_page_documentation.title',
+        })}
       </Text>
       <Flex
         sx={styles.cardsContainer}
         data-cy="documentation-section-card-list"
       >
-        {cards.map((card) => (
+        {documentationData(intl).map((card) => (
           <DocumentationSectionCard key={card.title} {...card} />
         ))}
       </Flex>
diff --git a/src/components/dropdown-menu/index.tsx b/src/components/dropdown-menu/index.tsx
index 22fd0282..a5fbcd10 100644
--- a/src/components/dropdown-menu/index.tsx
+++ b/src/components/dropdown-menu/index.tsx
@@ -2,10 +2,12 @@ import { Box } from '@vtex/brand-ui'
 
 import DocumentationCard from 'components/documentation-card'
 import { documentationData, updatesData } from 'utils/constants'
+import { useIntl } from 'react-intl'
 
 import styles from './styles'
 
 const DropdownMenu = () => {
+  const intl = useIntl()
   return (
     <Box sx={styles.outerContainer}>
       <Box sx={styles.innerContainer} data-cy="dropdown-menu">
@@ -13,7 +15,7 @@ const DropdownMenu = () => {
           sx={styles.documentationContainer}
           data-cy="dropdown-menu-first-section"
         >
-          {documentationData.map((card) => (
+          {documentationData(intl).map((card) => (
             <DocumentationCard
               containerType="dropdown"
               key={card.title}
@@ -25,7 +27,7 @@ const DropdownMenu = () => {
           sx={styles.updatesContainer}
           data-cy="dropdown-menu-second-section"
         >
-          {updatesData.map((card) => (
+          {updatesData(intl).map((card) => (
             <DocumentationCard
               containerType="dropdown"
               key={card.title}
diff --git a/src/components/education-section/index.tsx b/src/components/education-section/index.tsx
index b25e01f2..30c39b78 100644
--- a/src/components/education-section/index.tsx
+++ b/src/components/education-section/index.tsx
@@ -5,40 +5,57 @@ import GithubIcon from 'components/icons/github-icon'
 import HelpCenterIcon from 'components/icons/helpcenter-icon'
 import CommunityIcon from 'components/icons/community-icon'
 import { getGithubURL, getHelpCenterURL, getCommunityURL } from 'utils/get-url'
-import { getMessages } from 'utils/get-messages'
 
 import styles from './styles'
-
-const messages = getMessages()
-
-const educationChannels = [
-  {
-    title: messages['landing_page_education_github.title'],
-    description: messages['landing_page_education_github.description'],
-    textLink: messages['landing_page_education_github.textLink'],
-    link: getGithubURL(),
-    icon: GithubIcon,
-  },
-  {
-    title: messages['landing_page_education_help_center.title'],
-    description: messages['landing_page_education_help_center.description'],
-    textLink: messages['landing_page_education_help_center.textLink'],
-    link: getHelpCenterURL(),
-    icon: HelpCenterIcon,
-  },
-  {
-    title: messages['landing_page_education_community.title'],
-    description: messages['landing_page_education_community.description'],
-    textLink: messages['landing_page_education_community.textLink'],
-    link: getCommunityURL(),
-    icon: CommunityIcon,
-  },
-]
+import { useIntl } from 'react-intl'
 
 const EducationSection = () => {
+  const intl = useIntl()
+
+  const educationChannels = [
+    {
+      title: intl.formatMessage({ id: 'landing_page_education_github.title' }),
+      description: intl.formatMessage({
+        id: 'landing_page_education_github.description',
+      }),
+      textLink: intl.formatMessage({
+        id: 'landing_page_education_github.textLink',
+      }),
+      link: getGithubURL(),
+      icon: GithubIcon,
+    },
+    {
+      title: intl.formatMessage({
+        id: 'landing_page_education_developer_portal.title',
+      }),
+      description: intl.formatMessage({
+        id: 'landing_page_education_developer_portal.description',
+      }),
+      textLink: intl.formatMessage({
+        id: 'landing_page_education_developer_portal.textLink',
+      }),
+      link: getHelpCenterURL(),
+      icon: HelpCenterIcon,
+    },
+    {
+      title: intl.formatMessage({
+        id: 'landing_page_education_community.title',
+      }),
+      description: intl.formatMessage({
+        id: 'landing_page_education_community.description',
+      }),
+      textLink: intl.formatMessage({
+        id: 'landing_page_education_community.textLink',
+      }),
+      link: getCommunityURL(),
+      icon: CommunityIcon,
+    },
+  ]
   return (
     <Box sx={styles.container}>
-      <Text sx={styles.title}>{messages['landing_page_education.title']}</Text>
+      <Text sx={styles.title}>
+        {intl.formatMessage({ id: 'landing_page_education.title' })}
+      </Text>
       <Flex sx={styles.channelsContainer}>
         {educationChannels.map((channel) => (
           <EducationChannel
diff --git a/src/components/feedback-modal/index.tsx b/src/components/feedback-modal/index.tsx
index 077f016d..ab910994 100644
--- a/src/components/feedback-modal/index.tsx
+++ b/src/components/feedback-modal/index.tsx
@@ -7,8 +7,8 @@ import {
   useRef,
   useState,
 } from 'react'
-import { getMessages } from 'utils/get-messages'
 import useClickOutside from 'utils/hooks/useClickOutside'
+import { useIntl } from 'react-intl'
 
 import { arrowDirectionStyle, modalPositionStyle } from './functions'
 import styles from './styles'
@@ -17,8 +17,6 @@ export interface ModalProps {
   liked?: boolean
 }
 
-const messages = getMessages()
-
 const FeedBackModalArrow = (props: IconProps) => {
   return (
     <Icon
@@ -54,6 +52,7 @@ const FeedBackModal = ({
   const cardRef = useRef<HTMLDivElement>()
   const { body, documentElement } = document
   const [comment, setComment] = useState('')
+  const intl = useIntl()
 
   const closeModal = () => {
     const feedback = modalState?.liked
@@ -91,7 +90,11 @@ const FeedBackModal = ({
           }
           data-cy="feedback-modal"
         >
-          <Text sx={styles.title}>{messages['feedback_modal.title']}</Text>
+          <Text sx={styles.title}>
+            {intl.formatMessage({
+              id: 'feedback_modal.title',
+            })}
+          </Text>
           <Textarea
             id="feedback-modal-input"
             sx={styles.textarea}
@@ -105,7 +108,9 @@ const FeedBackModal = ({
             sx={styles.button}
             variant="secondary"
           >
-            {messages['feedback_modal.button']}
+            {intl.formatMessage({
+              id: 'feedback_modal.button',
+            })}
           </Button>
         </Box>
         <FeedBackModalArrow
diff --git a/src/components/feedback-section/index.tsx b/src/components/feedback-section/index.tsx
index ef6e457c..ecb6b6ae 100644
--- a/src/components/feedback-section/index.tsx
+++ b/src/components/feedback-section/index.tsx
@@ -3,14 +3,12 @@ import EditIcon from 'components/icons/edit-icon'
 import LikeIcon from 'components/icons/like-icon'
 import LikeSelectedIcon from 'components/icons/like-selected-icon'
 import { useEffect, useRef, useState } from 'react'
-import { getMessages } from 'utils/get-messages'
 import { setButtonStyle } from './functions'
 import FeedbackModal, { ModalProps } from 'components/feedback-modal'
+import { useIntl, FormattedMessage } from 'react-intl'
 
 import styles from './styles'
 
-const messages = getMessages()
-
 interface DocPath {
   slug?: string
   docPath?: string
@@ -24,6 +22,7 @@ const FeedbackSection = ({ slug, docPath, suggestEdits = true }: DocPath) => {
   })
   const likeButton = useRef<HTMLElement>()
   const dislikeButton = useRef<HTMLElement>()
+  const intl = useIntl()
 
   useEffect(() => {
     changeModalState({ modalOpen: false })
@@ -53,14 +52,14 @@ const FeedbackSection = ({ slug, docPath, suggestEdits = true }: DocPath) => {
     })
   }
 
-  const urlToEdit = `https://github.com/vtexdocs/dev-portal-content/edit/main/${docPath}`
+  const urlToEdit = `https://github.com/vtexdocs/help-center-content/edit/main/${docPath}`
 
   return (
     <Flex sx={styles.container} data-cy="feedback-section">
       <Text sx={styles.question}>
         {feedback !== undefined
-          ? messages['feedback_section.response']
-          : messages['feedback_section.question']}
+          ? intl.formatMessage({ id: 'feedback_section.response' })
+          : intl.formatMessage({ id: 'feedback_section.question' })}
       </Text>
       <Flex sx={styles.likeContainer}>
         <Flex
@@ -74,7 +73,9 @@ const FeedbackSection = ({ slug, docPath, suggestEdits = true }: DocPath) => {
           ) : (
             <LikeSelectedIcon size={24} sx={styles.likeIcon} />
           )}
-          <Text>{messages['feedback_section.positive']}</Text>
+          <Text>
+            <FormattedMessage id="feedback_section.positive" />
+          </Text>
         </Flex>
         <Flex
           ref={dislikeButton}
@@ -86,7 +87,9 @@ const FeedbackSection = ({ slug, docPath, suggestEdits = true }: DocPath) => {
           ) : (
             <LikeSelectedIcon size={24} sx={styles.dislikeIcon} />
           )}
-          <Text>{messages['feedback_section.negative']}</Text>
+          <Text>
+            <FormattedMessage id="feedback_section.negative" />
+          </Text>
         </Flex>
       </Flex>
       {suggestEdits && (
@@ -97,7 +100,9 @@ const FeedbackSection = ({ slug, docPath, suggestEdits = true }: DocPath) => {
           sx={styles.editContainer}
         >
           <EditIcon size={24} sx={styles.editIcon} />
-          <Text>{messages['feedback_section.edit']}</Text>
+          <Text>
+            <FormattedMessage id="feedback_section.edit" />
+          </Text>
         </Link>
       )}
       {modalState.modalOpen ? (
diff --git a/src/components/footer/index.tsx b/src/components/footer/index.tsx
index d0a5b3d3..7d128551 100644
--- a/src/components/footer/index.tsx
+++ b/src/components/footer/index.tsx
@@ -1,5 +1,4 @@
 import { Box, FooterLanding } from '@vtex/brand-ui'
-import { getMessages } from 'utils/get-messages'
 import styles from './styles'
 import {
   getGithubURL,
@@ -7,43 +6,53 @@ import {
   getCommunityURL,
   getFeedbackURL,
 } from 'utils/get-url'
+import { useIntl } from 'react-intl'
 
-const messages = getMessages()
+const Footer = () => {
+  const intl = useIntl()
 
-const links = [
-  {
-    message: messages['landing_page_footer_github.message'],
-    to: () => getGithubURL(),
-  },
-  {
-    message: messages['landing_page_footer_help_center.message'],
-    to: () => getHelpCenterURL(),
-  },
-  {
-    message: messages['landing_page_footer_community.message'],
-    to: () => getCommunityURL(),
-  },
-  {
-    message: messages['landing_page_footer_feedback.message'],
-    to: () => getFeedbackURL(),
-  },
-]
-
-const Footer = () => (
-  <Box sx={styles.footerLinks}>
-    <FooterLanding>
-      {links.map((link, index) => (
-        <FooterLanding.Link
-          key={index}
-          href={link.to()}
-          target="_blank"
-          sx={index % 2 ? styles.footerRightLinks : styles.footerLeftLinks}
-        >
-          {link.message}
-        </FooterLanding.Link>
-      ))}
-    </FooterLanding>
-  </Box>
-)
+  const links = [
+    {
+      message: intl.formatMessage({
+        id: 'landing_page_footer_github.message',
+      }),
+      to: () => getGithubURL(),
+    },
+    {
+      message: intl.formatMessage({
+        id: 'landing_page_footer_help_center.message',
+      }),
+      to: () => getHelpCenterURL(),
+    },
+    {
+      message: intl.formatMessage({
+        id: 'landing_page_footer_community.message',
+      }),
+      to: () => getCommunityURL(),
+    },
+    {
+      message: intl.formatMessage({
+        id: 'landing_page_footer_feedback.message',
+      }),
+      to: () => getFeedbackURL(),
+    },
+  ]
+  return (
+    <Box sx={styles.footerLinks}>
+      <FooterLanding>
+        {links.map((link, index) => (
+          <FooterLanding.Link
+            key={index}
+            href={link.to()}
+            target="_blank"
+            sx={index % 2 ? styles.footerRightLinks : styles.footerLeftLinks}
+          >
+            {link.message}
+          </FooterLanding.Link>
+        ))}
+      </FooterLanding>
+    </Box>
+  )
+}
 
 export default Footer
diff --git a/src/components/header/hamburger-menu.tsx b/src/components/header/hamburger-menu.tsx
index 35e5a2fa..85fcf19b 100644
--- a/src/components/header/hamburger-menu.tsx
+++ b/src/components/header/hamburger-menu.tsx
@@ -13,6 +13,7 @@ import SidebarSection, { SidebarSectionProps } from 'components/sidebar-section'
 import { useContext } from 'react'
 import { SidebarContext } from 'utils/contexts/sidebar'
 import SearchInput from 'components/search-input'
+import { useIntl } from 'react-intl'
 
 const HamburgerMenu = () => {
   const {
@@ -22,6 +23,7 @@ const HamburgerMenu = () => {
     setActiveSidebarTab,
     setSidebarSectionHidden,
   } = useContext(SidebarContext)
+  const intl = useIntl()
 
   return (
     <Header.ActionButton>
@@ -36,7 +38,7 @@ const HamburgerMenu = () => {
                 sx={styles.documentationContainer}
                 data-cy="dropdown-menu-first-section"
               >
-                {documentationData.map((card) => (
+                {documentationData(intl).map((card) => (
                   <Box sx={styles.innerCardContainer} key={card.title}>
                     <DocumentationCard containerType="mobile" {...card} />
                     <Button
@@ -61,7 +63,7 @@ const HamburgerMenu = () => {
                 sx={styles.updatesContainer}
                 data-cy="dropdown-menu-second-section"
               >
-                {updatesData.map((card) => (
+                {updatesData(intl).map((card) => (
                   <Box sx={styles.innerCardContainer} key={card.title}>
                     <DocumentationCard containerType="mobile" {...card} />
                     <Button
diff --git a/src/components/header/index.tsx b/src/components/header/index.tsx
index c40491f7..47c79c76 100644
--- a/src/components/header/index.tsx
+++ b/src/components/header/index.tsx
@@ -10,18 +10,18 @@ import { useRouter } from 'next/router'
 
 import HamburgerMenu from './hamburger-menu'
 import DropdownMenu from 'components/dropdown-menu'
-import VTEXDevportalIcon from 'components/icons/vtex-devportal-icon'
+import VTEXHelpCenterIcon from 'components/icons/vtex-helpcenter-icon'
 import GridIcon from 'components/icons/grid-icon'
 import LongArrowIcon from 'components/icons/long-arrow-icon'
 
 import { getFeedbackURL } from 'utils/get-url'
-import { getMessages } from 'utils/get-messages'
 
 import SearchInput from 'components/search-input'
 import AnnouncementBar from 'components/announcement-bar'
 
 import styles from './styles'
 import { PreviewContext } from 'utils/contexts/preview'
+import { FormattedMessage } from 'react-intl'
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const Header = () => {
@@ -35,8 +35,6 @@ const Header = () => {
   const [showDropdown, setShowDropdown] = useState(false)
   const headerElement = useRef<HTMLElement>()
 
-  const messages = getMessages()
-
   useEffect(() => {
     const body = document.body
 
@@ -117,7 +115,7 @@ const Header = () => {
           href="/"
           sx={styles.headerBrandLink}
         >
-          <VTEXDevportalIcon sx={styles.logoSize} />
+          <VTEXHelpCenterIcon sx={styles.logoSize} />
         </VtexLink>
 
         <Box sx={styles.searchContainer}>
@@ -133,7 +131,7 @@ const Header = () => {
             <Flex sx={styles.dropdownButton(showDropdown)}>
               <GridIcon />
               <Text sx={styles.rightButtonsText} data-cy="docs-dropdown">
-                {messages['landing_page_header_docs.message']}
+                <FormattedMessage id="landing_page_header_docs.message" />
               </Text>
             </Flex>
 
@@ -147,7 +145,7 @@ const Header = () => {
           >
             <LongArrowIcon />
             <Text sx={styles.rightButtonsText}>
-              {messages['landing_page_header_feedback.message']}
+              <FormattedMessage id="landing_page_header_feedback.message" />
             </Text>
           </VtexLink>
         </HeaderBrand.RightLinks>
diff --git a/src/components/icons/vtex-devportal-icon.tsx b/src/components/icons/vtex-devportal-icon.tsx
deleted file mode 100644
index aa92f424..00000000
--- a/src/components/icons/vtex-devportal-icon.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import type { IconProps } from '@vtex/brand-ui'
-import { Icon } from '@vtex/brand-ui'
-
-const VTEXDevportalIcon = (props: IconProps) => (
-  <Icon
-    {...props}
-    viewBox="0 0 204 32"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <g clipPath="url(#clip0_2044_123231)">
-      <path
-        d="M33.5348 0.751221H6.47098C4.37195 0.751221 3.01813 2.95123 3.99934 4.77234L6.70696 9.82013H1.80094C0.80732 9.82013 0 10.6146 0 11.5924C0 11.8857 0.0745218 12.1668 0.211145 12.4235L8.91778 28.6424C9.38975 29.5102 10.4827 29.8402 11.3522 29.3757C11.6751 29.2046 11.9359 28.9479 12.0974 28.6424L14.4572 24.2668L17.4257 29.7913C18.469 31.7346 21.3008 31.7346 22.3441 29.7913L35.9319 4.67456C36.8883 2.89011 35.5718 0.751221 33.5348 0.751221ZM21.3753 11.4824L15.5254 22.3235C15.2149 22.8979 14.4821 23.1179 13.8983 22.8124C13.6872 22.7024 13.5133 22.5313 13.4015 22.3235L7.61365 11.5312C7.30314 10.9568 7.5267 10.2357 8.11046 9.93013C8.28434 9.84457 8.47065 9.79568 8.66937 9.79568H20.3445C20.9903 9.79568 21.512 10.309 21.512 10.9446C21.512 11.1279 21.4623 11.3235 21.3753 11.4824ZM62.3251 12.4112H59.3691V22.3968C59.3691 22.5802 59.2076 22.739 59.0213 22.739H56.7359C56.5496 22.739 56.3882 22.5802 56.3882 22.3968V12.4112H53.4073C53.221 12.4235 53.072 12.2768 53.0595 12.0935V12.0812V10.309C53.0595 10.1257 53.2086 9.97902 53.3949 9.97902H53.4073H62.3251C62.5114 9.96679 62.6853 10.1135 62.6853 10.309V12.0812C62.6729 12.2646 62.5114 12.4112 62.3251 12.4112ZM71.8266 22.6657C71.218 22.7513 70.1871 22.8857 68.3117 22.8857C66.0636 22.8857 64.0764 22.3235 64.0764 19.1946V13.499C64.0764 10.3824 66.076 9.83235 68.3241 9.83235C70.1996 9.83235 71.218 9.96679 71.8266 10.0524C72.075 10.089 72.1744 10.1746 72.1744 10.3946V11.9957C72.1744 12.179 72.0129 12.3379 71.8266 12.3379H68.1502C67.3305 12.3379 67.0324 12.6068 67.0324 13.499V15.0635H71.6776C71.8639 15.0635 72.0253 15.2224 72.0253 15.4057V17.0313C72.0253 17.2146 71.8639 17.3735 71.6776 17.3735H67.0324V19.1946C67.0324 20.0868 67.3305 20.3557 68.1502 20.3557H71.8266C72.0129 20.3557 72.1744 20.5146 72.1744 20.6979V22.299C72.1744 22.519 72.075 22.629 71.8266 22.6657ZM84.9797 22.7268H82.21C81.9864 22.7268 81.8746 22.6535 81.7629 22.4702L79.3533 18.7179L77.1798 22.3846C77.0556 22.5924 76.9314 22.7268 76.7451 22.7268H74.1616C73.9877 22.7268 73.9008 22.629 73.9008 22.5068C73.9008 22.4702 73.9132 22.4213 73.9381 22.3846L77.7138 16.1879L73.9008 10.309C73.876 10.2724 73.8635 10.2479 73.8635 10.2112C73.876 10.0768 73.9877 9.97902 74.1244 9.99124H76.9314C77.1177 9.99124 77.2667 10.1624 77.3661 10.3212L79.6017 13.7801L81.7629 10.3212C81.8498 10.1624 82.0113 9.99124 82.1976 9.99124H84.781C84.9176 9.99124 85.0294 10.089 85.0418 10.2112C85.0418 10.2479 85.0294 10.2846 85.0046 10.309L81.2039 16.2246L85.166 22.3846C85.1909 22.4335 85.2157 22.4946 85.2157 22.5557C85.2033 22.6657 85.1163 22.7268 84.9797 22.7268ZM51.3455 10.0157C51.3704 10.0157 51.3828 10.0157 51.4076 10.0279C51.5567 10.0646 51.6436 10.199 51.6064 10.3457C51.6064 10.3457 48.5882 20.8813 48.5385 21.0157C48.1287 22.2379 47.0605 22.8735 45.8558 22.8735C44.5765 22.8735 43.5828 22.2746 43.173 21.0157C43.1357 20.9057 40.0431 10.3457 40.0431 10.3457C40.0431 10.3212 40.0306 10.309 40.0306 10.2846C40.0306 10.1379 40.1548 10.0157 40.3039 10.0157H42.8004C42.9246 10.0157 43.0364 10.1012 43.0612 10.2235L45.5949 19.439C45.6322 19.6224 45.6819 19.6957 45.8433 19.6957C46.0048 19.6957 46.0545 19.6224 46.0918 19.439L48.6255 10.2235C48.6503 10.1012 48.7621 10.0157 48.8863 10.0157H51.3455Z"
-        fill="#E31C58"
-      />
-    </g>
-    <path
-      d="M98.7088 0.751221H97.2158V31.2488H98.7088V0.751221Z"
-      fill="#E31C58"
-    />
-    <path
-      d="M112.221 21.5H116.037C120.393 21.5 122.661 19.34 122.661 15.362C122.661 11.402 120.393 9.26 116.037 9.26H112.221V21.5ZM114.003 19.988V10.772H115.947C119.385 10.772 120.789 12.464 120.789 15.362C120.789 18.278 119.385 19.988 115.947 19.988H114.003ZM128.357 21.68C130.481 21.68 131.885 20.618 132.227 18.89L130.697 18.512C130.463 19.736 129.581 20.294 128.411 20.294C126.683 20.294 125.891 19.088 125.855 17.162H132.263C132.263 17.072 132.281 17.036 132.281 16.73C132.281 13.958 130.841 12.41 128.429 12.41C125.693 12.41 124.127 14.39 124.127 17.18C124.127 19.88 125.603 21.68 128.357 21.68ZM125.945 16.01C126.197 14.552 127.025 13.76 128.339 13.76C129.707 13.76 130.463 14.624 130.517 16.01H125.945ZM136.207 21.5H138.817L141.805 12.608H140.023L137.575 20.366L135.145 12.608H133.255L136.207 21.5ZM147.025 21.68C149.149 21.68 150.553 20.618 150.895 18.89L149.365 18.512C149.131 19.736 148.249 20.294 147.079 20.294C145.351 20.294 144.559 19.088 144.523 17.162H150.931C150.931 17.072 150.949 17.036 150.949 16.73C150.949 13.958 149.509 12.41 147.097 12.41C144.361 12.41 142.795 14.39 142.795 17.18C142.795 19.88 144.271 21.68 147.025 21.68ZM144.613 16.01C144.865 14.552 145.693 13.76 147.007 13.76C148.375 13.76 149.131 14.624 149.185 16.01H144.613ZM153.102 21.5H154.758V9.26H153.102V21.5ZM161.425 21.68C163.873 21.68 165.799 20.078 165.799 17.054C165.799 14.012 163.873 12.41 161.425 12.41C158.995 12.41 157.033 14.012 157.033 17.054C157.033 20.078 158.995 21.68 161.425 21.68ZM158.779 17.054C158.779 15.02 159.841 13.886 161.425 13.886C163.027 13.886 164.071 15.02 164.071 17.054C164.071 19.07 163.027 20.222 161.425 20.222C159.841 20.222 158.779 19.07 158.779 17.054ZM167.991 24.848H169.647V18.854H169.665C170.061 21.032 171.195 21.68 172.761 21.68C174.813 21.68 176.433 20.186 176.433 17.108C176.433 14.012 174.741 12.446 172.653 12.446C171.051 12.446 170.133 13.346 169.665 14.984H169.629V12.608H167.991V24.848ZM169.683 17.108C169.683 14.966 170.745 13.886 172.185 13.886C173.643 13.886 174.687 14.948 174.687 17.108C174.687 19.196 173.679 20.222 172.185 20.222C170.709 20.222 169.683 19.196 169.683 17.108ZM182.427 21.68C184.551 21.68 185.955 20.618 186.297 18.89L184.767 18.512C184.533 19.736 183.651 20.294 182.481 20.294C180.753 20.294 179.961 19.088 179.925 17.162H186.333C186.333 17.072 186.351 17.036 186.351 16.73C186.351 13.958 184.911 12.41 182.499 12.41C179.763 12.41 178.197 14.39 178.197 17.18C178.197 19.88 179.673 21.68 182.427 21.68ZM180.015 16.01C180.267 14.552 181.095 13.76 182.409 13.76C183.777 13.76 184.533 14.624 184.587 16.01H180.015ZM188.505 21.5H190.161V16.784C190.161 15.056 191.079 14.084 192.717 14.084C193.059 14.084 193.473 14.12 193.725 14.174L193.635 12.518C193.383 12.464 193.005 12.428 192.717 12.428C191.421 12.428 190.593 13.004 190.107 15.182H190.053V12.608H188.505V21.5ZM198.692 21.68C200.996 21.68 202.454 20.636 202.454 18.71C202.454 16.892 200.942 16.532 199.448 16.28L198.134 16.082C197.27 15.938 196.676 15.722 196.676 14.966C196.676 14.156 197.396 13.724 198.404 13.724C199.556 13.724 200.33 14.282 200.474 15.452L202.112 15.092C201.896 13.328 200.348 12.428 198.476 12.428C196.478 12.428 195.002 13.418 195.002 15.092C195.002 16.694 196.28 17.216 197.504 17.414L198.944 17.63C200.078 17.81 200.762 18.062 200.762 18.908C200.762 19.808 200.042 20.348 198.656 20.348C197.414 20.348 196.55 19.736 196.406 18.368L194.696 18.728C194.84 20.672 196.442 21.68 198.692 21.68Z"
-      fill="#E31C58"
-    />
-    <defs>
-      <clipPath id="clip0_2044_123231">
-        <rect
-          width="85.2157"
-          height="30.4976"
-          fill="white"
-          transform="translate(0 0.751221)"
-        />
-      </clipPath>
-    </defs>
-  </Icon>
-)
-
-export default VTEXDevportalIcon
diff --git a/src/components/icons/vtex-helpcenter-icon.tsx b/src/components/icons/vtex-helpcenter-icon.tsx
new file mode 100644
index 00000000..cb990aa2
--- /dev/null
+++ b/src/components/icons/vtex-helpcenter-icon.tsx
@@ -0,0 +1,23 @@
+import type { IconProps } from '@vtex/brand-ui'
+import { Icon } from '@vtex/brand-ui'
+
+const VTEXHelpCenterIcon = (props: IconProps) => (
+  <Icon
+    {...props}
+    viewBox="0 0 208 32"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M33.5348 0H6.47098C4.37195 0 3.01813 2.2 3.99934 4.02112L6.70696 9.06891H1.80094C0.80732 9.06891 0 9.86335 0 10.8411C0 11.1345 0.0745218 11.4156 0.211145 11.6722L8.91778 27.8912C9.38975 28.7589 10.4827 29.0889 11.3522 28.6245C11.6751 28.4534 11.9359 28.1967 12.0974 27.8912L14.4572 23.5156L17.4257 29.0401C18.469 30.9834 21.3008 30.9834 22.3441 29.0401L35.9319 3.92334C36.8883 2.13889 35.5718 0 33.5348 0ZM21.3753 10.7311L15.5254 21.5723C15.2149 22.1467 14.4821 22.3667 13.8983 22.0612C13.6872 21.9512 13.5133 21.78 13.4015 21.5723L7.61365 10.78C7.30314 10.2056 7.5267 9.48446 8.11046 9.17891C8.28434 9.09335 8.47065 9.04446 8.66937 9.04446H20.3445C20.9903 9.04446 21.512 9.5578 21.512 10.1934C21.512 10.3767 21.4623 10.5722 21.3753 10.7311ZM62.3251 11.66H59.3691V21.6456C59.3691 21.8289 59.2076 21.9878 59.0213 21.9878H56.7359C56.5496 21.9878 56.3882 21.8289 56.3882 21.6456V11.66H53.4073C53.221 11.6722 53.072 11.5256 53.0595 11.3422V11.33V9.5578C53.0595 9.37446 53.2086 9.2278 53.3949 9.2278H53.4073H62.3251C62.5114 9.21557 62.6853 9.36224 62.6853 9.5578V11.33C62.6729 11.5134 62.5114 11.66 62.3251 11.66ZM71.8266 21.9145C71.218 22 70.1871 22.1345 68.3117 22.1345C66.0636 22.1345 64.0764 21.5723 64.0764 18.4434V12.7478C64.0764 9.63113 66.076 9.08113 68.3241 9.08113C70.1996 9.08113 71.218 9.21557 71.8266 9.30113C72.075 9.3378 72.1744 9.42335 72.1744 9.64335V11.2445C72.1744 11.4278 72.0129 11.5867 71.8266 11.5867H68.1502C67.3305 11.5867 67.0324 11.8556 67.0324 12.7478V14.3123H71.6776C71.8639 14.3123 72.0253 14.4711 72.0253 14.6545V16.28C72.0253 16.4634 71.8639 16.6223 71.6776 16.6223H67.0324V18.4434C67.0324 19.3356 67.3305 19.6045 68.1502 19.6045H71.8266C72.0129 19.6045 72.1744 19.7634 72.1744 19.9467V21.5478C72.1744 21.7678 72.075 21.8778 71.8266 21.9145ZM84.9797 21.9756H82.21C81.9864 21.9756 81.8746 21.9023 81.7629 21.7189L79.3533 17.9667L77.1798 21.6334C77.0556 21.8412 76.9314 21.9756 76.7451 21.9756H74.1616C73.9877 21.9756 73.9008 21.8778 73.9008 21.7556C73.9008 21.7189 73.9132 21.67 73.9381 21.6334L77.7138 15.4367L73.9008 9.5578C73.876 9.52113 73.8636 9.49669 73.8636 9.46002C73.876 9.32557 73.9878 9.2278 74.1244 9.24002H76.9314C77.1177 9.24002 77.2667 9.41113 77.3661 9.57002L79.6017 13.0289L81.7629 9.57002C81.8498 9.41113 82.0113 9.24002 82.1976 9.24002H84.781C84.9176 9.24002 85.0294 9.3378 85.0418 9.46002C85.0418 9.49669 85.0294 9.53335 85.0046 9.5578L81.2039 15.4734L85.166 21.6334C85.1909 21.6823 85.2157 21.7434 85.2157 21.8045C85.2033 21.9145 85.1163 21.9756 84.9797 21.9756ZM51.3455 9.26446C51.3704 9.26446 51.3828 9.26446 51.4076 9.27669C51.5567 9.31335 51.6436 9.4478 51.6064 9.59446C51.6064 9.59446 48.5882 20.13 48.5385 20.2645C48.1287 21.4867 47.0605 22.1223 45.8558 22.1223C44.5765 22.1223 43.5828 21.5234 43.173 20.2645C43.1357 20.1545 40.0431 9.59446 40.0431 9.59446C40.0431 9.57002 40.0306 9.5578 40.0306 9.53335C40.0306 9.38669 40.1548 9.26446 40.3039 9.26446H42.8004C42.9246 9.26446 43.0364 9.35002 43.0612 9.47224L45.5949 18.6878C45.6322 18.8711 45.6819 18.9445 45.8433 18.9445C46.0048 18.9445 46.0545 18.8711 46.0917 18.6878L48.6255 9.47224C48.6503 9.35002 48.7621 9.26446 48.8863 9.26446H51.3455Z"
+      fill="#E31C58"
+    />
+    <path d="M98.7078 0H97.2148V30.4976H98.7078V0Z" fill="#E31C58" />
+    <path
+      d="M120.139 20.748V8.50805H121.921V20.748H120.139ZM112.219 20.748V8.50805H114.001V20.748H112.219ZM112.741 15.222V13.746H120.931V15.222H112.741ZM128.144 20.928C127.46 20.928 126.854 20.82 126.326 20.604C125.798 20.388 125.354 20.082 124.994 19.686C124.634 19.29 124.364 18.816 124.184 18.264C124.004 17.712 123.914 17.1 123.914 16.428C123.914 15.492 124.082 14.67 124.418 13.962C124.754 13.242 125.24 12.678 125.876 12.27C126.524 11.862 127.304 11.658 128.216 11.658C129.02 11.658 129.71 11.826 130.286 12.162C130.862 12.498 131.3 12.99 131.6 13.638C131.912 14.274 132.068 15.054 132.068 15.978C132.068 16.134 132.062 16.236 132.05 16.284C132.05 16.32 132.05 16.362 132.05 16.41H125.408V15.258H130.754L130.304 15.708C130.34 15.156 130.28 14.682 130.124 14.286C129.968 13.878 129.722 13.566 129.386 13.35C129.05 13.122 128.63 13.008 128.126 13.008C127.586 13.008 127.13 13.14 126.758 13.404C126.398 13.656 126.122 14.028 125.93 14.52C125.738 15 125.642 15.594 125.642 16.302C125.642 16.806 125.69 17.256 125.786 17.652C125.894 18.048 126.05 18.39 126.254 18.678C126.47 18.954 126.734 19.17 127.046 19.326C127.37 19.47 127.754 19.542 128.198 19.542C128.594 19.542 128.948 19.482 129.26 19.362C129.572 19.23 129.836 19.032 130.052 18.768C130.268 18.504 130.412 18.168 130.484 17.76L132.014 18.138C131.906 18.714 131.678 19.212 131.33 19.632C130.994 20.04 130.556 20.358 130.016 20.586C129.476 20.814 128.852 20.928 128.144 20.928ZM134.221 20.748V8.50805H135.877V20.748H134.221ZM138.44 24.096V11.856H140.078V14.232H140.114C140.354 13.416 140.708 12.792 141.176 12.36C141.656 11.916 142.298 11.694 143.102 11.694C143.63 11.694 144.122 11.796 144.578 12C145.034 12.192 145.43 12.48 145.766 12.864C146.114 13.248 146.384 13.734 146.576 14.322C146.78 14.898 146.882 15.576 146.882 16.356C146.882 17.376 146.72 18.228 146.396 18.912C146.072 19.584 145.628 20.088 145.064 20.424C144.512 20.76 143.894 20.928 143.21 20.928C142.694 20.928 142.226 20.844 141.806 20.676C141.386 20.508 141.032 20.22 140.744 19.812C140.456 19.392 140.246 18.822 140.114 18.102H140.096V24.096H138.44ZM142.634 19.47C143.138 19.47 143.576 19.356 143.948 19.128C144.32 18.9 144.608 18.558 144.812 18.102C145.028 17.634 145.136 17.052 145.136 16.356C145.136 15.816 145.076 15.348 144.956 14.952C144.836 14.544 144.662 14.208 144.434 13.944C144.206 13.668 143.936 13.464 143.624 13.332C143.324 13.2 142.994 13.134 142.634 13.134C142.154 13.134 141.722 13.254 141.338 13.494C140.966 13.734 140.672 14.094 140.456 14.574C140.24 15.042 140.132 15.636 140.132 16.356C140.132 16.872 140.192 17.328 140.312 17.724C140.432 18.108 140.6 18.432 140.816 18.696C141.044 18.96 141.308 19.158 141.608 19.29C141.92 19.41 142.262 19.47 142.634 19.47ZM158.704 20.946C157.888 20.946 157.138 20.808 156.454 20.532C155.782 20.256 155.194 19.848 154.69 19.308C154.198 18.768 153.814 18.108 153.538 17.328C153.274 16.548 153.142 15.654 153.142 14.646C153.142 13.638 153.28 12.744 153.556 11.964C153.832 11.172 154.222 10.512 154.726 9.98405C155.242 9.44405 155.848 9.03605 156.544 8.76005C157.24 8.48405 158.008 8.34605 158.848 8.34605C159.748 8.34605 160.558 8.52605 161.278 8.88605C161.998 9.23405 162.598 9.74405 163.078 10.416C163.558 11.076 163.876 11.88 164.032 12.828L162.25 13.188C162.118 12.456 161.896 11.85 161.584 11.37C161.284 10.89 160.894 10.536 160.414 10.308C159.934 10.068 159.376 9.94805 158.74 9.94805C157.972 9.94805 157.306 10.134 156.742 10.506C156.178 10.878 155.74 11.412 155.428 12.108C155.116 12.804 154.96 13.65 154.96 14.646C154.96 15.618 155.116 16.458 155.428 17.166C155.74 17.862 156.178 18.402 156.742 18.786C157.318 19.158 157.984 19.344 158.74 19.344C159.376 19.344 159.946 19.218 160.45 18.966C160.954 18.702 161.362 18.306 161.674 17.778C161.998 17.25 162.202 16.584 162.286 15.78L164.086 16.194C163.966 17.214 163.654 18.078 163.15 18.786C162.658 19.494 162.028 20.034 161.26 20.406C160.492 20.766 159.64 20.946 158.704 20.946ZM169.751 20.928C169.067 20.928 168.461 20.82 167.933 20.604C167.405 20.388 166.961 20.082 166.601 19.686C166.241 19.29 165.971 18.816 165.791 18.264C165.611 17.712 165.521 17.1 165.521 16.428C165.521 15.492 165.689 14.67 166.025 13.962C166.361 13.242 166.847 12.678 167.483 12.27C168.131 11.862 168.911 11.658 169.823 11.658C170.627 11.658 171.317 11.826 171.893 12.162C172.469 12.498 172.907 12.99 173.207 13.638C173.519 14.274 173.675 15.054 173.675 15.978C173.675 16.134 173.669 16.236 173.657 16.284C173.657 16.32 173.657 16.362 173.657 16.41H167.015V15.258H172.361L171.911 15.708C171.947 15.156 171.887 14.682 171.731 14.286C171.575 13.878 171.329 13.566 170.993 13.35C170.657 13.122 170.237 13.008 169.733 13.008C169.193 13.008 168.737 13.14 168.365 13.404C168.005 13.656 167.729 14.028 167.537 14.52C167.345 15 167.249 15.594 167.249 16.302C167.249 16.806 167.297 17.256 167.393 17.652C167.501 18.048 167.657 18.39 167.861 18.678C168.077 18.954 168.341 19.17 168.653 19.326C168.977 19.47 169.361 19.542 169.805 19.542C170.201 19.542 170.555 19.482 170.867 19.362C171.179 19.23 171.443 19.032 171.659 18.768C171.875 18.504 172.019 18.168 172.091 17.76L173.621 18.138C173.513 18.714 173.285 19.212 172.937 19.632C172.601 20.04 172.163 20.358 171.623 20.586C171.083 20.814 170.459 20.928 169.751 20.928ZM175.829 20.748V11.856H177.395V14.106H177.449C177.569 13.554 177.755 13.098 178.007 12.738C178.259 12.378 178.577 12.108 178.961 11.928C179.345 11.748 179.783 11.658 180.275 11.658C180.767 11.658 181.205 11.73 181.589 11.874C181.973 12.018 182.297 12.24 182.561 12.54C182.825 12.828 183.023 13.2 183.155 13.656C183.299 14.1 183.371 14.628 183.371 15.24V20.748H181.715V15.33C181.715 14.874 181.637 14.484 181.481 14.16C181.337 13.824 181.115 13.572 180.815 13.404C180.515 13.224 180.137 13.134 179.681 13.134C178.949 13.134 178.397 13.332 178.025 13.728C177.665 14.112 177.485 14.646 177.485 15.33V20.748H175.829ZM188.749 20.928C188.269 20.928 187.849 20.862 187.489 20.73C187.141 20.598 186.871 20.376 186.679 20.064C186.487 19.74 186.391 19.302 186.391 18.75V12.9L187.687 11.856H190.549V13.242H184.897V12.234C185.233 12.138 185.521 12.018 185.761 11.874C186.001 11.73 186.199 11.55 186.355 11.334C186.523 11.106 186.655 10.836 186.751 10.524C186.847 10.2 186.913 9.82205 186.949 9.39005H188.047V18.39C188.047 18.822 188.143 19.116 188.335 19.272C188.527 19.416 188.809 19.488 189.181 19.488C189.469 19.488 189.739 19.464 189.991 19.416C190.255 19.356 190.477 19.302 190.657 19.254L190.441 20.712C190.213 20.772 189.949 20.82 189.649 20.856C189.361 20.904 189.061 20.928 188.749 20.928ZM196.259 20.928C195.575 20.928 194.969 20.82 194.441 20.604C193.913 20.388 193.469 20.082 193.109 19.686C192.749 19.29 192.479 18.816 192.299 18.264C192.119 17.712 192.029 17.1 192.029 16.428C192.029 15.492 192.197 14.67 192.533 13.962C192.869 13.242 193.355 12.678 193.991 12.27C194.639 11.862 195.419 11.658 196.331 11.658C197.135 11.658 197.825 11.826 198.401 12.162C198.977 12.498 199.415 12.99 199.715 13.638C200.027 14.274 200.183 15.054 200.183 15.978C200.183 16.134 200.177 16.236 200.165 16.284C200.165 16.32 200.165 16.362 200.165 16.41H193.523V15.258H198.869L198.419 15.708C198.455 15.156 198.395 14.682 198.239 14.286C198.083 13.878 197.837 13.566 197.501 13.35C197.165 13.122 196.745 13.008 196.241 13.008C195.701 13.008 195.245 13.14 194.873 13.404C194.513 13.656 194.237 14.028 194.045 14.52C193.853 15 193.757 15.594 193.757 16.302C193.757 16.806 193.805 17.256 193.901 17.652C194.009 18.048 194.165 18.39 194.369 18.678C194.585 18.954 194.849 19.17 195.161 19.326C195.485 19.47 195.869 19.542 196.313 19.542C196.709 19.542 197.063 19.482 197.375 19.362C197.687 19.23 197.951 19.032 198.167 18.768C198.383 18.504 198.527 18.168 198.599 17.76L200.129 18.138C200.021 18.714 199.793 19.212 199.445 19.632C199.109 20.04 198.671 20.358 198.131 20.586C197.591 20.814 196.967 20.928 196.259 20.928ZM202.337 20.748V11.856H203.885V14.43H203.939C204.107 13.698 204.311 13.134 204.551 12.738C204.791 12.342 205.073 12.066 205.397 11.91C205.733 11.754 206.117 11.676 206.549 11.676C206.693 11.676 206.849 11.688 207.017 11.712C207.197 11.724 207.347 11.742 207.467 11.766L207.557 13.422C207.437 13.398 207.281 13.38 207.089 13.368C206.897 13.344 206.717 13.332 206.549 13.332C206.009 13.332 205.547 13.44 205.163 13.656C204.779 13.86 204.485 14.166 204.281 14.574C204.089 14.97 203.993 15.456 203.993 16.032V20.748H202.337Z"
+      fill="#E31D58"
+    />
+  </Icon>
+)
+
+export default VTEXHelpCenterIcon
diff --git a/src/components/last-updates-section/index.tsx b/src/components/last-updates-section/index.tsx
index f7a9c28b..bcffd32a 100644
--- a/src/components/last-updates-section/index.tsx
+++ b/src/components/last-updates-section/index.tsx
@@ -1,7 +1,7 @@
 import { Box, Text } from '@vtex/brand-ui'
 
 import LastUpdatesCard, { CardProps } from '../last-updates-card'
-import { getMessages } from 'utils/get-messages'
+import { useIntl } from 'react-intl'
 
 import styles from './styles'
 
@@ -15,12 +15,14 @@ const lastReleaseNote: CardProps = {
 }
 
 const LastUpdatesSection = () => {
-  const messages = getMessages()
+  const intl = useIntl()
 
   return (
     <Box sx={styles.sectionContainer}>
       <Text sx={styles.title}>
-        {messages['landing_page_last_updates.title']}
+        {intl.formatMessage({
+          id: 'landing_page_last_updates.title',
+        })}
       </Text>
       <Box sx={styles.cardsContainer}>
         <LastUpdatesCard {...lastReleaseNote} />
diff --git a/src/components/markdown-renderer/components.tsx b/src/components/markdown-renderer/components.tsx
index c9455308..dad033c3 100644
--- a/src/components/markdown-renderer/components.tsx
+++ b/src/components/markdown-renderer/components.tsx
@@ -12,7 +12,7 @@ import CodeBlock from 'components/code-block'
 import styles from './styles.module.css'
 import { Flex } from '@vtex/brand-ui'
 import LightBox from 'components/lightbox'
-import { messages } from 'utils/constants'
+import { FormattedMessage } from 'react-intl'
 
 type Component = {
   node: object
@@ -106,7 +106,8 @@ export default {
       <blockquote
         className={`${styles.blockquote} ${styles.blockquoteWarning}`}
       >
-        {messages['error_loading_image']} {props.src}
+        <FormattedMessage id="error_loading_image" />
+        {props.src}
       </blockquote>
     )
 
diff --git a/src/components/newsletter-section/index.tsx b/src/components/newsletter-section/index.tsx
index 864fdf2a..5fa742bd 100644
--- a/src/components/newsletter-section/index.tsx
+++ b/src/components/newsletter-section/index.tsx
@@ -5,11 +5,9 @@ import landingProduct from '../../../public/images/landing-product.png'
 import styles from 'components/newsletter-section/styles'
 import imgStyle from './styles.module.css'
 
-import { getMessages } from 'utils/get-messages'
+import { FormattedMessage } from 'react-intl'
 
 const NewsletterSection = () => {
-  const messages = getMessages()
-
   return (
     <Box sx={styles.section}>
       <Box sx={styles.newsletter}>
@@ -17,30 +15,8 @@ const NewsletterSection = () => {
           <Flex sx={styles.newsletterBackground}>
             <Flex sx={styles.newsletterBox}>
               <Text sx={styles.newsletterTitle}>
-                {messages['landing_page_newsletter.title']}
-              </Text>
-              {/* <Text sx={styles.newsletterDescription}>
-                {messages['landing_page_newsletter.description']}
+                <FormattedMessage id="landing_page_newsletter.title" />
               </Text>
-              <Flex sx={styles.newsletterInputContainer}>
-                <Box sx={styles.newsletterInputBox}>
-                  <Input
-                    sx={styles.newsletterInput}
-                    id="newsletter-mail"
-                    label="E-mail"
-                    type={'email'}
-                  ></Input>
-                  <Text sx={styles.policyText}>
-                    {messages['landing_page_newsletter.policyText']}
-                    <Link sx={styles.policyLink}>
-                      {messages['landing_page_newsletter.policyLink']}
-                    </Link>
-                  </Text>
-                </Box>
-                <Button sx={styles.newsletterButton} variant="primary">
-                  {messages['landing_page_newsletter.Button']}
-                </Button>
-              </Flex> */}
             </Flex>
           </Flex>
           <div className={imgStyle.wrapper}>
diff --git a/src/components/on-this-page/index.tsx b/src/components/on-this-page/index.tsx
index 54606c43..361291c7 100644
--- a/src/components/on-this-page/index.tsx
+++ b/src/components/on-this-page/index.tsx
@@ -9,12 +9,10 @@ import CloseIcon from 'components/icons/close-icon'
 
 import TableOfContents from 'components/table-of-contents'
 
-import { getMessages } from 'utils/get-messages'
-
 import styles from './styles'
+import { FormattedMessage } from 'react-intl'
 
 const OnThisPage = () => {
-  const messages = getMessages()
   const { onThisPageOpenStatus, setOnThisPageOpenStatus } =
     useContext(APIGuideContext)
 
@@ -27,7 +25,7 @@ const OnThisPage = () => {
       >
         <Box sx={styles.contentContainer}>
           <Text sx={styles.onThisPageTitle}>
-            {messages['api_guide_documentation_page_on_this_page.title']}
+            <FormattedMessage id="api_guide_documentation_page_on_this_page.title" />
           </Text>
           <Box>
             <TableOfContents />
@@ -40,7 +38,7 @@ const OnThisPage = () => {
         onClick={() => setOnThisPageOpenStatus((open) => !open)}
       >
         <Text sx={styles.title(onThisPageOpenStatus)}>
-          {messages['api_guide_documentation_page_on_this_page.title']}
+          <FormattedMessage id="api_guide_documentation_page_on_this_page.title" />
         </Text>
         <Box sx={styles.iconContainer}>
           {!onThisPageOpenStatus ? (
diff --git a/src/components/release-note/functions.tsx b/src/components/release-note/functions.tsx
index 78b8a661..f8f763b3 100644
--- a/src/components/release-note/functions.tsx
+++ b/src/components/release-note/functions.tsx
@@ -3,16 +3,14 @@ import { getDaysElapsed } from 'utils/get-days-elapsed'
 import { getDate } from 'components/release-section/functions'
 
 import styles from './styles'
-import { getMessages } from 'utils/get-messages'
-
-const messages = getMessages()
+import { FormattedMessage } from 'react-intl'
 
 export const getReleaseDate = (createdAt: string) => {
   const daysElapsed = getDaysElapsed(new Date(createdAt))
   return daysElapsed < 8 ? (
-    <Text sx={styles.releaseDate}>{`${getDaysElapsed(new Date(createdAt))} ${
-      messages['relese-note-days-elapsed']
-    }`}</Text>
+    <Text sx={styles.releaseDate}>{`${getDaysElapsed(new Date(createdAt))} ${(
+      <FormattedMessage id="relese-note-days-elapsed" />
+    )}`}</Text>
   ) : (
     getDate(createdAt, false)
   )
diff --git a/src/components/release-section/index.tsx b/src/components/release-section/index.tsx
index 893f3f65..e46f49d4 100644
--- a/src/components/release-section/index.tsx
+++ b/src/components/release-section/index.tsx
@@ -2,11 +2,9 @@ import ReleaseNote from '../release-note'
 import { Box, Flex, Text } from '@vtex/brand-ui'
 
 import styles from 'components/release-section/styles'
-import { getMessages } from 'utils/get-messages'
 import { compareDates, getDate } from './functions'
 import { UpdateElement } from 'utils/typings/types'
-
-const messages = getMessages()
+import { FormattedMessage } from 'react-intl'
 
 interface IReleasesData {
   releasesData: UpdateElement[]
@@ -18,10 +16,10 @@ const ReleaseSection = ({ releasesData }: IReleasesData) => {
     <Flex sx={styles.outerContainer}>
       <Box sx={styles.innerContainer}>
         <Text sx={styles.sectionTitle}>
-          {messages['release_notes_page.title']}
+          <FormattedMessage id="release_notes_page.title" />
         </Text>
         <Text sx={styles.sectionSubtitle}>
-          {messages['release_notes_page.subtitle']}
+          <FormattedMessage id="release_notes_page.subtitle" />
         </Text>
         <Box sx={styles.sectionDivider}>
           <hr />
diff --git a/src/components/search-filter-tab-bar/index.tsx b/src/components/search-filter-tab-bar/index.tsx
index 3fca5d78..d05e85b8 100644
--- a/src/components/search-filter-tab-bar/index.tsx
+++ b/src/components/search-filter-tab-bar/index.tsx
@@ -5,6 +5,7 @@ import type { DocumentationTitle, UpdatesTitle } from 'utils/typings/unionTypes'
 
 import { SearchContext } from 'utils/contexts/search'
 import { documentationData, updatesData } from 'utils/constants'
+import { useIntl } from 'react-intl'
 
 import styles from './styles'
 
@@ -30,13 +31,14 @@ const SearchFilterTab = ({
 }
 
 const SearchFilterTabBar = () => {
+  const intl = useIntl()
   return (
     <Flex sx={styles.container}>
       <SearchFilterTab filter="" />
-      {documentationData.map(({ title }) => (
+      {documentationData(intl).map(({ title }) => (
         <SearchFilterTab key={title} filter={title} />
       ))}
-      {updatesData.map(({ title }) => (
+      {updatesData(intl).map(({ title }) => (
         <SearchFilterTab key={title} filter={title} />
       ))}
     </Flex>
diff --git a/src/components/search-input/results-box.tsx b/src/components/search-input/results-box.tsx
index 25aeb16b..a95c99a3 100644
--- a/src/components/search-input/results-box.tsx
+++ b/src/components/search-input/results-box.tsx
@@ -13,10 +13,11 @@ import {
 import aa from 'search-insights'
 import { Box, Flex, IconCaret, Text } from '@vtex/brand-ui'
 
-import { getIcon, messages } from 'utils/constants'
+import { getIcon } from 'utils/constants'
 import { getBreadcrumbs, getRelativeURL } from './functions'
 import CustomHighlight from './customHighlight'
 import styles from './styles'
+import { FormattedMessage, useIntl } from 'react-intl'
 interface HitProps {
   hit: Hit
   insights: WrappedInsightsClient
@@ -24,7 +25,8 @@ interface HitProps {
 
 const Hit = ({ hit, insights }: HitProps) => {
   const breadcrumbsList = getBreadcrumbs(hit)
-  const DocIcon = getIcon(hit.doctype)
+  const intl = useIntl()
+  const DocIcon = getIcon(hit.doctype, intl)
   return (
     <Link href={getRelativeURL(hit)} legacyBehavior>
       <a
@@ -118,7 +120,9 @@ const HitsBox = connectStateResults(({ searchState, searchResults }) => {
             )}
             {!searchResults.hits.length && (
               <Flex sx={styles.noResults}>
-                <Text>{messages['search_input.empty']}</Text>
+                <Text>
+                  <FormattedMessage id="search_input.empty" />
+                </Text>
               </Flex>
             )}
           </Box>
diff --git a/src/components/search-input/search-box.tsx b/src/components/search-input/search-box.tsx
index 3c029f20..85750394 100644
--- a/src/components/search-input/search-box.tsx
+++ b/src/components/search-input/search-box.tsx
@@ -4,16 +4,15 @@ import { connectSearchBox } from 'react-instantsearch-dom'
 import { SearchBoxProvided } from 'react-instantsearch-core'
 
 import SearchIcon from 'components/icons/search-icon'
-import { getMessages } from 'utils/get-messages'
 import styles from './styles'
-
-const messages = getMessages()
+import { useIntl } from 'react-intl'
 
 const SearchBoxComponent = ({
   currentRefinement,
   refine,
 }: SearchBoxProvided) => {
   const inputRef = useRef<HTMLInputElement>(null)
+  const intl = useIntl()
 
   const handleClick = () => {
     if (inputRef.current != null) inputRef.current.focus()
@@ -27,7 +26,9 @@ const SearchBoxComponent = ({
         ref={inputRef}
         className="searchComponent"
         type="text"
-        placeholder={messages['search_input.placeholder']}
+        placeholder={intl.formatMessage({
+          id: 'search_input.placeholder',
+        })}
         value={currentRefinement}
         data-cy="search"
         onChange={(e) => refine(e.currentTarget.value)}
diff --git a/src/components/search-results/index.tsx b/src/components/search-results/index.tsx
index 9a612f40..45bf3731 100644
--- a/src/components/search-results/index.tsx
+++ b/src/components/search-results/index.tsx
@@ -11,6 +11,7 @@ import type { ActionType } from 'components/last-updates-card/functions'
 import type { DocumentationTitle, UpdatesTitle } from 'utils/typings/unionTypes'
 
 import styles from './styles'
+import { useIntl } from 'react-intl'
 
 export interface SearchDataItemProps {
   doc: DocumentationTitle | UpdatesTitle
@@ -48,6 +49,7 @@ const searchData: SearchDataItemProps[] = [
 
 const SearchResults = () => {
   const router = useRouter()
+  const intl = useIntl()
   const { filterSelectedSection, updateOcurrenceCount } =
     useContext(SearchContext)
 
@@ -72,7 +74,7 @@ const SearchResults = () => {
         {filteredResult.map((result, index) => (
           <SearchCard
             key={`${result.doc}${result.title}${index}`}
-            Icon={getIcon(result.doc)!}
+            Icon={getIcon(result.doc, intl)!}
             {...result}
           />
         ))}
diff --git a/src/components/search-sections/index.tsx b/src/components/search-sections/index.tsx
index a0b43e45..ff6dc74b 100644
--- a/src/components/search-sections/index.tsx
+++ b/src/components/search-sections/index.tsx
@@ -3,18 +3,20 @@ import { Box } from '@vtex/brand-ui'
 import { documentationData, updatesData } from 'utils/constants'
 import SearchSection from 'components/search-section'
 import styles from './styles'
+import { useIntl } from 'react-intl'
 
 const SearchSections = () => {
+  const intl = useIntl()
   return (
     <Box sx={styles.container}>
       <Box sx={styles.docsSection}>
         <SearchSection dataElement={null} />
-        {documentationData.map((docsIcon, index) => (
+        {documentationData(intl).map((docsIcon, index) => (
           <SearchSection dataElement={docsIcon} index={index} />
         ))}
       </Box>
       <Box sx={styles.notesSection}>
-        {updatesData.map((notesIcon, index) => (
+        {updatesData(intl).map((notesIcon, index) => (
           <SearchSection dataElement={notesIcon} index={index} />
         ))}
       </Box>
diff --git a/src/components/see-also-section/functions.ts b/src/components/see-also-section/functions.ts
index ab856417..a33944e7 100644
--- a/src/components/see-also-section/functions.ts
+++ b/src/components/see-also-section/functions.ts
@@ -2,6 +2,7 @@ import { capitalizeFirstLetter } from 'utils/string-utils'
 import { getIcon } from 'utils/constants'
 
 import { DocumentProps } from 'components/documentation-card'
+import { useIntl } from 'react-intl'
 
 const getDoctype = (category: string) => {
   switch (category) {
@@ -30,7 +31,8 @@ export const createDocFromUrl = (doc: {
   title: string
   category: string
 }): DocumentProps => {
-  const Icon = getIcon(getDoctype(doc.category))!
+  const intl = useIntl()
+  const Icon = getIcon(getDoctype(doc.category), intl)!
   const title = getTitleFromUrl(doc.title)
 
   return {
diff --git a/src/components/sidebar-section-filter/index.tsx b/src/components/sidebar-section-filter/index.tsx
index 295d700c..f2309685 100644
--- a/src/components/sidebar-section-filter/index.tsx
+++ b/src/components/sidebar-section-filter/index.tsx
@@ -1,7 +1,7 @@
 import { Box, Flex, Text } from '@vtex/brand-ui'
 import MethodCategory from 'components/method-category'
 import { Dispatch, SetStateAction, useState } from 'react'
-import { getMessages } from 'utils/get-messages'
+import { FormattedMessage } from 'react-intl'
 import { MethodType } from 'utils/typings/unionTypes'
 
 import styles from './styles'
@@ -24,7 +24,6 @@ const SectionFilter = ({
   methodFilterList,
   setMethodFilter,
 }: SectionFilterProps) => {
-  const messages = getMessages()
   const [activeFilters, setActiveFilters] = useState<MethodType[]>([])
 
   const setFilter = (methodFilterChanged: MethodType | null) => {
@@ -71,7 +70,9 @@ const SectionFilter = ({
 
   return (
     <Box sx={styles.container}>
-      <Text sx={styles.text}>{messages['api_reference_sidebar_filter']}</Text>
+      <Text sx={styles.text}>
+        <FormattedMessage id="api_reference_sidebar_filter" />
+      </Text>
       <Flex>
         {methodFilterList.map((methodFilter) => (
           <MethodButton
@@ -81,7 +82,7 @@ const SectionFilter = ({
         ))}
         {activeFilters.length > 1 && (
           <Text onClick={() => setFilter(null)} sx={styles.clear}>
-            {messages['api_reference_sidebar_filter_clear']}
+            <FormattedMessage id="api_reference_sidebar_filter_clear" />
           </Text>
         )}
       </Flex>
diff --git a/src/components/sidebar-section/index.tsx b/src/components/sidebar-section/index.tsx
index 207cdc71..9a8130f8 100644
--- a/src/components/sidebar-section/index.tsx
+++ b/src/components/sidebar-section/index.tsx
@@ -18,6 +18,7 @@ import { SidebarContext } from 'utils/contexts/sidebar'
 import { getIcon } from 'utils/constants'
 
 import styles from './styles'
+import { useIntl } from 'react-intl'
 
 export interface SidebarSectionProps {
   documentation: DocumentationTitle | UpdatesTitle
@@ -92,8 +93,9 @@ const SidebarSection = ({
       .filter((category: SidebarElement) => category.children.length > 0)
     return filteredCategories
   }, [filterStatus, methodFilterList, categories, searchValue])
+  const intl = useIntl()
 
-  const DocIcon = getIcon(documentation)
+  const DocIcon = getIcon(documentation, intl)
 
   return isHamburgerMenu ? (
     <Box
diff --git a/src/components/sidebar/index.tsx b/src/components/sidebar/index.tsx
index c7bfb1e2..1162e317 100644
--- a/src/components/sidebar/index.tsx
+++ b/src/components/sidebar/index.tsx
@@ -19,6 +19,7 @@ import { iconTooltipStyle } from './functions'
 
 import { SidebarContext } from 'utils/contexts/sidebar'
 import useNavigation from 'utils/hooks/useNavigation'
+import { useIntl } from 'react-intl'
 
 interface SideBarSectionState {
   sectionSelected?: DocumentationTitle | UpdatesTitle | ''
@@ -46,6 +47,7 @@ const Sidebar = ({
   useEffect(() => {
     if (!isEditorPreview) setSidebarDataMaster(sidebarNavigation)
   }, [sidebarNavigation])
+  const intl = useIntl()
 
   const router = useRouter()
   const flattenedSidebar = flattenJSON(sidebarNavigation)
@@ -167,7 +169,7 @@ const Sidebar = ({
         sx={styles.sidebarIcons}
       >
         <Flex sx={styles.sidebarIconsContainer}>
-          {docsIcons.map((docsIconElement) => (
+          {docsIcons(intl).map((docsIconElement) => (
             <SideBarIcon
               {...docsIconElement}
               key={`sidebar-icon-${docsIconElement.title}`}
@@ -178,7 +180,7 @@ const Sidebar = ({
           <hr />
         </Box>
         <Flex sx={styles.sidebarIconsContainer}>
-          {notesIcons.map((notesIconElement) => (
+          {notesIcons(intl).map((notesIconElement) => (
             <SideBarIcon
               {...notesIconElement}
               key={`sidebar-icon-${notesIconElement.title}`}
diff --git a/src/messages/language.json b/src/messages/en.json
similarity index 86%
rename from src/messages/language.json
rename to src/messages/en.json
index d8d2c8e8..7554aae7 100644
--- a/src/messages/language.json
+++ b/src/messages/en.json
@@ -1,5 +1,5 @@
 {
-  "landing_page_newsletter.title": "Build first-class commerce experiences with VTEX.",
+  "landing_page_newsletter.title": "How can we help you?",
   "landing_page_newsletter.description": "Subscribe to our developer newsletter and stay on top of the practices and technologies that are transforming commerce.",
   "landing_page_newsletter.policyText": "Read our ",
   "landing_page_newsletter.policyLink": "privacy policy",
@@ -22,24 +22,30 @@
   "updates_documentation_updates.title": "Documentation Updates",
   "updates_documentation_updates.description": "A log of all notable changes made to our docs.",
   "landing_page_documentation_documentation_card.learnMoreText": "Learn more",
-  "landing_page_last_updates.title": "Last Updates",
-  "landing_page_education.title": "Education channels",
+  "landing_page_last_updates.title": "News",
+  "dashboards.description": "Manage data from your unified commerce",
+  "orders.description": "Check the status of orders placed in your store.",
+  "landing_page_education.title": "Still got questions?",
   "landing_page_education_github.title": "Github",
   "landing_page_education_github.description": "Follow our code and contribute with VTEX on GitHub.",
   "landing_page_education_github.textLink": "Go to Github",
-  "landing_page_education_help_center.title": "Help Center",
-  "landing_page_education_help_center.description": "Explore our beginner tutorials, reference guides and articles.",
-  "landing_page_education_help_center.textLink": "Explore Help Center",
+  "landing_page_education_developer_portal.title": "Developer Portal",
+  "landing_page_education_developer_portal.description": "Build first-class commerce experiences with VTEX.",
+  "landing_page_education_developer_portal.textLink": "Explore Developer Portal",
+  "landing_page_education_support.title": "Support",
+  "landing_page_education_support.description": "Get in touch if you have something specific to ask about the platform.",
+  "landing_page_education_support.textLink": "Talk to our experts",
   "landing_page_education_community.title": "Community",
   "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_github.message": "Github",
   "landing_page_footer_help_center.message": "Help Center",
   "landing_page_footer_community.message": "Community",
   "landing_page_footer_feedback.message": "Feedback",
   "landing_page_header_feedback.message": "Feedback",
   "landing_page_header_docs.message": "Documentation",
-  "search_input.placeholder": "Search in Developers",
+  "search_input.placeholder": "Search in Help Center",
   "search_input.empty": "No results found. Try different search terms.",
   "feedback_section.question": "Was this helpful?",
   "feedback_section.response": "Thanks for your feedback.",
@@ -53,7 +59,7 @@
   "api_guide_documentation_page_on_this_page.title": "On this page",
   "api_reference_sidebar_filter": "Filter by",
   "api_reference_sidebar_filter_clear": "Clear all",
-  "release_notes_page.title": "Release Notes",
+  "release_notes_page.title": "Announcements",
   "release_notes_page.subtitle": "Stay up to date with our latest releases",
   "api_reference_page.title": "API Reference",
   "api_reference_page.subtitle": "Use our API reference documentation to build custom solutions that fit your business.",
diff --git a/src/messages/es.json b/src/messages/es.json
new file mode 100644
index 00000000..c6f3f856
--- /dev/null
+++ b/src/messages/es.json
@@ -0,0 +1,94 @@
+{
+  "landing_page_newsletter.title": "¿En qué podemos ayudarte?",
+  "landing_page_newsletter.description": "Subscribe to our developer newsletter and stay on top of the practices and technologies that are transforming commerce.",
+  "landing_page_newsletter.policyText": "Read our ",
+  "landing_page_newsletter.policyLink": "privacy policy",
+  "landing_page_newsletter.Button": "Subscribe",
+  "landing_page_documentation.title": "Documentation",
+  "documentation_api_guides.title": "API Guides",
+  "documentation_api_guides.description": "Learn how to use our APIs and extend the VTEX platform.",
+  "documentation_api_reference.title": "API Reference",
+  "documentation_api_reference.description": "Check our API Reference for more endpoints' details.",
+  "documentation_app_development.title": "VTEX IO",
+  "documentation_app_development.description": "Learn how to develop apps and integrations in the cloud.",
+  "documentation_storefront.title": "FastStore",
+  "documentation_storefront.description": "Express your brand identity creating unique storefronts.",
+  "documentation_webops.title": "WebOps",
+  "documentation_webops.description": "Deployment platform optimized for storefront development",
+  "documentation_vtexio_apps.title": "Store Framework Apps",
+  "documentation_vtexio_apps.description": "Find pre-built solutions to grow your business.",
+  "updates_release_notes.title": "Release Notes",
+  "updates_release_notes.description": "Stay up to date with our latest releases and bug fixes.",
+  "updates_documentation_updates.title": "Documentation Updates",
+  "updates_documentation_updates.description": "A log of all notable changes made to our docs.",
+  "landing_page_documentation_documentation_card.learnMoreText": "Learn more",
+  "landing_page_last_updates.title": "Noticias",
+  "dashboards.description": "Manage data from your unified commerce",
+  "orders.description": "Check the status of orders placed in your store.",
+  "landing_page_education.title": "Still got questions?",
+  "landing_page_education_github.title": "Github",
+  "landing_page_education_github.description": "Follow our code and contribute with VTEX on GitHub.",
+  "landing_page_education_github.textLink": "Go to Github",
+  "landing_page_education_developer_portal.title": "Developer Portal",
+  "landing_page_education_developer_portal.description": "Build first-class commerce experiences with VTEX.",
+  "landing_page_education_developer_portal.textLink": "Explore Developer Portal",
+  "landing_page_education_support.title": "Support",
+  "landing_page_education_support.description": "Get in touch if you have something specific to ask about the platform.",
+  "landing_page_education_support.textLink": "Talk to our experts",
+  "landing_page_education_community.title": "Community",
+  "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_github.message": "Github",
+  "landing_page_footer_help_center.message": "Help Center",
+  "landing_page_footer_community.message": "Community",
+  "landing_page_footer_feedback.message": "Feedback",
+  "landing_page_header_feedback.message": "Feedback",
+  "landing_page_header_docs.message": "Documentation",
+  "search_input.placeholder": "Search in Help Center",
+  "search_input.empty": "No results found. Try different search terms.",
+  "feedback_section.question": "¿Te ha resultado útil esta información?",
+  "feedback_section.response": "Thanks for your feedback.",
+  "feedback_section.positive": "Sí",
+  "feedback_section.negative": "No",
+  "feedback_section.edit": "Suggest edits (Github)",
+  "feedback_modal.title": "Leave a comment (optional)",
+  "feedback_modal.button": "Send Feedback",
+  "api_guide_documentation_page_contributors.title": "Contributors",
+  "api_guide_documentation_page_contributors.toggleText": "See less",
+  "api_guide_documentation_page_on_this_page.title": "On this page",
+  "api_reference_sidebar_filter": "Filter by",
+  "api_reference_sidebar_filter_clear": "Clear all",
+  "release_notes_page.title": "Announcements",
+  "release_notes_page.subtitle": "Stay up to date with our latest releases",
+  "api_reference_page.title": "API Reference",
+  "api_reference_page.subtitle": "Use our API reference documentation to build custom solutions that fit your business.",
+  "api_guides_page.title": "API Guides",
+  "api_guides_page.subtitle": "Get to know our Commerce APIs to extend the VTEX platform and leverage your business.",
+  "storefront_development_page.title": "Storefront Development",
+  "storefront_development_page.subtitle": "Express your brand identity creating unique storefronts.",
+  "vtex_io_apps_page.title": "VTEX IO Apps",
+  "vtex_io_apps_page.subtitle": "Find pre-built solutions to grow your business.",
+  "app_development_page.title": "App Development",
+  "app_development_page.subtitle": "Learn how to develop apps and integrations in the cloud with VTEX IO.",
+  "app_development_page_new_to_app_development.title": "New to VTEX IO?",
+  "app_development_page_new_to_app_development.description": "Build stores and IO apps from scratch with our learning-oriented tutorials.",
+  "app_development_page_new_to_app_development.link": "Get Started",
+  "app_development_page_solve_real_world_issues.title": "Solve real-world issues",
+  "app_development_page_solve_real_world_issues.description": "Achieve specific ends by following our goal-oriented step by step guides.",
+  "app_development_page_solve_real_world_issues.link": "Check our guides",
+  "app_development_page_build_foundations.title": "Build foundations",
+  "app_development_page_build_foundations.description": "Understand core aspects of the VTEX IO platform with our reference docs.",
+  "app_development_page_build_foundations.link": "Learn More",
+  "app_development_page_go_further.title": "Go further",
+  "app_development_page_go_further.description": "Publish your app on the VTEX App Store and explore our recommended practices.",
+  "app_development_page_go_further.link": "Explore Perks",
+  "app_development_page_other_resources.title": "Other resources",
+  "app_development_page_other_resources_community.description": "The VTEX Community is an ecosystem where our clients and partners can interact, ask questions, and exchange information among themselves. It's the go-to place to find answers and talk about VTEX products.",
+  "app_development_page_other_resources_learning_center.description": "The Learning Center contains courses about specific aspects of the IO platform and Store Framework.",
+  "app_development_page_other_resources_github.description": "VTEX IO open-source apps and documentation are fully stored in the VTEX Apps Organization on GitHub.",
+  "app_development_page_other_resources_help_center.description": "The Help Center contains beginner tutorials, reference guides and troubleshooting articles about the VTEX Admin panel.",
+  "app_development_page_other_resources_support.description": "All clients have access to the services provided by our Technical Support team. These specialists are extensively prepared to give you the best experience possible when solving your tickets. To contact them, you need to open a ticket to VTEX support.",
+  "relese-note-days-elapsed": "days ago",
+  "error_loading_image": "An error occurred while trying to load the image."
+}
diff --git a/src/messages/pt.json b/src/messages/pt.json
new file mode 100644
index 00000000..0cc0ae52
--- /dev/null
+++ b/src/messages/pt.json
@@ -0,0 +1,94 @@
+{
+  "landing_page_newsletter.title": "Como podemos ajudar?",
+  "landing_page_newsletter.description": "Subscribe to our developer newsletter and stay on top of the practices and technologies that are transforming commerce.",
+  "landing_page_newsletter.policyText": "Read our ",
+  "landing_page_newsletter.policyLink": "privacy policy",
+  "landing_page_newsletter.Button": "Subscribe",
+  "landing_page_documentation.title": "Documentação",
+  "documentation_api_guides.title": "API Guides",
+  "documentation_api_guides.description": "Aprenda.",
+  "documentation_api_reference.title": "API Reference",
+  "documentation_api_reference.description": "Check our API Reference for more endpoints' details.",
+  "documentation_app_development.title": "VTEX IO",
+  "documentation_app_development.description": "Learn how to develop apps and integrations in the cloud.",
+  "documentation_storefront.title": "FastStore",
+  "documentation_storefront.description": "Express your brand identity creating unique storefronts.",
+  "documentation_webops.title": "WebOps",
+  "documentation_webops.description": "Deployment platform optimized for storefront development",
+  "documentation_vtexio_apps.title": "Store Framework Apps",
+  "documentation_vtexio_apps.description": "Find pre-built solutions to grow your business.",
+  "updates_release_notes.title": "Novidades",
+  "updates_release_notes.description": "Stay up to date with our latest releases and bug fixes.",
+  "updates_documentation_updates.title": "Documentation Updates",
+  "updates_documentation_updates.description": "A log of all notable changes made to our docs.",
+  "landing_page_documentation_documentation_card.learnMoreText": "Aprenda mais",
+  "landing_page_last_updates.title": "Novidades",
+  "dashboards.description": "Manage data from your unified commerce",
+  "orders.description": "Check the status of orders placed in your store.",
+  "landing_page_education.title": "Ainda possui dúvidas?",
+  "landing_page_education_github.title": "Github",
+  "landing_page_education_github.description": "Follow our code and contribute with VTEX on GitHub.",
+  "landing_page_education_github.textLink": "Go to Github",
+  "landing_page_education_developer_portal.title": "Developer Portal",
+  "landing_page_education_developer_portal.description": "Encontre informação sobre integrações, APIs e recursos de desenvolvimento para sua loja.",
+  "landing_page_education_developer_portal.textLink": "Explore o nosso portal de desenvolvedores",
+  "landing_page_education_support.title": "Suporte",
+  "landing_page_education_support.description": "Get in touch if you have something specific to ask about the platform.",
+  "landing_page_education_support.textLink": "Talk to our experts",
+  "landing_page_education_community.title": "Comunidade",
+  "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_github.message": "Github",
+  "landing_page_footer_help_center.message": "Help Center",
+  "landing_page_footer_community.message": "Comunidade",
+  "landing_page_footer_feedback.message": "Feedback",
+  "landing_page_header_feedback.message": "Feedback",
+  "landing_page_header_docs.message": "Documentação",
+  "search_input.placeholder": "Pesquise no Help Center",
+  "search_input.empty": "No results found. Try different search terms.",
+  "feedback_section.question": "Isso foi útil?",
+  "feedback_section.response": "Obrigado pelo seu feedback.",
+  "feedback_section.positive": "Sim",
+  "feedback_section.negative": "Não",
+  "feedback_section.edit": "Sugerir edições (Github)",
+  "feedback_modal.title": "Leave a comment (optional)",
+  "feedback_modal.button": "Send Feedback",
+  "api_guide_documentation_page_contributors.title": "Contribuidores",
+  "api_guide_documentation_page_contributors.toggleText": "Ver menos",
+  "api_guide_documentation_page_on_this_page.title": "Nesta página",
+  "api_reference_sidebar_filter": "Filter by",
+  "api_reference_sidebar_filter_clear": "Clear all",
+  "release_notes_page.title": "Novidades",
+  "release_notes_page.subtitle": "Stay up to date with our latest releases",
+  "api_reference_page.title": "API Reference",
+  "api_reference_page.subtitle": "Use our API reference documentation to build custom solutions that fit your business.",
+  "api_guides_page.title": "API Guides",
+  "api_guides_page.subtitle": "Get to know our Commerce APIs to extend the VTEX platform and leverage your business.",
+  "storefront_development_page.title": "Storefront Development",
+  "storefront_development_page.subtitle": "Express your brand identity creating unique storefronts.",
+  "vtex_io_apps_page.title": "VTEX IO Apps",
+  "vtex_io_apps_page.subtitle": "Find pre-built solutions to grow your business.",
+  "app_development_page.title": "App Development",
+  "app_development_page.subtitle": "Learn how to develop apps and integrations in the cloud with VTEX IO.",
+  "app_development_page_new_to_app_development.title": "New to VTEX IO?",
+  "app_development_page_new_to_app_development.description": "Build stores and IO apps from scratch with our learning-oriented tutorials.",
+  "app_development_page_new_to_app_development.link": "Get Started",
+  "app_development_page_solve_real_world_issues.title": "Solve real-world issues",
+  "app_development_page_solve_real_world_issues.description": "Achieve specific ends by following our goal-oriented step by step guides.",
+  "app_development_page_solve_real_world_issues.link": "Check our guides",
+  "app_development_page_build_foundations.title": "Build foundations",
+  "app_development_page_build_foundations.description": "Understand core aspects of the VTEX IO platform with our reference docs.",
+  "app_development_page_build_foundations.link": "Learn More",
+  "app_development_page_go_further.title": "Go further",
+  "app_development_page_go_further.description": "Publish your app on the VTEX App Store and explore our recommended practices.",
+  "app_development_page_go_further.link": "Explore Perks",
+  "app_development_page_other_resources.title": "Other resources",
+  "app_development_page_other_resources_community.description": "The VTEX Community is an ecosystem where our clients and partners can interact, ask questions, and exchange information among themselves. It's the go-to place to find answers and talk about VTEX products.",
+  "app_development_page_other_resources_learning_center.description": "The Learning Center contains courses about specific aspects of the IO platform and Store Framework.",
+  "app_development_page_other_resources_github.description": "VTEX IO open-source apps and documentation are fully stored in the VTEX Apps Organization on GitHub.",
+  "app_development_page_other_resources_help_center.description": "The Help Center contains beginner tutorials, reference guides and troubleshooting articles about the VTEX Admin panel.",
+  "app_development_page_other_resources_support.description": "All clients have access to the services provided by our Technical Support team. These specialists are extensively prepared to give you the best experience possible when solving your tickets. To contact them, you need to open a ticket to VTEX support.",
+  "relese-note-days-elapsed": "dias atrás",
+  "error_loading_image": "An error occurred while trying to load the image."
+}
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 7f80467a..67b4c82e 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -1,6 +1,9 @@
 import type { AppProps } from 'next/app'
 import type { Page } from 'utils/typings/types'
 import Head from 'next/head'
+import { useRouter } from 'next/router'
+import { IntlProvider } from 'react-intl'
+import { getMessages } from 'utils/get-messages'
 
 import 'styles/global.css'
 import 'styles/rapidoc.css'
@@ -15,25 +18,31 @@ import TrackerProvider from 'utils/contexts/trackerContext'
 import PreviewContextProvider from 'utils/contexts/preview'
 
 function MyApp({ Component, pageProps }: Props) {
+  const { locale } = useRouter()
+  const currentLocale = locale ?? 'en'
+  const messages = getMessages()
+
   return (
     <TrackerProvider>
-      <Head>
-        <meta
-          property="og:image"
-          content="https://cdn.jsdelivr.net/gh/vtexdocs/devportal@main/public/images/meta-image.png"
-        />
-      </Head>
-      <PreviewContextProvider>
-        <Layout
-          sidebarfallback={pageProps.sidebarfallback}
-          hideSidebar={Component.hideSidebar}
-          isPreview={pageProps.isPreview ?? false}
-          sectionSelected={pageProps.sectionSelected}
-          parentsArray={pageProps.parentsArray}
-        >
-          <Component {...pageProps} />
-        </Layout>
-      </PreviewContextProvider>
+      <IntlProvider locale={currentLocale} messages={messages[currentLocale]}>
+        <Head>
+          <meta
+            property="og:image"
+            content="https://cdn.jsdelivr.net/gh/vtexdocs/devportal@main/public/images/meta-image.png"
+          />
+        </Head>
+        <PreviewContextProvider>
+          <Layout
+            sidebarfallback={pageProps.sidebarfallback}
+            hideSidebar={Component.hideSidebar}
+            isPreview={pageProps.isPreview ?? false}
+            sectionSelected={pageProps.sectionSelected}
+            parentsArray={pageProps.parentsArray}
+          >
+            <Component {...pageProps} />
+          </Layout>
+        </PreviewContextProvider>
+      </IntlProvider>
     </TrackerProvider>
   )
 }
diff --git a/src/pages/docs/guides/index.tsx b/src/pages/docs/guides/index.tsx
index 676323a5..e4d3343f 100644
--- a/src/pages/docs/guides/index.tsx
+++ b/src/pages/docs/guides/index.tsx
@@ -7,14 +7,15 @@ import getNavigation from 'utils/getNavigation'
 import { DocumentationTitle, UpdatesTitle } from 'utils/typings/unionTypes'
 import imgStyles from '../../../styles/core-services-styles'
 import PageHeader from 'components/page-header'
-import { getMessages } from 'utils/get-messages'
 import image from '../../../../public/images/api-guides.png'
 import imageData from '../../../../public/images/data-orchestration.png'
 import imagePlatform from '../../../../public/images/platform.png'
 import styles from 'styles/documentation-landing-page'
 import Head from 'next/head'
 import { PreviewContext } from 'utils/contexts/preview'
+import { useIntl } from 'react-intl'
 
+const intl = useIntl()
 interface Props {
   sidebarfallback: any //eslint-disable-line
   sectionSelected?: DocumentationTitle | UpdatesTitle | ''
@@ -164,23 +165,34 @@ const Image2 = () => (
 const ApiGuidesPage: NextPage<Props> = ({ branch }) => {
   const { setBranchPreview } = useContext(PreviewContext)
   setBranchPreview(branch)
-  const messages = getMessages()
   return (
     <>
       <Head>
-        <title>{messages['api_guides_page.title']}</title>
+        <title>
+          {intl.formatMessage({
+            id: 'api_guides_page.title',
+          })}
+        </title>
         <meta
           property="og:title"
-          content={messages['api_guides_page.subtitle']}
+          content={intl.formatMessage({
+            id: 'api_guides_page.subtitle',
+          })}
           key="title"
         />
       </Head>
       <Fragment>
         <PageHeader
-          title={messages['api_guides_page.title']}
-          description={messages['api_guides_page.subtitle']}
+          title={intl.formatMessage({
+            id: 'api_guides_page.title',
+          })}
+          description={intl.formatMessage({
+            id: 'api_guides_page.subtitle',
+          })}
           imageUrl={image}
-          imageAlt={messages['app_development_page.title']}
+          imageAlt={intl.formatMessage({
+            id: 'app_development_page.title',
+          })}
         />
         <Box sx={styles.contentContainer}>
           <Text sx={styles.contentTitle}>Get started</Text>
diff --git a/src/pages/updates/announcements/index.tsx b/src/pages/updates/announcements/index.tsx
index 60f7e485..1933f19c 100644
--- a/src/pages/updates/announcements/index.tsx
+++ b/src/pages/updates/announcements/index.tsx
@@ -8,9 +8,11 @@ import styles from 'styles/release-notes'
 import getReleasesData from 'utils/getReleasesData'
 import { UpdateElement } from 'utils/typings/types'
 import Head from 'next/head'
-import { getMessages } from 'utils/get-messages'
 import { PreviewContext } from 'utils/contexts/preview'
 import { useContext } from 'react'
+import { useIntl } from 'react-intl'
+
+const intl = useIntl()
 
 interface Props {
   sidebarfallback: any //eslint-disable-line
@@ -19,18 +21,22 @@ interface Props {
   branch: string
 }
 
-const messages = getMessages()
-
 const ReleasePage: NextPage<Props> = ({ releasesData, branch }) => {
   const { setBranchPreview } = useContext(PreviewContext)
   setBranchPreview(branch)
   return (
     <>
       <Head>
-        <title>{messages['release_notes_page.title']}</title>
+        <title>
+          {intl.formatMessage({
+            id: 'release_notes_page.title',
+          })}
+        </title>
         <meta
           property="og:title"
-          content={messages['release_notes_page.subtitle']}
+          content={intl.formatMessage({
+            id: 'release_notes_page.subtitle',
+          })}
           key="title"
         />
       </Head>
diff --git a/src/utils/constants.ts b/src/utils/constants.ts
index d3e2b9e9..e13f0f84 100644
--- a/src/utils/constants.ts
+++ b/src/utils/constants.ts
@@ -21,119 +21,169 @@ import {
   WhatsNextDataElement,
   ResourceDataElement,
 } from './typings/types'
+import { IntlShape } from 'react-intl'
 
 export const messages = getMessages()
 
-export const documentationData: DocDataElement[] = [
-  {
-    Icon: APIGuidesIcon,
-    title: 'Guides',
-    description: messages['documentation_api_guides.description'],
-    link: '/docs/guides',
-  },
-  {
-    Icon: APIReferenceIcon,
-    title: 'API Reference',
-    description: messages['documentation_api_reference.description'],
-    link: '/docs/api-reference',
-  },
-  {
-    Icon: AppDevelopmentIcon,
-    title: 'App Development',
-    description: messages['documentation_app_development.description'],
-    link: '/docs/app-development',
-  },
-  {
-    Icon: StorefrontDevelopmentIcon,
-    title: 'Storefront Development',
-    description: messages['documentation_storefront.description'],
-    link: '/docs/storefront-development',
-  },
-  {
-    Icon: VTEXIOAppsIcon,
-    title: 'VTEX IO Apps',
-    description: messages['documentation_vtexio_apps.description'],
-    link: '/docs/vtex-io-apps',
-  },
-]
-
-export const updatesData: UpdatesDataElement[] = [
-  {
-    Icon: ReleaseNotesIcon,
-    title: 'Release Notes',
-    description: messages['updates_release_notes.description'],
-    link: '/updates/release-notes',
-  },
-]
+export const documentationData = (intl: IntlShape) => {
+  const data: DocDataElement[] = [
+    {
+      Icon: APIGuidesIcon,
+      title: 'Guides',
+      description: intl.formatMessage({
+        id: 'documentation_api_guides.description',
+      }),
+      link: '/docs/guides',
+    },
+    {
+      Icon: APIReferenceIcon,
+      title: 'API Reference',
+      description: intl.formatMessage({
+        id: 'documentation_api_reference.description',
+      }),
+      link: '/docs/api-reference',
+    },
+    {
+      Icon: AppDevelopmentIcon,
+      title: 'App Development',
+      description: intl.formatMessage({
+        id: 'documentation_app_development.description',
+      }),
+      link: '/docs/app-development',
+    },
+    {
+      Icon: StorefrontDevelopmentIcon,
+      title: 'Storefront Development',
+      description: intl.formatMessage({
+        id: 'documentation_storefront.description',
+      }),
+      link: '/docs/storefront-development',
+    },
+    {
+      Icon: VTEXIOAppsIcon,
+      title: 'VTEX IO Apps',
+      description: intl.formatMessage({
+        id: 'documentation_vtexio_apps.description',
+      }),
+      link: '/docs/vtex-io-apps',
+    },
+  ]
+  return data
+}
 
-export const getIcon = (doc: string) => {
+export const updatesData = (intl: IntlShape) => {
+  const data: UpdatesDataElement[] = [
+    {
+      Icon: ReleaseNotesIcon,
+      title: 'Release Notes',
+      description: intl.formatMessage({
+        id: 'updates_release_notes.description',
+      }),
+      link: '/updates/release-notes',
+    },
+  ]
+  return data
+}
+export const getIcon = (doc: string, intl: IntlShape) => {
   return (
-    documentationData.find((icon) => icon.title === doc)?.Icon ||
-    updatesData.find((icon) => icon.title === doc)?.Icon
+    documentationData(intl).find((icon) => icon.title === doc)?.Icon ||
+    updatesData(intl).find((icon) => icon.title === doc)?.Icon
   )
 }
 
-export const whatsNextData: WhatsNextDataElement[] = [
-  {
-    title: messages['app_development_page_new_to_app_development.title'],
-    description:
-      messages['app_development_page_new_to_app_development.description'],
-    linkTitle: messages['app_development_page_new_to_app_development.link'],
-    linkTo: '/docs/guides/vtex-io-getting-started',
-  },
-  {
-    title: messages['app_development_page_solve_real_world_issues.title'],
-    description:
-      messages['app_development_page_solve_real_world_issues.description'],
-    linkTitle: messages['app_development_page_solve_real_world_issues.link'],
-    linkTo: '/docs/guides/app-development-guides',
-  },
-  {
-    title: messages['app_development_page_build_foundations.title'],
-    description: messages['app_development_page_build_foundations.description'],
-    linkTitle: messages['app_development_page_build_foundations.link'],
-    linkTo: '/docs/guides/concepts',
-  },
-  {
-    title: messages['app_development_page_go_further.title'],
-    description: messages['app_development_page_go_further.description'],
-    linkTitle: messages['app_development_page_go_further.link'],
-    linkTo:
-      '/docs/guides/vtex-io-documentation-homologation-requirements-for-vtex-app-store',
-  },
-]
+export const whatsNextData = (intl: IntlShape) => {
+  const data: WhatsNextDataElement[] = [
+    {
+      title: intl.formatMessage({
+        id: 'app_development_page_new_to_app_development.title',
+      }),
+      description: intl.formatMessage({
+        id: 'app_development_page_new_to_app_development.description',
+      }),
+      linkTitle: intl.formatMessage({
+        id: 'app_development_page_new_to_app_development.link',
+      }),
+      linkTo: '/docs/guides/vtex-io-getting-started',
+    },
+    {
+      title: intl.formatMessage({
+        id: 'app_development_page_solve_real_world_issues.title',
+      }),
+      description: intl.formatMessage({
+        id: 'app_development_page_solve_real_world_issues.description',
+      }),
+      linkTitle: intl.formatMessage({
+        id: 'app_development_page_solve_real_world_issues.link',
+      }),
+      linkTo: '/docs/guides/app-development-guides',
+    },
+    {
+      title: intl.formatMessage({
+        id: 'app_development_page_build_foundations.title',
+      }),
+      description: intl.formatMessage({
+        id: 'app_development_page_build_foundations.description',
+      }),
+      linkTitle: intl.formatMessage({
+        id: 'app_development_page_build_foundations.link',
+      }),
+      linkTo: '/docs/guides/concepts',
+    },
+    {
+      title: intl.formatMessage({
+        id: 'app_development_page_go_further.title',
+      }),
+      description: intl.formatMessage({
+        id: 'app_development_page_go_further.description',
+      }),
+      linkTitle: intl.formatMessage({
+        id: 'app_development_page_go_further.link',
+      }),
+      linkTo:
+        '/docs/guides/vtex-io-documentation-homologation-requirements-for-vtex-app-store',
+    },
+  ]
+  return data
+}
+
+export const resources = (intl: IntlShape) => {
+  const data: ResourceDataElement[] = [
+    {
+      title: 'Community',
+      description: intl.formatMessage({
+        id: 'app_development_page_other_resources_community.description',
+      }),
+      link: getCommunityURL(),
+    },
+    {
+      title: 'Learning Center',
+      description: intl.formatMessage({
+        id: 'app_development_page_other_resources_learning_center.description',
+      }),
+      link: getLearningCenterURL(),
+    },
+    {
+      title: 'GitHub',
+      description: intl.formatMessage({
+        id: 'app_development_page_other_resources_github.description',
+      }),
+      link: getGithubURL(),
+    },
+    {
+      title: 'Help Center',
+      description: intl.formatMessage({
+        id: 'app_development_page_other_resources_help_center.description',
+      }),
+      link: getHelpCenterURL(),
+    },
+    {
+      title: 'Support',
+      description: intl.formatMessage({
+        id: 'app_development_page_other_resources_support.description',
+      }),
+      link: getSupportURL(),
+    },
+  ]
 
-export const resources: ResourceDataElement[] = [
-  {
-    title: 'Community',
-    description:
-      messages['app_development_page_other_resources_community.description'],
-    link: getCommunityURL(),
-  },
-  {
-    title: 'Learning Center',
-    description:
-      messages[
-        'app_development_page_other_resources_learning_center.description'
-      ],
-    link: getLearningCenterURL(),
-  },
-  {
-    title: 'GitHub',
-    description:
-      messages['app_development_page_other_resources_github.description'],
-    link: getGithubURL(),
-  },
-  {
-    title: 'Help Center',
-    description:
-      messages['app_development_page_other_resources_help_center.description'],
-    link: getHelpCenterURL(),
-  },
-  {
-    title: 'Support',
-    description:
-      messages['app_development_page_other_resources_support.description'],
-    link: getSupportURL(),
-  },
-]
+  return data
+}
diff --git a/src/utils/get-messages.tsx b/src/utils/get-messages.tsx
index bf9c123d..3549f2b1 100644
--- a/src/utils/get-messages.tsx
+++ b/src/utils/get-messages.tsx
@@ -1,5 +1,19 @@
-import message from '../messages/language.json'
+import en from '../messages/en.json'
+import pt from '../messages/pt.json'
+import es from '../messages/es.json'
 
-export const getMessages = () => {
-  return message
+interface Messages {
+  [key: string]: {
+    [key: string]: string
+  }
+}
+
+const messages: Messages = {
+  en,
+  pt,
+  es,
+}
+
+export const getMessages = (): Messages => {
+  return messages
 }