Merge pull request #20 from vtexdocs/feat/homepage-documentation

Homepage Documentation, Support Resources, Announcements and FAQ sections

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 (
+    <Flex sx={styles.releaseContainer}>
+      <Timeline.Event
+        sx={styles.timeLineBar}
+        title={
+          first ? (
+            <Text sx={styles.newTitle}>New</Text>
+          ) : (
+            <Box sx={styles.placeholder}></Box>
+          )
+        }
+        icon={first ? <NewIcon sx={styles.icon} /> : null}
+      >
+        <Text sx={styles.timelineTitle}>{title}</Text>
+        <Text sx={styles.content}>
+          {`${getDaysElapsed(date)} ${intl.formatMessage({
+            id: 'relese-note-days-elapsed',
+          })}`}
+        </Text>
+      </Timeline.Event>
+    </Flex>
+  )
+}
+
+interface Props {
+  announcements: CardProps[]
+}
+
+const AnnouncementCard = ({ announcements }: Props) => {
+  const intl = useIntl()
+  return (
+    <Link href={'/announcements'} legacyBehavior>
+      <Flex sx={styles.cardContainer}>
+        <Box>
+          <Flex sx={styles.title}>
+            <MegaphoneIcon />
+            <Text>
+              {intl.formatMessage({
+                id: 'landing_page_announcements.title',
+              })}
+            </Text>
+          </Flex>
+          <Text sx={styles.description}>
+            {intl.formatMessage({
+              id: 'landing_page_announcements.description',
+            })}
+          </Text>
+        </Box>
+        <Box sx={styles.timelineContainer}>
+          {announcements.map((announcement, index) => {
+            return index === 0 ? (
+              <AnnouncementTimelineItem
+                key={index}
+                {...{ ...announcement, first: true }}
+              />
+            ) : (
+              <AnnouncementTimelineItem key={index} {...announcement} />
+            )
+          })}
+        </Box>
+      </Flex>
+    </Link>
+  )
+}
+
+export default AnnouncementCard

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

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 [email protected]',
+    date: new Date('03/02/2023'),
+  },
+  {
+    title: 'Black Week: VTEX Dashboards Analysis Strategies',
+    description: 'Deprecation of [email protected]',
+    date: new Date('03/02/2023'),
+  },
+  {
+    title: 'Black Week: VTEX Dashboards Analysis Strategies',
+    description: 'Deprecation of [email protected]',
+    date: new Date('03/02/2023'),
+  },
+  {
+    title: 'Black Week: VTEX Dashboards Analysis Strategies',
+    description: 'Deprecation of [email protected]',
+    date: new Date('03/02/2023'),
+  },
+  {
+    title: 'Black Week: VTEX Dashboards Analysis Strategies',
+    description: 'Deprecation of [email protected]',
+    date: new Date('03/02/2023'),
+  },
+]
+
+const AnnouncementSection = () => {
+  const intl = useIntl()
+
+  return (
+    <Flex sx={styles.sectionContainer}>
+      <Flex>
+        <Text sx={styles.title}>
+          {intl.formatMessage({
+            id: 'landing_page_announcements.title',
+          })}
+        </Text>
+      </Flex>
+      <Box sx={styles.cardsContainer}>
+        <AnnouncementCard announcements={lastAnnouncements} />
+      </Box>
+      <Button sx={styles.button}>
+        {intl.formatMessage({ id: 'landing_page_announcements.button' })}
+      </Button>
+    </Flex>
+  )
+}
+
+export default AnnouncementSection

src/components/last-updates-section/styles.ts → 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,
 }

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>