📄 Add Commercial License for ee folder (#1532)

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

@@ -0,0 +1,84 @@
+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 typebots with you',
+  },
+  {
+    Icon: ConditionIcon,
+    title: 'Link to sub typebots',
+    content: 'Reuse your typebots in different parent bots.',
+  },
+  {
+    Icon: CalculatorIcon,
+    title: 'Custom code',
+    content: 'Customize everything with your own Javascript & CSS code',
+  },
+  {
+    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={'52'}
+        w="full"
+        px="4"
+        spacing={12}
+      >
+        <VStack>
+          <Heading as="h1" textAlign="center" data-aos="fade">
+            And many more features
+          </Heading>
+          <Text
+            color="gray.500"
+            fontSize={['lg', 'xl']}
+            textAlign="center"
+            data-aos="fade"
+          >
+            Typebot makes form building easy and comes with powerful features
+          </Text>
+        </VStack>
+        <SimpleGrid columns={[1, 3]} spacing="10" pt="10" data-aos="fade">
+          {features.map((feature, idx) => (
+            <FeatureCard key={idx} {...feature} />
+          ))}
+        </SimpleGrid>
+      </Stack>
+    </Flex>
+  )
+}