docs(lp): 💄 Small visual fixes

baptisteArno · Mar 17, 2022 · 52b7733 · 52b7733
1 parent 8ba231f
commit 52b7733
Show file tree

Hide file tree

Showing 12 changed files with 159 additions and 83 deletions.
diff --git a/apps/landing-page/assets/style.css b/apps/landing-page/assets/style.css
@@ -25,9 +25,19 @@
 .animation-delay-2000 {
   animation-delay: 2s;
 }
+
+.animation-delay-2000 {
+  animation-delay: 2s;
+}
+.animation-delay-3000 {
+  animation-delay: 3s;
+}
 .animation-delay-4000 {
   animation-delay: 4s;
 }
+.animation-delay-5000 {
+  animation-delay: 5s;
+}
 
 @keyframes blob {
   0% {

diff --git a/apps/landing-page/components/Homepage/EasyBuildingExperience.tsx b/apps/landing-page/components/Homepage/EasyBuildingExperience.tsx
@@ -27,7 +27,7 @@ export const EasyBuildingExperience = () => {
         justifyContent="space-between"
         alignItems="center"
       >
-        <Stack spacing="6" maxW="300px">
+        <Stack spacing="6" maxW="300px" minW={[0, '300px']}>
           <Heading as="h1" data-aos="fade">
             Easy building experience
           </Heading>

diff --git a/apps/landing-page/components/Homepage/EasyEmbed.tsx b/apps/landing-page/components/Homepage/EasyEmbed.tsx
@@ -27,7 +27,7 @@ export const EasyEmbed = () => {
         justifyContent="space-between"
         alignItems="center"
       >
-        <Stack spacing="6" maxW="300px">
+        <Stack spacing="6" maxW="300px" minW={[0, '300px']}>
           <Heading as="h1" data-aos="fade">
             Embed it in a click
           </Heading>

diff --git a/apps/landing-page/components/Homepage/Hero/BackgroundPolygons.tsx b/apps/landing-page/components/Homepage/Hero/BackgroundPolygons.tsx
@@ -6,7 +6,7 @@ export const BackgroundPolygons = () => {
     <>
       <chakra.div
         display={{ base: 'none', xl: 'block' }}
-        animation="float 6s ease-in-out infinite;"
+        className="floating animation-delay-3000"
         pos="absolute"
         left="0px"
         top="100px"
@@ -17,7 +17,7 @@ export const BackgroundPolygons = () => {
       </chakra.div>
       <chakra.div
         display={{ base: 'none', xl: 'block' }}
-        animation="float 6s ease-in-out 700ms infinite;"
+        className="floating animation-delay-4000"
         pos="absolute"
         right="-10px"
         top="30px"

diff --git a/apps/landing-page/components/Homepage/Hero/Hero.tsx b/apps/landing-page/components/Homepage/Hero/Hero.tsx
@@ -15,7 +15,6 @@ 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 (
@@ -62,23 +61,10 @@ export const Hero = () => {
               >
                 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" data-aos="fade-up" data-aos-delay="300">
-              No trial. Generous, unlimited <strong>free</strong> plan.
+              Generous, unlimited <strong>free</strong> plan.
             </Text>
           </VStack>
           <Box maxW="1200px" pos="relative">
@@ -90,7 +76,7 @@ export const Hero = () => {
               rounded="full"
               filter="blur(40px)"
               opacity="0.7"
-              className="animated-blob animation-delay-2000"
+              className="animated-blob"
               data-aos="fade"
               data-aos-delay="1200"
             />
@@ -102,7 +88,7 @@ export const Hero = () => {
               rounded="full"
               filter="blur(40px)"
               opacity="0.7"
-              className="animated-blob animation-delay-4000"
+              className="animated-blob animation-delay-5000"
               data-aos="fade"
               data-aos-delay="1200"
             />

diff --git a/apps/landing-page/components/Homepage/Integrations.tsx b/apps/landing-page/components/Homepage/Integrations.tsx
@@ -74,7 +74,7 @@ export const Integrations = () => (
               align="center"
               borderWidth="1px"
               data-aos="fade"
-              data-aos-delay={idx * 100}
+              data-aos-delay={idx * 200}
             >
               <Icon w="full" h="full" />
             </Flex>
@@ -94,7 +94,7 @@ export const Integrations = () => (
               align="center"
               borderWidth="1px"
               data-aos="fade"
-              data-aos-delay={(secondRowIcons.length - idx) * 100}
+              data-aos-delay={(secondRowIcons.length - idx) * 200}
             >
               <Icon w="full" h="full" />
             </Flex>

diff --git a/apps/landing-page/components/Homepage/RealTimeResults.tsx b/apps/landing-page/components/Homepage/RealTimeResults.tsx
@@ -109,6 +109,7 @@ export const RealTimeResults = () => {
               borderRadius: '0.5rem',
               border: 'none',
               backgroundColor: 'white',
+              pointerEvents: 'none',
             }}
           />
         </Stack>

diff --git a/apps/landing-page/components/Homepage/Testimonials/Testimonials.tsx b/apps/landing-page/components/Homepage/Testimonials/Testimonials.tsx
@@ -30,7 +30,7 @@ export const Testimonials = () => {
             on my marketing campaigns. I noticed the improvement on day one.
             That was a game-changer.
           </Testimonial>
-          <Testimonial
+          {/* <Testimonial
             name="Nicolai Grut"
             role="Growth Strategist @ X"
             image={joshuaPictureSrc}
@@ -39,7 +39,7 @@ export const Testimonials = () => {
             I am really loving using Typebot! I have used so many bot builders
             (ActiveChat, Botstar, Uchat, Monkeybot) and Typebot is definitely
             the most user-friendly, and yet still powerful.
-          </Testimonial>
+          </Testimonial> */}
           <Testimonial
             name="Julien Muratot"
             role="Growth Manager @ Hornetwork"

diff --git a/apps/landing-page/components/PricingPage/PricingCard/Card.tsx b/apps/landing-page/components/PricingPage/PricingCard/Card.tsx
@@ -13,8 +13,7 @@ export const Card = (props: CardProps) => {
       bg={useColorModeValue('white', 'gray.700')}
       position="relative"
       px="6"
-      pb="6"
-      pt="16"
+      py="6"
       overflow="hidden"
       shadow="lg"
       maxW="md"

diff --git a/apps/landing-page/components/PricingPage/PricingCard/index.tsx b/apps/landing-page/components/PricingPage/PricingCard/index.tsx
@@ -31,43 +31,48 @@ export const PricingCard = (props: PricingCardProps) => {
 
   return (
     <Card rounded="xl" bgColor="gray.800" {...rest}>
-      <VStack spacing={6}>
-        {icon}
-        <Heading size="md" fontWeight="extrabold">
-          {name}
-        </Heading>
-      </VStack>
-      <Flex
-        align="flex-end"
-        justify="center"
-        fontWeight="extrabold"
-        color={accentColor}
-        my="8"
-      >
-        <Heading size="2xl" fontWeight="inherit" lineHeight="0.9em">
-          {price}
-        </Heading>
-        {(price.includes('$') || price.includes('€')) && (
-          <Text fontWeight="inherit" fontSize="xl">
-            / mo
-          </Text>
-        )}
+      <Flex justifyContent="space-between" flexDir="column" h="full">
+        <Flex flexDir="column">
+          <VStack spacing={6}>
+            {icon}
+            <Heading size="md" fontWeight="extrabold">
+              {name}
+            </Heading>
+          </VStack>
+          <Flex
+            align="flex-end"
+            justify="center"
+            fontWeight="extrabold"
+            color={accentColor}
+            my="8"
+          >
+            <Heading size="2xl" fontWeight="inherit" lineHeight="0.9em">
+              {price}
+            </Heading>
+            {(price.includes('$') || price.includes('€')) && (
+              <Text fontWeight="inherit" fontSize="xl">
+                / month
+              </Text>
+            )}
+          </Flex>
+          <List spacing="4" mb="8" maxW="30ch" mx="auto">
+            {features.map((feature, index) => (
+              <ListItem fontWeight="medium" key={index}>
+                <ListIcon
+                  fontSize="xl"
+                  as={CheckIcon}
+                  marginEnd={2}
+                  color={accentColor}
+                  fill="blue.200"
+                />
+                {feature}
+              </ListItem>
+            ))}
+          </List>
+        </Flex>
+
+        {button}
       </Flex>
-      <List spacing="4" mb="8" maxW="30ch" mx="auto">
-        {features.map((feature, index) => (
-          <ListItem fontWeight="medium" key={index}>
-            <ListIcon
-              fontSize="xl"
-              as={CheckIcon}
-              marginEnd={2}
-              color={accentColor}
-              fill="blue.200"
-            />
-            {feature}
-          </ListItem>
-        ))}
-      </List>
-      {button}
     </Card>
   )
 }
diff --git a/apps/landing-page/pages/_document.tsx b/apps/landing-page/pages/_document.tsx
@@ -21,7 +21,7 @@ class MyDocument extends Document {
             <link href="./styles/aos-noscript.css" rel="stylesheet" />
           </noscript>
         </Head>
-        <body>
+        <body style={{ backgroundColor: '#171923' }}>
           <ColorModeScript initialColorMode={theme.config.initialColorMode} />
           <Main />
           <NextScript />