diff --git a/public/images/landing-product.png b/public/images/landing-product.png deleted file mode 100644 index 82024d6c..00000000 Binary files a/public/images/landing-product.png and /dev/null differ diff --git a/public/images/landing.png b/public/images/landing.png new file mode 100644 index 00000000..7eb7519a Binary files /dev/null and b/public/images/landing.png differ diff --git a/src/components/last-updates-card/functions.ts b/src/components/announcement-card/functions.ts similarity index 100% rename from src/components/last-updates-card/functions.ts rename to src/components/announcement-card/functions.ts diff --git a/src/components/announcement-card/index.tsx b/src/components/announcement-card/index.tsx new file mode 100644 index 00000000..72b8b19f --- /dev/null +++ b/src/components/announcement-card/index.tsx @@ -0,0 +1,90 @@ +import Link from 'next/link' +import { Box, Flex, Text, Timeline } from '@vtex/brand-ui' + +import { getDaysElapsed } from '../../utils/get-days-elapsed' +import { useIntl } from 'react-intl' + +import styles from './styles' +import MegaphoneIcon from 'components/icons/megaphone-icon' +import NewIcon from 'components/icons/new-icon' + +export interface CardProps { + title: string + description: string + date: Date + first?: boolean +} + +const AnnouncementTimelineItem = ({ + title, + date, + first = false, +}: CardProps) => { + const intl = useIntl() + + return ( + + New + ) : ( + + ) + } + icon={first ? : null} + > + {title} + + {`${getDaysElapsed(date)} ${intl.formatMessage({ + id: 'relese-note-days-elapsed', + })}`} + + + + ) +} + +interface Props { + announcements: CardProps[] +} + +const AnnouncementCard = ({ announcements }: Props) => { + const intl = useIntl() + return ( + + + + + + + {intl.formatMessage({ + id: 'landing_page_announcements.title', + })} + + + + {intl.formatMessage({ + id: 'landing_page_announcements.description', + })} + + + + {announcements.map((announcement, index) => { + return index === 0 ? ( + + ) : ( + + ) + })} + + + + ) +} + +export default AnnouncementCard diff --git a/src/components/announcement-card/styles.ts b/src/components/announcement-card/styles.ts new file mode 100644 index 00000000..cf221b21 --- /dev/null +++ b/src/components/announcement-card/styles.ts @@ -0,0 +1,123 @@ +import { SxStyleProp } from '@vtex/brand-ui' + +const cardContainer: SxStyleProp = { + mt: ['16px', '24px', '24px', '32px'], + px: ['16px', '24px', '24px', '96px'], + py: ['16px', '64px', '64px'], + justifyContent: 'center', + backgroundColor: 'white', + borderRadius: '8px', + border: '1px solid #E7E9EE', + transition: 'all 0.3s ease-out', + color: '#5E6E84', + columnGap: '50px', + rowGap: '64px', + flexWrap: 'wrap', + + ':active, :hover': { + cursor: 'pointer', + borderColor: '#CCCED8', + transition: 'all 0.3s ease-out', + }, + + ':active': { + boxShadow: '0px 0px 0px 1px #FFFFFF, 0px 0px 0px 3px #96B2F2', + }, + + ':hover': { + boxShadow: '0px 0px 16px rgba(0, 0, 0, 0.1)', + }, +} + +const title: SxStyleProp = { + fontSize: '22px', + fontWeight: '400', + lineHeight: '22px', + gap: '10px', + textAlign: 'top', +} + +const description: SxStyleProp = { + color: 'muted.1', + fontSize: '16px', + lineHeight: '22px', + ml: '34px', + mt: '4px', +} + +const icon: SxStyleProp = { + height: '18px', + width: '18px', + minWidth: '18px', + minHeight: '18px', +} + +const releaseContainer: SxStyleProp = { + width: '100%', +} + +const timelineContainer: SxStyleProp = { + display: ['none', 'block', 'block', 'block', 'block', 'block'], +} + +const timeLineBar: SxStyleProp = { + '& > :first-of-type': { + '& > :first-of-type': { + '& > :first-of-type': { + height: '16px', + width: '16px', + }, + mb: '4px', + }, + '& > :nth-of-type(2)': { + width: '1px', + borderRadius: '0.5rem', + }, + mr: '8px', + }, + + '& > :nth-of-type(2)': { + padding: '0', + '& > :nth-of-type(2)': { + mt: '10px', + }, + }, +} + +const timelineTitle: SxStyleProp = { + fontSize: '18px', + color: 'muted.0', +} + +const content: SxStyleProp = { + color: 'muted.1', + fontSize: '16px', + lineHeight: '22px', + flexDirection: 'column', +} + +const newTitle: SxStyleProp = { + margin: '0', + color: '#F71963', + fontSize: '16px', + lineHeight: '18px', +} + +const placeholder: SxStyleProp = { + height: '18px', + width: '1px', +} + +export default { + cardContainer, + title, + description, + icon, + releaseContainer, + timeLineBar, + timelineTitle, + newTitle, + content, + placeholder, + timelineContainer, +} diff --git a/src/components/announcement-section/index.tsx b/src/components/announcement-section/index.tsx new file mode 100644 index 00000000..33a8494a --- /dev/null +++ b/src/components/announcement-section/index.tsx @@ -0,0 +1,59 @@ +import { Box, Button, Flex, Text } from '@vtex/brand-ui' + +import { CardProps } from '../announcement-card' +import { useIntl } from 'react-intl' + +import styles from './styles' +import AnnouncementCard from '../announcement-card' + +const lastAnnouncements: CardProps[] = [ + { + title: 'Black Week: VTEX Dashboards Analysis Strategies', + description: 'Deprecation of apps-graphql@2.x', + date: new Date('03/02/2023'), + }, + { + title: 'Black Week: VTEX Dashboards Analysis Strategies', + description: 'Deprecation of apps-graphql@2.x', + date: new Date('03/02/2023'), + }, + { + title: 'Black Week: VTEX Dashboards Analysis Strategies', + description: 'Deprecation of apps-graphql@2.x', + date: new Date('03/02/2023'), + }, + { + title: 'Black Week: VTEX Dashboards Analysis Strategies', + description: 'Deprecation of apps-graphql@2.x', + date: new Date('03/02/2023'), + }, + { + title: 'Black Week: VTEX Dashboards Analysis Strategies', + description: 'Deprecation of apps-graphql@2.x', + date: new Date('03/02/2023'), + }, +] + +const AnnouncementSection = () => { + const intl = useIntl() + + return ( + + + + {intl.formatMessage({ + id: 'landing_page_announcements.title', + })} + + + + + + + + ) +} + +export default AnnouncementSection diff --git a/src/components/last-updates-section/styles.ts b/src/components/announcement-section/styles.ts similarity index 71% rename from src/components/last-updates-section/styles.ts rename to src/components/announcement-section/styles.ts index 257775af..060a3955 100644 --- a/src/components/last-updates-section/styles.ts +++ b/src/components/announcement-section/styles.ts @@ -4,7 +4,8 @@ const sectionContainer: SxStyleProp = { px: ['18px', '32px'], py: ['32px', '64px'], backgroundColor: 'muted.4', - textAlign: ['center', 'center', 'initial'], + alignItems: 'center', + flexDirection: 'column', } const title: SxStyleProp = { @@ -23,8 +24,15 @@ const cardsContainer: SxStyleProp = { width: ['auto', 'auto', '100%'], } +const button: SxStyleProp = { + mt: ['31px', '60px', '60px', '54px', '69px', '58px'], + display: ['block', 'block', 'block', 'block', 'block', 'none'], + transition: 'all 0.3s ease-out', +} + export default { cardsContainer, sectionContainer, title, + button, } diff --git a/src/components/documentation-section-card/index.tsx b/src/components/documentation-section-card/index.tsx index 312ff99f..34589308 100644 --- a/src/components/documentation-section-card/index.tsx +++ b/src/components/documentation-section-card/index.tsx @@ -6,12 +6,14 @@ import Tooltip from 'components/tooltip' import styles from './styles' import { useEffect, useRef, useState } from 'react' import { useIntl } from 'react-intl' +import LongArrowIcon from 'components/icons/long-arrow-icon' const DocumentationSectionCard = ({ Icon, title, description, link, + isExternalLink = false, }: DocDataElement) => { const intl = useIntl() const [tooltipState, setTooltipState] = useState(false) @@ -56,11 +58,22 @@ const DocumentationSectionCard = ({ className="quickStartedContainer" sx={styles.quickStartedContainer} > - - {intl.formatMessage({ - id: 'landing_page_documentation_documentation_card.learnMoreText', - })} - + {!isExternalLink ? ( + + {intl.formatMessage({ + id: 'landing_page_documentation_card.learnMoreText', + })} + + ) : ( + + + {intl.formatMessage({ + id: 'landing_page_documentation_card.accessPortal', + })} + + + + )} diff --git a/src/components/documentation-section-card/styles.ts b/src/components/documentation-section-card/styles.ts index a79a1c34..e329be93 100644 --- a/src/components/documentation-section-card/styles.ts +++ b/src/components/documentation-section-card/styles.ts @@ -2,9 +2,9 @@ import { SxStyleProp } from '@vtex/brand-ui' const cardContainer: SxStyleProp = { flexDirection: 'column', - margin: ['8px', '12px', '12px', '16px'], - width: ['151px', '282px'], - height: ['120px', '225px', '225px'], + margin: '16px', + width: '282px', + height: '293px', boxSizing: 'initial', borderRadius: '8px', border: '1px solid #E7E9EE', @@ -40,7 +40,7 @@ const cardContainer: SxStyleProp = { } const infoContainer: SxStyleProp = { - py: ['8px', '16px', '24px'], + py: '24px', px: '16px', flexDirection: 'column', alignItems: 'center', @@ -53,34 +53,32 @@ const infoContainer: SxStyleProp = { } const icon: SxStyleProp = { - width: ['24px', '32px'], + width: '24px', height: 'auto', } const title: SxStyleProp = { mt: ['8px'], - mb: ['0px', '8px'], - fontSize: ['16px', '22px'], - lineHeight: ['22px', '32px'], + mb: '8px', + fontSize: '22px', + lineHeight: '32px', fontWeight: '400', color: 'muted.0', } const description: SxStyleProp = { - display: ['none', '-webkit-box'], fontSize: '16px', lineHeight: '22px', fontWeight: '400', color: 'muted.1', minHeight: '44px', overflow: 'hidden', - WebkitLineClamp: 2, - WebkitBoxOrient: 'vertical', width: '100%', + height: '100%', } const quickStartedContainer: SxStyleProp = { - height: ['34px', '68px'], + height: '68px', justifyContent: 'center', alignItems: 'center', borderTop: '1px solid #E7E9EE', @@ -104,12 +102,17 @@ const quickStartedContainer: SxStyleProp = { } const learnMoreText: SxStyleProp = { - fontSize: ['12px', '16px'], - lineHeight: ['16px', '22px'], + fontSize: '16px', + lineHeight: '22px', fontWeight: '400', color: 'muted.0', } +const accessPortal: SxStyleProp = { + columnGap: '5px', + alignItems: 'center', +} + export default { cardContainer, description, @@ -118,4 +121,5 @@ export default { quickStartedContainer, learnMoreText, title, + accessPortal, } diff --git a/src/components/documentation-section/index.tsx b/src/components/documentation-section/index.tsx index bb4b3e4a..54c8d4d2 100644 --- a/src/components/documentation-section/index.tsx +++ b/src/components/documentation-section/index.tsx @@ -1,4 +1,4 @@ -import { Box, Flex } from '@vtex/brand-ui' +import { Box, Flex, Text } from '@vtex/brand-ui' import DocumentationSectionCard from '../documentation-section-card' @@ -11,6 +11,11 @@ const DocumentationSection = () => { const intl = useIntl() return ( + + {intl.formatMessage({ + id: 'landing_page_documentation.title', + })} + { link: getCommunityURL(), icon: CommunityIcon, }, - { - 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: getDeveloperPortalURL(), - icon: DeveloperPortalIcon, - }, ] return ( diff --git a/src/components/education-section/styles.ts b/src/components/education-section/styles.ts index 9d6ed7eb..db9f609b 100644 --- a/src/components/education-section/styles.ts +++ b/src/components/education-section/styles.ts @@ -7,7 +7,7 @@ const container: SxStyleProp = { } const title: SxStyleProp = { - fontSize: ['20px', '28px', '28px', '28px', '40px'], + fontSize: ['28px', '28px', '28px', '28px', '40px'], lineHeight: ['30px', '38px', '38px', '38px', '50px'], color: 'text', textAlign: 'center', diff --git a/src/components/faq-section-card/index.tsx b/src/components/faq-section-card/index.tsx new file mode 100644 index 00000000..656291a2 --- /dev/null +++ b/src/components/faq-section-card/index.tsx @@ -0,0 +1,65 @@ +import Link from 'next/link' +import { Flex, Text } from '@vtex/brand-ui' + +import type { FaqDataElement } from 'utils/typings/types' +import Tooltip from 'components/tooltip' +import styles from './styles' +import { useEffect, useRef, useState } from 'react' + +const FaqSectionCard = ({ + Icon, + title, + description, + type, + link, +}: FaqDataElement) => { + const [tooltipState, setTooltipState] = useState(false) + const [tooltipDescription, setTooltipDescription] = useState(description) + const descriptionRef = useRef() + + useEffect(() => { + const resizeObserver = new MutationObserver(function (entries) { + const target = entries[0].target as HTMLElement + if (target.offsetHeight < target.scrollHeight) setTooltipState(true) + else setTooltipState(false) + setTooltipDescription(target.innerText) + }) + if (descriptionRef.current) { + resizeObserver.observe(descriptionRef.current, { + childList: true, + }) + } + return () => { + resizeObserver.disconnect + } + }, [descriptionRef.current]) + + return ( + + + + + + + {type} + + + + + {title} + + + {description} + + + + + + ) +} + +export default FaqSectionCard diff --git a/src/components/faq-section-card/styles.ts b/src/components/faq-section-card/styles.ts new file mode 100644 index 00000000..f31e1ce8 --- /dev/null +++ b/src/components/faq-section-card/styles.ts @@ -0,0 +1,115 @@ +import { SxStyleProp } from '@vtex/brand-ui' + +const cardContainer: SxStyleProp = { + flexDirection: 'column', + margin: '16px', + width: ['292px', '292px', '441px', '441px', '441px', '441px', '441px'], + height: ['84px', '84px', '172px'], + boxSizing: 'initial', + borderRadius: '8px', + border: '1px solid #E7E9EE', + transition: 'all 0.3s ease-out', + padding: '16px', + backgroundColor: 'white', + + '.title, .description, .typeContainer': { + transition: 'all 0.3s ease-out', + }, + + ':active, :hover': { + cursor: 'pointer', + backgroundColor: 'white', + borderColor: 'muted.2', + boxShadow: '0px 0px 16px rgba(0, 0, 0, 0.1)', + transition: 'all 0.3s ease-out', + + '.title': { + color: '#000711', + }, + + '.description': { + color: 'muted.0', + }, + + '.typeContainer': { + borderColor: 'muted.2', + }, + + '.title, .description, .typeContainer': { + transition: 'all 0.3s ease-out', + }, + + '.type': { + color: '#F71963', + transition: 'all 0.3s ease-out', + }, + + '.icon': { + color: '#F71963', + transition: 'all 0.3s ease-out', + }, + }, +} + +const infoContainer: SxStyleProp = { + flexDirection: 'column', + alignItems: 'start', + backgroundColor: '#FEFEFE', + height: '100%', +} + +const icon: SxStyleProp = { + width: ['12px', '12px', '18px'], + minHeight: '12px', + minWidth: '12px', + height: 'auto', +} + +const title: SxStyleProp = { + mt: '12px', + mb: '12px', + fontSize: ['16px', '16px', '22px'], + lineHeight: ['22px', '22px', '32px'], + fontWeight: '400', + color: 'muted.0', + height: '50%', +} + +const description: SxStyleProp = { + fontSize: '16px', + lineHeight: '22px', + fontWeight: '400', + color: 'muted.1', + minHeight: '44px', + overflow: 'hidden', + width: '100%', + height: '50%', + display: ['none', 'none', 'block', 'block', 'block', 'block', 'block'], +} + +const typeContainer: SxStyleProp = { + height: '30px', + paddingBottom: '12px', + justifyContent: 'left', + alignItems: 'center', + borderBottom: '1px solid #E7E9EE', + transition: 'all 0.3s ease-out', + columnGap: '4px', +} + +const type: SxStyleProp = { + fontSize: ['12px', '12px', '16px'], + lineHeight: '18px', + fontWeight: '400', + color: '#5E6E84', +} + +export default { + cardContainer, + description, + icon, + infoContainer, + typeContainer, + type, + title, +} diff --git a/src/components/faq-section/index.tsx b/src/components/faq-section/index.tsx new file mode 100644 index 00000000..a7abf780 --- /dev/null +++ b/src/components/faq-section/index.tsx @@ -0,0 +1,42 @@ +import { Box, Button, Flex, Text } from '@vtex/brand-ui' + +import { faqData } from 'utils/constants' + +import styles from './styles' +import { useIntl } from 'react-intl' +import FaqSectionCard from 'components/faq-section-card' + +const FaqSection = () => { + const intl = useIntl() + return ( + + + + + {intl.formatMessage({ + id: 'landing_page_faq.title', + })} + + + {intl.formatMessage({ + id: 'landing_page_faq.description', + })} + + + + + + {faqData(intl).map((card) => ( + + ))} + + + + ) +} + +export default FaqSection diff --git a/src/components/faq-section/styles.ts b/src/components/faq-section/styles.ts new file mode 100644 index 00000000..68a8b0c8 --- /dev/null +++ b/src/components/faq-section/styles.ts @@ -0,0 +1,61 @@ +import { SxStyleProp } from '@vtex/brand-ui' + +const sectionContainer: SxStyleProp = { + px: ['8px', '12px', '96px', '38px'], + paddingTop: ['0px', '32px'], + paddingBottom: ['32px', '42px', '54px', '102px', '102px', '48px'], + backgroundColor: 'muted.4', + display: 'flex', + alignItems: ['center', 'center', 'center', 'center', 'center', 'flex-start'], + justifyContent: 'center', + flexDirection: ['column', 'column', 'column', 'column', 'column', 'row'], +} + +const titleContainer: SxStyleProp = { + maxWidth: ['324px', '324px', '479px'], + textAlign: ['center', 'center', 'center', 'center', 'center', 'start'], +} + +const title: SxStyleProp = { + fontSize: ['28px', '28px', '40px', '40px', '40px'], + lineHeight: ['30px', '38px', '38px', '50px'], + fontWeight: '400', + color: '#4A4A4A', + mt: ['32px'], + mb: ['24px', '32px', '52px', '48px', '32px'], +} + +const description: SxStyleProp = { + fontSize: ['16px', '16px', '24px', '24px', '24px'], + fontWeight: '400', + color: '#4A4A4A', + mb: ['24px', '32px', '52px', '48px', '32px'], +} + +const cardsContainer: SxStyleProp = { + maxWidth: '1100px', + justifyContent: 'center', + flexWrap: 'wrap', +} + +const leftButton: SxStyleProp = { + mt: '106px', + display: ['none', 'none', 'none', 'none', 'none', 'block'], + transition: 'all 0.3s ease-out', +} + +const bottomButton: SxStyleProp = { + mt: ['16px', '16px', '96px', '96px', '106px', '106px'], + display: ['block', 'block', 'block', 'block', 'block', 'none'], + transition: 'all 0.3s ease-out', +} + +export default { + cardsContainer, + sectionContainer, + titleContainer, + title, + description, + leftButton, + bottomButton, +} diff --git a/src/components/icons/announcement-icon.tsx b/src/components/icons/announcement-icon.tsx index 35c6a3a1..4a70fd89 100644 --- a/src/components/icons/announcement-icon.tsx +++ b/src/components/icons/announcement-icon.tsx @@ -13,17 +13,17 @@ const AnnouncementIcon = (props: IconProps) => ( d="M56.20305,104A71.899,71.899,0,0,1,128.5484,32.002c39.58967.29432,71.25651,33.20133,71.25651,72.90185V112c0,35.81563,7.49325,56.59893,14.093,67.95814A7.999,7.999,0,0,1,207.01628,192H48.98365A7.99908,7.99908,0,0,1,42.103,179.95641c6.60328-11.35959,14.1-32.1426,14.1-67.95641Z" fill="none" stroke="#4A596B" - stroke-linecap="round" - stroke-linejoin="round" - stroke-width="18" + strokeLinecap="round" + strokeLinejoin="round" + strokeWidth="18" > ) diff --git a/src/components/icons/arrow-left-icon.tsx b/src/components/icons/arrow-left-icon.tsx index 41a7180c..f67cfb5f 100644 --- a/src/components/icons/arrow-left-icon.tsx +++ b/src/components/icons/arrow-left-icon.tsx @@ -12,16 +12,16 @@ const ArrowLeftIcon = (props: IconProps) => ( ) diff --git a/src/components/icons/catalog-icon.tsx b/src/components/icons/catalog-icon.tsx index a15d5fd1..cbe7a09d 100644 --- a/src/components/icons/catalog-icon.tsx +++ b/src/components/icons/catalog-icon.tsx @@ -13,9 +13,9 @@ const CatalogIcon = (props: IconProps) => ( d="M122.66459,25.8792,42.0101,42.0101,25.8792,122.66459a8,8,0,0,0,2.1878,7.22578L132.51977,234.34315a8,8,0,0,0,11.31371,0l90.50967-90.50967a8,8,0,0,0,0-11.31371L129.89037,28.067A8,8,0,0,0,122.66459,25.8792Z" fill="none" stroke="#4A596B" - stroke-linecap="round" - stroke-linejoin="round" - stroke-width="18" + strokeLinecap="round" + strokeLinejoin="round" + strokeWidth="18" > diff --git a/src/components/icons/dashboards-icon.tsx b/src/components/icons/dashboards-icon.tsx index 0e77d6f2..525aa356 100644 --- a/src/components/icons/dashboards-icon.tsx +++ b/src/components/icons/dashboards-icon.tsx @@ -13,9 +13,9 @@ const DashboardsIcon = (props: IconProps) => ( points="44 208 44 136 100 136" fill="none" stroke="#4A596B" - stroke-linecap="round" - stroke-linejoin="round" - stroke-width="18" + strokeLinecap="round" + strokeLinejoin="round" + strokeWidth="18" > ( y2="208" fill="none" stroke="#4A596B" - stroke-linecap="round" - stroke-linejoin="round" - stroke-width="18" + strokeLinecap="round" + strokeLinejoin="round" + strokeWidth="18" > diff --git a/src/components/icons/developer-portal-icon.tsx b/src/components/icons/developer-portal-icon.tsx index 074d0952..c036f4e0 100644 --- a/src/components/icons/developer-portal-icon.tsx +++ b/src/components/icons/developer-portal-icon.tsx @@ -4,37 +4,37 @@ import { Icon } from '@vtex/brand-ui' const DeveloperPortalIcon = (props: IconProps) => ( - + ) diff --git a/src/components/icons/graph-icon.tsx b/src/components/icons/graph-icon.tsx new file mode 100644 index 00000000..92917fa4 --- /dev/null +++ b/src/components/icons/graph-icon.tsx @@ -0,0 +1,26 @@ +import type { IconProps } from '@vtex/brand-ui' +import { Icon } from '@vtex/brand-ui' + +const GraphIcon = (props: IconProps) => ( + + + + +) + +export default GraphIcon diff --git a/src/components/icons/healthcheck-icon.tsx b/src/components/icons/healthcheck-icon.tsx index 5867c09d..060f218f 100644 --- a/src/components/icons/healthcheck-icon.tsx +++ b/src/components/icons/healthcheck-icon.tsx @@ -16,9 +16,9 @@ const HealthcheckIcon = (props: IconProps) => ( y2="208" fill="none" stroke="currentColor" - stroke-linecap="round" - stroke-linejoin="round" - stroke-width="18" + strokeLinecap="round" + strokeLinejoin="round" + strokeWidth="18" > ( y2="104" fill="none" stroke="currentColor" - stroke-linecap="round" - stroke-linejoin="round" - stroke-width="18" + strokeLinecap="round" + strokeLinejoin="round" + strokeWidth="18" > ( width="192" height="160" rx="8" - stroke-width="18" + strokeWidth="18" stroke="currentColor" - stroke-linecap="round" - stroke-linejoin="round" + strokeLinecap="round" + strokeLinejoin="round" fill="none" > diff --git a/src/components/icons/known-issues-icon.tsx b/src/components/icons/known-issues-icon.tsx index a7b56ff2..b3ea4478 100644 --- a/src/components/icons/known-issues-icon.tsx +++ b/src/components/icons/known-issues-icon.tsx @@ -16,9 +16,9 @@ const KnownIssueIcon = (props: IconProps) => ( y2="208" fill="none" stroke="#4A596B" - stroke-linecap="round" - stroke-linejoin="round" - stroke-width="18" + strokeLinecap="round" + strokeLinejoin="round" + strokeWidth="18" > ( y2="104" fill="none" stroke="#4A596B" - stroke-linecap="round" - stroke-linejoin="round" - stroke-width="18" + strokeLinecap="round" + strokeLinejoin="round" + strokeWidth="18" > ( width="192" height="160" rx="8" - stroke-width="18" + strokeWidth="18" stroke="#4A596B" - stroke-linecap="round" - stroke-linejoin="round" + strokeLinecap="round" + strokeLinejoin="round" fill="none" > diff --git a/src/components/icons/marketplace-icon.tsx b/src/components/icons/marketplace-icon.tsx index 71a6f270..29aefa3d 100644 --- a/src/components/icons/marketplace-icon.tsx +++ b/src/components/icons/marketplace-icon.tsx @@ -15,9 +15,9 @@ const MarketplaceIcon = (props: IconProps) => ( r="32" fill="none" stroke="#4A596B" - stroke-linecap="round" - stroke-linejoin="round" - stroke-width="18" + strokeLinecap="round" + strokeLinejoin="round" + strokeWidth="18" > ( r="32" fill="none" stroke="#4A596B" - stroke-linecap="round" - stroke-linejoin="round" - stroke-width="18" + strokeLinecap="round" + strokeLinejoin="round" + strokeWidth="18" > ( r="32" fill="none" stroke="#4A596B" - stroke-linecap="round" - stroke-linejoin="round" - stroke-width="18" + strokeLinecap="round" + strokeLinejoin="round" + strokeWidth="18" > ( y2="110.69864" fill="none" stroke="#4A596B" - stroke-linecap="round" - stroke-linejoin="round" - stroke-width="18" + strokeLinecap="round" + strokeLinejoin="round" + strokeWidth="18" > ( y2="182.69704" fill="none" stroke="#4A596B" - stroke-linecap="round" - stroke-linejoin="round" - stroke-width="18" + strokeLinecap="round" + strokeLinejoin="round" + strokeWidth="18" > ) diff --git a/src/components/icons/megaphone-icon.tsx b/src/components/icons/megaphone-icon.tsx new file mode 100644 index 00000000..8084f009 --- /dev/null +++ b/src/components/icons/megaphone-icon.tsx @@ -0,0 +1,41 @@ +import type { IconProps } from '@vtex/brand-ui' +import { Icon } from '@vtex/brand-ui' + +const MegaphoneIcon = (props: IconProps) => ( + + + + + + + +) + +export default MegaphoneIcon diff --git a/src/components/icons/new-icon.tsx b/src/components/icons/new-icon.tsx new file mode 100644 index 00000000..607b340d --- /dev/null +++ b/src/components/icons/new-icon.tsx @@ -0,0 +1,39 @@ +import type { IconProps } from '@vtex/brand-ui' +import { Icon } from '@vtex/brand-ui' + +const NewIcon = (props: IconProps) => ( + + + + + + + + + + + + +) + +export default NewIcon diff --git a/src/components/icons/orders-icon.tsx b/src/components/icons/orders-icon.tsx index 8c3c61e3..95b10e64 100644 --- a/src/components/icons/orders-icon.tsx +++ b/src/components/icons/orders-icon.tsx @@ -15,9 +15,9 @@ const OrdersIcon = (props: IconProps) => ( d="M42.28575,72H221.71429l-26.39873,92.39554A16,16,0,0,1,179.93118,176H84.06882a16,16,0,0,1-15.38438-11.60446L32.51492,37.80223A8,8,0,0,0,24.82273,32H8" fill="none" stroke="#4A596B" - stroke-linecap="round" - stroke-linejoin="round" - stroke-width="18" + strokeLinecap="round" + strokeLinejoin="round" + strokeWidth="18" > ) diff --git a/src/components/icons/paper-icon.tsx b/src/components/icons/paper-icon.tsx new file mode 100644 index 00000000..3fa8518c --- /dev/null +++ b/src/components/icons/paper-icon.tsx @@ -0,0 +1,49 @@ +import type { IconProps } from '@vtex/brand-ui' +import { Icon } from '@vtex/brand-ui' + +const PaperIcon = (props: IconProps) => ( + + + + + + + +) + +export default PaperIcon diff --git a/src/components/icons/promotions-icon.tsx b/src/components/icons/promotions-icon.tsx index bbc8cdae..914ca446 100644 --- a/src/components/icons/promotions-icon.tsx +++ b/src/components/icons/promotions-icon.tsx @@ -13,17 +13,17 @@ const PromotionsIcon = (props: IconProps) => ( d="M104 80.7434V204.443C104.012 205.773 103.688 207.084 103.059 208.255C102.43 209.426 101.515 210.42 100.4 211.143L89.3997 218.443C88.334 219.155 87.1131 219.6 85.8396 219.741C84.5661 219.883 83.2773 219.716 82.0816 219.255C80.8859 218.795 79.8184 218.054 78.9688 217.094C78.1193 216.135 77.5125 214.986 77.1997 213.743L63.9997 160.743" fill="none" stroke="#4A596B" - stroke-width="18" - stroke-linecap="round" - stroke-linejoin="round" + strokeWidth="18" + strokeLinecap="round" + strokeLinejoin="round" > ) diff --git a/src/components/icons/shipping-icon.tsx b/src/components/icons/shipping-icon.tsx index a769cf59..b8871468 100644 --- a/src/components/icons/shipping-icon.tsx +++ b/src/components/icons/shipping-icon.tsx @@ -13,17 +13,17 @@ const ShippingIcon = (props: IconProps) => ( d="M224,177.32117V78.67873a8,8,0,0,0-4.07791-6.9726l-88-49.5a8,8,0,0,0-7.84418,0l-88,49.5A8,8,0,0,0,32,78.67873v98.64244a8,8,0,0,0,4.07791,6.97261l88,49.5a8,8,0,0,0,7.84418,0l88-49.5A8,8,0,0,0,224,177.32117Z" fill="none" stroke="#4A596B" - stroke-linecap="round" - stroke-linejoin="round" - stroke-width="18" + strokeLinecap="round" + strokeLinejoin="round" + strokeWidth="18" > ( y2="234.82127" fill="none" stroke="#4A596B" - stroke-linecap="round" - stroke-linejoin="round" - stroke-width="18" + strokeLinecap="round" + strokeLinejoin="round" + strokeWidth="18" > ) diff --git a/src/components/icons/signal-icon.tsx b/src/components/icons/signal-icon.tsx new file mode 100644 index 00000000..9624e07b --- /dev/null +++ b/src/components/icons/signal-icon.tsx @@ -0,0 +1,28 @@ +import type { IconProps } from '@vtex/brand-ui' +import { Icon } from '@vtex/brand-ui' + +const SignalIcon = (props: IconProps) => ( + + + + +) + +export default SignalIcon diff --git a/src/components/icons/start-here-icon.tsx b/src/components/icons/start-here-icon.tsx new file mode 100644 index 00000000..e7f691b8 --- /dev/null +++ b/src/components/icons/start-here-icon.tsx @@ -0,0 +1,28 @@ +import type { IconProps } from '@vtex/brand-ui' +import { Icon } from '@vtex/brand-ui' + +const StartHereIcon = (props: IconProps) => ( + + + + +) + +export default StartHereIcon diff --git a/src/components/icons/status-icon.tsx b/src/components/icons/status-icon.tsx index ac40b831..1419f48b 100644 --- a/src/components/icons/status-icon.tsx +++ b/src/components/icons/status-icon.tsx @@ -16,9 +16,9 @@ const StatusIcon = (props: IconProps) => ( y2="208" fill="none" stroke="#4A596B" - stroke-linecap="round" - stroke-linejoin="round" - stroke-width="18" + strokeLinecap="round" + strokeLinejoin="round" + strokeWidth="18" > ( y2="104" fill="none" stroke="#4A596B" - stroke-linecap="round" - stroke-linejoin="round" - stroke-width="18" + strokeLinecap="round" + strokeLinejoin="round" + strokeWidth="18" > ( width="192" height="160" rx="8" - stroke-width="18" + strokeWidth="18" stroke="#4A596B" - stroke-linecap="round" - stroke-linejoin="round" + strokeLinecap="round" + strokeLinejoin="round" fill="none" > diff --git a/src/components/icons/storefront-icon.tsx b/src/components/icons/storefront-icon.tsx index 409471d0..db10f9b0 100644 --- a/src/components/icons/storefront-icon.tsx +++ b/src/components/icons/storefront-icon.tsx @@ -16,9 +16,9 @@ const StorefrontIcon = (props: IconProps) => ( y2="208" fill="none" stroke="#4A596B" - stroke-linecap="round" - stroke-linejoin="round" - stroke-width="18" + strokeLinecap="round" + strokeLinejoin="round" + strokeWidth="18" > ( y2="104" fill="none" stroke="#4A596B" - stroke-linecap="round" - stroke-linejoin="round" - stroke-width="18" + strokeLinecap="round" + strokeLinejoin="round" + strokeWidth="18" > ( width="192" height="160" rx="8" - stroke-width="18" + strokeWidth="18" stroke="#4A596B" - stroke-linecap="round" - stroke-linejoin="round" + strokeLinecap="round" + strokeLinejoin="round" fill="none" > diff --git a/src/components/icons/support-plan-icon.tsx b/src/components/icons/support-plan-icon.tsx index b4011a43..0e8b7e5c 100644 --- a/src/components/icons/support-plan-icon.tsx +++ b/src/components/icons/support-plan-icon.tsx @@ -16,9 +16,9 @@ const SupportPlansIcon = (props: IconProps) => ( y2="208" fill="none" stroke="#4A596B" - stroke-linecap="round" - stroke-linejoin="round" - stroke-width="18" + strokeLinecap="round" + strokeLinejoin="round" + strokeWidth="18" > ( y2="104" fill="none" stroke="#4A596B" - stroke-linecap="round" - stroke-linejoin="round" - stroke-width="18" + strokeLinecap="round" + strokeLinejoin="round" + strokeWidth="18" > ( width="192" height="160" rx="8" - stroke-width="18" + strokeWidth="18" stroke="#4A596B" - stroke-linecap="round" - stroke-linejoin="round" + strokeLinecap="round" + strokeLinejoin="round" fill="none" > diff --git a/src/components/icons/api-guides-icon.tsx b/src/components/icons/tutorials-icon.tsx similarity index 55% rename from src/components/icons/api-guides-icon.tsx rename to src/components/icons/tutorials-icon.tsx index 0901463e..6f2448be 100644 --- a/src/components/icons/api-guides-icon.tsx +++ b/src/components/icons/tutorials-icon.tsx @@ -1,45 +1,50 @@ import type { IconProps } from '@vtex/brand-ui' import { Icon } from '@vtex/brand-ui' -const APIGuidesIcon = (props: IconProps) => ( +const TutorialsIcon = (props: IconProps) => ( + ( ) -export default APIGuidesIcon +export default TutorialsIcon diff --git a/src/components/icons/warning-icon.tsx b/src/components/icons/warning-icon.tsx new file mode 100644 index 00000000..bbecbe91 --- /dev/null +++ b/src/components/icons/warning-icon.tsx @@ -0,0 +1,35 @@ +import type { IconProps } from '@vtex/brand-ui' +import { Icon } from '@vtex/brand-ui' + +const WarningIcon = (props: IconProps) => ( + + + + + +) + +export default WarningIcon diff --git a/src/components/last-updates-card/index.tsx b/src/components/last-updates-card/index.tsx deleted file mode 100644 index 47c695c1..00000000 --- a/src/components/last-updates-card/index.tsx +++ /dev/null @@ -1,66 +0,0 @@ -import Link from 'next/link' -import { Box, Flex, Text } from '@vtex/brand-ui' - -import type { ActionType, UpdateType } from './functions' -import { getAction, getUpdate } from './functions' -import { getDaysElapsed } from './../../utils/get-days-elapsed' -import { useIntl } from 'react-intl' - -import styles from './styles' - -export interface CardProps { - action: { - type: ActionType - description: string - date: Date - } - updateType: UpdateType -} - -const LastUpdatesCard = ({ action, updateType }: CardProps) => { - const { title: actionTitle, Icon: ActionIcon } = getAction(action.type) - const intl = useIntl() - const { - title: updateTitle, - description: updateDescription, - Icon: UpdateIcon, - } = getUpdate(updateType, intl) - - return ( - - - - - - - {updateTitle} - - - {updateDescription} - - - - - - - {actionTitle} - - - {action.description} - - {`${getDaysElapsed(action.date)} ${intl.formatMessage({ - id: 'relese-note-days-elapsed', - })}`} - - - - - - ) -} - -export default LastUpdatesCard diff --git a/src/components/last-updates-card/styles.ts b/src/components/last-updates-card/styles.ts deleted file mode 100644 index 7256c155..00000000 --- a/src/components/last-updates-card/styles.ts +++ /dev/null @@ -1,139 +0,0 @@ -import { SxStyleProp } from '@vtex/brand-ui' - -const cardContainer: SxStyleProp = { - mt: ['16px', '24px', '24px', '32px'], - paddingLeft: ['16px', '32px', '24px', '32px'], - paddingRight: ['16px', '32px', '24px', '32px', '24px'], - py: ['16px', '40px', '64px'], - width: '100%', - justifyContent: 'space-between', - maxWidth: '1035px', - backgroundColor: 'white', - borderRadius: '8px', - border: '1px solid #E7E9EE', - transition: 'all 0.3s ease-out', - - '.updateTitle, .updateDescription': { - transition: 'all 0.3s ease-out', - }, - - ':active, :hover': { - cursor: 'pointer', - borderColor: '#CCCED8', - transition: 'all 0.3s ease-out', - - '.updateTitle, .updateDescription': { - transition: 'all 0.3s ease-out', - }, - - '.updateDescription': { - color: 'muted.0', - }, - }, - - ':active': { - boxShadow: '0px 0px 0px 1px #FFFFFF, 0px 0px 0px 3px #96B2F2', - '.updateTitle': { - color: '#0C1522', - }, - }, - - ':hover': { - boxShadow: '0px 0px 16px rgba(0, 0, 0, 0.1)', - '.updateTitle': { - color: '#000711', - }, - }, -} - -const updateContainer: SxStyleProp = { - mr: ['0px', '0px', '16px'], - width: ['100%', '100%', '427px', '427px', '41%'], - minWidth: ['0', '0', '427px', '427px', '41%'], - alignItems: 'center', -} - -const updateIcon: SxStyleProp = { - mr: ['6px', '8px'], - minWidth: ['16px', '24px'], - width: ['16px', '24px'], - minHeight: '100%', - height: '100%', -} - -const updateTitle: SxStyleProp = { - fontSize: ['16px', '18px', '18px', '18px', '22px'], - lineHeight: ['22px', '24px', '24px', '24px', '32px'], - fontWeight: '400', - color: 'muted.0', - display: 'flex', -} - -const updateDescription: SxStyleProp = { - fontSize: ['12px', '16px'], - lineHeight: ['16px', '22px'], - pl: ['22px', '32px'], - fontWeight: '400', - color: 'muted.1', -} - -const actionContainer: SxStyleProp = { - alignItems: 'flex-start', - display: ['none', 'none', 'block'], - width: ['277px', '277px', '100%', '100%', '580px'], -} - -const actionTypeContainer: SxStyleProp = { - alignItems: 'center', -} - -const actionIcon: SxStyleProp = { - width: '16px', - height: '16px', - minWidth: 'initial', - minHeight: 'initial', -} - -const actionType: SxStyleProp = { - ml: '8px', - fontSize: '16px', - lineHeight: '18px', - fontWeight: '400', - color: '#4A4A4A', -} - -const actionDescriptionContainer: SxStyleProp = { - mt: '4px', - ml: '8px', - pl: '16px', - borderLeft: '1px solid #CCCED8', -} - -const actionDescription: SxStyleProp = { - fontSize: ['16px', '16px', '16px', '16px', '18px'], - lineHeight: ['22px', '22px', '22px', '22px', '24px'], - fontWeight: '400', - color: 'muted.0', -} - -const actionTime: SxStyleProp = { - fontSize: '16px', - lineHeight: '22px', - fontWeight: '400', - color: 'muted.1', -} - -export default { - actionContainer, - actionDescription, - actionDescriptionContainer, - actionIcon, - actionTime, - actionType, - actionTypeContainer, - cardContainer, - updateContainer, - updateDescription, - updateIcon, - updateTitle, -} diff --git a/src/components/last-updates-section/index.tsx b/src/components/last-updates-section/index.tsx deleted file mode 100644 index a26932e3..00000000 --- a/src/components/last-updates-section/index.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import { Box, Text } from '@vtex/brand-ui' - -import LastUpdatesCard, { CardProps } from '../last-updates-card' -import { useIntl } from 'react-intl' - -import styles from './styles' - -const lastReleaseNote: CardProps = { - action: { - type: 'deprecated', - description: 'Deprecation of apps-graphql@2.x', - date: new Date('03/02/2023'), - }, - updateType: 'announcements', -} - -const LastUpdatesSection = () => { - const intl = useIntl() - - return ( - - - {intl.formatMessage({ - id: 'landing_page_last_updates.title', - })} - - - - - - ) -} - -export default LastUpdatesSection diff --git a/src/components/newsletter-section/index.tsx b/src/components/newsletter-section/index.tsx index c702b66f..3424abe5 100644 --- a/src/components/newsletter-section/index.tsx +++ b/src/components/newsletter-section/index.tsx @@ -1,9 +1,7 @@ import { Box, Flex, Text } from '@vtex/brand-ui' import Image from 'next/image' -import landingProduct from '../../../public/images/Diversity-2.png' import styles from 'components/newsletter-section/styles' -import imgStyle from './styles.module.css' import { FormattedMessage } from 'react-intl' import { SearchInput } from '@vtexdocs/components' @@ -11,31 +9,27 @@ import { SearchInput } from '@vtexdocs/components' const NewsletterSection = () => { return ( - - - - - - - - - - - - -
-
- -
- + + Image of the VTEX store environment + + + + + + + + + ) } diff --git a/src/components/newsletter-section/styles.ts b/src/components/newsletter-section/styles.ts index e2cfa065..ff04c00f 100644 --- a/src/components/newsletter-section/styles.ts +++ b/src/components/newsletter-section/styles.ts @@ -3,132 +3,42 @@ import { SxStyleProp } from '@vtex/brand-ui' const section: SxStyleProp = { width: '100%', borderBottom: '1px solid #E7E9EE', + pb: ['32px', '50px'], + pt: ['0px', '36px', '50px'], } -const newsletter: SxStyleProp = { - width: ['100%', '100%', '100%', '100%', '1280px', '1920px', '2560px'], - margin: 'auto', -} - -const newsletterContainer: SxStyleProp = { +const imageContainer: SxStyleProp = { position: 'relative', - pl: ['0px', '0px', '0px', '223px', '223px', '313px', '530px'], - borderBottom: '1px solid #E7E9EE', - display: ['flex', 'flex', 'flex', 'block', 'flex'], - flexDirection: ['column-reverse', 'row'], - overflow: 'hidden', - width: ['100%', '100%', '100%', 'auto'], - justifyContent: ['center', 'center', 'center', 'center', 'initial'], -} - -const newsletterBackground: SxStyleProp = { - position: 'relative', - height: 'auto', - paddingBlock: ['0px', '64px 46px', '86px', '300px', '300px 72px'], - background: ['#FFFFFF', 'transparent'], - mt: ['-80px', '0'], - zIndex: '3', - justifyContent: ['center', 'normal'], + maxWidth: '100%', + height: ['142px', '203px', '268px', '352px', '367px'], + padding: '100px', } const newsletterBox: SxStyleProp = { flexDirection: 'column', - maxWidth: ['472px', '650px', '650px', '650px', '650px', '650px', '868px'], px: ['16px', '32px', '0px'], - position: 'relative', - zIndex: '1', + width: '100%', + alignItems: 'center', + textAlign: 'center', } const newsletterTitle: SxStyleProp = { - width: ['auto', '434px', '100%'], - mx: ['0px', 'auto'], - pb: ['20px', '20px'], - textAlign: ['center', 'center', 'center', 'initial'], - fontSize: ['24px', '40px', '40px', '52px'], - lineHeight: ['34px', '50px', '50px', '62px'], - mt: ['0px', '-80px'], + mb: '16px', + fontSize: ['28px', '28px', '52px', '52px'], + lineHeight: ['34px', '34px', '62px', '62px'], } const newsletterDescription: SxStyleProp = { - textAlign: ['center', 'center', 'center', 'initial'], - mx: ['0px', '24px', '62px', '0px'], - pr: ['0px', '0px', '0px', '0px', '78px'], - fontSize: ['16px', '16px', '16px', '22px'], - lineHeight: ['22px', '22px', '22px', '32px'], - marginBlock: ['12px 16px', '24px', '24px', '24px 16px'], -} - -const newsletterInputContainer: SxStyleProp = { - flexDirection: ['column', 'row'], - pr: ['0px', '0px', '39px', '78px'], - pl: ['0px', '0px', '39px', '0px'], -} - -const newsletterInputBox: SxStyleProp = { - width: ['auto', '100%'], -} - -const newsletterInput: SxStyleProp = { - mb: '0', - 'div:nth-last-of-type(1n)': { - mt: '0', - pl: '12px', - }, - label: { - fontSize: '14px', - width: 'auto', - }, -} - -const newsletterButton: SxStyleProp = { - ml: ['0px', '16px'], - mt: ['16px', '4px'], - mb: ['32px', '0px'], -} - -const image: SxStyleProp = { - position: 'absolute', - right: '0', - width: 'auto', - height: '100%', - top: '0', -} - -const policyText: SxStyleProp = { - mt: ['4px', '8px'], - fontSize: ['12px'], - lineHeight: ['16px'], - color: 'muted.0', -} -const policyLink: SxStyleProp = { - color: '#E31C58', -} - -const searchContainer: SxStyleProp = { - alignItems: 'center', - justifyContent: 'center', - background: '#F4F4F4', - width: '388px', - height: '40px', - borderRadius: '4px', - mb: '50px', - cursor: 'pointer', + fontSize: ['16px', '16px', '22px', '22px'], + lineHeight: ['22px', '22px', '32px', '32px'], + mb: '24px', + maxWidth: ['319px', '419px', '531px', '642px'], } export default { section, - newsletter, - newsletterContainer, - newsletterBackground, + imageContainer, newsletterBox, newsletterTitle, newsletterDescription, - newsletterInputContainer, - newsletterInputBox, - newsletterInput, - newsletterButton, - image, - policyText, - policyLink, - searchContainer, } diff --git a/src/components/release-note/index.tsx b/src/components/release-note/index.tsx index 750913cc..07e1f2ee 100644 --- a/src/components/release-note/index.tsx +++ b/src/components/release-note/index.tsx @@ -3,7 +3,7 @@ import Link from 'next/link' import { Flex, Timeline, Text, Box, Button, IconCaret } from '@vtex/brand-ui' import type { UpdateElement } from 'utils/typings/types' -import { getAction } from './../last-updates-card/functions' +import { getAction } from '../announcement-card/functions' import { getReleaseDate } from './functions' import styles from './styles' import ReactMarkdown from 'react-markdown' diff --git a/src/components/support-section-card/index.tsx b/src/components/support-section-card/index.tsx new file mode 100644 index 00000000..a70d0177 --- /dev/null +++ b/src/components/support-section-card/index.tsx @@ -0,0 +1,86 @@ +import Link from 'next/link' +import { Flex, Text } from '@vtex/brand-ui' + +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' +import LongArrowIcon from 'components/icons/long-arrow-icon' + +const SupportSectionCard = ({ + Icon, + title, + description, + link, + isExternalLink = false, +}: DocDataElement) => { + const intl = useIntl() + const [tooltipState, setTooltipState] = useState(false) + const [tooltipDescription, setTooltipDescription] = useState(description) + const descriptionRef = useRef() + + useEffect(() => { + const resizeObserver = new MutationObserver(function (entries) { + const target = entries[0].target as HTMLElement + if (target.offsetHeight < target.scrollHeight) setTooltipState(true) + else setTooltipState(false) + setTooltipDescription(target.innerText) + }) + if (descriptionRef.current) { + resizeObserver.observe(descriptionRef.current, { + childList: true, + }) + } + return () => { + resizeObserver.disconnect + } + }, [descriptionRef.current]) + + return ( + + + + + + + {title} + + + + + {description} + + + + {!isExternalLink ? ( + + {intl.formatMessage({ + id: 'landing_page_documentation_card.learnMoreText', + })} + + ) : ( + + + {intl.formatMessage({ + id: 'landing_page_documentation_card.accessPortal', + })} + + + + )} + + + + + ) +} + +export default SupportSectionCard diff --git a/src/components/support-section-card/styles.ts b/src/components/support-section-card/styles.ts new file mode 100644 index 00000000..c6f95cd8 --- /dev/null +++ b/src/components/support-section-card/styles.ts @@ -0,0 +1,118 @@ +import { SxStyleProp } from '@vtex/brand-ui' + +const cardContainer: SxStyleProp = { + flexDirection: 'column', + margin: '16px', + width: '290px', + height: '293px', + boxSizing: 'initial', + borderRadius: '8px', + border: '1px solid #E7E9EE', + transition: 'all 0.3s ease-out', + + ':active, :hover': { + cursor: 'pointer', + backgroundColor: 'white', + borderColor: 'muted.2', + transition: 'all 0.3s ease-out', + + '.titleContainer': { + backgroundColor: '#363F4C', + }, + + '.quickStartedContainer': { + borderColor: 'muted.2', + }, + }, +} + +const titleContainer: SxStyleProp = { + alignItems: 'center', + flexDirection: 'column', + py: '16px', + backgroundColor: 'muted.0', + color: 'white', + transition: 'all 0.3s ease-out', + rowGap: '10px', + borderRadius: '8px 8px 0px 0px', +} + +const infoContainer: SxStyleProp = { + py: '24px', + px: '24px', + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'center', + textAlign: 'center', + backgroundColor: '#FEFEFE', + borderTopLeftRadius: '8px', + borderTopRightRadius: '8px', + height: '157px', +} + +const icon: SxStyleProp = { + width: '24px', + height: 'auto', +} + +const title: SxStyleProp = { + fontSize: '22px', + lineHeight: '32px', + fontWeight: '400', +} + +const description: SxStyleProp = { + fontSize: '16px', + lineHeight: '22px', + fontWeight: '400', + color: 'muted.1', + minHeight: '44px', + overflow: 'hidden', +} + +const quickStartedContainer: SxStyleProp = { + height: '56px', + justifyContent: 'center', + alignItems: 'center', + borderTop: '1px solid #E7E9EE', + borderBottomLeftRadius: '8px', + borderBottomRightRadius: '8px', + transition: 'all 0.3s ease-out', + + '.learnMoreText': { + transition: 'all 0.3s ease-out', + }, + + ':active, :hover': { + transition: 'all 0.3s ease-out', + + '.learnMoreText': { + color: '#000711', + transition: 'all 0.3s ease-out', + }, + }, +} + +const learnMoreText: SxStyleProp = { + fontSize: '16px', + lineHeight: '22px', + fontWeight: '400', + color: 'muted.0', +} + +const accessPortal: SxStyleProp = { + columnGap: '5px', + alignItems: 'center', +} + +export default { + cardContainer, + description, + icon, + titleContainer, + infoContainer, + quickStartedContainer, + learnMoreText, + title, + accessPortal, +} diff --git a/src/components/support-section/index.tsx b/src/components/support-section/index.tsx index 13f15d33..c2e18854 100644 --- a/src/components/support-section/index.tsx +++ b/src/components/support-section/index.tsx @@ -1,80 +1,24 @@ -import { Box, Flex, Text } from '@vtex/brand-ui' +import { Flex, Text } from '@vtex/brand-ui' -import Image from 'next/image' -import landingProduct from '../../../public/images/Misc-Support-1.png' import styles from './styles' -import WhatsNextCard from 'components/whats-next-card' -import { WhatsNextDataElement } from 'utils/typings/types' import { FormattedMessage, useIntl } from 'react-intl' +import { supportData } from 'utils/constants' +import SupportSectionCard from 'components/support-section-card' const SupportSection = () => { const intl = useIntl() - const whatsNextData: WhatsNextDataElement[] = [ - { - title: intl.formatMessage({ - id: 'known_issues.title', - }), - description: intl.formatMessage({ - id: 'known_issues.description', - }), - linkTitle: 'See more', - linkTo: '/known-issues', - }, - { - title: intl.formatMessage({ - id: 'support_plans.title', - }), - description: intl.formatMessage({ - id: 'support_plans.description', - }), - linkTitle: 'See more', - linkTo: '/support-plans', - }, - { - title: intl.formatMessage({ - id: 'status.title', - }), - description: intl.formatMessage({ - id: 'status.description', - }), - linkTitle: 'See more', - linkTo: 'https://status.vtex.com/', - }, - { - title: intl.formatMessage({ - id: 'health_check.title', - }), - description: intl.formatMessage({ - id: 'health_check.description', - }), - linkTitle: 'See more', - linkTo: 'http://healthcheck.vtex.com/', - }, - ] return ( - + - - - {whatsNextData.map((whatsNext) => ( - - ))} - - - - + + {supportData(intl).map((support) => ( + + ))} - + ) } diff --git a/src/components/support-section/styles.ts b/src/components/support-section/styles.ts index 69c7c04a..42b215ce 100644 --- a/src/components/support-section/styles.ts +++ b/src/components/support-section/styles.ts @@ -1,40 +1,35 @@ import { SxStyleProp } from '@vtex/brand-ui' const sectionContainer: SxStyleProp = { - width: ['100%', '100%', '100%', '70%'], - px: ['8px', '12px', '96px', '38px'], - paddingTop: ['0px', '80px'], + width: '100%', + paddingTop: ['28px', '54px', '54px', '80px'], paddingBottom: ['24px', '52px', '52px', '48px'], + px: ['32px', '64px', '64px', '128px', '160px', '256px'], margin: 'auto', borderBottom: '1px solid #e7e9ed', + alignItems: 'center', + justifyContent: 'center', + flexDirection: 'column', } -const innerContainer: SxStyleProp = { - padding: [' 0 32px', '32px 0'], - flexDirection: ['column', 'column', 'column', 'row'], -} -const contentImage: SxStyleProp = { - textAlign: 'right', - paddingLeft: '40px', -} const title: SxStyleProp = { - fontSize: ['20px', '28px', '28px', '40px'], + fontSize: ['28px', '28px', '28px', '40px'], lineHeight: ['30px', '38px', '38px', '50px'], fontWeight: '400', color: '#4A4A4A', + mb: ['26px', '33px'], } const contentCards: SxStyleProp = { flexWrap: 'wrap', flexDirection: 'row', - justifyContent: 'space-between', + alignItems: 'center', + justifyContent: 'center', flex: '0 0 50%', } export default { sectionContainer, - contentImage, - innerContainer, contentCards, title, } diff --git a/src/components/whats-next-card/index.tsx b/src/components/whats-next-card/index.tsx deleted file mode 100644 index 911ef6ff..00000000 --- a/src/components/whats-next-card/index.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import { Box, Flex, IconCaret, Text, Link } from '@vtex/brand-ui' - -import type { WhatsNextDataElement } from 'utils/typings/types' - -import styles from './styles' - -const WhatsNextCard = ({ - title, - description, - linkTitle, - linkTo, -}: WhatsNextDataElement) => { - return ( - - - - {title} - - - {description} - - - - {linkTitle} - - - - - - ) -} - -export default WhatsNextCard diff --git a/src/components/whats-next-card/styles.ts b/src/components/whats-next-card/styles.ts deleted file mode 100644 index db904d48..00000000 --- a/src/components/whats-next-card/styles.ts +++ /dev/null @@ -1,55 +0,0 @@ -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 } diff --git a/src/messages/en.json b/src/messages/en.json index 4a9465c0..ff73bf11 100644 --- a/src/messages/en.json +++ b/src/messages/en.json @@ -1,28 +1,40 @@ { "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.description": "Find answers, solutions, and guidance about the VTEX platform all in one place.", "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.", + "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": "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.", + "landing_page_faq.button": "See all questions", + "faq_order_error.title": "Order errors in marketplace integrations", + "faq_order_error.description": "These errors are commonly related to one of the following situations.", + "faq_order_error.type": "Support guidelines", + "faq_handling.title": "Why has my order stopped on “Ready for Handling”?", + "faq_handling.description": "Ready for Handling is an order flow status awaiting registration the tax receipt in order to invoice it.", + "faq_handling.type": "Known issues", + "faq_product_visible.title": "Why is the product not visible on the website?", + "faq_product_visible.description": "This article explains the main means of investigating what adjustments must be made to the product settings.", + "faq_product_visible.type": "Status", + "faq_carrier.title": "Why can't I see my carrier on checkout?", + "faq_carrier.description": "We have listed five scenarios in which such errors occur along with their respective solutions.", + "faq_carrier.type": "Support guidelines", "updates_release_notes.title": "Announcements", "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": "News", + "landing_page_documentation_card.learnMoreText": "Learn more", + "landing_page_documentation_card.accessPortal": "Access the portal", + "landing_page_announcements.title": "News", + "landing_page_announcements.description": "Stay up to date about the latest news from VTEX.", + "landing_page_announcements.button": "Access all the 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?", @@ -32,12 +44,12 @@ "landing_page_education_developer_portal.title": "Developer Portal", "landing_page_education_developer_portal.description": "Find info about integrations, APIs, and development resources for your store.", "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_education_support.title": "Request support from VTEX", + "landing_page_education_support.description": "For personalized assistance, contact our experts.", + "landing_page_education_support.textLink": "Open a support ticket", + "landing_page_education_community.title": "Ask the community", + "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_help_center.message": "Help Center", @@ -91,12 +103,12 @@ "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.", - "known_issues.title": "Known issues", - "known_issues.description": "Find all the identified issues and their solutions.", - "status.title": "Status", - "status.description": "See the platform history log.", - "health_check.title": "Health check", - "health_check.description": "Check detailed real-time status.", + "support_known_issues.title": "Known issues", + "support_known_issues.description": "Find all the identified issues and their solutions.", + "support_status.title": "Status", + "support_status.description": "See the platform history log.", + "support_health_check.title": "Health check", + "support_health_check.description": "Check detailed real-time status.", "support_plans.title": "Support plans", "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. ", diff --git a/src/messages/es.json b/src/messages/es.json index 38722ddd..4fcf648c 100644 --- a/src/messages/es.json +++ b/src/messages/es.json @@ -1,28 +1,40 @@ { "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.description": "Encuentra respuestas, soluciones y orientación sobre la plataforma VTEX, todo en un solo lugar.", "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.", + "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 & Soluções", + "documentation_tutorials.description": "Acesse a documentação de todos os módulos da plataforma e tire suas dúvidas.", + "documentation_developers_portal.title": "Developers Portal", + "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", + "landing_page_faq.button": "Ver todas las preguntas", + "faq_order_error.title": "Errores de integración de pedidos en marketplaces", + "faq_order_error.description": "Entenda como identificar errores en pedidos externos.", + "faq_order_error.type": "Directrices de soporte", + "faq_handling.title": "¿Por qué está mi pedido parado en “Listo para preparar“?", + "faq_handling.description": "Listo para preparar es un status del flujo de pedidos en que se espera el catastro de la nota fiscal para la factura.", + "faq_handling.type": "Problemas conocidos", + "faq_product_visible.title": "¿Por qué el producto no aparece en el sitio web?", + "faq_product_visible.description": "Los principales puntos a revisar en el Admin VTEX para ver qué se debe corregir en las configuraciones del producto.", + "faq_product_visible.type": "Status", + "faq_carrier.title": "¿Por qué mi transportista no aparece en el checkout?", + "faq_carrier.description": "Separamos cinco escenarios en que este error ocurre y sus respectivas soluciones.", + "faq_carrier.type": "Directrices de soporte", "updates_release_notes.title": "Noticias", "updates_release_notes.description": "Manténgase al día con las últimas noticias y actualizaciones de VTEX.", "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", + "landing_page_documentation_card.learnMoreText": "Aprenda más", + "landing_page_documentation_card.accessPortal": "Acceda al portal", + "landing_page_announcements.title": "Comunicados", + "landing_page_announcements.description": "Mantente actualizado sobre las últimas noticias de VTEX.", + "landing_page_announcements.button": "Ver todos los comunicados", "dashboards.description": "Manage data from your unified commerce", "orders.description": "Check the status of orders placed in your store.", "landing_page_education.title": "¿Todavía tienes dudas?", @@ -32,12 +44,12 @@ "landing_page_education_developer_portal.title": "Developer Portal", "landing_page_education_developer_portal.description": "Encuentre información sobre integraciones, API y recursos de desarrollo para su tienda.", "landing_page_education_developer_portal.textLink": "Explore Developer Portal", - "landing_page_education_support.title": "Soporte", - "landing_page_education_support.description": "Pónte en contacto si tiene algo específico que preguntar acerca de la plataforma.", - "landing_page_education_support.textLink": "Entrar en contacto", - "landing_page_education_community.title": "Community", + "landing_page_education_support.title": "Solicite soporte a VTEX", + "landing_page_education_support.description": "Para asistencia personalizada, contacte a nuestros expertos.", + "landing_page_education_support.textLink": "Abra un ticket de soporte", + "landing_page_education_community.title": "Pregunte a la comunidad", "landing_page_education_community.description": "Encuentra solucciones y comparte ideas en la comunidad de VTEX.", - "landing_page_education_community.textLink": "Únete à la comunidad", + "landing_page_education_community.textLink": "Únete a nuestra comunidad", "landing_page_support.title": "Recursos de soporte", "landing_page_footer_developer_portal.message": "Developer Portal", "landing_page_footer_help_center.message": "Help Center", @@ -91,12 +103,12 @@ "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.", - "known_issues.title": "Problemas conocidos", - "known_issues.description": "Encuentre todos los problemas conocidos y sus soluciones.", - "status.title": "Status", - "status.description": "Vea el registro del historial de la plataforma.", - "health_check.title": "Health check", - "health_check.description": "Compruebe el estado detallado en tiempo real.", + "support_known_issues.title": "Problemas conocidos", + "support_known_issues.description": "Encuentre todos los problemas conocidos y sus soluciones.", + "support_status.title": "Status", + "support_status.description": "Vea el registro del historial de la plataforma.", + "support_health_check.title": "Health check", + "support_health_check.description": "Compruebe el estado detallado en tiempo real.", "support_plans.title": "Planes de soporte", "support_plans.description": "Consulte los detalles de los planes de soporte disponibles para cada plan comercial.", "announcement_bar.headline": "📢 Queremos saber más sobre ti y cómo utilizas nuestra documentación. ", diff --git a/src/messages/pt.json b/src/messages/pt.json index e91c665b..75997e09 100644 --- a/src/messages/pt.json +++ b/src/messages/pt.json @@ -1,28 +1,40 @@ { "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.description": "Encontre respostas, soluções e orientações sobre a plataforma VTEX em um só lugar.", "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.", + "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 & Soluções", + "documentation_tutorials.description": "Acesse a documentação de todos os módulos da plataforma e tire suas dúvidas.", + "documentation_developers_portal.title": "Developers Portal", + "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": "Perguntas frequentes", + "landing_page_faq.description": "Encontre respostas para dúvidas mais frequentes de forma rápida e prática.", + "landing_page_faq.button": "Ver todas as perguntas", + "faq_order_error.title": "Erros de integração depedidos de marketplaces", + "faq_order_error.description": "Entenda como identificar erros em pedidos externos.", + "faq_order_error.type": "Diretrizes de suporte", + "faq_handling.title": "Por que meu pedido está parado em “Preparando entrega”?", + "faq_handling.description": "Preparando Entrega é um status do fluxo de pedidos em que se espera o cadastro da nota fiscal para a fatura.", + "faq_handling.type": "Problemas conhecidos", + "faq_product_visible.title": "Por que o produto não aparece no site?", + "faq_product_visible.description": "Para um produto aparecer disponível na loja ele precisa ser atendido pela logística configurada na loja.", + "faq_product_visible.type": "Status", + "faq_carrier.title": "Por que minha transportadora não aparece no checkout?", + "faq_carrier.description": "Separamos cinco cenários em que esse comportamento ocorre e suas respectivas soluções.", + "faq_carrier.type": "Diretrizes de suporte", "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", + "landing_page_documentation_card.learnMoreText": "Saiba mais", + "landing_page_documentation_card.accessPortal": "Acesse o portal", + "landing_page_announcements.title": "Comunicados", + "landing_page_announcements.description": "Fique por dentro das principais novidades da VTEX.", + "landing_page_announcements.button": "Acesse todas as 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?", @@ -32,13 +44,13 @@ "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": "Entre em contato caso você tenha algo específico a perguntar sobre a plataforma.", - "landing_page_education_support.textLink": "Entre em contato", - "landing_page_education_community.title": "Comunidade", + "landing_page_education_support.title": "Solicite suporte a VTEX", + "landing_page_education_support.description": "Para assistência personalizada, entre em contato com nossos especialistas.", + "landing_page_education_support.textLink": "Abra um ticket de suporte", + "landing_page_education_community.title": "Pergunte a 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_support.title": "Recursos de suporte", "landing_page_footer_developer_portal.message": "Developer Portal", "landing_page_footer_help_center.message": "Help Center", "landing_page_footer_community.message": "Comunidade", @@ -91,12 +103,12 @@ "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.", - "known_issues.title": "Problemas conhecidos", - "known_issues.description": "Encontre todos os problemas conhecidos e suas soluções.", - "status.title": "Status", - "status.description": "Veja o registro do histórico da plataforma.", - "health_check.title": "Health check", - "health_check.description": "Verifique o status detalhado em tempo real.", + "support_known_issues.title": "Problemas conhecidos", + "support_known_issues.description": "Encontre todos os problemas conhecidos e saiba seu status e soluções.", + "support_status.title": "Status", + "support_status.description": "Acompanhe o status da plataforma e saiba o histórico de instabilidade.", + "support_health_check.title": "Health check", + "support_health_check.description": "Acompanhe as verificações dos serviços detalhados e em tempo real.", "support_plans.title": "Planos de suporte", "support_plans.description": "Veja detalhes dos planos de suporte disponíveis para cada plano comercial.", "announcement_bar.headline": "📢 Queremos saber mais sobre você e como você utiliza a nossa documentação. ", diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 544deb1b..efeb4cc2 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -3,8 +3,8 @@ import type { Page } from 'utils/typings/types' import NewsletterSection from 'components/newsletter-section' import DocumentationSection from 'components/documentation-section' -import LastUpdatesSection from 'components/last-updates-section' import EducationSection from 'components/education-section' +import AnnouncementSection from 'components/announcement-section' import Head from 'next/head' import styles from 'styles/landing-page' @@ -13,6 +13,7 @@ import { GetStaticProps } from 'next' import { useContext } from 'react' import { PreviewContext } from 'utils/contexts/preview' import SupportSection from 'components/support-section' +import FaqSection from 'components/faq-section' interface Props { branch: string @@ -40,8 +41,9 @@ const Home: Page = ({ branch }) => { - + + diff --git a/src/pages/updates/announcements/[slug].tsx b/src/pages/updates/announcements/[slug].tsx index 4d060aa9..8d171f2e 100644 --- a/src/pages/updates/announcements/[slug].tsx +++ b/src/pages/updates/announcements/[slug].tsx @@ -36,7 +36,7 @@ import replaceMagicBlocks from 'utils/replaceMagicBlocks' import escapeCurlyBraces from 'utils/escapeCurlyBraces' import replaceHTMLBlocks from 'utils/replaceHTMLBlocks' import { getReleaseDate } from 'components/release-note/functions' -import { ActionType, getAction } from 'components/last-updates-card/functions' +import { ActionType, getAction } from 'components/announcement-card/functions' import styles from 'styles/documentation-page' import { PreviewContext } from 'utils/contexts/preview' diff --git a/src/utils/constants.ts b/src/utils/constants.ts index c7a38c60..611da77a 100644 --- a/src/utils/constants.ts +++ b/src/utils/constants.ts @@ -1,6 +1,4 @@ -import APIGuidesIcon from 'components/icons/api-guides-icon' import AnnouncementIcon from 'components/icons/announcement-icon' -import DashboardsIcon from 'components/icons/dashboards-icon' import { getMessages } from 'utils/get-messages' import { @@ -16,9 +14,17 @@ import { UpdatesDataElement, WhatsNextDataElement, ResourceDataElement, + FaqDataElement, } from './typings/types' import { IntlShape } from 'react-intl' import libraryConfig from './libraryConfig' +import DeveloperPortalIcon from 'components/icons/developer-portal-icon' +import StartHereIcon from 'components/icons/start-here-icon' +import TutorialsIcon from 'components/icons/tutorials-icon' +import PaperIcon from 'components/icons/paper-icon' +import WarningIcon from 'components/icons/warning-icon' +import GraphIcon from 'components/icons/graph-icon' +import SignalIcon from 'components/icons/signal-icon' libraryConfig export const messages = getMessages() @@ -26,21 +32,36 @@ export const messages = getMessages() export const documentationData = (intl: IntlShape) => { const data: DocDataElement[] = [ { - Icon: APIGuidesIcon, - title: 'Start here', + Icon: StartHereIcon, + title: intl.formatMessage({ + id: 'documentation_start_here.title', + }), description: intl.formatMessage({ - id: 'documentation_api_guides.description', + id: 'documentation_start_here.description', }), link: '/docs/tracks', }, { - Icon: DashboardsIcon, - title: 'Tutorials & Solutions', + Icon: TutorialsIcon, + title: intl.formatMessage({ + id: 'documentation_tutorials.title', + }), description: intl.formatMessage({ - id: 'documentation_api_reference.description', + id: 'documentation_tutorials.description', }), link: '/docs/tutorial', }, + { + Icon: DeveloperPortalIcon, + title: intl.formatMessage({ + id: 'documentation_developers_portal.title', + }), + description: intl.formatMessage({ + id: 'documentation_developers_portal.description', + }), + link: 'https://developers.vtex.com/', + isExternalLink: true, + }, ] return data } @@ -58,6 +79,113 @@ export const updatesData = (intl: IntlShape) => { ] return data } + +export const faqData = (intl: IntlShape) => { + const data: FaqDataElement[] = [ + { + Icon: PaperIcon, + title: intl.formatMessage({ + id: 'faq_order_error.title', + }), + description: intl.formatMessage({ + id: 'faq_order_error.description', + }), + type: intl.formatMessage({ + id: 'faq_order_error.type', + }), + link: '/', + }, + { + Icon: WarningIcon, + title: intl.formatMessage({ + id: 'faq_handling.title', + }), + description: intl.formatMessage({ + id: 'faq_handling.description', + }), + type: intl.formatMessage({ + id: 'faq_handling.type', + }), + link: '/', + }, + { + Icon: GraphIcon, + title: intl.formatMessage({ + id: 'faq_product_visible.title', + }), + description: intl.formatMessage({ + id: 'faq_product_visible.description', + }), + type: intl.formatMessage({ + id: 'faq_product_visible.type', + }), + link: '/', + }, + { + Icon: PaperIcon, + title: intl.formatMessage({ + id: 'faq_carrier.title', + }), + description: intl.formatMessage({ + id: 'faq_carrier.description', + }), + type: intl.formatMessage({ + id: 'faq_carrier.type', + }), + link: '/', + }, + ] + return data +} + +export const supportData = (intl: IntlShape) => { + const data: DocDataElement[] = [ + { + Icon: WarningIcon, + title: intl.formatMessage({ + id: 'support_known_issues.title', + }), + description: intl.formatMessage({ + id: 'support_known_issues.description', + }), + link: '/known-issues', + }, + { + Icon: PaperIcon, + title: intl.formatMessage({ + id: 'support_plans.title', + }), + description: intl.formatMessage({ + id: 'support_plans.description', + }), + link: '/support-plans', + }, + { + Icon: SignalIcon, + title: intl.formatMessage({ + id: 'support_health_check.title', + }), + description: intl.formatMessage({ + id: 'support_health_check.description', + }), + isExternalLink: true, + link: 'http://healthcheck.vtex.com/', + }, + { + Icon: GraphIcon, + title: intl.formatMessage({ + id: 'support_status.title', + }), + description: intl.formatMessage({ + id: 'support_status.description', + }), + isExternalLink: true, + link: 'https://status.vtex.com/', + }, + ] + return data +} + export const getIcon = (doc: string, intl: IntlShape) => { return ( documentationData(intl).find((icon) => icon.title === doc)?.Icon || diff --git a/src/utils/getReleasesData.ts b/src/utils/getReleasesData.ts index 5942af6c..facc12b0 100644 --- a/src/utils/getReleasesData.ts +++ b/src/utils/getReleasesData.ts @@ -4,7 +4,7 @@ import getGithubFile from './getGithubFile' import replaceHTMLBlocks from './replaceHTMLBlocks' import replaceMagicBlocks from './replaceMagicBlocks' import { UpdateElement } from './typings/types' -import { ActionType } from 'components/last-updates-card/functions' +import { ActionType } from 'components/announcement-card/functions' import { getLogger } from 'utils/logging/log-util' type IReleasesFrontmatter = { diff --git a/src/utils/typings/types.ts b/src/utils/typings/types.ts index e30118bb..7c4d34d6 100644 --- a/src/utils/typings/types.ts +++ b/src/utils/typings/types.ts @@ -1,8 +1,8 @@ import { NextPage } from 'next' import { IconProps } from '@vtex/brand-ui' -import { ActionType } from 'components/last-updates-card/functions' -import { DocumentationTitle, UpdatesTitle, ResourceTitle } from './unionTypes' +import { ActionType } from 'components/announcement-card/functions' +import { UpdatesTitle, ResourceTitle } from './unionTypes' // eslint-disable-next-line @typescript-eslint/ban-types export type Page

= NextPage & { @@ -19,8 +19,15 @@ export type DataElement = { description: string } export interface DocDataElement extends DataElement { - title: DocumentationTitle + title: string + isExternalLink?: boolean } + +export interface FaqDataElement extends DataElement { + title: string + type: string +} + export interface UpdatesDataElement extends DataElement { title: UpdatesTitle } diff --git a/src/utils/typings/unionTypes.ts b/src/utils/typings/unionTypes.ts index e37b9c3a..1243882e 100644 --- a/src/utils/typings/unionTypes.ts +++ b/src/utils/typings/unionTypes.ts @@ -1,6 +1,9 @@ export type Locale = 'en' | 'pt' | 'es' -export type DocumentationTitle = 'Start here' | 'Tutorials & Solutions' +export type DocumentationTitle = + | 'Start here' + | 'Tutorials & Solutions' + | 'Developers Portal' export type UpdatesTitle = 'News' | 'Documentation Updates'