docs(lp): 💄 Refont LP for v2

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

@@ -0,0 +1,10 @@
+import { Box, BoxProps } from '@chakra-ui/react'
+import React from 'react'
+import Image from 'next/image'
+import spotlightSrc from 'public/images/homepage/spotlight.png'
+
+export const BackgroundSpotlight = (props: BoxProps) => (
+  <Box {...props}>
+    <Image src={spotlightSrc} alt="spotlight" />
+  </Box>
+)

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

@@ -0,0 +1,129 @@
+import {
+  Box,
+  Button,
+  Flex,
+  Heading,
+  SimpleGrid,
+  Stack,
+  Text,
+  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 Image from 'next/image'
+import builderScreenshotSrc from 'public/images/homepage/builder.png'
+import { GitHubIcon } from 'assets/icons'
+
+export const Hero = () => {
+  return (
+    <Box as="section" overflow="hidden">
+      <Navbar />
+      <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"
+            >
+              Open-source conversational apps builder
+            </Heading>
+            <Text fontSize={['lg', 'xl']} maxW="800px" textAlign="center">
+              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']}>
+              <Button
+                as={NextChakraLink}
+                href="https://app.typebot.io/register"
+                colorScheme="orange"
+                size="lg"
+                height="4rem"
+                px="2rem"
+              >
+                Create a typebot
+              </Button>
+              <Button
+                as={NextChakraLink}
+                href="https://github.com/baptisteArno/typebot.io"
+                isExternal={true}
+                colorScheme="gray"
+                size="lg"
+                height="4rem"
+                px="2rem"
+                variant="outline"
+                leftIcon={<GitHubIcon />}
+              >
+                Star us on GitHub
+              </Button>
+            </Stack>
+
+            <Text color="gray.400">
+              No trial. Generous, unlimited <strong>free</strong> plan.
+            </Text>
+          </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 animation-delay-2000"
+            />
+            <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-4000"
+            />
+            <Box as="figure" shadow="lg">
+              <Image
+                src={builderScreenshotSrc}
+                alt="Builder screenshot"
+                placeholder="blur"
+              />
+            </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">
+            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"
+          >
+            <Logos.IbanFirst />
+            <Logos.Lemlist />
+            <Logos.MakerLead />
+            <Logos.Webisharp />
+            <Logos.SocialHackrs />
+            <Logos.PinpointInteractive />
+            <Logos.Obole />
+            <Logos.Awwwsome />
+          </SimpleGrid>
+        </VStack>
+      </Flex>
+    </Box>
+  )
+}

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

@@ -1,59 +0,0 @@
-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

@@ -1,36 +0,0 @@
-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

@@ -1,92 +1 @@
-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/register"
-              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>
-  )
-}
+export { Hero } from './Hero'