💄 (lp) Update wall of love

apps/docs/openapi/builder/_spec_.json

@@ -801,6 +801,97 @@
         }
       }
     },
+    "/typebots/{typebotId}/webhookBlocks/{blockId}/getResultExample": {
+      "get": {
+        "operationId": "query.webhook.getResultExample",
+        "summary": "Get result example",
+        "description": "Returns \"fake\" result for webhook block to help you anticipate how the webhook will behave.",
+        "tags": [
+          "Webhook"
+        ],
+        "security": [
+          {
+            "Authorization": []
+          }
+        ],
+        "parameters": [
+          {
+            "name": "typebotId",
+            "in": "path",
+            "required": true,
+            "schema": {
+              "type": "string"
+            }
+          },
+          {
+            "name": "blockId",
+            "in": "path",
+            "required": true,
+            "schema": {
+              "type": "string"
+            }
+          }
+        ],
+        "responses": {
+          "200": {
+            "description": "Successful response",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "type": "object",
+                  "properties": {
+                    "resultExample": {
+                      "allOf": [
+                        {
+                          "type": "object",
+                          "properties": {
+                            "message": {
+                              "type": "string",
+                              "enum": [
+                                "This is a sample result, it has been generated ⬇️"
+                              ]
+                            },
+                            "Submitted at": {
+                              "type": "string"
+                            }
+                          },
+                          "required": [
+                            "message",
+                            "Submitted at"
+                          ],
+                          "additionalProperties": false
+                        },
+                        {
+                          "type": "object",
+                          "additionalProperties": {
+                            "anyOf": [
+                              {
+                                "not": {}
+                              },
+                              {
+                                "type": "string"
+                              }
+                            ]
+                          }
+                        }
+                      ],
+                      "description": "Can contain any fields."
+                    }
+                  },
+                  "required": [
+                    "resultExample"
+                  ],
+                  "additionalProperties": false
+                }
+              }
+            }
+          },
+          "default": {
+            "$ref": "#/components/responses/error"
+          }
+        }
+      }
+    },
     "/typebots/{typebotId}/webhookBlocks/{blockId}/subscribe": {
       "post": {
         "operationId": "query.webhook.subscribeWebhook",
@@ -954,97 +1045,6 @@
         }
       }
     },
