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": "Developer 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": "Developer 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.",
@@ -192,6 +192,72 @@
   "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",
+  "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",
+  "tutorials_main_page.title": "Access the sections below to find out how to use our platform in your store operations:",
+  "tutorials_main_page.content.0.title": "Account management",
+  "tutorials_main_page.content.0.link": "tutorials/account-management",
+  "tutorials_main_page.content.1.title": "Apps",
+  "tutorials_main_page.content.1.link": "tutorials/apps",
+  "tutorials_main_page.content.2.title": "Authentication",
+  "tutorials_main_page.content.2.link": "tutorials/authentications",
+  "tutorials_main_page.content.3.title": "B2B",
+  "tutorials_main_page.content.3.link": "tutorials/b2b",
+  "tutorials_main_page.content.4.title": "Beta",
+  "tutorials_main_page.content.4.link": "tutorials/beta-products",
+  "tutorials_main_page.content.5.title": "Billing",
+  "tutorials_main_page.content.5.link": "tutorials/billing",
+  "tutorials_main_page.content.6.title": "Catalog",
+  "tutorials_main_page.content.6.link": "tutorials/catalog",
+  "tutorials_main_page.content.7.title": "Checkout",
+  "tutorials_main_page.content.7.link": "tutorials/checkout",
+  "tutorials_main_page.content.8.title": "Conversational Commerce",
+  "tutorials_main_page.content.8.link": "tutorials/conversational-commerce",
+  "tutorials_main_page.content.9.title": "Dashboards",
+  "tutorials_main_page.content.9.link": "tutorials/insights",
+  "tutorials_main_page.content.10.title": "Infrastructure",
+  "tutorials_main_page.content.10.link": "tutorials/infrastructure",
+  "tutorials_main_page.content.11.title": "Integrations",
+  "tutorials_main_page.content.11.link": "tutorials/integrations",
+  "tutorials_main_page.content.12.title": "Intelligent Search",
+  "tutorials_main_page.content.12.link": "tutorials/intelligent-search",
+  "tutorials_main_page.content.13.title": "Master Data",
+  "tutorials_main_page.content.13.link": "tutorials/master-data",
+  "tutorials_main_page.content.14.title": "Message center",
+  "tutorials_main_page.content.14.link": "tutorials/message-center",
+  "tutorials_main_page.content.15.title": "Omnichannel",
+  "tutorials_main_page.content.15.link": "tutorials/omnichannel",
+  "tutorials_main_page.content.16.title": "Orders",
+  "tutorials_main_page.content.16.link": "tutorials/orders",
+  "tutorials_main_page.content.17.title": "Other",
+  "tutorials_main_page.content.17.link": "tutorials/other",
+  "tutorials_main_page.content.18.title": "Payments",
+  "tutorials_main_page.content.18.link": "tutorials/payments",
+  "tutorials_main_page.content.19.title": "Prices",
+  "tutorials_main_page.content.19.link": "tutorials/prices",
+  "tutorials_main_page.content.20.title": "Promotions & taxes",
+  "tutorials_main_page.content.20.link": "tutorials/promotions-and-taxes",
+  "tutorials_main_page.content.21.title": "Security",
+  "tutorials_main_page.content.21.link": "tutorials/security",
+  "tutorials_main_page.content.22.title": "Sellers",
+  "tutorials_main_page.content.22.link": "tutorials/sellers",
+  "tutorials_main_page.content.23.title": "Shipping",
+  "tutorials_main_page.content.23.link": "tutorials/shipping",
+  "tutorials_main_page.content.24.title": "Store Settings",
+  "tutorials_main_page.content.24.link": "tutorials/store-settings",
+  "tutorials_main_page.content.25.title": "Storefront",
+  "tutorials_main_page.content.25.link": "tutorials/cms",
+  "tutorials_main_page.content.26.title": "Subscriptions",
+  "tutorials_main_page.content.26.link": "tutorials/subscriptions",
+  "tutorials_main_page.content.27.title": "Trade policies",
+  "tutorials_main_page.content.27.link": "tutorials/trade-policies",
+  "tutorials_main_page.content.28.title": "Troubleshooting",
+  "tutorials_main_page.content.28.link": "tutorials/troubleshooting",
+  "tutorials_main_page.content.29.title": "Unified Commerce",
+  "tutorials_main_page.content.29.link": "tutorials/unified-commerce",
+  "tutorials_main_page.content.30.title": "VTEX Tracking",
+  "tutorials_main_page.content.30.link": "tutorials/vtex-tracking",
   "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",
