chore(lp): 📦️ Import existing Landing page

apps/landing-page/components/Homepage/ListWithVerticalLines/List.tsx

@@ -0,0 +1,23 @@
+import { Stack, StackProps } from '@chakra-ui/react'
+import * as React from 'react'
+import { ListItemProps } from './ListItem'
+
+export const List = (props: StackProps) => {
+  const { children, ...stackProps } = props
+  const items = React.useMemo(
+    () =>
+      React.Children.toArray(children)
+        .filter<React.ReactElement<ListItemProps>>(React.isValidElement)
+        .map((item, index, array) =>
+          index + 1 === array.length
+            ? React.cloneElement(item, { isLastItem: true })
+            : item
+        ),
+    [children]
+  )
+  return (
+    <Stack as="ul" {...stackProps}>
+      {items}
+    </Stack>
+  )
+}

apps/landing-page/components/Homepage/ListWithVerticalLines/ListItem.tsx

@@ -0,0 +1,64 @@
+import {
+  Stack,
+  Flex,
+  Circle,
+  Text,
+  useColorModeValue,
+  Heading,
+  StackProps,
+} from '@chakra-ui/react'
+import * as React from 'react'
+
+export interface ListItemProps extends StackProps {
+  title: string
+  circleActivated?: boolean
+  subTitle?: string
+  icon?: React.ReactElement
+  isLastItem?: boolean
+}
+
+export const ListItem = (props: ListItemProps) => {
+  const {
+    title,
+    subTitle,
+    icon,
+    isLastItem,
+    children,
+    circleActivated = true,
+    ...stackProps
+  } = props
+
+  return (
+    <Stack as="li" direction="row" spacing="4" {...stackProps}>
+      <Flex direction="column" alignItems="center" aria-hidden="true">
+        <Circle
+          bg={circleActivated ? 'blue.500' : 'gray.500'}
+          size="12"
+          borderWidth="4px"
+          borderColor={useColorModeValue('white', 'gray.800')}
+          color={useColorModeValue('white', 'black')}
+        >
+          {icon}
+        </Circle>
+        {!isLastItem && <Flex flex="1" borderRightWidth="1px" mb="-12" />}
+      </Flex>
+      <Stack spacing="4" pt="1" flex="1">
+        <Flex direction="column" mt="2">
+          <Heading
+            fontSize="2xl"
+            fontWeight="bold"
+            color={subTitle ? 'gray.600' : 'blue.400'}
+          >
+            {title}
+          </Heading>
+          {subTitle && (
+            <Text fontSize="sm" color="gray.600">
+              {subTitle}
+            </Text>
+          )}
+        </Flex>
+        <Flex>{children}</Flex>
+      </Stack>
+    </Stack>
+  )
+}

apps/landing-page/components/Homepage/ListWithVerticalLines/Placeholder.tsx

@@ -0,0 +1,12 @@
+import { Box, BoxProps, useColorModeValue } from '@chakra-ui/react'
+import * as React from 'react'
+
+export const Placeholder = (props: BoxProps) => (
+  <Box
+    bg={useColorModeValue('gray.50', 'gray.700')}
+    width="full"
+    height="32"
+    rounded="xl"
+    {...props}
+  />
+)

apps/landing-page/components/Homepage/ListWithVerticalLines/index.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react'
+import { Box } from '@chakra-ui/react'
+import { List } from './List'
+import { ListItem } from './ListItem'
+
+export type VerticalListItem = {
+  title: string
+  isActivated?: boolean
+  subTitle?: string
+  icon?: React.ReactElement
+  content: React.ReactNode
+}
+
+type Props = {
+  items: VerticalListItem[]
+}
+
+export const ListWithVerticalLines = ({ items }: Props) => {
+  return (
+    <Box as="section">
+      <Box maxW="2xl" mx="auto" p={{ base: '4', md: '8' }}>
+        <List spacing="12">
+          {items.map((item, idx) => (
+            <ListItem
+              key={idx}
+              title={item.title}
+              subTitle={item.subTitle}
+              icon={item.icon}
+              circleActivated={item.isActivated}
+            >
+              {item.content}
+            </ListItem>
+          ))}
+        </List>
+      </Box>
+    </Box>
+  )
+}