chore(lp): 📦️ Import existing Landing page

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

@@ -0,0 +1,92 @@
+import {
+  Box,
+  Button,
+  chakra,
+  Flex,
+  Heading,
+  SimpleGrid,
+  Stack,
+  Text,
+  useColorModeValue as mode,
+  VStack,
+} from '@chakra-ui/react'
+import { NextChakraLink } from 'components/common/nextChakraAdapters/NextChakraLink'
+import * as React from 'react'
+import { Navbar } from '../../common/Navbar/Navbar'
+import { BackgroundPolygons } from './BackgroundPolygons'
+import * as Logos from './Brands'
+import { Testimonials } from './Testimonials'
+
+export const Hero = () => {
+  return (
+    <Box as="section" overflow="hidden">
+      <Navbar />
+      <Stack mx="auto" maxW="7xl" py="10" pos="relative" pb="32" px={[4, 0]}>
+        <BackgroundPolygons />
+        <VStack mb="20" alignItems="center">
+          <VStack pt={['10', '20']} spacing="6">
+            <Heading as="h1" size="2xl" textAlign="center" maxW="900px">
+              <chakra.span
+                bgImage={`url(\"/brush.svg\")`}
+                bgSize="cover"
+                bgRepeat="no-repeat"
+              >
+                4x more
+              </chakra.span>{' '}
+              responses with your forms
+            </Heading>
+            <Text
+              color={'gray.600'}
+              fontSize={['lg', 'xl']}
+              maxW="700px"
+              textAlign="center"
+            >
+              Typebot offers tools to create high-converting lead forms
+              specifically designed for your marketing campaigns
+            </Text>
+            <Button
+              as={NextChakraLink}
+              href="https://app.typebot.io/signup"
+              colorScheme="orange"
+              bgColor="#FF8E20"
+              _hover={{ bgColor: 'orange.500' }}
+              shadow="lg"
+              size="lg"
+              height="4rem"
+              px="2rem"
+            >
+              Create a typebot for free
+            </Button>
+          </VStack>
+          <Box boxSize={{ base: '20', lg: '8' }} />
+          <Testimonials />
+        </VStack>
+      </Stack>
+      <Flex justify="center" bgColor="gray.100">
+        <VStack spacing="12" py="20" maxW="7xl" px={4}>
+          <Text
+            color={mode('gray.600', 'gray.400')}
+            fontSize="25px"
+            fontWeight="semibold"
+          >
+            Trusted by 1,200+ companies and freelance marketers
+          </Text>
+          <SimpleGrid
+            columns={{ base: 2, md: 3, lg: 6 }}
+            color="gray.500"
+            alignItems="center"
+            spacing={{ base: '12', lg: '24' }}
+            fontSize="4xl"
+          >
+            <Logos.IbanFirst />
+            <Logos.Lemlist />
+            <Logos.MakerLead />
+            <Logos.SocialHackrs />
+            <Logos.PinpointInteractive />
+            <Logos.Obole />
+          </SimpleGrid>
+        </VStack>
+      </Flex>
+    </Box>
+  )
+}