@@ -255,8 +321,8 @@
   "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",
+  "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.",
@@ -270,7 +336,7 @@
   "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": "Developer Portal",
   "sitemap_page_section_additional_resources.support": "Support",
   "sitemap_page_section_additional_resources.community": "Comunity",
   "sitemap_page_section_additional_resources.feedback": "Feedback",

src/messages/es.json

@@ -7,9 +7,9 @@
   "landing_page_documentation.title": "Documentation",
   "documentation_start_here.title": "Comece aqui",
   "documentation_start_here.description": "Aprenda, passo a passo, tudo que precisa saber para começar a usar os principais módulos da VTEX.",
-  "documentation_tutorials.title": "Tutoriais",
-  "documentation_tutorials.description": "Acesse a documentação de todos os módulos da plataforma e tire suas dúvidas.",
-  "documentation_developers_portal.title": "Portal del desarrollador",
+  "documentation_tutorials.title": "Tutoriales",
+  "documentation_tutorials.description": "Navegue por nuestros tutoriales para mejorar su comprensión de la plataforma.",
+  "documentation_developers_portal.title": "Portal del Desarrollador",
   "documentation_developers_portal.description": "Visite nosso portal de desenvolvedores e encontre informações técnicas sobre integrações, APIs e recursos de desenvolvimento.",
   "landing_page_faq.title": "Preguntas Frecuentes",
   "landing_page_faq.description": "Encuentre respuestas a preguntas frecuentes de manera rápida y práctica",
@@ -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": "Comience aquí",
   "start_here_page.subtitle": "Aprende, paso a paso, todo lo que necesitas saber para empezar a usar VTEX.",
-  "start_here_page.link": "Saber más",
+  "start_here_page.link": "Ver tutoriales",
   "start_here_page_onboarding.title": "Guía de onboarding",
   "start_here_page_onboarding.content.0.title": "Serie de la tienda VTEX",
   "start_here_page_onboarding.content.0.description": "Sigue la jornada del retailer desde la planificación de la arquitectura hasta el go live de la tienda.",
@@ -195,6 +195,72 @@
   "start_here_page_conversational.content.0.title": "VTEX Assisted Sales (SuiteShare)",
   "start_here_page_conversational.content.0.description": "Aprenda soluciones para atraer más clientes, organizar los servicios de su equipo, captar datos de clientes, cerrar ventas y medir resultados.",
   "start_here_page_conversational.content.0.link": "tracks/que-es-suiteshare",
