Homepage Documentation, Support Resources, Announcements and FAQ sections

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}
           >
-            <Text className="learnMoreText" sx={styles.learnMoreText}>
-              {intl.formatMessage({
-                id: 'landing_page_documentation_documentation_card.learnMoreText',
-              })}
-            </Text>
+            {!isExternalLink ? (
+              <Text className="learnMoreText" sx={styles.learnMoreText}>
+                {intl.formatMessage({
+                  id: 'landing_page_documentation_card.learnMoreText',
+                })}
+              </Text>
+            ) : (
+              <Flex sx={styles.accessPortal}>
+                <Text className="accessPortal" sx={styles.learnMoreText}>
+                  {intl.formatMessage({
+                    id: 'landing_page_documentation_card.accessPortal',
+                  })}
+                </Text>
+                <LongArrowIcon size={18} />
+              </Flex>
+            )}
           </Flex>
         </Flex>
       </Link>

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,
 }

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 (
     <Box sx={styles.sectionContainer}>
+      <Text sx={styles.title}>
+        {intl.formatMessage({
+          id: 'landing_page_documentation.title',
+        })}
+      </Text>
       <Flex
         sx={styles.cardsContainer}
         data-cy="documentation-section-card-list"

src/components/documentation-section/styles.ts

@@ -1,7 +1,6 @@
 import { SxStyleProp } from '@vtex/brand-ui'
 
 const sectionContainer: SxStyleProp = {
-  px: ['8px', '12px', '96px', '38px'],
   paddingTop: ['0px', '32px'],
   paddingBottom: ['24px', '52px', '52px', '48px'],
   margin: 'auto',

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<HTMLElement>()
+
+  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 (
+    <Tooltip placement="top" label={tooltipDescription} isCard={tooltipState}>
+      <Link href={link} legacyBehavior>
+        <Flex sx={styles.cardContainer}>
+          <Flex className="typeContainer" sx={styles.typeContainer}>
+            <Icon className="icon" sx={styles.icon} />
+            <Text className="type" sx={styles.type}>
+              {type}
+            </Text>
+          </Flex>
+          <Flex sx={styles.infoContainer}>
+            <Text className="title" sx={styles.title}>
+              {title}
+            </Text>
+            <Text
+              ref={descriptionRef}
+              className="description"
+              sx={styles.description}
+            >
+              {description}
+            </Text>
+          </Flex>
+        </Flex>
+      </Link>
+    </Tooltip>
+  )
+}
+
+export default FaqSectionCard

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,
+}

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 (
+    <Box sx={styles.sectionContainer}>
+      <Box sx={styles.titleContainer}>
+        <Box>
+          <Text sx={styles.title}>
+            {intl.formatMessage({
+              id: 'landing_page_faq.title',
+            })}
+          </Text>
+          <Text sx={styles.description}>
+            {intl.formatMessage({
+              id: 'landing_page_faq.description',
+            })}
+          </Text>
+        </Box>
+        <Button sx={styles.leftButton}>
+          {intl.formatMessage({ id: 'landing_page_faq.button' })}
+        </Button>
+      </Box>
+      <Flex sx={styles.cardsContainer} data-cy="faq-section-card-list">
+        {faqData(intl).map((card) => (
+          <FaqSectionCard key={card.title} {...card} />
+        ))}
+      </Flex>
+      <Button sx={styles.bottomButton}>
+        {intl.formatMessage({ id: 'landing_page_faq.button' })}
+      </Button>
+    </Box>
+  )
+}
+
+export default FaqSection