-    "/typebots/{typebotId}/webhookBlocks/{blockId}/getResultExample": {
-      "get": {
-        "operationId": "query.webhook.getResultExample",
-        "summary": "Get result example",
-        "description": "Returns \"fake\" result for webhook block to help you anticipate how the webhook will behave.",
-        "tags": [
-          "Webhook"
-        ],
-        "security": [
-          {
-            "Authorization": []
-          }
-        ],
-        "parameters": [
-          {
-            "name": "typebotId",
-            "in": "path",
-            "required": true,
-            "schema": {
-              "type": "string"
-            }
-          },
-          {
-            "name": "blockId",
-            "in": "path",
-            "required": true,
-            "schema": {
-              "type": "string"
-            }
-          }
-        ],
-        "responses": {
-          "200": {
-            "description": "Successful response",
-            "content": {
-              "application/json": {
-                "schema": {
-                  "type": "object",
-                  "properties": {
-                    "resultExample": {
-                      "allOf": [
-                        {
-                          "type": "object",
-                          "properties": {
-                            "message": {
-                              "type": "string",
-                              "enum": [
-                                "This is a sample result, it has been generated ⬇️"
-                              ]
-                            },
-                            "Submitted at": {
-                              "type": "string"
-                            }
-                          },
-                          "required": [
-                            "message",
-                            "Submitted at"
-                          ],
-                          "additionalProperties": false
-                        },
-                        {
-                          "type": "object",
-                          "additionalProperties": {
-                            "anyOf": [
-                              {
-                                "not": {}
-                              },
-                              {
-                                "type": "string"
-                              }
-                            ]
-                          }
-                        }
-                      ],
-                      "description": "Can contain any field."
-                    }
-                  },
-                  "required": [
-                    "resultExample"
-                  ],
-                  "additionalProperties": false
-                }
-              }
-            }
-          },
-          "default": {
-            "$ref": "#/components/responses/error"
-          }
-        }
-      }
-    },
     "/typebots/{typebotId}/results": {
       "get": {
         "operationId": "query.results.getResults",

apps/landing-page/assets/icons/CapterraIcon.tsx

@@ -0,0 +1,18 @@
+import Icon, { IconProps } from '@chakra-ui/icon'
+
+export const CapterraIcon = (props: IconProps) => (
+  <Icon
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 149 152"
+    fill="none"
+    {...props}
+  >
+    <path d="M0.5 56.1H62.9H100.8V18.5L0.5 56.1Z" fill="#FF9D28" />
+    <path
+      d="M100.8 18.4998V151.2L148.2 0.799805L100.8 18.4998Z"
+      fill="#68C5ED"
+    />
+    <path d="M100.8 56.1001H62.9L100.8 151.2V56.1001Z" fill="#044D80" />
+    <path d="M0.5 56.1001L72.6 80.5001L62.9 56.1001H0.5Z" fill="#E54747" />
+  </Icon>
+)

apps/landing-page/assets/icons/EmailIcon.tsx

@@ -0,0 +1,15 @@
+import Icon, { IconProps } from '@chakra-ui/icon'
+import { featherIconsBaseProps } from './HamburgerIcon'
+
+export const EmailIcon = (props: IconProps) => (
+  <Icon
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="currentcolor"
+    {...featherIconsBaseProps}
+    {...props}
+  >
+    <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
+    <polyline points="22,6 12,13 2,6"></polyline>
+  </Icon>
+)

apps/landing-page/assets/icons/ProductHuntIcon.tsx

@@ -0,0 +1,19 @@
+import Icon, { IconProps } from '@chakra-ui/icon'
+
+export const ProductHuntIcon = (props: IconProps) => (
+  <Icon
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 59 59"
+    fill="none"
+    {...props}
+  >
+    <path
+      d="M58.48 29.24C58.48 45.388 45.388 58.48 29.24 58.48C13.09 58.48 0 45.388 0 29.24C0 13.09 13.091 0 29.24 0C45.388 0 58.48 13.091 58.48 29.24Z"
+      fill="#DA552F"
+    />
+    <path
+      d="M33.138 29.2401H24.854V20.4681H33.138C33.714 20.4681 34.2843 20.5816 34.8164 20.802C35.3486 21.0224 35.8321 21.3455 36.2394 21.7527C36.6466 22.16 36.9697 22.6435 37.1901 23.1757C37.4105 23.7078 37.524 24.2781 37.524 24.8541C37.524 25.4301 37.4105 26.0004 37.1901 26.5326C36.9697 27.0647 36.6466 27.5482 36.2394 27.9555C35.8321 28.3628 35.3486 28.6858 34.8164 28.9063C34.2843 29.1267 33.714 29.2401 33.138 29.2401M33.138 14.6201H19.006V43.8601H24.854V35.0881H33.138C38.79 35.0881 43.372 30.5061 43.372 24.8541C43.372 19.2021 38.79 14.6201 33.138 14.6201"
+      fill="white"
+    />
+  </Icon>
+)

apps/landing-page/assets/icons/RedditIcon.tsx

@@ -0,0 +1,19 @@
+import Icon, { IconProps } from '@chakra-ui/icon'
+
+export const RedditIcon = (props: IconProps) => (
+  <Icon
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 168 168"
+    fill="none"
+    {...props}
+  >
+    <path
+      d="M83.8 167.6C130.081 167.6 167.6 130.081 167.6 83.8C167.6 37.5185 130.081 0 83.8 0C37.5185 0 0 37.5185 0 83.8C0 130.081 37.5185 167.6 83.8 167.6Z"
+      fill="#FF4500"
+    />
+    <path
+      d="M139.7 83.8C139.7 77 134.2 71.6 127.5 71.6C124.2 71.6 121.2 72.9 119 75C110.6 69 99.1 65.1 86.3 64.6L91.9 38.4L110.1 42.3C110.3 46.9 114.1 50.6 118.8 50.6C123.6 50.6 127.5 46.7 127.5 41.9C127.5 37.1 123.6 33.2 118.8 33.2C115.4 33.2 112.4 35.2 111 38.1L90.7 33.8C90.1 33.7 89.5 33.8 89.1 34.1C88.6 34.4 88.3 34.9 88.2 35.5L82 64.7C69 65.1 57.3 69 48.8 75.1C46.6 73 43.6 71.7 40.3 71.7C33.5 71.7 28.1 77.1999 28.1 83.8999C28.1 88.8999 31.1 93.1 35.3 95C35.1 96.2 35 97.4 35 98.7C35 117.5 56.9 132.8 83.9 132.8C110.9 132.8 132.8 117.6 132.8 98.7C132.8 97.5 132.7 96.2 132.5 95C136.7 93.1 139.7 88.8 139.7 83.8V83.8ZM55.9 92.5C55.9 87.7 59.8 83.8 64.6 83.8C69.4 83.8 73.3 87.7 73.3 92.5C73.3 97.3 69.4 101.2 64.6 101.2C59.8 101.3 55.9 97.3 55.9 92.5V92.5ZM104.6 115.6C98.6 121.6 87.2 122 83.9 122C80.5 122 69.1 121.5 63.2 115.6C62.3 114.7 62.3 113.3 63.2 112.4C64.1 111.5 65.5 111.5 66.4 112.4C70.2 116.2 78.2 117.5 83.9 117.5C89.6 117.5 97.7 116.2 101.4 112.4C102.3 111.5 103.7 111.5 104.6 112.4C105.4 113.3 105.4 114.7 104.6 115.6ZM103 101.3C98.2 101.3 94.3 97.4 94.3 92.6C94.3 87.8 98.2 83.8999 103 83.8999C107.8 83.8999 111.7 87.8 111.7 92.6C111.7 97.3 107.8 101.3 103 101.3Z"
+      fill="white"
+    />
+  </Icon>
+)

apps/landing-page/assets/icons/index.ts

@@ -0,0 +1,27 @@
+export * from './AccessibilityIcon'
+export * from './ArrowRight'
+export * from './CaluclatorIcon'
+export * from './CapterraIcon'
+export * from './CheckCircleIcon'
+export * from './CheckIcon'
+export * from './ChevronDownIcon'
+export * from './ChevronRightIcon'
+export * from './CloseIcon'
+export * from './ConditionIcon'
+export * from './DoIcon'
+export * from './DocIcon'
+export * from './DontIcon'
+export * from './EmailIcon'
+export * from './ExternalLinkIcon'
+export * from './FolderIcon'
+export * from './GithubLogo'
+export * from './HamburgerIcon'
+export * from './HelpCircleIcon'
+export * from './Logo'
+export * from './MapIcon'
+export * from './PeopleCircleIcon'
+export * from './PersonAddIcon'
+export * from './ProductHuntIcon'
+export * from './QuoteLeftIcon'
+export * from './RedditIcon'
+export * from './ShareIcon'

apps/landing-page/assets/icons/index.tsx

@@ -1,2 +0,0 @@
-export { GitHubIcon } from './GithubLogo'
-export * from './HamburgerIcon'

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

@@ -1,46 +1,46 @@
-import { Box, Flex, HStack, Stack, Text } from '@chakra-ui/react'
+import { Avatar, Flex, HStack, Stack, Text } from '@chakra-ui/react'
 import * as React from 'react'
-import Image, { StaticImageData } from 'next/image'
-import { QuoteLeftIcon } from 'assets/icons/QuoteLeftIcon'
+import Image from 'next/image'
+import { TestimonialData } from './Testimonials'
+import {
+  CapterraIcon,
+  EmailIcon,
+  ProductHuntIcon,
+  RedditIcon,
+} from 'assets/icons'
 
-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="lg"
-      bgColor="gray.800"
-      color="white"
-      shadow="lg"
-      {...props}
-    >
-      <Stack>
-        <QuoteLeftIcon boxSize="25px" />
-        <Text mt="3" fontSize="xl" maxW="38rem" color="gray.400">
-          {children}
-        </Text>
-      </Stack>
-
-      <HStack mt="6" spacing="4">
-        <Image
-          src={image}
-          alt={name}
-          placeholder="blur"
-          width={80}
-          height={80}
-          className="rounded-full"
-        />
-        <Box>
+export const Testimonial = ({
+  avatarSrc,
+  content,
+  name,
+  role,
+  provider,
+}: TestimonialData) => (
+  <Stack
+    p="6"
+    rounded="lg"
+    bgColor="gray.800"
+    color="white"
+    shadow="lg"
+    spacing="4"
+    data-aos="fade"
+    data-aos-delay="500"
+  >
+    <Flex justifyContent="space-between">
+      <HStack spacing="4">
+        {avatarSrc ? (
+          <Image
+            src={avatarSrc}
+            alt={name}
+            placeholder="blur"
+            width={40}
+            height={40}
+            className="rounded-full"
+          />
+        ) : (
+          <Avatar name={name} />
+        )}
+        <Stack spacing={1}>
           <Text
             as="cite"
             fontStyle="normal"
@@ -52,8 +52,30 @@ export const Testimonial = (props: TestimonialProps) => {
           <Text fontSize="sm" color={'gray.100'}>
             {role}
           </Text>
-        </Box>
+        </Stack>
       </HStack>
+      <ProviderIcon provider={provider} />
     </Flex>
-  )
+
+    <Text mt="3" maxW="38rem" color="gray.400">
+      {content}
+    </Text>
+  </Stack>
+)
+
+const ProviderIcon = ({
+  provider,
+}: {
+  provider: TestimonialData['provider']
+}): JSX.Element => {
+  switch (provider) {
+    case 'email':
+      return <EmailIcon fontSize="20px" />
+    case 'productHunt':
+      return <ProductHuntIcon fontSize="20px" />
+    case 'capterra':
+      return <CapterraIcon fontSize="20px" />
+    case 'reddit':
+      return <RedditIcon fontSize="20px" />
+  }
 }

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

@@ -1,67 +1,168 @@
-import { chakra, Flex, Heading, Stack, VStack } from '@chakra-ui/react'
+import { Flex, Heading, SimpleGrid, Stack, VStack } from '@chakra-ui/react'
 import * as React from 'react'
 import joshuaPictureSrc from 'public/images/homepage/joshua.jpg'
 import julienPictureSrc from 'public/images/homepage/julien.jpeg'
 import nicolaiPictureSrc from 'public/images/homepage/nicolai.jpg'
+import annaFilouPictureSrc from 'public/images/homepage/annaFilou.jpeg'
+import theoPictureSrc from 'public/images/homepage/theo.jpeg'
+import abhayPictureSrc from 'public/images/homepage/abhay.jpeg'
+import lucasPictureSrc from 'public/images/homepage/lucas.png'
+import oscarPictureSrc from 'public/images/homepage/oscar.jpeg'
+import invictuzPictureSrc from 'public/images/homepage/invictuz.png'
+import laszloPictureSrc from 'public/images/homepage/laszlo.jpeg'
 import { Testimonial } from './Testimonial'
+import { StaticImageData } from 'next/image'
+
+export type TestimonialData = {
+  name: string
+  avatarSrc?: StaticImageData
+  provider: 'email' | 'productHunt' | 'capterra' | 'reddit'
+  role?: string
+  content: string | React.ReactNode
+}
+
+const testimonials: TestimonialData[][] = [
+  [
+    {
+      name: 'Joshua Lim',
+      role: 'Growth Strategist @ Socialhackrs Media',
+      avatarSrc: joshuaPictureSrc,
+      provider: 'email',
+      content:
+        'I upgraded my typeforms to typebots and saw a conversion rate increase from 14% to 43% on my marketing campaigns. I noticed the improvement on day one. That was a game-changer.',
+    },
+    {
+      name: 'Laszlo Csömör',
+      role: 'Digital Marketing Expert',
+      provider: 'email',
+      avatarSrc: laszloPictureSrc,
+      content: (
+        <>
+          Typebot is one of the best chatbot builders with its intelligent
+          features and drag-and-drop simplicity. Its UI/UX is an earthly
+          paradise...
+          <br />
+          What&apos;s even more important is the person who stands behind it. He
+          guarantees that the platform will work and progress for a long time.
+        </>
+      ),
+    },
+    {
+      name: 'Theo Marechal',
+      provider: 'productHunt',
+      avatarSrc: theoPictureSrc,
+      role: 'Nocode expert and content creator',
+      content: (
+        <>
+          Amazing product! I&apos;m using Typebot for everything when it&apos;s
+          about talking with customers.
+          <br />
+          <br />
+          What&apos;s amazing with Typebot is that it makes a &quot;chat
+          interface effect&quot; without the hassle of being behind my computer
+          all day responding to customers. Highly recommend !
+        </>
+      ),
+    },
+    {
+      name: 'Nicolai Grut',
+      role: 'CEO @ EcommerceNotebook.com',
+      avatarSrc: nicolaiPictureSrc,
+      provider: 'email',
+      content:
+        'I am really loving using Typebot! So good. I have used all the top bots and yours is definitely the most user friendly, and yet still so powerful.',
+    },
+  ],
+  [
+    {
+      name: 'Oscar',
+      role: 'CEO',
+      provider: 'capterra',
+      avatarSrc: oscarPictureSrc,
+      content:
+        'Within 5 minutes of signing up you can already have your bot running thanks to the templates it comes with. I have used many tools to make bots but none as simple, easy and powerful as Typebot.',
+    },
+    {
+      name: '_Invictuz',
+      provider: 'reddit',
+      avatarSrc: invictuzPictureSrc,
+      content:
+        "This is the sickest open-source project I've ever seen and demoed. The use case is so cool and modern and I can't believe how easy this is to get started using. The feature richness and polish in this project is incredible, it feel like a mature product. Unbelievable that this was built by one person. This is better than the demos of chatbot builders I've seen from full-fledged companies. I'm going to learn Typescript so that I can contribute to this someday. Mind-blowing stuff...",
+    },
+    {
+      name: 'Abhay Kulkarni',
+      provider: 'productHunt',
+      avatarSrc: abhayPictureSrc,
+      role: 'Founder at Webisharp',
+      content:
+        'Using this tool for the last 2 hours & built a full lead capture bot. Pretty good experience till now. @baptiste_arnaud All the best for future :)',
+    },
+    {
+      name: 'Lucas Barp',
+      provider: 'email',
+      avatarSrc: lucasPictureSrc,
+      role: 'Founder at Barp Digital',
+      content:
+        'The result of your work is incredible and can make life easier for many people.',
+    },
+  ],
+  [
+    {
+      name: 'Goran Milic',
+      role: 'General Manager, Beefii',
+      provider: 'email',
+      content: (
+        <>
+          I used Typebot at my company and was impressed with how it cut our
+          customer service workload in half. I was able to create a fully
+          functional chatbot in minutes. <br /> You can create a bot to answer
+          frequently asked questions about your business or create a bot that
+          helps promote your business on social media or any other platform.,
+        </>
+      ),
+    },
+    {
+      name: 'Julien Muratot',
+      role: 'Growth Manager @ Hornetwork',
+      avatarSrc: julienPictureSrc,
+      provider: 'email',
+      content:
+        'I run Google ads all year long on our landing page that contains a typebot. I saw a 2x increase on our conversation rate compared to our old WordPress form.',
+    },
+    {
+      name: 'Igor T.',
+      role: 'CTO',
+      provider: 'capterra',
+      content:
+        'Nice work. The developer promptly makes changes, which is quite rare. There was a suggestion for improvement and improvement, in 2 days it was implemented. Amazing! Good luck and thanks a lot',
+    },
+    {
+      name: 'Anna Filou',
+      provider: 'productHunt',
+      avatarSrc: annaFilouPictureSrc,
+      role: 'Geek, Designer, Illustrator, Web Dev',
+      content:
+        "Seems like the product I've been waiting for Typeform to make! 😝",
+    },
+  ],
+]
 
 export const Testimonials = () => {
   return (
     <Flex as="section" justify="center">
-      <VStack spacing={12} pt={'52'} px="4">
+      <VStack spacing={12} pt={'52'} px="4" maxW="1400px">
         <Heading textAlign={'center'} data-aos="fade">
           They&apos;ve tried, they never looked back. 💙
         </Heading>
-        <Stack
-          direction={{ base: 'column', xl: 'row' }}
-          spacing="10"
-          maxW="1200px"
-        >
-          <Testimonial
-            name="Joshua Lim"
-            role="Growth Strategist @ Socialhackrs Media"
-            image={joshuaPictureSrc}
-            data-aos="fade"
-          >
-            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="Nicolai Grut"
-            role="CEO @ EcommerceNotebook.com"
-            image={nicolaiPictureSrc}
-            data-aos="fade"
-          >
-            I am really loving using Typebot! So good. I have used all the top
-            bots and yours is definitely the{' '}
-            <chakra.span fontWeight="bold" color="orange.300">
-              most user friendly
-            </chakra.span>
-            , and yet still so{' '}
-            <chakra.span fontWeight="bold" color="orange.300">
-              powerful
-            </chakra.span>
-            .
-          </Testimonial>
-          <Testimonial
-            name="Julien Muratot"
-            role="Growth Manager @ Hornetwork"
-            image={julienPictureSrc}
-            data-aos="fade"
-          >
-            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>
+        <SimpleGrid columns={[1, 2, 3]} spacing="6">
+          {testimonials.map((testimonialGroup, index) => (
+            <Stack key={index} spacing="6">
+              {testimonialGroup.map((testimonial, index) => (
+                <Testimonial key={index} {...testimonial} />
+              ))}
+            </Stack>
+          ))}
+        </SimpleGrid>
       </VStack>
     </Flex>
   )