📄 Add Commercial License for ee folder (#1532)

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

@@ -0,0 +1,133 @@
+import {
+  Box,
+  Button,
+  Flex,
+  Heading,
+  SimpleGrid,
+  Stack,
+  Text,
+  VStack,
+} from '@chakra-ui/react'
+import * as React from 'react'
+import { Header } from '../../common/Header/Header'
+import { BackgroundPolygons } from './BackgroundPolygons'
+import * as Logos from './Brands'
+import Link from 'next/link'
+import Image from 'next/image'
+import builderScreenshotSrc from 'public/images/builder-screenshot.png'
+
+export const Hero = () => {
+  return (
+    <Box as="section" overflow="hidden">
+      <Header />
+      <Stack mx="auto" py="10" pos="relative" pb="32" px={[4, 0]}>
+        <BackgroundPolygons />
+        <VStack mb="20" spacing={20} alignItems="center">
+          <VStack pt={['10', '20']} spacing="6" w="full">
+            <Heading
+              as="h1"
+              fontSize={['4xl', '4xl', '5xl', '7xl']}
+              textAlign="center"
+              maxW="1000px"
+              bgGradient="linear(to-r, blue.300, purple.300)"
+              bgClip="text"
+              data-aos="fade-up"
+            >
+              Build advanced chatbots visually
+            </Heading>
+            <Text
+              fontSize={['lg', 'xl']}
+              maxW="800px"
+              textAlign="center"
+              data-aos="fade-up"
+              data-aos-delay="100"
+            >
+              Typebot gives you powerful blocks to create unique chat
+              experiences. Embed them anywhere on your web/mobile apps and start
+              collecting results like magic.
+            </Text>
+            <Stack
+              direction={['column-reverse', 'row']}
+              data-aos="fade-up"
+              data-aos-delay="200"
+            >
+              <Button
+                as={Link}
+                href="https://app.typebot.io/register"
+                colorScheme="orange"
+                size="lg"
+                height="4rem"
+                px="2rem"
+              >
+                Create a typebot for free
+              </Button>
+            </Stack>
+          </VStack>
+          <Box maxW="1200px" pos="relative">
+            <Box
+              pos="absolute"
+              left="-40px"
+              bgColor="orange.500"
+              boxSize={['150px', '150px', '300px', '600px']}
+              rounded="full"
+              filter="blur(40px)"
+              opacity="0.7"
+              className="animated-blob"
+              data-aos="fade"
+              data-aos-delay="1200"
+            />
+            <Box
+              pos="absolute"
+              right="-40px"
+              bgColor="blue.500"
+              boxSize={['150px', '150px', '300px', '600px']}
+              rounded="full"
+              filter="blur(40px)"
+              opacity="0.7"
+              className="animated-blob animation-delay-5000"
+              data-aos="fade"
+              data-aos-delay="1200"
+            />
+            <Box
+              as="figure"
+              shadow="lg"
+              data-aos="zoom-out-up"
+              data-aos-delay="800"
+            >
+              <Image
+                src={builderScreenshotSrc}
+                alt="Builder screenshot"
+                placeholder="blur"
+                style={{ borderRadius: '10px' }}
+              />
+            </Box>
+          </Box>
+        </VStack>
+      </Stack>
+      <Flex justify="center" bgGradient="linear(to-b, gray.900, gray.800)">
+        <VStack spacing="12" pb="32" maxW="7xl" px={4}>
+          <Heading fontSize="25px" fontWeight="semibold" data-aos="fade">
+            Loved by teams and creators from all around the world
+          </Heading>
+          <SimpleGrid
+            columns={{ base: 2, md: 4 }}
+            color="gray.400"
+            alignItems="center"
+            spacing={12}
+            fontSize="4xl"
+            data-aos="fade"
+          >
+            <Logos.IbanFirst />
+            <Logos.Lemlist />
+            <Logos.MakerLead />
+            <Logos.Webisharp />
+            <Logos.SocialHackrs />
+            <Logos.PinpointInteractive />
+            <Logos.Obole />
+            <Logos.Awwwsome />
+          </SimpleGrid>
+        </VStack>
+      </Flex>
+    </Box>
+  )
+}