chore(lp): 📦️ Import existing Landing page

apps/landing-page/components/Homepage/Hero/Testimonials/Testimonial.tsx

@@ -0,0 +1,59 @@
+import { Box, Flex, HStack, Stack, Text } from '@chakra-ui/react'
+import * as React from 'react'
+import Image from 'next/image'
+import { QuoteLeftIcon } from 'assets/icons/QuoteLeftIcon'
+
+interface TestimonialProps {
+  image: StaticImageData
+  name: string
+  role: string
+  children: React.ReactNode
+}
+
+export const Testimonial = (props: TestimonialProps) => {
+  const { image, name, role, children } = props
+  return (
+    <Flex
+      flexDir="column"
+      justify="space-between"
+      as="blockquote"
+      p="6"
+      rounded="md"
+      bgColor="blue.400"
+      color="white"
+      shadow="lg"
+      {...props}
+    >
+      <Stack>
+        <QuoteLeftIcon boxSize="25px" />
+        <Text mt="3" fontSize="xl" maxW="38rem" color="gray.50">
+          {children}
+        </Text>
+      </Stack>
+
+      <HStack mt="6" spacing="4">
+        <Image
+          src={image}
+          alt={name}
+          placeholder="blur"
+          width="80px"
+          height="80px"
+          className="rounded-full"
+        />
+        <Box>
+          <Text
+            as="cite"
+            fontStyle="normal"
+            fontWeight="extrabold"
+            color="white"
+          >
+            {name}
+          </Text>
+          <Text fontSize="sm" color={'gray.100'}>
+            {role}
+          </Text>
+        </Box>
+      </HStack>
+    </Flex>
+  )
+}

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

@@ -0,0 +1,36 @@
+import { chakra, Stack } from '@chakra-ui/react'
+import * as React from 'react'
+import joshuaPictureSrc from 'public/images/homepage/joshua.jpg'
+import julienPictureSrc from 'public/images/homepage/julien.jpg'
+import { Testimonial } from './Testimonial'
+
+export const Testimonials = () => {
+  return (
+    <Stack direction={['column', 'row']} spacing="10" maxW="800px">
+      <Testimonial
+        name="Joshua Lim"
+        role="Growth Strategist @ Socialhackrs Media"
+        image={joshuaPictureSrc}
+      >
+        I upgraded my typeforms to typebots and saw a conversion rate increase{' '}
+        <chakra.span fontWeight="bold" color="orange.300">
+          from 14% to 43%
+        </chakra.span>{' '}
+        on my marketing campaigns. I noticed the improvement on day one. That
+        was a game-changer.
+      </Testimonial>
+      <Testimonial
+        name="Julien Muratot"
+        role="Growth Manager @ Hornetwork"
+        image={julienPictureSrc}
+      >
+        I run Google ads all year long on our landing page that contains a
+        typebot. I saw a{' '}
+        <chakra.span fontWeight="bold" color="orange.300">
+          2x increase
+        </chakra.span>{' '}
+        on our conversation rate compared to our old WordPress form.
+      </Testimonial>
+    </Stack>
+  )
+}

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>
+  )
+}