Fix/landing page

public/landing_page_announcements.json

@@ -0,0 +1,44 @@
+{
+    "announcements": [
+        {
+            "title": {
+                "en": "Get Order JSON now delivers new variables in order calculations",
+                "es": "JSON de Get Order entrega ahora nuevas variables de cálculos de pedido",
+                "pt": "JSON do Get Order entrega agora novas variáveis de cálculos do pedido"
+            },
+            "date": "2019-03-20T18:06:17.876Z"
+        },
+        {
+            "title": {
+                "en": "Extensions Hub: Expand your operation through the VTEX Admin",
+                "es": "Hub de extensiones: amplía tu operación a través del Admin VTEX",
+                "pt": "Hub de Extensões: Estenda a sua operação pelo Admin VTEX"
+            },
+            "date": "2023-05-31T22:15:06.695Z"
+        },
+        {
+            "title": {
+                "en": "VTEX Pick and Pack: a new solution to manage your fulfillment operation",
+                "es": "VTEX Pick and Pack: nueva solución para gestionar tu operación logística",
+                "pt": "VTEX Pick and Pack: nova solução para gerenciar sua operação de fulfillment"
+            },
+            "date": "2023-06-04T20:48:18.798Z"
+        },
+        {
+            "title": {
+                "en": "Introducing the new Shipping Strategy interfaces",
+                "es": "Descubre las nuevas interfaces de Estrategia de envío",
+                "pt": "Conheça as novas interfaces da Estratégia de envio"
+            },
+            "date": "2023-05-31T15:49:13.447Z"
+        },
+        {
+            "title": {
+                "en": "Black Week: VTEX Dashboards Analysis Strategies",
+                "es": "Black Week: VTEX Dashboards Analysis Strategies",
+                "pt": "Black Week: VTEX Dashboards Analysis Strategies"
+            },
+            "date": "2024-02-19T15:49:13.447Z"
+        }
+    ]
+}

src/components/announcement-section/index.tsx

@@ -1,41 +1,21 @@
 import { Box, Button, Flex, Text } from '@vtex/brand-ui'
-
-import { CardProps } from '../announcement-timeline-card'
 import { useIntl } from 'react-intl'
 
 import styles from './styles'
 import AnnouncementTimelineCard from '../announcement-timeline-card'
+import Link from 'next/link'
 
-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'),
-  },
-]
+interface AnnouncementSectionProps {
+  announcements: { title: string; date: string }[]
+}
 
