feat: new tutorial landing page version

src/components/tutorial-index/index.tsx

@@ -16,14 +16,14 @@ const TutorialIndexing = ({ ...props }) => {
     <>
       <PageHeader
         title={intl.formatMessage({
-          id: 'tutorial_and_solutions_page.title',
+          id: 'tutorials_page.title',
         })}
         description={intl.formatMessage({
-          id: 'tutorial_and_solutions_page.description',
+          id: 'tutorials_page.description',
         })}
         imageUrl={startHereImage}
         imageAlt={intl.formatMessage({
-          id: 'tutorial_and_solutions_page.title',
+          id: 'tutorials_page.title',
         })}
       />
       <Flex sx={styles.innerContainer}>

src/components/tutorial-markdown-render/index.tsx

@@ -69,14 +69,14 @@ const TutorialMarkdownRender = (props: Props) => {
       </Head>
       <PageHeader
         title={intl.formatMessage({
-          id: 'tutorial_and_solutions_page.title',
+          id: 'tutorials_page.title',
         })}
         description={intl.formatMessage({
-          id: 'tutorial_and_solutions_page.description',
+          id: 'tutorials_page.description',
         })}
         imageUrl={startHereImage}
         imageAlt={intl.formatMessage({
-          id: 'tutorial_and_solutions_page.title',
+          id: 'tutorials_page.title',
         })}
       />
       <DocumentContextProvider headings={props.headings}>

src/components/whats-next-card/tutorials/index.tsx

@@ -0,0 +1,34 @@
+import { Box, Flex, IconCaret, Text, Link } from '@vtex/brand-ui'
+
+import type { WhatsNextDataElementTutorial } from 'utils/typings/types'
+
+import styles from '../styles'
+
+const WhatsNextCardTutorial = ({
+  title,
+  linkTitle,
+  linkTo,
+}: WhatsNextDataElementTutorial) => {
+  return (
+    <Link href={linkTo} sx={styles.container}>
+      <Box>
+        <Text sx={styles.title} className="title">
+          {title}
+        </Text>
+        <Flex sx={styles.linkContainer}>
+          <Text sx={styles.link} className="link">
+            {linkTitle}
+          </Text>
+          <IconCaret
+            className="caret"
+            color="#A1A8B3"
+            direction="right"
+            size={16}
+          />
+        </Flex>
+      </Box>
+    </Link>
+  )
+}
+
+export default WhatsNextCardTutorial

src/components/whats-next-card/tutorials/styles.ts

@@ -0,0 +1,55 @@
+import type { SxStyleProp } from '@vtex/brand-ui'
+
+const container: SxStyleProp = {
+  mt: '16px',
+  padding: '16px',
+  borderRadius: '4px',
+  border: '1px solid #E7E9EE',
+  width: ['100%', '49%'],
+  transition: 'all 0.3s ease-out',
+  ':hover': {
+    cursor: 'pointer',
+  },
+  ':active, :hover': {
+    borderColor: 'muted.2',
+    boxShadow: '0px 0px 16px rgba(0, 0, 0, 0.1)',
+    transition: 'all 0.3 ease-out',
+
+    '.title, .description': {
+      transition: 'all 0.3s ease-out',
+      color: '#000711',
+    },
+
+    '.link, .caret': {
+      transition: 'all 0.3s ease-out',
+      color: 'muted.0',
+    },
+  },
+}
+
+const title: SxStyleProp = {
+  mb: '8px',
+  fontSize: '16px',
+  fontWeight: '400',
+  lineHeight: ['22px', '18px'],
+  color: 'muted.0',
+}
+
+const description: SxStyleProp = {
+  fontSize: '12px',
+  fontWeight: '400',
+  lineHeight: '16px',
+  color: 'muted.0',
+}
+
+const linkContainer: SxStyleProp = {
+  mt: '8px',
+  alignItems: 'center',
+}
+
+const link: SxStyleProp = {
+  ...description,
+  color: 'muted.1',
+}
+
+export default { container, title, description, linkContainer, link }

src/messages/en.json

@@ -7,9 +7,9 @@
   "landing_page_documentation.title": "Documentation",
   "documentation_start_here.title": "Start here",
   "documentation_start_here.description": "Learn, step by step, everything you need to know to get started on VTEX.",
-  "documentation_tutorials.title": "Tutorials & Solutions",
-  "documentation_tutorials.description": "Access content and find solutions to all your questions about the platform",
-  "documentation_developers_portal.title": "Developer portal",
+  "documentation_tutorials.title": "Tutorials",
+  "documentation_tutorials.description": "Navigate through our tutorials to improve your understanding of the platform.",
+  "documentation_developers_portal.title": "Developers Portal",
   "documentation_developers_portal.description": "Find info about integrations, APIs, and development resources for your store.",
   "landing_page_faq.title": "Frequently Asked Questions",
   "landing_page_faq.description": "Find the answers to the frequently asked questions in a quick and practical way.",
@@ -46,7 +46,7 @@
   "landing_page_education_community.description": "Find solutions and share ideas in the VTEX community.",
   "landing_page_education_community.textLink": "Join our community",
   "landing_page_support.title": "Support Resources",
-  "landing_page_footer_developer_portal.message": "Developer portal",
+  "landing_page_footer_developer_portal.message": "Developers Portal",
   "landing_page_footer_github.message": "Github",
   "landing_page_footer_site_map.message": "Site Map",
   "landing_page_footer_community.message": "Community",
@@ -75,7 +75,7 @@
   "api_reference_page.subtitle": "Use our API reference documentation to build custom solutions that fit your business.",
   "start_here_page.title": "Start here",
   "start_here_page.subtitle": "Learn, step by step, everything you need to know to start using VTEX.",
-  "start_here_page.link": "Learn more",
+  "start_here_page.link": "See tutorials",
   "start_here_page_onboarding.title": "Onboarding guide",
   "start_here_page_onboarding.content.0.title": "VTEX store overview",
   "start_here_page_onboarding.content.0.description": "Learn about the merchant’s journey from architecture planning to store go-live.",
@@ -119,10 +119,7 @@
   "start_here_page_modules.content.9.link": "tracks/go-live-process",
   "start_here_page_modules.content.10.title": "Store development",
   "start_here_page_modules.content.10.description": "Learn the fundamentals of VTEX store development.",
-  "start_here_page_modules.content.10.link": "tracks/store-development",
-  "start_here_page_modules.content.11.title": "Data and privacy",
-  "start_here_page_modules.content.11.description": "Learn about our approach towards personal data and privacy at VTEX.",
-  "start_here_page_modules.content.11.link": "tracks/personal-data",
+  "start_here_page_modules.content.10.link": "tracks/frontend",
   "start_here_page_marketplace.title": "Marketplace",
   "start_here_page_marketplace.content.0.title": "Amazon Integration",
   "start_here_page_marketplace.content.0.description": "Sell your products in one of the biggest marketplaces in the world through the native VTEX integration.",
@@ -192,6 +189,103 @@
   "start_here_page_conversational.content.1.title": "VTEX Assisted Sales (SuiteShare)",
   "start_here_page_conversational.content.1.description": "Learn solutions to attract more customers, organize your team's services, capture customer data, close sales, and measure results.",
   "start_here_page_conversational.content.1.link": "tracks/what-is-suiteshare",
+  "start_here_tutorials_page.title": "Tutorials hub",
+  "start_here_tutorials_page.subtitle": "Guides with step-by-step information to assist you in operating the VTEX platform and developing your business.",
+  "start_here_tutorials_page.link": "Learn more",
+  "start_here_page_tutorials_page.title": "Access the sections below to find out how to use our platform in your store operations:",
+  "start_here_page_tutorials_page.content.0.title": "Account management",
+  "start_here_page_tutorials_page.content.0.description": "Account management description.",
+  "start_here_page_tutorials_page.content.0.link": "tutorials/amazon",
+  "start_here_page_tutorials_page.content.1.title": "Apps",
+  "start_here_page_tutorials_page.content.1.description": "Apps description.",
+  "start_here_page_tutorials_page.content.1.link": "tutorials/amazon",
+  "start_here_page_tutorials_page.content.2.title": "Authentication",
+  "start_here_page_tutorials_page.content.2.description": "Authentication description.",
+  "start_here_page_tutorials_page.content.2.link": "tutorials/amazon",
+  "start_here_page_tutorials_page.content.3.title": "B2B",
+  "start_here_page_tutorials_page.content.3.description": "B2B description.",
+  "start_here_page_tutorials_page.content.3.link": "tutorials/amazon",
+  "start_here_page_tutorials_page.content.4.title": "Beta",
+  "start_here_page_tutorials_page.content.4.description": "Beta description.",
+  "start_here_page_tutorials_page.content.4.link": "tutorials/amazon",
+  "start_here_page_tutorials_page.content.5.title": "Billing",
+  "start_here_page_tutorials_page.content.5.description": "Billing description.",
+  "start_here_page_tutorials_page.content.5.link": "tutorials/amazon",
+  "start_here_page_tutorials_page.content.6.title": "Catalog",
+  "start_here_page_tutorials_page.content.6.description": "Catalog description.",
+  "start_here_page_tutorials_page.content.6.link": "tutorials/amazon",
+  "start_here_page_tutorials_page.content.7.title": "Checkout",
+  "start_here_page_tutorials_page.content.7.description": "Checkout description.",
+  "start_here_page_tutorials_page.content.7.link": "tutorials/amazon",
+  "start_here_page_tutorials_page.content.8.title": "Conversational Commerce",
+  "start_here_page_tutorials_page.content.8.description": "Conversational Commerce description.",
+  "start_here_page_tutorials_page.content.8.link": "tutorials/amazon",
+  "start_here_page_tutorials_page.content.9.title": "Dashboards",
+  "start_here_page_tutorials_page.content.9.description": "Dashboards description.",
+  "start_here_page_tutorials_page.content.9.link": "tutorials/dashboards-overview",
+  "start_here_page_tutorials_page.content.10.title": "Infrastructure",
+  "start_here_page_tutorials_page.content.10.description": "Infrastructure description.",
+  "start_here_page_tutorials_page.content.10.link": "tutorials/amazon",
+  "start_here_page_tutorials_page.content.11.title": "Integrations",
+  "start_here_page_tutorials_page.content.11.description": "Integrations description.",
+  "start_here_page_tutorials_page.content.11.link": "tutorials/amazon",
+  "start_here_page_tutorials_page.content.12.title": "Intelligent Search",
+  "start_here_page_tutorials_page.content.12.description": "Intelligent Search description.",
+  "start_here_page_tutorials_page.content.12.link": "tutorials/amazon",
+  "start_here_page_tutorials_page.content.13.title": "Master Data",
+  "start_here_page_tutorials_page.content.13.description": "Master Data description.",
+  "start_here_page_tutorials_page.content.13.link": "tutorials/amazon",
+  "start_here_page_tutorials_page.content.14.title": "Message center",
+  "start_here_page_tutorials_page.content.14.description": "Message center description.",
+  "start_here_page_tutorials_page.content.14.link": "tutorials/amazon",
+  "start_here_page_tutorials_page.content.15.title": "Omnichannel",
+  "start_here_page_tutorials_page.content.15.description": "Omnichannel description.",
+  "start_here_page_tutorials_page.content.15.link": "tutorials/amazon",
+  "start_here_page_tutorials_page.content.16.title": "Orders",
+  "start_here_page_tutorials_page.content.16.description": "Orders description.",
+  "start_here_page_tutorials_page.content.16.link": "tutorials/amazon",
+  "start_here_page_tutorials_page.content.17.title": "Others",
+  "start_here_page_tutorials_page.content.17.description": "Others description.",
+  "start_here_page_tutorials_page.content.17.link": "tutorials/amazon",
+  "start_here_page_tutorials_page.content.18.title": "Payments",
+  "start_here_page_tutorials_page.content.18.description": "Payments description.",
+  "start_here_page_tutorials_page.content.18.link": "tutorials/amazon",
+  "start_here_page_tutorials_page.content.19.title": "Prices",
+  "start_here_page_tutorials_page.content.19.description": "Prices description.",
+  "start_here_page_tutorials_page.content.19.link": "tutorials/amazon",
+  "start_here_page_tutorials_page.content.20.title": "Promotions & Taxes",
+  "start_here_page_tutorials_page.content.20.description": "Promotions & Taxes description.",
+  "start_here_page_tutorials_page.content.20.link": "tutorials/amazon",
+  "start_here_page_tutorials_page.content.21.title": "Security",
+  "start_here_page_tutorials_page.content.21.description": "Security description.",
+  "start_here_page_tutorials_page.content.21.link": "tutorials/amazon",
+  "start_here_page_tutorials_page.content.22.title": "Sellers",
+  "start_here_page_tutorials_page.content.22.description": "Sellers description.",
+  "start_here_page_tutorials_page.content.22.link": "tutorials/amazon",
+  "start_here_page_tutorials_page.content.23.title": "Shipping",
+  "start_here_page_tutorials_page.content.23.description": "Shipping description.",
+  "start_here_page_tutorials_page.content.23.link": "tutorials/amazon",
+  "start_here_page_tutorials_page.content.24.title": "Store Settings",
+  "start_here_page_tutorials_page.content.24.description": "Store Settings description.",
+  "start_here_page_tutorials_page.content.24.link": "tutorials/amazon",
+  "start_here_page_tutorials_page.content.25.title": "Storefront",
+  "start_here_page_tutorials_page.content.25.description": "Storefront description.",
+  "start_here_page_tutorials_page.content.25.link": "tutorials/amazon",
+  "start_here_page_tutorials_page.content.26.title": "Subscriptions",
+  "start_here_page_tutorials_page.content.26.description": "Subscriptions description.",
+  "start_here_page_tutorials_page.content.26.link": "tutorials/amazon",
+  "start_here_page_tutorials_page.content.27.title": "Trade policies",
+  "start_here_page_tutorials_page.content.27.description": "Trade policies description.",
+  "start_here_page_tutorials_page.content.27.link": "tutorials/amazon",
+  "start_here_page_tutorials_page.content.28.title": "Troubleshooting",
+  "start_here_page_tutorials_page.content.28.description": "Troubleshooting description.",
+  "start_here_page_tutorials_page.content.28.link": "tutorials/amazon",
+  "start_here_page_tutorials_page.content.29.title": "Unified Commerce",
+  "start_here_page_tutorials_page.content.29.description": "Unified Commerce description.",
+  "start_here_page_tutorials_page.content.29.link": "tutorials/amazon",
+  "start_here_page_tutorials_page.content.30.title": "VTEX Tracking",
+  "start_here_page_tutorials_page.content.30.description": "VTEX Tracking description.",
+  "start_here_page_tutorials_page.content.30.link": "tutorials/amazon",
   "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",
@@ -223,16 +317,16 @@
   "support_status.title": "Status",
   "support_status.description": "See the platform history log.",
   "support_plans.title": "Support plans",
-  "support_plans.link": "/faq/how-does-vtex-support-work",
   "support_plans.description": "See details of support plans available for each commercial plan.",
+  "announcement_bar.headline": "📢 We want to know more about you and how you use our docs. ",
+  "announcement_bar.button": "Fill in our survey! It takes less than 5 minutes.",
   "documentation_reading_time.text": "{minutes} min read",
   "sidebar_known_issues.description": "Access content and find solutions to all your questions about the platform.",
   "sidebar_support_rules.description": "See details of the support plans available for each business plan.",
   "updates_info_notes.title": "Frequently Asked Questions",
   "updates_info_notes.description": "Find answers to your key questions quickly and conveniently.",
   "menu_status.description": "Follow the plataform's historical record.",
   "sidebar_support_rules.title": "Support Rules",
-  "sidebar_support_rules.link": "/faq/how-does-vtex-support-work",
   "sidebar_known_issues.title": "Known Issues",
   "menu_status.title": "Status",
   "known_issues_page.title": "Known issues",
@@ -255,26 +349,24 @@
   "known_issues_result.empty": "No matching results. Try other filters.",
   "known_issues_date.created": "Created at",
   "known_issues_date.updated": "Updated at",
-  "tutorial_and_solutions_page.title": "Tutorials & Solutions",
-  "tutorial_and_solutions_page.description": "Access the documentation of all platform modules and clarify your doubts.",
+  "tutorials_page.title": "Tutorials hub",
+  "tutorials_page.description": "Navigate through our tutorials to improve your understanding of the platform.",
   "date_text.created": "Published on",
   "date_text.updated": "Last update on",
   "announcements_page_result.empty": "No matching results.",
   "announcements_page_search.placeholder": "Search in Announcements...",
   "search_result.empty": "No matching results.",
   "faq_filter.title": "Products",
-  "faq_page.results_found": "results found",
   "sitemap_page.title": "Sitemap",
   "sitemap_page_section_additional_resources.title": "Additional resources",
   "sitemap_page_section_additional_resources.support_rules": "Support Rules",
   "sitemap_page_section_additional_resources.known_issues": "Known Issues",
   "sitemap_page_section_additional_resources.faq": "FAQ",
   "sitemap_page_section_additional_resources.announcements": "Announcements",
-  "sitemap_page_section_additional_resources.dev_portal": "Developer portal",
+  "sitemap_page_section_additional_resources.dev_portal": "Developers Portal",
   "sitemap_page_section_additional_resources.support": "Support",
   "sitemap_page_section_additional_resources.community": "Comunity",
   "sitemap_page_section_additional_resources.feedback": "Feedback",
-  "chip.all_results": "All results",
   "troubleshooting_page.title": "Troubleshooting",
   "troubleshooting_page.description": "Access the documentation for identifications, diagnostics and corrections for fails in the VTEX platform systems and products",
   "menu_troubleshooting.title": "Troubleshooting",