chore(lp): 📦️ Import existing Landing page

apps/landing-page/components/Homepage/Features/FeatureCard.tsx

@@ -0,0 +1,35 @@
+import { Flex, VStack } from '@chakra-ui/layout'
+import { IconProps, Text } from '@chakra-ui/react'
+import React from 'react'
+
+type FeatureCardProps = {
+  Icon: (props: IconProps) => JSX.Element
+  title: string
+  content: string
+}
+
+export const FeatureCard = ({ Icon, title, content }: FeatureCardProps) => {
+  return (
+    <VStack p="6" bgColor="gray.100" pos="relative" rounded="lg" spacing="4">
+      <Flex
+        boxSize="50px"
+        bgColor="blue.500"
+        rounded="lg"
+        color="white"
+        justify="center"
+        align="center"
+        pos="absolute"
+        top="-25px"
+        shadow="lg"
+      >
+        <Icon boxSize="25px" />
+      </Flex>
+      <Text textAlign="center" fontWeight="semibold">
+        {title}
+      </Text>
+      <Text textAlign="center" color="gray.500">
+        {content}
+      </Text>
+    </VStack>
+  )
+}

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

@@ -0,0 +1,75 @@
+import React from 'react'
+import {
+  Flex,
+  Heading,
+  SimpleGrid,
+  Stack,
+  Text,
+  VStack,
+} from '@chakra-ui/react'
+import { FeatureCard } from './FeatureCard'
+import { FolderIcon } from 'assets/icons/FolderIcon'
+import { AccessibilityIcon } from 'assets/icons/AccessibilityIcon'
+import { CalculatorIcon } from 'assets/icons/CaluclatorIcon'
+import { ConditionIcon } from 'assets/icons/ConditionIcon'
+import { PersonAddIcon } from 'assets/icons/PersonAddIcon'
+import { ShareIcon } from 'assets/icons/ShareIcon'
+
+const features = [
+  {
+    Icon: AccessibilityIcon,
+    title: 'Hidden fields',
+    content:
+      'Include data in your form URL to segment your user and use its data directly in your form.',
+  },
+  {
+    Icon: PersonAddIcon,
+    title: 'Team collaboration',
+    content: 'Invite your teammates to work on your typebot with you',
+  },
+  {
+    Icon: ConditionIcon,
+    title: 'Conditional branching',
+    content:
+      'Make your form smarter by adding conditions to display custom answers to your users',
+  },
+  {
+    Icon: CalculatorIcon,
+    title: 'Computation',
+    content:
+      'Use the calculator to compute anything in Typebot directly to generate a quote or compute a score',
+  },
+  {
+    Icon: ShareIcon,
+    title: 'Custom domain',
+    content: 'Connect your typebot to the custom URL of your choice',
+  },
+  {
+    Icon: FolderIcon,
+    title: 'Folder management',
+    content:
+      'Organize your typebots in specific folders to keep it clean and work with multiple clients',
+  },
+]
+
+export const Features = () => {
+  return (
+    <Flex justifyContent="center">
+      <Stack style={{ maxWidth: '1200px' }} pt={32} w="full" px="4" spacing={6}>
+        <VStack>
+          <Heading as="h1" textAlign="center">
+            And many more features
+          </Heading>
+          <Text color="gray.500" size="lg" textAlign="center">
+            Typebot makes form building easy and comes with powerful features
+          </Text>
+          <SimpleGrid columns={[1, 3]} spacing="10" pt="10">
+            {features.map((feature, idx) => (
+              <FeatureCard key={idx} {...feature} />
+            ))}
+          </SimpleGrid>
+        </VStack>
+      </Stack>
+    </Flex>
+  )
+}