-const AnnouncementSection = () => {
+const AnnouncementSection = ({ announcements }: AnnouncementSectionProps) => {
   const intl = useIntl()
+  const newAnnouncements = announcements
+    .map((announcement) => {
+      return { title: announcement.title, date: new Date(announcement.date) }
+    })
+    .sort((a, b) => b.date.getTime() - a.date.getTime())
 
   return (
     <Flex sx={styles.sectionContainer}>
@@ -47,11 +27,15 @@ const AnnouncementSection = () => {
         </Text>
       </Flex>
       <Box sx={styles.cardsContainer}>
-        <AnnouncementTimelineCard announcements={lastAnnouncements} />
+        <AnnouncementTimelineCard announcements={newAnnouncements} />
       </Box>
-      <Button sx={styles.button}>
-        {intl.formatMessage({ id: 'landing_page_announcements.button' })}
-      </Button>
+      <Flex sx={styles.buttonContainer}>
+        <Link href={'/announcements'}>
+          <Button sx={styles.button}>
+            {intl.formatMessage({ id: 'landing_page_announcements.button' })}
+          </Button>
+        </Link>
+      </Flex>
     </Flex>
   )
 }

src/components/announcement-section/styles.ts

@@ -25,14 +25,18 @@ const cardsContainer: SxStyleProp = {
 }
 
 const button: SxStyleProp = {
+  transition: 'all 0.3s ease-out',
+}
+
+const buttonContainer: 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,
+  buttonContainer,
 }

src/components/announcement-timeline-card/index.tsx

@@ -8,9 +8,8 @@ import styles from './styles'
 import MegaphoneIcon from 'components/icons/megaphone-icon'
 import NewIcon from 'components/icons/new-icon'
 
-export interface CardProps {
+export interface AnnouncementTimelineCardProps {
   title: string
-  description: string
   date: Date
   first?: boolean
 }
@@ -19,7 +18,7 @@ const AnnouncementTimelineItem = ({
   title,
   date,
   first = false,
-}: CardProps) => {
+}: AnnouncementTimelineCardProps) => {
   const intl = useIntl()
 
   return (
@@ -30,12 +29,13 @@ const AnnouncementTimelineItem = ({
           first ? (
             <Text sx={styles.newTitle}>New</Text>
           ) : (
-            <Box sx={styles.placeholder}></Box>
+            <Text sx={styles.timelineTitle}>{title}</Text>
           )
         }
         icon={first ? <NewIcon sx={styles.icon} /> : null}
       >
-        <Text sx={styles.timelineTitle}>{title}</Text>
+        {first && <Text sx={styles.timelineTitle}>{title}</Text>}
+        {first && <Box sx={styles.placeholder}></Box>}
         <Text sx={styles.content}>
           {`${getDaysElapsed(date)} ${intl.formatMessage({
             id: 'relese-note-days-elapsed',
@@ -47,11 +47,15 @@ const AnnouncementTimelineItem = ({
 }
 
 interface Props {
-  announcements: CardProps[]
+  announcements: AnnouncementTimelineCardProps[]
 }
 
 const AnnouncementTimelineCard = ({ announcements }: Props) => {
   const intl = useIntl()
+  const currentDate = new Date()
+  const sevenDaysAgo = new Date(currentDate)
+  sevenDaysAgo.setDate(currentDate.getDate() - 7)
+
   return (
     <Link href={'/announcements'}>
       <Flex sx={styles.cardContainer}>
@@ -72,13 +76,13 @@ const AnnouncementTimelineCard = ({ announcements }: Props) => {
         </Box>
         <Box sx={styles.timelineContainer}>
           {announcements.map((announcement, index) => {
-            return index === 0 ? (
+            const isNew = announcement.date >= sevenDaysAgo
+
+            return (
               <AnnouncementTimelineItem
                 key={index}
-                {...{ ...announcement, first: true }}
+                {...{ ...announcement, first: isNew || index === 0 }}
               />
-            ) : (
-              <AnnouncementTimelineItem key={index} {...announcement} />
             )
           })}
         </Box>

src/components/announcement-timeline-card/styles.ts

@@ -2,15 +2,15 @@ import { SxStyleProp } from '@vtex/brand-ui'
 
 const cardContainer: SxStyleProp = {
   mt: ['16px', '24px', '24px', '32px'],
-  px: ['16px', '24px', '24px', '96px'],
+  px: ['16px', '24px', '24px', '48px'],
   py: ['16px', '64px', '64px'],
   justifyContent: 'center',
   backgroundColor: 'white',
   borderRadius: '8px',
   border: '1px solid #E7E9EE',
   transition: 'all 0.3s ease-out',
   color: '#5E6E84',
-  columnGap: '50px',
+  columnGap: '96px',
   rowGap: '64px',
   flexWrap: 'wrap',
 
@@ -69,7 +69,7 @@ const timeLineBar: SxStyleProp = {
       },
       mb: '4px',
     },
-    '& > :nth-of-type(2)': {
+    '& > :nth-child(2)': {
       width: '1px',
       borderRadius: '0.5rem',
     },
@@ -80,6 +80,7 @@ const timeLineBar: SxStyleProp = {
     padding: '0',
     '& > :nth-of-type(2)': {
       mt: '10px',
+      mb: '32px',
     },
   },
 }
@@ -104,7 +105,7 @@ const newTitle: SxStyleProp = {
 }
 
 const placeholder: SxStyleProp = {
-  height: '18px',
+  height: '10px',
   width: '1px',
 }
 

src/components/documentation-section-card/index.tsx

@@ -2,9 +2,8 @@ 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 { useRef } from 'react'
 import { useIntl } from 'react-intl'
 import LongArrowIcon from 'components/icons/long-arrow-icon'
 
@@ -16,68 +15,47 @@ const DocumentationSectionCard = ({
   isExternalLink = false,
 }: DocDataElement) => {
   const intl = useIntl()
-  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 sx={styles.infoContainer}>
-            <Icon sx={styles.icon} />
-            <Text className="title" sx={styles.title}>
-              {title}
-            </Text>
-            <Text
-              ref={descriptionRef}
-              className="description"
-              sx={styles.description}
-            >
-              {description}
-            </Text>
-          </Flex>
-          <Flex
-            className="quickStartedContainer"
-            sx={styles.quickStartedContainer}
+    <Link href={link}>
+      <Flex sx={styles.cardContainer}>
+        <Flex sx={styles.infoContainer}>
+          <Icon sx={styles.icon} />
+          <Text className="title" sx={styles.title}>
+            {title}
+          </Text>
+          <Text
+            ref={descriptionRef}
+            className="description"
+            sx={styles.description}
           >
-            {!isExternalLink ? (
-              <Text className="learnMoreText" sx={styles.learnMoreText}>
+            {description}
+          </Text>
+        </Flex>
+        <Flex
+          className="quickStartedContainer"
+          sx={styles.quickStartedContainer}
+        >
+          {!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.learnMoreText',
+                  id: 'landing_page_documentation_card.accessPortal',
                 })}
               </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>
+              <LongArrowIcon size={18} />
+            </Flex>
+          )}
         </Flex>
-      </Link>
-    </Tooltip>
+      </Flex>
+    </Link>
   )
 }
 

src/components/documentation-section-card/styles.ts

@@ -2,7 +2,6 @@ import { SxStyleProp } from '@vtex/brand-ui'
 
 const cardContainer: SxStyleProp = {
   flexDirection: 'column',
-  margin: '16px',
   width: '282px',
   height: '293px',
   boxSizing: 'initial',

src/components/documentation-section/styles.ts

@@ -20,6 +20,7 @@ const cardsContainer: SxStyleProp = {
   width: ['100%', '100%', '100%', '100%', '1000px', '100%'],
   justifyContent: 'center',
   flexWrap: 'wrap',
+  gap: '32px',
 }
 
 export default {