+  "start_here_tutorials_page.title": "Tutoriales",
+  "start_here_tutorials_page.subtitle": "Guías con información paso a paso para ayudarle a operar la plataforma VTEX y desarrollar su negocio.",
+  "start_here_tutorials_page.link": "Aprenda más",
+  "tutorials_main_page.title": "Acceda a las siguientes secciones para descubrir cómo utilizar nuestra plataforma en las operaciones de su tienda:",
+  "tutorials_main_page.content.0.title": "Apps",
+  "tutorials_main_page.content.0.link": "tutorials/apps",
+  "tutorials_main_page.content.1.title": "Autenticación",
+  "tutorials_main_page.content.1.link": "tutorials/autenticaciones",
+  "tutorials_main_page.content.2.title": "B2B",
+  "tutorials_main_page.content.2.link": "tutorials/b2b",
+  "tutorials_main_page.content.3.title": "Beta",
+  "tutorials_main_page.content.3.link": "tutorials/beta-producto",
+  "tutorials_main_page.content.4.title": "Catalogo",
+  "tutorials_main_page.content.4.link": "tutorials/catalogo",
+  "tutorials_main_page.content.5.title": "Centro de mensajes",
+  "tutorials_main_page.content.5.link": "tutorials/centro-de-mensajes",
+  "tutorials_main_page.content.6.title": "Checkout",
+  "tutorials_main_page.content.6.link": "tutorials/checkout",
+  "tutorials_main_page.content.7.title": "Comercio Unificado",
+  "tutorials_main_page.content.7.link": "tutorials/comercio-unificado",
+  "tutorials_main_page.content.8.title": "Configuraciones de la Tienda",
+  "tutorials_main_page.content.8.link": "tutorials/configuraciones-de-la-tienda",
+  "tutorials_main_page.content.9.title": "Conversational Commerce",
+  "tutorials_main_page.content.9.link": "tutorials/conversational-commerce",
+  "tutorials_main_page.content.10.title": "Dashboards",
+  "tutorials_main_page.content.10.link": "tutorials/insights",
+  "tutorials_main_page.content.11.title": "Envío",
+  "tutorials_main_page.content.11.link": "tutorials/envio",
+  "tutorials_main_page.content.12.title": "Facturas",
+  "tutorials_main_page.content.12.link": "tutorials/facturas",
+  "tutorials_main_page.content.13.title": "Gestión de la cuenta",
+  "tutorials_main_page.content.13.link": "tutorials/gestion-de-la-cuenta",
+  "tutorials_main_page.content.14.title": "Infraestructura",
+  "tutorials_main_page.content.14.link": "tutorials/infraestructura",
+  "tutorials_main_page.content.15.title": "Integraciones",
+  "tutorials_main_page.content.15.link": "tutorials/integraciones",
+  "tutorials_main_page.content.16.title": "Intelligent Search",
+  "tutorials_main_page.content.16.link": "tutorials/intelligent-search",
+  "tutorials_main_page.content.17.title": "Master Data",
+  "tutorials_main_page.content.17.link": "tutorials/master-data",
+  "tutorials_main_page.content.18.title": "Omnichannel",
+  "tutorials_main_page.content.18.link": "tutorials/omnichannel",
+  "tutorials_main_page.content.19.title": "Otros",
+  "tutorials_main_page.content.19.link": "tutorials/otros",
+  "tutorials_main_page.content.20.title": "Pagos",
+  "tutorials_main_page.content.20.link": "tutorials/pagos",
+  "tutorials_main_page.content.21.title": "Pedidos comerciales",
+  "tutorials_main_page.content.21.link": "tutorials/pedidos",
+  "tutorials_main_page.content.22.title": "Políticas comerciales",
+  "tutorials_main_page.content.22.link": "tutorials/politicas-comerciales",
+  "tutorials_main_page.content.23.title": "Precios",
+  "tutorials_main_page.content.23.link": "tutorials/precios",
+  "tutorials_main_page.content.24.title": "Seguridad",
+  "tutorials_main_page.content.24.link": "tutorials/seguridad",
+  "tutorials_main_page.content.25.title": "Sellers",
+  "tutorials_main_page.content.25.link": "tutorials/sellers",
+  "tutorials_main_page.content.26.title": "Storefront",
+  "tutorials_main_page.content.26.link": "tutorials/cms",
+  "tutorials_main_page.content.27.title": "Suscripciones",
+  "tutorials_main_page.content.27.link": "tutorials/suscripciones",
+  "tutorials_main_page.content.28.title": "Tasas y promociones",
+  "tutorials_main_page.content.28.link": "tutorials/tasas-y-promociones",
+  "tutorials_main_page.content.29.title": "Troubleshooting",
+  "tutorials_main_page.content.29.link": "tutorials/troubleshooting",
+  "tutorials_main_page.content.30.title": "VTEX Tracking",
+  "tutorials_main_page.content.30.link": "tutorials/vtex-tracking",
   "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",
@@ -258,8 +324,8 @@
   "known_issues_result.empty": "Ningún resultado coincidente. Pruebe con otros filtros.",
   "known_issues_date.created": "Creado en",
   "known_issues_date.updated": "Actualizado en",
-  "tutorial_and_solutions_page.title": "Tutoriales y Soluciones",
-  "tutorial_and_solutions_page.description": "Accede a la documentación de todos los módulos de la plataforma y resuelve tus dudas.",
+  "tutorials_page.title": "Tutoriales",
+  "tutorials_page.description": "Navegue por nuestros tutoriales para mejorar su comprensión de la plataforma.",
   "date_text.created": "Publicado en",
   "date_text.updated": "Última actualización",
   "announcements_page_result.empty": "Ningún resultado coincidente.",