blsmedia/bot
2
0
Fork 0
Code Activity

docs(lp): 💄 Refont LP for v2

Browse Source
This commit is contained in:
Baptiste Arnaud
2022-03-17 14:37:00 +01:00
parent c437211327
commit 21e926a477
131 changed files with 2834 additions and 3260 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
apps/landing-page/assets/icons/AccessibilityIcon.tsx
View File

@ -1,5 +1,5 @@
import Icon, { IconProps } from "@chakra-ui/icon";
import React from "react";
import Icon, { IconProps } from '@chakra-ui/icon'
import React from 'react'
export const AccessibilityIcon = (props: IconProps) => (
<Icon
@ -12,4 +12,4 @@ export const AccessibilityIcon = (props: IconProps) => (
<path d="M256 112a56 56 0 1156-56 56.06 56.06 0 01-56 56z" />
<path d="M432 112.8l-.45.12-.42.13c-1 .28-2 .58-3 .89-18.61 5.46-108.93 30.92-172.56 30.92-59.13 0-141.28-22-167.56-29.47a73.79 73.79 0 00-8-2.58c-19-5-32 14.3-32 31.94 0 17.47 15.7 25.79 31.55 31.76v.28l95.22 29.74c9.73 3.73 12.33 7.54 13.6 10.84 4.13 10.59.83 31.56-.34 38.88l-5.8 45-32.19 176.19q-.15.72-.27 1.47l-.23 1.27c-2.32 16.15 9.54 31.82 32 31.82 19.6 0 28.25-13.53 32-31.94s28-157.57 42-157.57 42.84 157.57 42.84 157.57c3.75 18.41 12.4 31.94 32 31.94 22.52 0 34.38-15.74 32-31.94a57.17 57.17 0 00-.76-4.06L329 301.27l-5.79-45c-4.19-26.21-.82-34.87.32-36.9a1.09 1.09 0 00.08-.15c1.08-2 6-6.48 17.48-10.79l89.28-31.21a16.9 16.9 0 001.62-.52c16-6 32-14.3 32-31.93S451 107.81 432 112.8z" />
</Icon>
);
)

14
apps/landing-page/assets/icons/AlbumsIcon.tsx
View File

@ -1,14 +0,0 @@
import Icon, { IconProps } from "@chakra-ui/icon";
import React from "react";
export const AlbumsIcon = (props: IconProps) => (
<Icon
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
fill="currentcolor"
{...props}
>
<title>Albums</title>
<path d="M368 96H144a16 16 0 010-32h224a16 16 0 010 32zM400 144H112a16 16 0 010-32h288a16 16 0 010 32zM419.13 448H92.87A44.92 44.92 0 0148 403.13V204.87A44.92 44.92 0 0192.87 160h326.26A44.92 44.92 0 01464 204.87v198.26A44.92 44.92 0 01419.13 448z" />
</Icon>
);

14
apps/landing-page/assets/icons/AnalyticsIcon.tsx
View File

@ -1,14 +0,0 @@
import Icon, { IconProps } from "@chakra-ui/icon";
import React from "react";
export const AnalyticsIcon = (props: IconProps) => (
<Icon
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
fill="currentcolor"
{...props}
>
<title>Analytics</title>
<path d="M456 128a40 40 0 00-37.23 54.6l-84.17 84.17a39.86 39.86 0 00-29.2 0l-60.17-60.17a40 40 0 10-74.46 0L70.6 306.77a40 40 0 1022.63 22.63L193.4 229.23a39.86 39.86 0 0029.2 0l60.17 60.17a40 40 0 1074.46 0l84.17-84.17A40 40 0 10456 128z" />
</Icon>
);

18
apps/landing-page/assets/icons/ArrowRight.tsx Normal file
View File

@ -0,0 +1,18 @@
import Icon, { IconProps } from '@chakra-ui/icon'
import React from 'react'
export const ArrowRight = (props: IconProps) => (
<Icon
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
{...props}
>
<line x1="5" y1="12" x2="19" y2="12"></line>
<polyline points="12 5 19 12 12 19"></polyline>
</Icon>
)

12
apps/landing-page/assets/icons/BookIcon.tsx
View File

@ -1,12 +0,0 @@
import Icon, { IconProps } from "@chakra-ui/icon";
import React from "react";
export const BookIcon = (props: IconProps) => (
<Icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" {...props}>
<title>Book</title>
<path
d="M202.24 74C166.11 56.75 115.61 48.3 48 48a31.36 31.36 0 00-17.92 5.33A32 32 0 0016 79.9V366c0 19.34 13.76 33.93 32 33.93 71.07 0 142.36 6.64 185.06 47a4.11 4.11 0 006.94-3V106.82a15.89 15.89 0 00-5.46-12A143 143 0 00202.24 74zM481.92 53.3A31.33 31.33 0 00464 48c-67.61.3-118.11 8.71-154.24 26a143.31 143.31 0 00-32.31 20.78 15.93 15.93 0 00-5.45 12v337.13a3.93 3.93 0 006.68 2.81c25.67-25.5 70.72-46.82 185.36-46.81a32 32 0 0032-32v-288a32 32 0 00-14.12-26.61z"
fill="currentColor"
/>
</Icon>
);

14
apps/landing-page/assets/icons/BuildIcon.tsx
View File

@ -1,14 +0,0 @@
import Icon, { IconProps } from "@chakra-ui/icon";
import React from "react";
export const BuildIcon = (props: IconProps) => (
<Icon
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
fill="currentcolor"
{...props}
>
<title>Build</title>
<path d="M469.54 120.52a16 16 0 00-25.54-4L382.56 178a16.12 16.12 0 01-22.63 0l-26.56-26.6a16 16 0 010-22.63l61.18-61.19a16 16 0 00-4.78-25.92C343.56 21 285.88 31.78 249.51 67.88c-30.9 30.68-40.11 78.62-25.25 131.53a15.89 15.89 0 01-4.49 16L53.29 367.46a64.17 64.17 0 1090.6 90.64l153.68-166.85a15.9 15.9 0 0115.77-4.57 179.3 179.3 0 0046.22 6.37c33.4 0 62.71-10.81 83.85-31.64 39.15-38.57 45.12-103.99 26.13-140.89zM99.48 447.15a32 32 0 1128.34-28.35 32 32 0 01-28.34 28.35z" />
</Icon>
);

6
apps/landing-page/assets/icons/CaluclatorIcon.tsx
View File

@ -1,5 +1,5 @@
import Icon, { IconProps } from "@chakra-ui/icon";
import React from "react";
import Icon, { IconProps } from '@chakra-ui/icon'
import React from 'react'
export const CalculatorIcon = (props: IconProps) => (
<Icon
@ -11,4 +11,4 @@ export const CalculatorIcon = (props: IconProps) => (
<title>Calculator</title>
<path d="M416 80a48.05 48.05 0 00-48-48H144a48.05 48.05 0 00-48 48v352a48.05 48.05 0 0048 48h224a48.05 48.05 0 0048-48zM168 432a24 24 0 1124-24 24 24 0 01-24 24zm0-80a24 24 0 1124-24 24 24 0 01-24 24zm0-80a24 24 0 1124-24 24 24 0 01-24 24zm88 160a24 24 0 1124-24 24 24 0 01-24 24zm0-80a24 24 0 1124-24 24 24 0 01-24 24zm0-80a24 24 0 1124-24 24 24 0 01-24 24zm112 136a24 24 0 01-48 0v-80a24 24 0 0148 0zm-24-136a24 24 0 1124-24 24 24 0 01-24 24zm19.31-100.69A16 16 0 01352 176H160a16 16 0 01-16-16V96a16 16 0 0116-16h192a16 16 0 0116 16v64a16 16 0 01-4.69 11.31z" />
</Icon>
);
)

6
apps/landing-page/assets/icons/CheckIcon.tsx
View File

@ -1,5 +1,5 @@
import Icon, { IconProps } from "@chakra-ui/icon";
import React from "react";
import Icon, { IconProps } from '@chakra-ui/icon'
import React from 'react'
export const CheckIcon = (props: IconProps) => (
<Icon
@ -12,4 +12,4 @@ export const CheckIcon = (props: IconProps) => (
<title>Checkmark Circle</title>
<path d="M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208 208-93.31 208-208S370.69 48 256 48zm108.25 138.29l-134.4 160a16 16 0 01-12 5.71h-.27a16 16 0 01-11.89-5.3l-57.6-64a16 16 0 1123.78-21.4l45.29 50.32 122.59-145.91a16 16 0 0124.5 20.58z" />
</Icon>
);
)

6
apps/landing-page/assets/icons/ChevronDownIcon.tsx
View File

@ -1,5 +1,5 @@
import Icon, { IconProps } from "@chakra-ui/icon";
import React, { SVGProps } from "react";
import Icon, { IconProps } from '@chakra-ui/icon'
import React from 'react'
export const ChevronDownIcon = (props: IconProps) => (
<Icon
@ -18,4 +18,4 @@ export const ChevronDownIcon = (props: IconProps) => (
d="M112 184l144 144 144-144"
/>
</Icon>
);
)

6
apps/landing-page/assets/icons/ChevronRightIcon.tsx
View File

@ -1,5 +1,5 @@
import Icon, { IconProps } from "@chakra-ui/icon";
import React from "react";
import Icon, { IconProps } from '@chakra-ui/icon'
import React from 'react'
export const ChevronRightIcon = (props: IconProps) => (
<Icon
@ -18,4 +18,4 @@ export const ChevronRightIcon = (props: IconProps) => (
d="M184 112l144 144-144 144"
/>
</Icon>
);
)

6
apps/landing-page/assets/icons/ConditionIcon.tsx
View File

@ -1,5 +1,5 @@
import Icon, { IconProps } from "@chakra-ui/icon";
import React from "react";
import Icon, { IconProps } from '@chakra-ui/icon'
import React from 'react'
export const ConditionIcon = (props: IconProps) => (
<Icon
@ -11,4 +11,4 @@ export const ConditionIcon = (props: IconProps) => (
<title>Git Branch</title>
<path d="M416 160a64 64 0 10-96.27 55.24c-2.29 29.08-20.08 37-75 48.42-17.76 3.68-35.93 7.45-52.71 13.93v-126.2a64 64 0 10-64 0v209.22a64 64 0 1064.42.24c2.39-18 16-24.33 65.26-34.52 27.43-5.67 55.78-11.54 79.78-26.95 29-18.58 44.53-46.78 46.36-83.89A64 64 0 00416 160zM160 64a32 32 0 11-32 32 32 32 0 0132-32zm0 384a32 32 0 1132-32 32 32 0 01-32 32zm192-256a32 32 0 1132-32 32 32 0 01-32 32z" />
</Icon>
);
)

23
apps/landing-page/assets/icons/DoIcon.tsx Normal file
View File

@ -0,0 +1,23 @@
import Icon, { IconProps } from '@chakra-ui/icon'
import React from 'react'
export const DoIcon = (props: IconProps) => (
<Icon
viewBox="0 0 150 150"
boxSize="50px"
xmlns="http://www.w3.org/2000/svg"
fill="#4ADE80"
fillOpacity="0.8"
{...props}
>
<rect width="150" height="150" rx="75" />
<path
d="M100 58L65.625 92.375L50 76.75"
stroke="white"
strokeWidth="10"
fill="#40b76f"
strokeLinecap="round"
strokeLinejoin="round"
/>
</Icon>
)

6
apps/landing-page/assets/icons/DocIcon.tsx
View File

@ -1,5 +1,5 @@
import Icon, { IconProps } from "@chakra-ui/icon";
import React from "react";
import Icon, { IconProps } from '@chakra-ui/icon'
import React from 'react'
export const DocIcon = (props: IconProps) => (
<Icon
@ -12,4 +12,4 @@ export const DocIcon = (props: IconProps) => (
<path d="M428 224H288a48 48 0 01-48-48V36a4 4 0 00-4-4h-92a64 64 0 00-64 64v320a64 64 0 0064 64h224a64 64 0 0064-64V228a4 4 0 00-4-4zm-92 160H176a16 16 0 010-32h160a16 16 0 010 32zm0-80H176a16 16 0 010-32h160a16 16 0 010 32z" />
<path d="M419.22 188.59L275.41 44.78a2 2 0 00-3.41 1.41V176a16 16 0 0016 16h129.81a2 2 0 001.41-3.41z" />
</Icon>
);
)

27
apps/landing-page/assets/icons/DontIcon.tsx Normal file
View File

@ -0,0 +1,27 @@
import Icon, { IconProps } from '@chakra-ui/icon'
import React from 'react'
export const DontIcon = (props: IconProps) => (
<Icon
viewBox="0 0 150 150"
boxSize="50px"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<rect width="150" height="150" rx="75" fill="#F87171" fillOpacity="0.8" />
<path
d="M100 50L50 100"
stroke="white"
strokeWidth="10"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M50 50L100 100"
stroke="white"
strokeWidth="10"
strokeLinecap="round"
strokeLinejoin="round"
/>
</Icon>
)

14
apps/landing-page/assets/icons/EyeDropIcon.tsx
View File

@ -1,14 +0,0 @@
import Icon, { IconProps } from "@chakra-ui/icon";
import React from "react";
export const EyeDropIcon = (props: IconProps) => (
<Icon
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
fill="currentcolor"
{...props}
>
<title>Eyedrop</title>
<path d="M461.05 51a65 65 0 00-45.71-19h-.76a61.81 61.81 0 00-44.36 19.25 12.81 12.81 0 00-1.07 1.25l-54 69.76c-5.62 7.1-12.74 8.68-16.78 4.64l-1.9-1.9a48 48 0 00-67.92 67.92l9.91 9.91a2 2 0 010 2.83L58.7 385.38C54 390.05 46.9 399.85 38.85 431c-4.06 15.71-6.51 29.66-6.61 30.24A16 16 0 0048 480a15.68 15.68 0 002.64-.22c.58-.1 14.44-2.43 30.13-6.44 31.07-7.94 41.05-15.24 45.85-20l179.77-179.79a2 2 0 012.82 0l9.92 9.92a48 48 0 0067.92-67.93l-1.59-1.54c-5-5-2.52-12.11 4.32-17.14l69.75-53.94a17.82 17.82 0 001.47-1.32 63.2 63.2 0 0019-45A63.88 63.88 0 00461.05 51zM250.78 283.9c-2.92 2.92-16.18 7.92-23.39.71s-2.24-20.42.69-23.35l33-33a2 2 0 012.83 0l19.84 19.83a2 2 0 010 2.83z" />
</Icon>
);

6
apps/landing-page/assets/icons/FolderIcon.tsx
View File

@ -1,5 +1,5 @@
import Icon, { IconProps } from "@chakra-ui/icon";
import React from "react";
import Icon, { IconProps } from '@chakra-ui/icon'
import React from 'react'
export const FolderIcon = (props: IconProps) => (
<Icon
@ -11,4 +11,4 @@ export const FolderIcon = (props: IconProps) => (
<title>Folder Open</title>
<path d="M408 96H252.11a23.89 23.89 0 01-13.31-4L211 73.41A55.77 55.77 0 00179.89 64H104a56.06 56.06 0 00-56 56v24h416c0-30.88-25.12-48-56-48zM423.75 448H88.25a56 56 0 01-55.93-55.15L16.18 228.11v-.28A48 48 0 0164 176h384.1a48 48 0 0147.8 51.83v.28l-16.22 164.74A56 56 0 01423.75 448zm56.15-221.45z" />
</Icon>
);
)

17
apps/landing-page/assets/icons/GithubLogo.tsx Normal file
View File

@ -0,0 +1,17 @@
import { Icon, IconProps } from '@chakra-ui/react'
import React from 'react'
export const GitHubIcon = (props: IconProps) => (
<Icon
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
{...props}
>
<path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
</Icon>
)

15
apps/landing-page/assets/icons/GlobeIcon.tsx
View File

@ -1,15 +0,0 @@
import Icon, { IconProps } from "@chakra-ui/icon";
import React from "react";
export const GlobeIcon = (props: IconProps) => (
<Icon
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
fill="currentcolor"
{...props}
>
<title>Globe</title>
<path d="M340.75 344.49c5.91-20.7 9.82-44.75 11.31-67.84a4.41 4.41 0 00-4.46-4.65h-71.06a4.43 4.43 0 00-4.47 4.39v55.3a4.44 4.44 0 004.14 4.38 273.51 273.51 0 0159 11.39 4.45 4.45 0 005.54-2.97zM323.58 377.31a260.05 260.05 0 00-46.6-9.09 4.42 4.42 0 00-4.91 4.29v65.24a4.47 4.47 0 006.76 3.7c15.9-9.27 29-24.84 40.84-45.43 1.94-3.36 4.89-9.15 6.67-12.69a4.29 4.29 0 00-2.76-6.02zM235.29 368.4a256.85 256.85 0 00-46.56 8.82c-2.64.76-3.75 4.4-2.55 6.79 1.79 3.56 4 8.11 5.89 11.51 13 23 26.84 37.5 41.24 45.93a4.47 4.47 0 006.76-3.7v-65.27a4.16 4.16 0 00-4.78-4.08zM235.6 272h-71.06a4.41 4.41 0 00-4.46 4.64c1.48 23.06 5.37 47.16 11.26 67.84a4.46 4.46 0 005.59 3 272.2 272.2 0 0159-11.36 4.44 4.44 0 004.15-4.38V276.4a4.43 4.43 0 00-4.48-4.4zM277 143.78a235.8 235.8 0 0046.5-9.14 4.3 4.3 0 002.76-6c-1.79-3.57-4.27-8.68-6.17-12.09-12.29-22-26.14-37.35-41.24-46a4.48 4.48 0 00-6.76 3.7v65.23a4.43 4.43 0 004.91 4.3zM276.54 240h71.06a4.39 4.39 0 004.46-4.58c-1.48-22.77-5.27-47.8-11.16-68.22a4.46 4.46 0 00-5.59-2.95c-19 5.74-38.79 10.43-59.09 12a4.4 4.4 0 00-4.15 4.32v55.11a4.4 4.4 0 004.47 4.32zM233.31 70.56c-15.42 8.57-29.17 24.43-41.47 46.37-1.91 3.41-4.19 8.11-6 11.67a4.31 4.31 0 002.76 6 225.42 225.42 0 0046.54 9.17 4.43 4.43 0 004.91-4.29V74.26a4.49 4.49 0 00-6.74-3.7zM235.92 176.26c-20.3-1.55-40.11-6.24-59.09-12a4.46 4.46 0 00-5.59 2.95c-5.89 20.42-9.68 45.45-11.16 68.22a4.39 4.39 0 004.46 4.58h71.06a4.4 4.4 0 004.47-4.34v-55.09a4.4 4.4 0 00-4.15-4.32z" />
<path d="M414.39 97.61A224 224 0 1097.61 414.39 224 224 0 10414.39 97.61zM176.6 430.85a219.08 219.08 0 01-12.48-19.66c-2-3.69-4.84-9.26-6.73-13.13a7.29 7.29 0 00-10.31-3.16c-4.3 2.41-10 5.72-14.13 8.43a147.29 147.29 0 01-23.57-22.43 248.83 248.83 0 0130.41-18.36c1.86-1 2.77-2.14 2.18-4.18a374.8 374.8 0 01-14.09-82.17 4.36 4.36 0 00-4.3-4.17H66.84a2 2 0 01-2-1.7A98.28 98.28 0 0164 256a96.27 96.27 0 01.86-14.29 2 2 0 012-1.7h56.74c2.29 0 4.17-1.32 4.29-3.63a372.71 372.71 0 0114-81.83 4.36 4.36 0 00-2.19-5.11 260.63 260.63 0 01-29.84-17.9 169.82 169.82 0 0123.14-22.8c4.08 2.68 9.4 5.71 13.66 8.11a7.89 7.89 0 0011-3.42c1.88-3.87 4-8.18 6.06-11.88a221.93 221.93 0 0112.54-19.91A185 185 0 01256 64c28.94 0 55.9 7 80.53 18.46a202.23 202.23 0 0112 19c2.59 4.66 5.34 10.37 7.66 15.32a4.29 4.29 0 005.92 1.94c5.38-2.91 11.21-6.26 16.34-9.63a171.36 171.36 0 0123.2 23 244.89 244.89 0 01-29.06 17.31 4.35 4.35 0 00-2.18 5.12 348.68 348.68 0 0113.85 81.4 4.33 4.33 0 004.3 4.12l56.62-.07a2 2 0 012 1.7 117.46 117.46 0 010 28.62 2 2 0 01-2 1.72h-56.67a4.35 4.35 0 00-4.3 4.17 367.4 367.4 0 01-13.87 81.3 4.45 4.45 0 002.19 5.19c5 2.59 10.57 5.48 15.37 8.42s9.55 6.08 14.13 9.34a172.73 172.73 0 01-23 22.93c-2.44-1.61-5.34-3.44-7.84-4.94-1.72-1-4.89-2.77-6.65-3.76-3.82-2.14-7.88-.54-9.79 3.4s-4.83 9.59-6.87 13.25a212.42 212.42 0 01-12.35 19.53C310.91 442.37 284.94 448 256 448s-54.77-5.63-79.4-17.15z" />
</Icon>
);

22
apps/landing-page/assets/icons/Logo.tsx
View File

@ -1,22 +1,14 @@
import Icon, { IconProps } from "@chakra-ui/icon";
import React from "react";
import Icon, { IconProps } from '@chakra-ui/icon'
import React from 'react'
export const Logo = ({
isDark,
...props
}: { isDark?: boolean } & IconProps) => (
export const Logo = (props: IconProps) => (
<Icon
viewBox="0 0 500 500"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<rect
width="500"
height="500"
rx="75"
fill={!isDark ? "#0042DA" : "white"}
/>
<rect width="500" height="500" rx="75" fill={'#0042DA'} />
<rect
x="438.709"
y="170.968"
@ -39,13 +31,13 @@ export const Logo = ({
height="290.323"
rx="32.2581"
transform="rotate(-90 61.29 332.259)"
fill={!isDark ? "white" : "#0042DA"}
fill={'white'}
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M406.451 267.742C388.635 267.742 374.193 282.184 374.193 300C374.193 317.815 388.635 332.258 406.451 332.258C424.267 332.258 438.709 317.815 438.709 300C438.709 282.184 424.267 267.742 406.451 267.742Z"
fill={!isDark ? "white" : "#0042DA"}
fill={'white'}
/>
</Icon>
);
)

14
apps/landing-page/assets/icons/MagicWandIcon.tsx
View File

@ -1,14 +0,0 @@
import Icon, { IconProps } from "@chakra-ui/icon";
import React from "react";
export const MagicWandIcon = (props: IconProps) => (
<Icon
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
fill="currentcolor"
{...props}
>
<title>Color Wand</title>
<path d="M96 208H48c-8.8 0-16-7.2-16-16s7.2-16 16-16h48c8.8 0 16 7.2 16 16s-7.2 16-16 16zM124.1 140.1c-4.2 0-8.3-1.7-11.3-4.7l-33.9-33.9c-6.2-6.2-6.2-16.4 0-22.6s16.4-6.2 22.6 0l33.9 33.9c6.3 6.2 6.3 16.4 0 22.6-3 3-7 4.7-11.3 4.7zM192 112c-8.8 0-16-7.2-16-16V48c0-8.8 7.2-16 16-16s16 7.2 16 16v48c0 8.8-7.2 16-16 16zM259.9 140.1c-8.8 0-16-7.2-16-16 0-4.2 1.7-8.3 4.7-11.3l33.9-33.9c6.2-6.2 16.4-6.2 22.6 0 6.2 6.2 6.2 16.4 0 22.6l-33.9 33.9c-3 3-7.1 4.7-11.3 4.7zM90.2 309.8c-8.8 0-16-7.2-16-16 0-4.2 1.7-8.3 4.7-11.3l33.9-33.9c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6l-33.9 33.9c-3 3-7.1 4.7-11.3 4.7zM234.2 167c-18.4-18.7-48.5-19-67.2-.7s-19 48.5-.7 67.2l.7.7 39.5 39.5c3.1 3.1 8.2 3.1 11.3 0l55.9-55.9c3.1-3.1 3.1-8.2 0-11.3L234.2 167zM457 389.8L307.6 240.4c-3.1-3.1-8.2-3.1-11.3 0l-55.9 55.9c-3.1 3.1-3.1 8.2 0 11.3L389.8 457c18.4 18.7 48.5 19 67.2.7 18.7-18.4 19-48.5.7-67.2-.2-.2-.4-.5-.7-.7z" />
</Icon>
);

6
apps/landing-page/assets/icons/MapIcon.tsx
View File

@ -1,5 +1,5 @@
import Icon, { IconProps } from "@chakra-ui/icon";
import React from "react";
import Icon, { IconProps } from '@chakra-ui/icon'
import React from 'react'
export const MapIcon = (props: IconProps) => (
<Icon
@ -11,4 +11,4 @@ export const MapIcon = (props: IconProps) => (
<title>Map</title>
<path d="M48.17 113.34A32 32 0 0032 141.24V438a32 32 0 0047 28.37c.43-.23.85-.47 1.26-.74l84.14-55.05a8 8 0 003.63-6.72V46.45a8 8 0 00-12.51-6.63zM212.36 39.31A8 8 0 00200 46v357.56a8 8 0 003.63 6.72l96 62.42A8 8 0 00312 466V108.67a8 8 0 00-3.64-6.73zM464.53 46.47a31.64 31.64 0 00-31.5-.88 12.07 12.07 0 00-1.25.74l-84.15 55a8 8 0 00-3.63 6.72v357.46a8 8 0 0012.52 6.63l107.07-73.46a32 32 0 0016.41-28v-296a32.76 32.76 0 00-15.47-28.21z" />
</Icon>
);
)

6
apps/landing-page/assets/icons/PeopleCircleIcon.tsx
View File

@ -1,5 +1,5 @@
import Icon, { IconProps } from "@chakra-ui/icon";
import React from "react";
import Icon, { IconProps } from '@chakra-ui/icon'
import React from 'react'
export const PeopleCircleIcon = (props: IconProps) => (
<Icon
@ -12,4 +12,4 @@ export const PeopleCircleIcon = (props: IconProps) => (
<path d="M258.9 48C141.92 46.42 46.42 141.92 48 258.9c1.56 112.19 92.91 203.54 205.1 205.1 117 1.6 212.48-93.9 210.88-210.88C462.44 140.91 371.09 49.56 258.9 48zm-3.68 152.11c.21-1.2.44-2.4.71-3.59a66.46 66.46 0 0116.29-31.21c12.89-13.73 31.16-21.31 51.45-21.31a74.05 74.05 0 0125.06 4.26 66.69 66.69 0 0126.27 17.2 68.15 68.15 0 0118 42.14 78.46 78.46 0 010 11.4 86.19 86.19 0 01-8.2 31q-.76 1.59-1.59 3.15c-1.11 2.07-2.3 4.1-3.58 6.06a79.47 79.47 0 01-8.63 11c-13.12 14-29.92 21.73-47.31 21.73a59.61 59.61 0 01-19.17-3.18 63.47 63.47 0 01-6.1-2.43 70.76 70.76 0 01-22.07-16.12 83.76 83.76 0 01-22-51.32q-.27-3.88-.18-7.68a75.62 75.62 0 011.05-11.08zm-149.73 24.34a59.87 59.87 0 015.2-20.64 56.76 56.76 0 012.78-5.3 54.49 54.49 0 017.19-9.56 55.62 55.62 0 0114-10.82 56.84 56.84 0 018.11-3.64 63.85 63.85 0 0133.35-2.39 57 57 0 0130.78 17 57.86 57.86 0 0115.41 38.62c.05 2.11 0 4.23-.15 6.38a71.58 71.58 0 01-6 23.84 69.49 69.49 0 01-5.73 10.42 65.39 65.39 0 01-15.76 16.57c-1.5 1.07-3.06 2.07-4.67 3.07a54.21 54.21 0 01-10 4.65 49.31 49.31 0 01-16.2 2.76c-.93 0-1.86 0-2.78-.08a47.6 47.6 0 01-5.48-.62 51.19 51.19 0 01-5.35-1.23 53.54 53.54 0 01-7.72-2.89c-.84-.39-1.66-.8-2.48-1.23-18-9.49-31.57-29.16-34.23-52.12-.12-1.05-.22-2.1-.29-3.16a66.59 66.59 0 01.02-9.63zm53.92 178.6a177.27 177.27 0 01-61.94-70.65 4 4 0 011.62-5.26C117.67 316.69 141.4 311 163.82 311c17 0 30.7 2 42.69 5.88a8 8 0 012.59 13.77c-23.35 19-38.4 42.54-45.47 70.75a2.77 2.77 0 01-4.22 1.65zM256 432a175.12 175.12 0 01-65.7-12.72 4 4 0 01-2.4-4.46c.4-2.05.84-3.92 1.23-5.48 7.12-28.43 24.76-52 51-68.18 23.29-14.35 53-22.25 83.52-22.25 31.16 0 60 7.58 83.48 21.91a2.72 2.72 0 01.91 3.67A176.1 176.1 0 01256 432z" />
<path d="M161 295.28a47.6 47.6 0 01-5.48-.62 47.6 47.6 0 005.48.62zM134.64 178.13a55.62 55.62 0 00-14 10.82 54.49 54.49 0 00-7.19 9.56 54.49 54.49 0 017.19-9.56 55.62 55.62 0 0114-10.82zM216.17 257.89a71.58 71.58 0 006-23.84c.15-2.15.2-4.27.15-6.38q.08 3.15-.15 6.38a71.58 71.58 0 01-6 23.84zM134.64 178.13a56.84 56.84 0 018.11-3.64 56.84 56.84 0 00-8.11 3.64zM150.21 293.43a53.54 53.54 0 01-7.72-2.89 53.54 53.54 0 007.72 2.89zM105.78 237.19c2.66 23 16.26 42.63 34.23 52.12-18.01-9.49-31.57-29.16-34.23-52.12zM254.34 219a83.76 83.76 0 0022 51.32 70.76 70.76 0 0022.07 16.12 70.76 70.76 0 01-22.07-16.12 83.76 83.76 0 01-22-51.32q-.27-3.88-.18-7.68-.09 3.75.18 7.68zM304.5 288.82a63.47 63.47 0 01-6.1-2.43 63.47 63.47 0 006.1 2.43zM255.93 196.54a66.46 66.46 0 0116.29-31.21 66.46 66.46 0 00-16.29 31.21zM375 165.46a68.15 68.15 0 0118 42.14 68.15 68.15 0 00-18-42.14 66.69 66.69 0 00-26.27-17.2 66.69 66.69 0 0126.27 17.2zM393 219a86.19 86.19 0 01-8.2 31 86.19 86.19 0 008.2-31zM254.16 211.27a75.62 75.62 0 011.06-11.14 75.62 75.62 0 00-1.06 11.14zM383.19 253.16zM206.88 189.05a57.86 57.86 0 0115.41 38.62 57.86 57.86 0 00-15.41-38.62 57 57 0 00-30.78-17 57 57 0 0130.78 17zM190 288a54.21 54.21 0 01-10 4.65 54.21 54.21 0 0010-4.65zM105.49 224.45a59.87 59.87 0 015.2-20.64 59.87 59.87 0 00-5.2 20.64zM194.68 284.88C193.17 286 191.61 287 190 288c1.61-1 3.17-2 4.68-3.12zM216.17 257.89a69.49 69.49 0 01-5.73 10.42 69.49 69.49 0 005.73-10.42zM110.69 203.81a56.76 56.76 0 012.78-5.3 56.76 56.76 0 00-2.78 5.3zM194.68 284.88a65.39 65.39 0 0015.76-16.57 65.39 65.39 0 01-15.76 16.57z" />
</Icon>
);
)

6
apps/landing-page/assets/icons/PersonAddIcon.tsx
View File

@ -1,5 +1,5 @@
import Icon, { IconProps } from "@chakra-ui/icon";
import React from "react";
import Icon, { IconProps } from '@chakra-ui/icon'
import React from 'react'
export const PersonAddIcon = (props: IconProps) => (
<Icon
@ -11,4 +11,4 @@ export const PersonAddIcon = (props: IconProps) => (
<title>Person Add</title>
<path d="M288 256c52.79 0 99.43-49.71 104-110.82 2.27-30.7-7.36-59.33-27.12-80.6C345.33 43.57 318 32 288 32c-30.24 0-57.59 11.5-77 32.38-19.63 21.11-29.2 49.8-27 80.78C188.49 206.28 235.12 256 288 256zM495.38 439.76c-8.44-46.82-34.79-86.15-76.19-113.75C382.42 301.5 335.83 288 288 288s-94.42 13.5-131.19 38c-41.4 27.6-67.75 66.93-76.19 113.75-1.93 10.73.69 21.34 7.19 29.11A30.94 30.94 0 00112 480h352a30.94 30.94 0 0024.21-11.13c6.48-7.77 9.1-18.38 7.17-29.11zM104 288v-40h40a16 16 0 000-32h-40v-40a16 16 0 00-32 0v40H32a16 16 0 000 32h40v40a16 16 0 0032 0z" />
</Icon>
);
)

6
apps/landing-page/assets/icons/QuoteLeftIcon.tsx
View File

@ -1,5 +1,5 @@
import Icon, { IconProps } from "@chakra-ui/icon";
import React from "react";
import Icon, { IconProps } from '@chakra-ui/icon'
import React from 'react'
export const QuoteLeftIcon = (props: IconProps) => (
<Icon
@ -10,4 +10,4 @@ export const QuoteLeftIcon = (props: IconProps) => (
>
<path d="M3.516 7a3.5 3.5 0 1 1-3.5 3.5L0 10a7 7 0 0 1 7-7v2a4.97 4.97 0 0 0-3.536 1.464a5.01 5.01 0 0 0-.497.578c.179-.028.362-.043.548-.043zm9 0a3.5 3.5 0 1 1-3.5 3.5L9 10a7 7 0 0 1 7-7v2a4.97 4.97 0 0 0-3.536 1.464a5.01 5.01 0 0 0-.497.578c.179-.028.362-.043.549-.043z" />
</Icon>
);
)

6
apps/landing-page/assets/icons/ShareIcon.tsx
View File

@ -1,5 +1,5 @@
import Icon, { IconProps } from "@chakra-ui/icon";
import React from "react";
import Icon, { IconProps } from '@chakra-ui/icon'
import React from 'react'
export const ShareIcon = (props: IconProps) => (
<Icon
@ -11,4 +11,4 @@ export const ShareIcon = (props: IconProps) => (
<title>Share Social</title>
<path d="M384 336a63.78 63.78 0 00-46.12 19.7l-148-83.27a63.85 63.85 0 000-32.86l148-83.27a63.8 63.8 0 10-15.73-27.87l-148 83.27a64 64 0 100 88.6l148 83.27A64 64 0 10384 336z" />
</Icon>
);
)

1
apps/landing-page/assets/icons/index.tsx Normal file
View File

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

146
apps/landing-page/assets/illustrations/Flare.tsx Normal file
View File

@ -0,0 +1,146 @@
import { Icon, IconProps } from '@chakra-ui/react'
import React from 'react'
export const Flare = (props: IconProps & { color: 'blue' | 'orange' }) => (
<Icon
boxSize="600px"
viewBox="0 0 1381 1078"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<g filter="url(#filter0_f_46_23)">
<rect
x="859.42"
y="335"
width="102.662"
height="676.089"
rx="51.3311"
transform="rotate(50.5977 859.42 335)"
fill={props.color === 'blue' ? '#0042DA' : '#FF8B1A'}
fillOpacity="0.28"
/>
</g>
<g filter="url(#filter1_f_46_23)">
<rect
x="956.42"
y="414"
width="95.6649"
height="676.089"
rx="47.8325"
transform="rotate(50.5977 956.42 414)"
fill={props.color === 'blue' ? '#0042DA' : '#FF8B1A'}
fillOpacity="0.28"
/>
</g>
<g filter="url(#filter2_f_46_23)">
<rect
x="706.42"
y="563"
width="81.7068"
height="676.089"
rx="40.8534"
transform="rotate(50.5977 706.42 563)"
fill={props.color === 'blue' ? '#0042DA' : '#FF8B1A'}
fillOpacity="0.28"
/>
</g>
<g filter="url(#filter3_f_46_23)">
<rect
x="1145.42"
y="184"
width="81.7068"
height="676.089"
rx="40.8534"
transform="rotate(50.5977 1145.42 184)"
fill={props.color === 'blue' ? '#0042DA' : '#FF8B1A'}
fillOpacity="0.28"
/>
</g>
<defs>
<filter
id="filter0_f_46_23"
x="157.915"
y="155.914"
width="945.757"
height="866.654"
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation="100"
result="effect1_foregroundBlur_46_23"
/>
</filter>
<filter
id="filter1_f_46_23"
x="253.489"
y="233.489"
width="944.166"
height="864.099"
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation="100"
result="effect1_foregroundBlur_46_23"
/>
</filter>
<filter
id="filter2_f_46_23"
x="0.645386"
y="379.645"
width="940.993"
height="859"
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation="100"
result="effect1_foregroundBlur_46_23"
/>
</filter>
<filter
id="filter3_f_46_23"
x="439.646"
y="0.645264"
width="940.993"
height="859"
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation="100"
result="effect1_foregroundBlur_46_23"
/>
</filter>
</defs>
</Icon>
)

9
apps/landing-page/components/Homepage/IntegrateInYourWorkflow/icons/airtable.tsx → apps/landing-page/assets/logos/AirtableLogo.tsx
View File

@ -1,7 +1,8 @@
import React, { SVGProps } from 'react'
import { Icon, IconProps } from '@chakra-ui/react'
import React from 'react'
export const AirtableLogo = (props: SVGProps<SVGSVGElement>) => (
<svg
export const AirtableLogo = (props: IconProps) => (
<Icon
viewBox="0 0 165 138"
fill="none"
xmlns="http://www.w3.org/2000/svg"
@ -24,5 +25,5 @@ export const AirtableLogo = (props: SVGProps<SVGSVGElement>) => (
fill="black"
fillOpacity="0.25"
/>
</svg>
</Icon>
)

39
apps/landing-page/assets/logos/CalendlyLogo.tsx Normal file
View File

@ -0,0 +1,39 @@
import { Icon, IconProps } from '@chakra-ui/react'
import React from 'react'
export const CalendlyLogo = (props: IconProps) => (
<Icon
viewBox="0 0 338 345"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<g clipPath="url(#clip0_1564_95)">
<path
d="M231.58 223.23C220.65 232.93 207 245 182.25 245H167.45C149.54 245 133.25 238.49 121.59 226.69C110.2 215.16 103.93 199.38 103.93 182.25V162C103.93 144.87 110.2 129.09 121.59 117.56C133.25 105.76 149.54 99.26 167.45 99.26H182.25C207.03 99.26 220.65 111.32 231.58 121.02C242.93 131.02 252.72 139.76 278.83 139.76C282.812 139.759 286.788 139.441 290.72 138.81L290.63 138.58C289.066 134.696 287.231 130.927 285.14 127.3L267.69 97.07C259.821 83.4423 248.503 72.126 234.875 64.2585C221.246 56.3909 205.786 52.2493 190.05 52.25H155.14C139.403 52.2493 123.944 56.3909 110.315 64.2585C96.6865 72.126 85.3689 83.4423 77.4998 97.07L60.0498 127.3C52.1833 140.929 48.042 156.389 48.042 172.125C48.042 187.861 52.1833 203.321 60.0498 216.95L77.4998 247.18C85.3689 260.808 96.6865 272.124 110.315 279.992C123.944 287.859 139.403 292.001 155.14 292H190.05C205.786 292.001 221.246 287.859 234.875 279.992C248.503 272.124 259.821 260.808 267.69 247.18L285.14 217C287.231 213.373 289.066 209.604 290.63 205.72L290.72 205.5C286.79 204.847 282.814 204.513 278.83 204.5C252.72 204.5 242.93 213.19 231.58 223.24"
fill="#006BFF"
/>
<path
d="M182.25 117.609H167.45C140.19 117.609 122.28 137.079 122.28 161.999V182.249C122.28 207.169 140.19 226.639 167.45 226.639H182.25C221.97 226.639 218.85 186.139 278.83 186.139C284.513 186.133 290.184 186.655 295.77 187.699C297.59 177.396 297.59 166.853 295.77 156.549C290.183 157.589 284.513 158.111 278.83 158.109C218.83 158.109 221.97 117.609 182.25 117.609Z"
fill="#006BFF"
/>
<path
d="M330.23 202.5C320.016 195.019 308.236 189.955 295.78 187.69C295.78 187.8 295.78 187.89 295.78 187.99C294.708 193.96 293.032 199.807 290.78 205.44C301.07 207.033 310.833 211.054 319.26 217.17C319.26 217.25 319.21 217.35 319.18 217.44C308.333 252.561 285.249 282.628 254.119 302.177C222.99 321.726 185.881 329.46 149.534 323.975C113.187 318.491 80.0129 300.151 56.038 272.286C32.0632 244.422 18.8782 208.883 18.8782 172.125C18.8782 135.366 32.0632 99.8266 56.038 71.9626C80.0129 44.0985 113.187 25.7584 149.534 20.2737C185.881 14.7889 222.99 22.5236 254.119 42.0725C285.249 61.6214 308.333 91.6876 319.18 126.81C319.18 126.9 319.23 127 319.26 127.08C310.834 133.196 301.07 137.214 290.78 138.8C293.03 144.44 294.705 150.293 295.78 156.27C295.774 156.363 295.774 156.456 295.78 156.55C308.236 154.288 320.015 149.228 330.23 141.75C340.05 134.48 338.15 126.27 336.66 121.41C324.519 82.0307 298.653 48.3141 263.764 26.3868C228.874 4.45938 187.275 -4.22368 146.527 1.91544C105.779 8.05455 68.5854 28.6084 41.7049 59.8421C14.8244 91.0758 0.0410156 130.916 0.0410156 172.125C0.0410156 213.333 14.8244 253.173 41.7049 284.407C68.5854 315.641 105.779 336.195 146.527 342.334C187.275 348.473 228.874 339.79 263.764 317.862C298.653 295.935 324.519 262.218 336.66 222.84C338.15 217.98 340.05 209.77 330.23 202.5Z"
fill="#006BFF"
/>
<path
d="M290.72 138.799C286.79 139.452 282.814 139.786 278.83 139.799C252.72 139.799 242.93 131.109 231.59 121.059C220.65 111.359 207.03 99.2891 182.25 99.2891H167.45C149.53 99.2891 133.25 105.799 121.59 117.599C110.2 129.129 103.93 144.909 103.93 162.039V182.289C103.93 199.419 110.2 215.199 121.59 226.729C133.25 238.529 149.53 245.029 167.45 245.029H182.25C207.03 245.029 220.65 232.969 231.59 223.269C242.93 213.269 252.72 204.529 278.83 204.529C282.812 204.53 286.788 204.848 290.72 205.479C292.977 199.848 294.652 194.001 295.72 188.029C295.726 187.929 295.726 187.829 295.72 187.729C290.133 186.693 284.462 186.174 278.78 186.179C218.78 186.179 221.92 226.689 182.2 226.689H167.4C140.14 226.689 122.23 207.209 122.23 182.289V161.999C122.23 137.079 140.14 117.609 167.4 117.609H182.2C221.92 117.609 218.8 158.099 278.78 158.099C284.463 158.109 290.134 157.59 295.72 156.549C295.72 156.459 295.72 156.369 295.72 156.269C294.645 150.292 292.97 144.439 290.72 138.799Z"
fill="#0AE8F0"
/>
<path
d="M290.72 138.799C286.79 139.452 282.814 139.786 278.83 139.799C252.72 139.799 242.93 131.109 231.59 121.059C220.65 111.359 207.03 99.2891 182.25 99.2891H167.45C149.53 99.2891 133.25 105.799 121.59 117.599C110.2 129.129 103.93 144.909 103.93 162.039V182.289C103.93 199.419 110.2 215.199 121.59 226.729C133.25 238.529 149.53 245.029 167.45 245.029H182.25C207.03 245.029 220.65 232.969 231.59 223.269C242.93 213.269 252.72 204.529 278.83 204.529C282.812 204.53 286.788 204.848 290.72 205.479C292.977 199.848 294.652 194.001 295.72 188.029C295.726 187.929 295.726 187.829 295.72 187.729C290.133 186.693 284.462 186.174 278.78 186.179C218.78 186.179 221.92 226.689 182.2 226.689H167.4C140.14 226.689 122.23 207.209 122.23 182.289V161.999C122.23 137.079 140.14 117.609 167.4 117.609H182.2C221.92 117.609 218.8 158.099 278.78 158.099C284.463 158.109 290.134 157.59 295.72 156.549C295.72 156.459 295.72 156.369 295.72 156.269C294.645 150.292 292.97 144.439 290.72 138.799Z"
fill="#0AE8F0"
/>
</g>
<defs>
<clipPath id="clip0_1564_95">
<rect width="338" height="345" fill="white" />
</clipPath>
</defs>
</Icon>
)

9
apps/landing-page/components/Homepage/IntegrateInYourWorkflow/icons/gmail.tsx → apps/landing-page/assets/logos/GmailLogo.tsx
View File

@ -1,7 +1,8 @@
import React, { SVGProps } from 'react'
import { Icon, IconProps } from '@chakra-ui/react'
import React from 'react'
export const GmailLogo = (props: SVGProps<SVGSVGElement>) => (
<svg
export const GmailLogo = (props: IconProps) => (
<Icon
viewBox="0 0 256 194"
fill="none"
xmlns="http://www.w3.org/2000/svg"
@ -57,5 +58,5 @@ export const GmailLogo = (props: SVGProps<SVGSVGElement>) => (
<stop offset="1" stopOpacity="0.2" />
</linearGradient>
</defs>
</svg>
</Icon>
)

21
apps/landing-page/assets/logos/GoogleCalendarLogo.tsx Normal file
View File

@ -0,0 +1,21 @@
import { Icon, IconProps } from '@chakra-ui/react'
import React from 'react'
export const GoogleCalendarLogo = (props: IconProps) => (
<Icon xmlns="http://www.w3.org/2000/svg" viewBox="186 38 76 76" {...props}>
<path fill="#fff" d="M244 56h-40v40h40V56z" />
<path fill="#EA4335" d="M244 114l18-18h-18v18z" />
<path fill="#FBBC04" d="M262 56h-18v40h18V56z" />
<path fill="#34A853" d="M244 96h-40v18h40V96z" />
<path fill="#188038" d="M186 96v12c0 3.315 2.685 6 6 6h12V96h-18z" />
<path fill="#1967D2" d="M262 56V44c0-3.315-2.685-6-6-6h-12v18h18z" />
<path
fill="#4285F4"
d="M244 38h-52c-3.315 0 -6 2.685-6 6v52h18V56h40V38z"
/>
<path
fill="#4285F4"
d="M212.205 87.03c-1.495-1.01-2.53-2.485-3.095-4.435l3.47-1.43c.315 1.2.865 2.13 1.65 2.79.78.66 1.73.985 2.84.985 1.135 0 2.11-.345 2.925-1.035s1.225-1.57 1.225-2.635c0-1.09-.43-1.98-1.29-2.67-.86-.69-1.94-1.035-3.23-1.035h-2.005V74.13h1.8c1.11 0 2.045-.3 2.805-.9.76-.6 1.14-1.42 1.14-2.465 0 -.93-.34-1.67-1.02-2.225-.68-.555-1.54-.835-2.585-.835-1.02 0 -1.83.27-2.43.815a4.784 4.784 0 0 0 -1.31 2.005l-3.435-1.43c.455-1.29 1.29-2.43 2.515-3.415 1.225-.985 2.79-1.48 4.69-1.48 1.405 0 2.67.27 3.79.815 1.12.545 2 1.3 2.635 2.26.635.965.95 2.045.95 3.245 0 1.225-.295 2.26-.885 3.11-.59.85-1.315 1.5-2.175 1.955v.205a6.605 6.605 0 0 1 2.79 2.175c.725.975 1.09 2.14 1.09 3.5 0 1.36-.345 2.575-1.035 3.64s-1.645 1.905-2.855 2.515c-1.215.61-2.58.92-4.095.92-1.755.005-3.375-.5-4.87-1.51zM233.52 69.81l-3.81 2.755-1.905-2.89 6.835-4.93h2.62V88h-3.74V69.81z"
/>
</Icon>
)

31
apps/landing-page/assets/logos/GoogleDriveLogo.tsx Normal file
View File

@ -0,0 +1,31 @@
import { Icon, IconProps } from '@chakra-ui/react'
import React from 'react'
export const GoogleDriveLogo = (props: IconProps) => (
<Icon viewBox="0 0 87.3 78" xmlns="http://www.w3.org/2000/svg" {...props}>
<path
d="m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z"
fill="#0066da"
/>
<path
d="m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0 -1.2 4.5h27.5z"
fill="#00ac47"
/>
<path
d="m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.502l5.852 11.5z"
fill="#ea4335"
/>
<path
d="m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z"
fill="#00832d"
/>
<path
d="m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z"
fill="#2684fc"
/>
<path
d="m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z"
fill="#ffba00"
/>
</Icon>
)

9
apps/landing-page/components/Homepage/IntegrateInYourWorkflow/icons/google-sheets.tsx → apps/landing-page/assets/logos/GoogleSheetsLogo.tsx
View File

@ -1,7 +1,8 @@
import React, { SVGProps } from 'react'
import { Icon, IconProps } from '@chakra-ui/react'
import React from 'react'
export const GoogleSheetLogo = (props: SVGProps<SVGSVGElement>) => (
<svg
export const GoogleSheetLogo = (props: IconProps) => (
<Icon
viewBox="0 0 279 382"
fill="none"
xmlns="http://www.w3.org/2000/svg"
@ -178,5 +179,5 @@ export const GoogleSheetLogo = (props: SVGProps<SVGSVGElement>) => (
<stop offset="1" stopColor="white" stopOpacity="0" />
</radialGradient>
</defs>
</svg>
</Icon>
)

9
apps/landing-page/components/Homepage/IntegrateInYourWorkflow/icons/hubspot.tsx → apps/landing-page/assets/logos/HubspotLogo.tsx
View File

@ -1,7 +1,8 @@
import React, { SVGProps } from 'react'
import { Icon, IconProps } from '@chakra-ui/react'
import React from 'react'
export const HubspotLogo = (props: SVGProps<SVGSVGElement>) => (
<svg
export const HubspotLogo = (props: IconProps) => (
<Icon
viewBox="0 0 153 159"
fill="none"
xmlns="http://www.w3.org/2000/svg"
@ -11,5 +12,5 @@ export const HubspotLogo = (props: SVGProps<SVGSVGElement>) => (
d="M117.224 52.2096V33.3231C119.722 32.1567 121.836 30.3054 123.322 27.9847C124.808 25.664 125.603 22.9694 125.616 20.2145V19.7807C125.616 11.7485 119.1 5.23699 111.062 5.23699H110.628C106.768 5.23699 103.066 6.76928 100.337 9.49676C97.6076 12.2242 96.0743 15.9235 96.0743 19.7807V20.2145C96.087 22.9694 96.8825 25.664 98.368 27.9847C99.8536 30.3054 101.968 32.1567 104.466 33.3231V52.2096C97.2877 53.308 90.5276 56.2821 84.8697 60.8309L33.037 20.4876C33.4068 19.1542 33.5997 17.7834 33.6211 16.4072C33.6275 13.1659 32.6717 9.9956 30.8748 7.29722C29.0779 4.59883 26.5206 2.49361 23.5262 1.24785C20.5319 0.00209823 17.2351 -0.32823 14.0528 0.298653C10.8706 0.925535 7.94591 2.48147 5.64868 4.76963C3.35145 7.0578 1.78491 9.97541 1.1472 13.1534C0.509489 16.3314 0.829294 19.627 2.0661 22.6234C3.30292 25.6197 5.40117 28.1822 8.09551 29.9867C10.7898 31.7912 13.9592 32.7566 17.2027 32.7609C20.0403 32.7475 22.8247 31.9905 25.2779 30.5654L76.3175 70.2554C71.7324 77.1775 69.3404 85.3193 69.4532 93.6197C69.566 101.92 72.1784 109.994 76.9499 116.789L61.4263 132.307C60.1715 131.906 58.8641 131.693 57.5467 131.675C54.8844 131.678 52.2824 132.468 50.0695 133.948C47.8567 135.427 46.1324 137.529 45.1146 139.987C44.0967 142.446 43.8309 145.151 44.3508 147.76C44.8708 150.369 46.1531 152.766 48.0357 154.647C49.9183 156.529 52.3166 157.81 54.9278 158.33C57.5389 158.849 60.2456 158.584 62.7057 157.567C65.1658 156.549 67.269 154.826 68.7495 152.615C70.23 150.404 71.0212 147.803 71.0234 145.143C71.0061 143.826 70.793 142.52 70.3911 141.266L85.7485 125.914C90.7564 129.766 96.5805 132.423 102.774 133.679C108.968 134.935 115.368 134.757 121.482 133.16C127.597 131.563 133.265 128.588 138.051 124.464C142.838 120.34 146.616 115.175 149.097 109.366C151.578 103.557 152.695 97.2581 152.363 90.951C152.032 84.6438 150.26 78.4963 147.183 72.9792C144.107 67.4622 139.807 62.7221 134.614 59.122C129.421 55.5219 123.473 53.1574 117.224 52.2096V52.2096ZM110.858 114.326C108.02 114.404 105.195 113.913 102.55 112.881C99.905 111.85 97.4937 110.299 95.4586 108.32C93.4235 106.342 91.8058 103.976 90.7013 101.362C89.5967 98.7478 89.0276 95.9392 89.0276 93.1019C89.0276 90.2645 89.5967 87.4559 90.7013 84.842C91.8058 82.2282 93.4235 79.8621 95.4586 77.8836C97.4937 75.905 99.905 74.3542 102.55 73.3227C105.195 72.2912 108.02 71.7999 110.858 71.878C116.359 72.0705 121.571 74.3889 125.395 78.3448C129.22 82.3008 131.358 87.5856 131.361 93.0862C131.364 98.5867 129.23 103.874 125.41 107.834C121.59 111.793 116.381 114.117 110.88 114.315"
fill="#FF7A59"
/>
</svg>
</Icon>
)

25
apps/landing-page/components/Homepage/IntegrateInYourWorkflow/icons/mailchimp.tsx → apps/landing-page/assets/logos/MailchimpLogo.tsx
View File

@ -1,7 +1,8 @@
import React, { SVGProps } from 'react'
import { Icon, IconProps } from '@chakra-ui/react'
import React from 'react'
export const MailChimpLogo = (props: SVGProps<SVGSVGElement>) => (
<svg
export const MailChimpLogo = (props: IconProps) => (
<Icon
viewBox="0 0 216 230"
fill="none"
xmlns="http://www.w3.org/2000/svg"
@ -9,35 +10,35 @@ export const MailChimpLogo = (props: SVGProps<SVGSVGElement>) => (
>
<path
d="M162.651 108.298C164.209 108.298 165.766 108.298 167.323 108.298C168.314 106.174 168.314 103.06 167.323 99.5206C166.332 94.2827 164.775 90.7436 161.661 91.1683C158.546 91.7345 158.546 95.8399 159.537 101.078C159.962 104.192 161.094 106.74 162.651 108.298Z"
fill="black"
fill="#a0aec0"
/>
<path
d="M135.188 112.97C137.311 113.961 138.868 114.527 139.293 113.961C139.859 113.395 139.293 112.97 138.727 111.838C137.736 109.714 135.046 108.157 133.064 107.166C127.826 105.042 122.164 105.609 117.492 109.289C115.935 110.28 114.378 111.838 114.944 112.97C114.944 113.536 115.51 113.536 115.935 113.536C116.926 113.536 121.598 111.413 126.835 110.988C129.95 110.847 133.064 111.979 135.188 112.97Z"
fill="black"
fill="#a0aec0"
/>
<path
d="M130.517 115.518C127.402 116.084 125.845 117.075 124.854 118.066C123.863 119.057 123.297 119.624 123.297 120.19V120.756H123.863C124.429 120.756 125.987 120.19 125.987 120.19C130.092 118.633 132.782 118.633 135.33 119.199C136.887 119.199 137.453 119.765 137.878 119.199C137.878 119.199 137.878 118.633 137.878 118.208C137.736 116.651 134.622 115.093 130.517 115.518Z"
fill="black"
fill="#a0aec0"
/>
<path
d="M132.073 119.198C133.064 117.075 133.064 112.403 132.073 108.864C131.082 103.626 129.525 100.512 125.844 100.512C122.73 101.078 122.73 105.183 123.721 110.846C124.287 114.527 125.844 116.509 126.269 118.066C128.959 122.313 130.516 121.18 132.073 119.198Z"
fill="black"
fill="#a0aec0"
/>
<path
d="M153.307 124.862C155.431 125.853 157.413 125.428 158.545 123.871C159.112 122.313 157.979 120.19 155.997 119.199C153.874 118.208 151.892 118.633 150.759 120.19C149.627 121.747 151.184 123.871 153.307 124.862Z"
fill="black"
fill="#a0aec0"
/>
<path
d="M166.191 113.536C164.633 113.536 163.076 115.093 163.076 117.641C163.076 119.765 164.067 121.747 166.191 121.747C167.748 121.747 169.305 120.19 169.305 117.641C168.88 115.518 167.748 113.536 166.191 113.536Z"
fill="black"
fill="#a0aec0"
/>
<path
d="M56.4776 153.881C55.9114 153.315 55.4867 153.315 54.9204 153.881C54.3541 153.881 53.9295 153.881 53.3632 153.881C52.3722 153.881 51.2397 153.315 50.815 152.324C50.3903 151.333 50.2488 149.776 50.815 147.653L51.3813 146.662C52.9385 143.547 55.062 138.876 52.3722 134.204C50.2488 130.523 47.7006 128.541 44.0199 127.975C40.3393 127.409 36.8002 128.966 34.6767 131.656C30.996 135.761 30.5713 140.999 30.996 142.981C30.996 143.547 31.5623 143.972 31.987 143.972C32.5532 143.972 33.5442 143.406 34.1104 141.848V141.282C34.1104 140.291 34.6767 139.159 35.6676 137.601C36.6586 136.044 38.2158 135.053 39.773 135.053C41.3302 134.487 43.4537 135.053 45.0109 136.044C47.5591 137.601 48.6916 140.716 47.5591 143.83C46.0018 145.388 45.4356 147.936 45.4356 150.625C46.0018 155.297 49.1163 157.42 51.6644 157.845C54.2126 157.845 56.336 156.288 56.336 155.297C56.9023 154.448 56.4776 154.448 56.4776 153.881Z"
fill="black"
fill="#a0aec0"
/>
<path
d="M207.102 145.105C207.102 144.539 206.536 142.557 205.545 139.442L203.422 134.771C207.102 129.533 207.102 124.436 206.536 121.888C205.97 118.774 204.413 115.659 201.865 112.545C199.316 109.431 193.088 106.316 185.301 104.193L181.196 103.202C181.196 103.202 181.196 93.2923 180.63 89.1869C180.63 86.0725 180.064 81.4009 178.506 76.7292C176.949 70.5004 173.835 64.8378 169.729 61.1571C180.064 50.2567 186.859 37.799 186.859 27.4648C186.859 7.78732 162.51 1.55849 131.932 14.0162L125.703 16.5643C125.703 16.5643 114.378 5.23917 113.811 5.23917C80.2607 -24.7725 -26.9036 94.8495 7.21344 123.87L14.4332 130.099C12.3098 135.337 11.8851 140.999 12.3098 147.228C13.3007 155.014 17.5476 162.8 23.6349 169.029C29.8637 174.692 38.0745 178.372 46.4268 178.372C59.8754 209.517 90.4533 228.062 126.128 229.194C164.492 230.185 197.051 212.065 210.5 179.93C211.491 177.806 215.172 167.472 215.172 158.129C216.021 148.644 210.783 145.105 207.102 145.105ZM49.6828 169.454C48.6918 169.454 47.1346 170.02 46.0021 169.454C34.6769 168.888 21.653 158.553 20.6621 146.096C19.6711 132.647 26.3246 122.313 38.7823 119.623C40.3395 119.057 41.8967 119.057 44.0202 119.057C50.8153 119.623 61.1495 124.72 63.6976 139.725C65.6795 153.882 62.7067 167.33 49.6828 169.454ZM36.8004 111.413C29.0144 112.97 22.3608 117.075 18.1139 123.304C15.5657 121.18 10.8941 117.075 10.3279 115.518C3.53277 103.06 17.5476 78.2864 27.4572 64.6963C51.24 30.5792 89.0377 4.67291 106.167 9.20297C109.281 10.1939 118.625 21.0944 118.625 21.0944C118.625 21.0944 101.071 31.0039 84.9323 44.4525C63.1314 60.5909 46.5683 84.94 36.8004 111.413ZM158.97 164.216L159.537 163.65C159.537 163.084 158.97 163.084 158.97 163.084C158.97 163.084 140.85 165.632 123.721 159.403C125.844 153.174 130.516 155.297 138.161 156.288C151.609 157.279 164.067 155.297 172.844 152.608C180.63 150.484 190.964 145.813 198.75 139.725C201.298 145.388 202.431 152.183 202.431 152.183C202.431 152.183 204.554 151.617 206.111 152.749C207.669 153.74 208.66 155.864 208.235 161.102C206.678 171.436 202.006 179.222 195.353 187.008C191.247 191.68 185.443 195.785 179.356 198.899C176.241 200.457 172.561 202.014 169.022 203.005C140.992 211.782 113.104 202.438 104.327 181.204C103.76 179.647 102.769 178.089 102.769 175.966C99.0887 161.951 102.203 145.388 112.679 135.054C113.245 134.488 113.67 133.497 113.67 132.506C113.67 131.515 113.104 130.948 112.679 130.382C108.998 125.144 96.6821 116.367 99.2303 99.238C100.788 86.7803 111.688 78.5695 121.456 78.9942H124.004C128.109 78.9942 132.356 79.9852 135.329 79.9852C140.992 79.9852 146.654 79.4189 152.883 74.3226C155.007 72.7654 156.564 71.2082 159.678 70.6419C160.245 70.6419 160.669 70.0757 162.226 70.6419C163.784 70.6419 165.341 71.2082 166.332 72.1992C171.57 75.8798 171.994 83.5243 172.561 89.7531C172.561 93.4338 173.127 101.645 173.127 103.768C173.693 109.006 174.684 109.997 177.799 110.988C179.356 111.554 180.913 111.979 183.036 112.545C189.832 114.668 193.937 116.226 196.485 118.774C198.042 120.331 198.609 121.888 199.033 123.446C200.024 129.108 194.362 136.328 180.347 143.123C164.775 150.343 146.654 151.9 133.772 150.343L129.1 149.776C118.766 148.219 113.104 161.668 119.191 170.445C123.296 176.107 134.197 180.354 144.531 180.354C169.446 180.354 188.557 170.02 195.353 160.677L195.919 159.686C196.485 159.12 195.919 158.695 195.353 159.12C189.69 163.225 163.784 178.797 136.32 174.126C136.32 174.126 133.206 173.559 130.091 172.568C127.543 171.577 122.872 169.454 121.739 164.216C144.956 171.011 158.97 164.216 158.97 164.216ZM81.2516 64.8378C89.6039 54.9283 100.363 46.1513 109.706 41.4796C110.272 41.4796 110.272 41.4797 110.272 42.0459C109.706 43.6032 108.149 46.1513 107.724 48.2748C107.724 48.841 108.29 48.841 108.29 48.841C113.953 44.7356 124.287 40.4887 133.206 40.064C133.772 40.064 133.772 40.6303 133.772 40.6303C132.215 41.6212 131.224 43.1784 129.667 44.7357C129.667 44.7357 129.667 45.3019 130.233 45.3019C136.462 45.3019 145.239 47.4254 150.901 50.9645C151.468 50.9645 150.901 51.9555 150.335 51.9555C141.558 49.832 127.543 48.2748 112.537 51.9555C99.0887 55.0699 89.1792 60.3078 81.9595 65.4041C81.2516 65.2625 80.8269 65.2625 81.2516 64.8378Z"
fill="black"
fill="#a0aec0"
/>
</svg>
</Icon>
)

16
apps/landing-page/assets/logos/N8nLogo.tsx Normal file
View File

@ -0,0 +1,16 @@
import { Icon, IconProps } from '@chakra-ui/react'
import React from 'react'
export const N8nLogo = (props: IconProps) => (
<Icon
viewBox="0 0 206 106"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M184.51 0.719727C174.74 0.719727 166.521 7.44977 164.201 16.5098H134.97C123.5 16.5098 114.17 25.8398 114.17 37.3098C114.17 43.0398 109.511 47.7098 103.771 47.7098H99.6005C97.2805 38.6498 89.0705 31.9197 79.2905 31.9197C69.5205 31.9197 61.3005 38.6498 58.9805 47.7098H42.2805C39.9605 38.6498 31.7505 31.9197 21.9705 31.9197C10.4005 31.9197 0.980469 41.3297 0.980469 52.9097C0.980469 64.4797 10.3905 73.8998 21.9705 73.8998C31.7405 73.8998 39.9605 67.1697 42.2805 58.1097H59.0005C61.3205 67.1697 69.5305 73.8998 79.3105 73.8998C89.0205 73.8998 97.1805 67.2697 99.5705 58.2997H103.781C109.511 58.2997 114.18 62.9598 114.18 68.6998C114.18 80.1698 123.51 89.4998 134.98 89.4998H141.79C144.11 98.5598 152.32 105.29 162.1 105.29C173.67 105.29 183.091 95.8797 183.091 84.2997C183.091 72.7297 173.68 63.3098 162.1 63.3098C152.33 63.3098 144.11 70.0397 141.79 79.0997H134.98C129.25 79.0997 124.581 74.4398 124.581 68.6998C124.581 62.4398 121.781 56.8198 117.391 53.0098C121.791 49.1898 124.581 43.5798 124.581 37.3198C124.581 31.5898 129.24 26.9197 134.98 26.9197H164.211C166.531 35.9797 174.741 42.7098 184.521 42.7098C196.091 42.7098 205.51 33.2997 205.51 21.7197C205.5 10.1397 196.08 0.719727 184.51 0.719727ZM21.9905 63.4897C16.1505 63.4897 11.4005 58.7398 11.4005 52.8998C11.4005 47.0598 16.1505 42.3098 21.9905 42.3098C27.8305 42.3098 32.5805 47.0598 32.5805 52.8998C32.5805 58.7398 27.8305 63.4897 21.9905 63.4897ZM79.3105 63.4897C73.4705 63.4897 68.7205 58.7398 68.7205 52.8998C68.7205 47.0598 73.4705 42.3098 79.3105 42.3098C85.1505 42.3098 89.9005 47.0598 89.9005 52.8998C89.9005 58.7398 85.1505 63.4897 79.3105 63.4897ZM162.091 73.6998C167.931 73.6998 172.68 78.4497 172.68 84.2897C172.68 90.1297 167.931 94.8798 162.091 94.8798C156.251 94.8798 151.5 90.1297 151.5 84.2897C151.51 78.4497 156.261 73.6998 162.091 73.6998ZM184.51 32.2997C178.67 32.2997 173.92 27.5498 173.92 21.7098C173.92 15.8698 178.67 11.1198 184.51 11.1198C190.35 11.1198 195.1 15.8698 195.1 21.7098C195.1 27.5498 190.35 32.2997 184.51 32.2997Z"
fill="#FF6D5A"
/>
</Icon>
)

11
apps/landing-page/components/Homepage/IntegrateInYourWorkflow/icons/notion.tsx → apps/landing-page/assets/logos/NotionLogo.tsx
View File

@ -1,7 +1,8 @@
import React, { SVGProps } from 'react'
import { Icon, IconProps } from '@chakra-ui/react'
import React from 'react'
export const NotionLogo = (props: SVGProps<SVGSVGElement>) => (
<svg
export const NotionLogo = (props: IconProps) => (
<Icon
viewBox="0 0 246 246"
fill="none"
xmlns="http://www.w3.org/2000/svg"
@ -11,7 +12,7 @@ export const NotionLogo = (props: SVGProps<SVGSVGElement>) => (
fillRule="evenodd"
clipRule="evenodd"
d="M46.0982 43.7783C53.7102 49.9627 56.5657 49.4909 70.8599 48.5371L205.616 40.4456C208.474 40.4456 206.098 37.5944 205.144 37.1206L182.764 20.9415C178.476 17.6122 172.763 13.7995 161.813 14.7532L31.3283 24.2703C26.5695 24.7422 25.6191 27.1216 27.5142 29.0287L46.0982 43.7783ZM54.1887 75.1833V216.97C54.1887 224.59 57.9966 227.441 66.5672 226.97L214.664 218.4C223.239 217.929 224.194 212.688 224.194 206.497V65.6619C224.194 59.4818 221.817 56.1491 216.568 56.6248L61.805 65.6619C56.0934 66.1419 54.1883 68.9989 54.1883 75.1833H54.1887ZM200.39 82.789C201.339 87.0755 200.39 91.3581 196.095 91.84L188.96 93.2618V197.938C182.764 201.268 177.051 203.172 172.291 203.172C164.668 203.172 162.759 200.791 157.05 193.658L110.375 120.384V191.278L125.145 194.611C125.145 194.611 125.145 203.172 113.229 203.172L80.3785 205.077C79.4242 203.172 80.3785 198.418 83.7107 197.465L92.2832 195.089V101.353L80.3809 100.399C79.4261 96.1126 81.8036 89.932 88.4753 89.4525L123.716 87.0769L172.291 161.305V95.6407L159.906 94.2194C158.955 88.9792 162.759 85.1742 167.522 84.7023L200.39 82.789ZM20.3726 11.4244L156.097 1.42918C172.765 -0.000288379 177.053 0.957344 187.529 8.56689L230.854 39.0181C238.003 44.2545 240.386 45.6801 240.386 51.3884V218.4C240.386 228.867 236.572 235.057 223.242 236.005L65.624 245.523C55.6168 246 50.8541 244.574 45.6134 237.908L13.7082 196.513C7.99173 188.893 5.61426 183.192 5.61426 176.523V28.0715C5.61426 19.512 9.42842 12.3719 20.3726 11.4244V11.4244Z"
fill="black"
fill="#a0aec0"
/>
</svg>
</Icon>
)

9
apps/landing-page/components/Homepage/IntegrateInYourWorkflow/icons/pipedrive.tsx → apps/landing-page/assets/logos/PipedriveLogo.tsx
View File

@ -1,7 +1,8 @@
import React, { SVGProps } from 'react'
import { Icon, IconProps } from '@chakra-ui/react'
import React from 'react'
export const PipedriveLogo = (props: SVGProps<SVGSVGElement>) => (
<svg
export const PipedriveLogo = (props: IconProps) => (
<Icon
width="122"
height="154"
viewBox="0 0 122 154"
@ -13,5 +14,5 @@ export const PipedriveLogo = (props: SVGProps<SVGSVGElement>) => (
d="M72.7239 0.707031C55.7176 0.707031 45.8568 8.42417 41.1408 13.5689C40.5692 8.99581 37.5681 3.1365 25.8494 3.1365H0.268555V29.7178H10.701C12.4159 29.7178 12.9875 30.2894 12.9875 32.0043V153.621H43.2845V108.175V104.746C48.0005 109.033 57.0038 115.035 71.1519 115.035C100.734 115.035 121.456 91.5978 121.456 57.871C121.599 23.7155 101.878 0.707031 72.7239 0.707031V0.707031ZM66.5788 88.5967C50.2871 88.5967 42.8557 73.0195 42.8557 58.4427C42.8557 35.5771 55.2889 27.4312 67.0075 27.4312C81.2985 27.4312 91.0164 39.7215 91.0164 58.1568C90.8735 79.3075 78.5832 88.5967 66.5788 88.5967"
fill="#203232"
/>
</svg>
</Icon>
)

9
apps/landing-page/components/Homepage/IntegrateInYourWorkflow/icons/salesforce.tsx → apps/landing-page/assets/logos/SalesforceLogo.tsx
View File

@ -1,7 +1,8 @@
import React, { SVGProps } from 'react'
import { Icon, IconProps } from '@chakra-ui/react'
import React from 'react'
export const SalesforceLogo = (props: SVGProps<SVGSVGElement>) => (
<svg
export const SalesforceLogo = (props: IconProps) => (
<Icon
viewBox="0 0 256 180"
fill="none"
xmlns="http://www.w3.org/2000/svg"
@ -51,5 +52,5 @@ export const SalesforceLogo = (props: SVGProps<SVGSVGElement>) => (
d="M86.3217 95.1896C86.3217 95.4373 86.1432 95.6377 85.8955 95.6377H81.9646C81.7169 95.6377 81.542 95.4373 81.542 95.1896V63.5531C81.542 63.3054 81.7169 63.105 81.9646 63.105H85.8955C86.1432 63.105 86.3217 63.3054 86.3217 63.5531V95.1896Z"
fill="white"
/>
</svg>
</Icon>
)

24
apps/landing-page/assets/logos/ShopifyLogo.tsx Normal file
View File

@ -0,0 +1,24 @@
import { Icon, IconProps } from '@chakra-ui/react'
import React from 'react'
export const ShopifyLogo = (props: IconProps) => (
<Icon
viewBox="0 0 53 60"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M46.3758 11.5534C46.3342 11.2504 46.0695 11.0823 45.8498 11.064C45.6318 11.0457 41.3604 10.9808 41.3604 10.9808C41.3604 10.9808 37.7881 7.51175 37.4352 7.15885C37.0824 6.80596 36.3932 6.91249 36.1252 6.99239C36.1219 6.99406 35.4544 7.20047 34.3308 7.54837C34.1427 6.93913 33.8663 6.19005 33.4718 5.43765C32.2001 3.01066 30.3374 1.72725 28.0868 1.72393C28.0835 1.72393 28.0818 1.72393 28.0785 1.72393C27.922 1.72393 27.7672 1.73891 27.6108 1.75222C27.5442 1.67232 27.4776 1.59409 27.4077 1.51751C26.4272 0.468815 25.1705 -0.0422181 23.664 0.00272612C20.7576 0.0859563 17.8629 2.18502 15.5158 5.91373C13.8645 8.53714 12.6077 11.8331 12.2515 14.3849C8.91395 15.4186 6.58017 16.141 6.52857 16.1577C4.84399 16.687 4.79073 16.7386 4.571 18.3267C4.40787 19.5268 0 53.6113 0 53.6113L36.9392 60L52.9493 56.0199C52.9493 56.0199 46.4174 11.8564 46.3758 11.5534ZM32.4814 8.12099C31.6308 8.384 30.6636 8.68363 29.6149 9.00823C29.5933 7.53672 29.4185 5.48926 28.7327 3.71978C30.9383 4.1376 32.0236 6.63284 32.4814 8.12099ZM27.6823 9.60748C25.7464 10.2067 23.634 10.8609 21.515 11.5168C22.1109 9.23461 23.2412 6.96243 24.6295 5.47261C25.1455 4.9183 25.8679 4.30073 26.7235 3.94783C27.5275 5.62575 27.7023 8.00114 27.6823 9.60748ZM23.7222 1.93699C24.4047 1.92201 24.979 2.07183 25.4701 2.39476C24.6844 2.80259 23.9253 3.38853 23.2129 4.15258C21.3668 6.13346 19.9519 9.20798 19.3876 12.1743C17.6281 12.7186 15.9069 13.253 14.3222 13.7424C15.3227 9.07315 19.2361 2.06683 23.7222 1.93699Z"
fill="#95BF47"
/>
<path
d="M45.851 11.0658C45.633 11.0475 41.3616 10.9826 41.3616 10.9826C41.3616 10.9826 37.7894 7.51356 37.4365 7.16067C37.305 7.02916 37.1269 6.96091 36.9404 6.93262L36.9421 59.9985L52.9506 56.0201C52.9506 56.0201 46.4187 11.8582 46.3771 11.5552C46.3354 11.2522 46.0691 11.0841 45.851 11.0658Z"
fill="#5E8E3E"
/>
<path
d="M28.0665 19.2971L26.2072 26.2534C26.2072 26.2534 24.1331 25.3096 21.6745 25.4644C18.0689 25.6925 18.0306 27.9663 18.0673 28.5373C18.2637 31.6484 26.4485 32.3276 26.908 39.6152C27.2692 45.3481 23.8667 49.2699 18.9645 49.5795C13.0801 49.9507 9.84082 46.48 9.84082 46.48L11.0876 41.1766C11.0876 41.1766 14.3485 43.6369 16.9586 43.4721C18.6632 43.3639 19.2724 41.9773 19.2108 40.9968C18.9545 36.9385 12.2894 37.1782 11.8683 30.5098C11.5137 24.8985 15.1992 19.2122 23.3307 18.6995C26.4635 18.4981 28.0665 19.2971 28.0665 19.2971Z"
fill="white"
/>
</Icon>
)

9
apps/landing-page/components/Homepage/IntegrateInYourWorkflow/icons/slack.tsx → apps/landing-page/assets/logos/SlackLogo.tsx
View File

@ -1,7 +1,8 @@
import React, { SVGProps } from 'react'
import { Icon, IconProps } from '@chakra-ui/react'
import React from 'react'
export const SlackLogo = (props: SVGProps<SVGSVGElement>) => (
<svg
export const SlackLogo = (props: IconProps) => (
<Icon
viewBox="0 0 464 465"
fill="none"
xmlns="http://www.w3.org/2000/svg"
@ -31,5 +32,5 @@ export const SlackLogo = (props: SVGProps<SVGSVGElement>) => (
d="M1.29623e-05 294.491C-0.0189444 320.144 20.7583 340.962 46.4076 340.981C72.0569 340.962 92.8341 320.144 92.8152 294.491V248H46.4076C20.7583 248.019 -0.0189444 268.837 1.29623e-05 294.491ZM123.735 294.491V418.491C123.697 444.144 144.474 464.962 170.123 465C195.773 464.981 216.55 444.163 216.531 418.51V294.528C216.569 268.875 195.791 248.057 170.142 248.019C144.474 248.019 123.716 268.837 123.735 294.491C123.735 294.509 123.735 294.491 123.735 294.491Z"
fill="#E01E5A"
/>
</svg>
</Icon>
)

9
apps/landing-page/components/Homepage/IntegrateInYourWorkflow/icons/webflow.tsx → apps/landing-page/assets/logos/WebflowLogo.tsx
View File

@ -1,7 +1,8 @@
import React, { SVGProps } from 'react'
import { Icon, IconProps } from '@chakra-ui/react'
import React from 'react'
export const WebflowLogo = (props: SVGProps<SVGSVGElement>) => (
<svg
export const WebflowLogo = (props: IconProps) => (
<Icon
viewBox="0 0 224 224"
fill="none"
xmlns="http://www.w3.org/2000/svg"
@ -15,5 +16,5 @@ export const WebflowLogo = (props: SVGProps<SVGSVGElement>) => (
d="M144.9 98.7016L134.75 130.692C134.75 128.242 127.75 75.1816 127.75 75.1816C111.65 75.1816 103.11 86.5916 98.6301 98.7016L86.2401 130.762C86.2401 128.452 84.4901 98.9816 84.4901 98.9816C83.8925 92.602 80.9759 86.663 76.2929 82.2897C71.6099 77.9163 65.4856 75.4122 59.0801 75.2516L72.2401 155.612C89.0401 155.612 98.1401 144.202 102.83 132.092L113.33 104.792C113.33 105.912 120.33 155.612 120.33 155.612C127.2 155.603 133.888 153.407 139.426 149.341C144.964 145.276 149.063 139.553 151.13 133.002L174.93 75.1816C158.13 75.1816 149.31 86.5916 144.83 98.7016H144.9Z"
fill="white"
/>
</svg>
</Icon>
)

9
apps/landing-page/components/Homepage/IntegrateInYourWorkflow/icons/wix.tsx → apps/landing-page/assets/logos/WixLogo.tsx
View File

@ -1,7 +1,8 @@
import React, { SVGProps } from 'react'
import { Icon, IconProps } from '@chakra-ui/react'
import React from 'react'
export const WixLogo = (props: SVGProps<SVGSVGElement>) => (
<svg
export const WixLogo = (props: IconProps) => (
<Icon
viewBox="0 0 311 121"
fill="none"
xmlns="http://www.w3.org/2000/svg"
@ -23,5 +24,5 @@ export const WixLogo = (props: SVGProps<SVGSVGElement>) => (
d="M270.4 60.7003L311 0.600311C311 0.600311 294.2 -2.39969 285.5 5.40031C279.9 10.2003 274.3 19.2003 274.3 19.2003L259.6 40.8003C258.7 42.1003 257.9 43.0003 256.6 43.0003C255.3 43.0003 254 41.7003 253.6 40.8003L238.9 19.2003C238.9 19.2003 232.9 10.6003 227.7 5.40031C219.1 -2.39969 202.2 0.600311 202.2 0.600311L241.5 60.6003L201.3 120.6C201.3 120.6 219 122.8 227.7 115C233.3 110.2 238.5 102 238.5 102L253.2 80.4003C254.1 79.1003 254.9 78.2003 256.2 78.2003C257.5 78.2003 258.8 79.5003 259.2 80.4003L273.9 102C273.9 102 279.5 110.2 284.7 115C293.3 122.8 310.6 120.6 310.6 120.6L270.4 60.7003Z"
fill="black"
/>
</svg>
</Icon>
)

17
apps/landing-page/components/Homepage/IntegrateInYourWorkflow/icons/wordpress.tsx → apps/landing-page/assets/logos/WordpressLogo.tsx
View File

@ -1,7 +1,8 @@
import { Icon, IconProps } from '@chakra-ui/react'
import React from 'react'
export const WordpressLogo = (props: React.SVGProps<SVGSVGElement>) => (
<svg
export const WordpressLogo = (props: IconProps) => (
<Icon
viewBox="0 0 123 123"
fill="none"
xmlns="http://www.w3.org/2000/svg"
@ -9,23 +10,23 @@ export const WordpressLogo = (props: React.SVGProps<SVGSVGElement>) => (
>
<path
d="M8.70801 61.2601C8.70801 82.0621 20.797 100.039 38.327 108.558L13.258 39.8721C10.342 46.4081 8.70801 53.6411 8.70801 61.2601Z"
fill="#464342"
fill="#a0aec0"
/>
<path
d="M96.7396 58.608C96.7396 52.113 94.4066 47.615 92.4056 44.114C89.7416 39.785 87.2446 36.119 87.2446 31.79C87.2446 26.959 90.9086 22.462 96.0696 22.462C96.3026 22.462 96.5236 22.491 96.7506 22.504C87.4006 13.938 74.9436 8.70801 61.2616 8.70801C42.9016 8.70801 26.7486 18.128 17.3516 32.396C18.5846 32.433 19.7466 32.459 20.7336 32.459C26.2306 32.459 34.7396 31.792 34.7396 31.792C37.5726 31.625 37.9066 35.786 35.0766 36.121C35.0766 36.121 32.2296 36.456 29.0616 36.622L48.1996 93.547L59.7006 59.054L51.5126 36.62C48.6826 36.454 46.0016 36.119 46.0016 36.119C43.1696 35.953 43.5016 31.623 46.3336 31.79C46.3336 31.79 55.0126 32.457 60.1766 32.457C65.6726 32.457 74.1826 31.79 74.1826 31.79C77.0176 31.623 77.3506 35.784 74.5196 36.119C74.5196 36.119 71.6666 36.454 68.5046 36.62L87.4966 93.114L92.7386 75.597C95.0106 68.328 96.7396 63.107 96.7396 58.608Z"
fill="#464342"
fill="#a0aec0"
/>
<path
d="M62.184 65.8574L46.416 111.676C51.124 113.06 56.103 113.817 61.262 113.817C67.382 113.817 73.251 112.759 78.714 110.838C78.573 110.613 78.445 110.374 78.34 110.114L62.184 65.8574Z"
fill="#464342"
fill="#a0aec0"
/>
<path
d="M107.376 36.0459C107.602 37.7199 107.73 39.5169 107.73 41.4499C107.73 46.7829 106.734 52.7779 103.734 60.2739L87.6807 106.687C103.305 97.5759 113.814 80.6489 113.814 61.2609C113.815 52.1239 111.481 43.5319 107.376 36.0459Z"
fill="#464342"
fill="#a0aec0"
/>
<path
d="M61.262 0C27.483 0 0 27.481 0 61.26C0 95.043 27.483 122.523 61.262 122.523C95.04 122.523 122.527 95.043 122.527 61.26C122.526 27.481 95.04 0 61.262 0ZM61.262 119.715C29.032 119.715 2.809 93.492 2.809 61.26C2.809 29.03 29.031 2.809 61.262 2.809C93.491 2.809 119.712 29.03 119.712 61.26C119.712 93.492 93.491 119.715 61.262 119.715Z"
fill="#464342"
fill="#a0aec0"
/>
</svg>
</Icon>
)

9
apps/landing-page/components/Homepage/IntegrateInYourWorkflow/icons/zapier.tsx → apps/landing-page/assets/logos/ZapierLogo.tsx
View File

File diff suppressed because one or more lines are too long

18
apps/landing-page/assets/logos/index.ts Normal file
View File

@ -0,0 +1,18 @@
export { AirtableLogo } from './AirtableLogo'
export { GmailLogo } from './GmailLogo'
export { GoogleSheetLogo } from './GoogleSheetsLogo'
export { HubspotLogo } from './HubspotLogo'
export { MailChimpLogo } from './MailchimpLogo'
export { NotionLogo } from './NotionLogo'
export { PipedriveLogo } from './PipedriveLogo'
export { SalesforceLogo } from './SalesforceLogo'
export { SlackLogo } from './SlackLogo'
export { WebflowLogo } from './WebflowLogo'
export { WixLogo } from './WixLogo'
export { WordpressLogo } from './WordpressLogo'
export { ZapierLogo } from './ZapierLogo'
export { GoogleCalendarLogo } from './GoogleCalendarLogo'
export { CalendlyLogo } from './CalendlyLogo'
export { ShopifyLogo } from './ShopifyLogo'
export { N8nLogo } from './N8nLogo'
export { GoogleDriveLogo } from './GoogleDriveLogo'

26
apps/landing-page/assets/style.css
View File

@ -17,3 +17,29 @@
transform: translatey(0px);
}
}
.animated-blob {
animation: blob 7s infinite;
}
.animation-delay-2000 {
animation-delay: 2s;
}
.animation-delay-4000 {
animation-delay: 4s;
}
@keyframes blob {
0% {
transform: translate(0px, 0px) scale(1);
}
33% {
transform: translate(30px, -50px) scale(1.1);
}
66% {
transform: translate(-20px, 20px) scale(0.9);
}
100% {
transform: tranlate(0px, 0px) scale(1);
}
}

52
apps/landing-page/components/Homepage/EasyBuildingExperience.tsx Normal file
View File

@ -0,0 +1,52 @@
import { Flex, Stack, Heading, Box, Text, Button } from '@chakra-ui/react'
import React from 'react'
import Image from 'next/image'
import builderDndSrc from 'public/images/homepage/builder-dnd.png'
import { NextChakraLink } from 'components/common/nextChakraAdapters/NextChakraLink'
import { ArrowRight } from 'assets/icons/ArrowRight'
import { Flare } from 'assets/illustrations/Flare'
export const EasyBuildingExperience = () => {
return (
<Flex as="section" justify="center" pos="relative">
<Flare color="blue" pos="absolute" left="-200px" top="-50px" />
<Stack
style={{ maxWidth: '1000px' }}
pt={'52'}
w="full"
px="4"
spacing={12}
direction={['column', 'row-reverse']}
justifyContent="space-between"
alignItems="center"
>
<Stack spacing="6" maxW="300px">
<Stack>
<Heading as="h1">Easy building experience</Heading>
</Stack>
<Text color="gray.400" fontSize={{ base: 'lg', xl: 'xl' }}>
All you have to do is drag and drop blocks to create your app. Even
if you have custom needs, you can always add custom code.
</Text>
<Flex>
<Button
as={NextChakraLink}
rightIcon={<ArrowRight />}
href={`https://app.typebot.io/register`}
variant="ghost"
>
Try it now
</Button>
</Flex>
</Stack>
<Box rounded="md">
<Image
src={builderDndSrc}
alt="incomplete results illustration"
placeholder="blur"
/>
</Box>
</Stack>
</Flex>
)
}

52
apps/landing-page/components/Homepage/EasyEmbed.tsx Normal file
View File

@ -0,0 +1,52 @@
import { Flex, Stack, Heading, Box, Text, Button } from '@chakra-ui/react'
import React from 'react'
import Image from 'next/image'
import nativeFeelingSrc from 'public/images/homepage/native-feeling.png'
import { NextChakraLink } from 'components/common/nextChakraAdapters/NextChakraLink'
import { ArrowRight } from 'assets/icons/ArrowRight'
import { Flare } from 'assets/illustrations/Flare'
export const EasyEmbed = () => {
return (
<Flex as="section" justify="center" pos="relative">
<Flare color="orange" pos="absolute" right="-200px" top="100px" />
<Stack
style={{ maxWidth: '1000px' }}
pt={32}
w="full"
px="4"
spacing={12}
direction={['column', 'row']}
justifyContent="space-between"
alignItems="center"
>
<Stack spacing="6" maxW="300px">
<Heading as="h1">Embed it in a click</Heading>
<Text color="gray.400" fontSize={{ base: 'lg', xl: 'xl' }}>
Embedding your typebot in your applications is a walk in the park.
Typebot gives you several step-by-step platform-specific
instructions. Your typebot will always feel "native".
</Text>
<Flex>
<Button
as={NextChakraLink}
rightIcon={<ArrowRight />}
href={`https://app.typebot.io/register`}
variant="ghost"
colorScheme="orange"
>
Try it now
</Button>
</Flex>
</Stack>
<Box rounded="md">
<Image
src={nativeFeelingSrc}
alt="incomplete results illustration"
placeholder="blur"
/>
</Box>
</Stack>
</Flex>
)
}

45
apps/landing-page/components/Homepage/EndCta.tsx
View File

@ -1,12 +1,21 @@
import { Box, Heading, Button, Text } from '@chakra-ui/react'
import { Heading, Button, Text, Flex, VStack } from '@chakra-ui/react'
import { NextChakraLink } from 'components/common/nextChakraAdapters/NextChakraLink'
import React from 'react'
import { BackgroundPolygons } from './Hero/BackgroundPolygons'
export const EndCta = () => {
return (
<Box as="section" py={32} pos="relative">
<VStack
as="section"
py={32}
pos="relative"
bgGradient="linear(to-b, gray.900, gray.800)"
height="100vh"
justifyContent="center"
>
<BackgroundPolygons />
<Box
<VStack
spacing="6"
maxW="2xl"
mx="auto"
px={{ base: '6', lg: '8' }}
@ -16,20 +25,22 @@ export const EndCta = () => {
<Heading fontWeight="extrabold" letterSpacing="tight">
Take your forms to the next level
</Heading>
<Text mt="4" fontSize="lg">
Try Typebot for free and start improving the performance of your form
<Flex>
<Button
as={NextChakraLink}
href="https://app.typebot.io/register"
size="lg"
colorScheme="orange"
height="4rem"
>
Create a typebot
</Button>
</Flex>
<Text color="gray.400">
No trial. Generous, unlimited <strong>free</strong> plan.
</Text>
<Button
as="a"
href="https://app.typebot.io/register"
mt="8"
size="lg"
colorScheme="blue"
fontWeight="bold"
>
Create a typebot
</Button>
</Box>
</Box>
</VStack>
</VStack>
)
}

18
apps/landing-page/components/Homepage/Features/FeatureCard.tsx
View File

@ -1,6 +1,6 @@
import { Flex, VStack } from '@chakra-ui/layout'
import { IconProps, Text } from '@chakra-ui/react'
import React from 'react'
import React, { useState } from 'react'
type FeatureCardProps = {
Icon: (props: IconProps) => JSX.Element
@ -9,8 +9,18 @@ type FeatureCardProps = {
}
export const FeatureCard = ({ Icon, title, content }: FeatureCardProps) => {
const [isHovered, setIsHovered] = useState(false)
return (
<VStack p="6" bgColor="gray.100" pos="relative" rounded="lg" spacing="4">
<VStack
p="6"
bgColor="gray.800"
pos="relative"
rounded="lg"
spacing="4"
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
>
<Flex
boxSize="50px"
bgColor="blue.500"
@ -21,10 +31,12 @@ export const FeatureCard = ({ Icon, title, content }: FeatureCardProps) => {
pos="absolute"
top="-25px"
shadow="lg"
transform={isHovered ? 'translateY(-5px)' : 'translateY(0px)'}
transition="transform 300ms ease-out"
>
<Icon boxSize="25px" />
</Flex>
<Text textAlign="center" fontWeight="semibold">
<Text textAlign="center" fontWeight="semibold" fontSize="lg">
{title}
</Text>
<Text textAlign="center" color="gray.500">

79
apps/landing-page/components/Homepage/Features/Features.tsx Normal file
View File

@ -0,0 +1,79 @@
import React from 'react'
import {
Flex,
Heading,
SimpleGrid,
Stack,
Text,
VStack,
} from '@chakra-ui/react'
import { FeatureCard } from './FeatureCard'
import { FolderIcon } from 'assets/icons/FolderIcon'
import { AccessibilityIcon } from 'assets/icons/AccessibilityIcon'
import { CalculatorIcon } from 'assets/icons/CaluclatorIcon'
import { ConditionIcon } from 'assets/icons/ConditionIcon'
import { PersonAddIcon } from 'assets/icons/PersonAddIcon'
import { ShareIcon } from 'assets/icons/ShareIcon'
const features = [
{
Icon: AccessibilityIcon,
title: 'Hidden fields',
content:
'Include data in your form URL to segment your user and use its data directly in your form.',
},
{
Icon: PersonAddIcon,
title: 'Team collaboration',
content: 'Invite your teammates to work on your typebots with you',
},
{
Icon: ConditionIcon,
title: 'Link to sub typebots',
content: 'Reuse your typebots in different parent bots.',
},
{
Icon: CalculatorIcon,
title: 'Custom code',
content: 'Customize everything with your own Javascript & CSS code',
},
{
Icon: ShareIcon,
title: 'Custom domain',
content: 'Connect your typebot to the custom URL of your choice',
},
{
Icon: FolderIcon,
title: 'Folder management',
content:
'Organize your typebots in specific folders to keep it clean and work with multiple clients',
},
]
export const Features = () => {
return (
<Flex justifyContent="center">
<Stack
style={{ maxWidth: '1200px' }}
pt={'52'}
w="full"
px="4"
spacing={12}
>
<VStack>
<Heading as="h1" textAlign="center">
And many more features
</Heading>
<Text color="gray.500" fontSize={['lg', 'xl']} textAlign="center">
Typebot makes form building easy and comes with powerful features
</Text>
</VStack>
<SimpleGrid columns={[1, 3]} spacing="10" pt="10">
{features.map((feature, idx) => (
<FeatureCard key={idx} {...feature} />
))}
</SimpleGrid>
</Stack>
</Flex>
)
}

76
apps/landing-page/components/Homepage/Features/index.tsx
View File

@ -1,75 +1 @@
import React from 'react'
import {
Flex,
Heading,
SimpleGrid,
Stack,
Text,
VStack,
} from '@chakra-ui/react'
import { FeatureCard } from './FeatureCard'
import { FolderIcon } from 'assets/icons/FolderIcon'
import { AccessibilityIcon } from 'assets/icons/AccessibilityIcon'
import { CalculatorIcon } from 'assets/icons/CaluclatorIcon'
import { ConditionIcon } from 'assets/icons/ConditionIcon'
import { PersonAddIcon } from 'assets/icons/PersonAddIcon'
import { ShareIcon } from 'assets/icons/ShareIcon'
const features = [
{
Icon: AccessibilityIcon,
title: 'Hidden fields',
content:
'Include data in your form URL to segment your user and use its data directly in your form.',
},
{
Icon: PersonAddIcon,
title: 'Team collaboration',
content: 'Invite your teammates to work on your typebot with you',
},
{
Icon: ConditionIcon,
title: 'Conditional branching',
content:
'Make your form smarter by adding conditions to display custom answers to your users',
},
{
Icon: CalculatorIcon,
title: 'Computation',
content:
'Use the calculator to compute anything in Typebot directly to generate a quote or compute a score',
},
{
Icon: ShareIcon,
title: 'Custom domain',
content: 'Connect your typebot to the custom URL of your choice',
},
{
Icon: FolderIcon,
title: 'Folder management',
content:
'Organize your typebots in specific folders to keep it clean and work with multiple clients',
},
]
export const Features = () => {
return (
<Flex justifyContent="center">
<Stack style={{ maxWidth: '1200px' }} pt={32} w="full" px="4" spacing={6}>
<VStack>
<Heading as="h1" textAlign="center">
And many more features
</Heading>
<Text color="gray.500" size="lg" textAlign="center">
Typebot makes form building easy and comes with powerful features
</Text>
<SimpleGrid columns={[1, 3]} spacing="10" pt="10">
{features.map((feature, idx) => (
<FeatureCard key={idx} {...feature} />
))}
</SimpleGrid>
</VStack>
</Stack>
</Flex>
)
}
export { Features } from './Features'

255
apps/landing-page/components/Homepage/Hero/BackgroundPolygons.tsx
View File

File diff suppressed because one or more lines are too long

10
apps/landing-page/components/Homepage/Hero/BackgroundSpotlight.tsx Normal file
View File

@ -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>
)

881
apps/landing-page/components/Homepage/Hero/Brands.tsx
View File

File diff suppressed because one or more lines are too long

129
apps/landing-page/components/Homepage/Hero/Hero.tsx Executable file
View File

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

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

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

93
apps/landing-page/components/Homepage/Hero/index.tsx Executable file → Normal file
View File

@ -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'

43
apps/landing-page/components/Homepage/IntegrateInYourWorkflow/icons/facebook-pixel.tsx
View File

@ -1,43 +0,0 @@
import React, { SVGProps } from 'react'
export const FacebookPixelLogo = (props: SVGProps<SVGSVGElement>) => (
<svg
viewBox="0 0 470 512"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M464.291 129.408L240.291 1.40775C237.006 -0.46925 232.995 -0.46925 229.71 1.40775L5.70998 129.408C2.38198 131.307 0.333984 134.848 0.333984 138.667V373.334C0.333984 377.153 2.38198 380.694 5.70998 382.593L229.71 510.593C231.353 511.532 233.166 512.001 235.001 512.001C236.836 512.001 238.649 511.532 240.292 510.593L464.292 382.593C467.62 380.694 469.668 377.153 469.668 373.334V138.667C469.667 134.848 467.619 131.307 464.291 129.408ZM448.333 367.147L235 489.045L21.667 367.147V144.853L235 22.9548L448.333 144.854V367.147Z"
fill="#3C5A99"
/>
<path
d="M460 140L235 12L17 140V371L235 494L463.5 373.5L460 140Z"
fill="#3C5A99"
/>
<g clipPath="url(#clip0)">
<path
d="M411.329 251.264L328.31 163.309C323.207 157.897 314.69 157.65 309.278 162.757C303.875 167.86 303.624 176.381 308.731 181.788L383.031 260.5L308.731 339.22C303.624 344.627 303.875 353.145 309.278 358.251C311.881 360.706 315.206 361.922 318.518 361.922C322.095 361.922 325.667 360.504 328.31 357.708L411.33 269.748C416.225 264.557 416.225 256.452 411.329 251.264Z"
fill="white"
/>
<path
d="M162.274 339.217L87.9789 260.501L162.274 181.785C167.377 176.378 167.13 167.856 161.722 162.754C156.319 157.652 147.793 157.898 142.691 163.306L59.6717 251.261C54.7761 256.449 54.7761 264.558 59.6717 269.746L142.695 357.705C145.343 360.51 148.91 361.924 152.487 361.924C155.799 361.924 159.124 360.703 161.722 358.248C167.135 353.146 167.377 344.624 162.274 339.217Z"
fill="white"
/>
<path
d="M257.28 117.95C249.934 116.837 243.059 121.881 241.937 129.227L202.447 387.708C201.325 395.059 206.374 401.929 213.724 403.051C214.415 403.154 215.097 403.204 215.775 403.204C222.313 403.204 228.048 398.434 229.067 391.774L268.557 133.293C269.679 125.942 264.631 119.072 257.28 117.95Z"
fill="white"
/>
</g>
<defs>
<clipPath id="clip0">
<rect
width="359"
height="359"
fill="white"
transform="translate(56 81)"
/>
</clipPath>
</defs>
</svg>
)

27
apps/landing-page/components/Homepage/IntegrateInYourWorkflow/icons/google-tag-manager.tsx
View File

@ -1,27 +0,0 @@
import React, { SVGProps } from 'react'
export const GoogleTagManagerLogo = (props: SVGProps<SVGSVGElement>) => (
<svg
viewBox="0 0 399 399"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M234.227 383.847L164.951 314.493L313.762 164.169L384.315 234.702L234.227 383.847Z"
fill="#8AB4F8"
/>
<path
d="M234.728 85.154L164.192 14.6045L14.6211 164.169C-4.86283 183.636 -4.87898 215.187 14.5888 234.67C14.6049 234.686 14.6211 234.702 14.6211 234.702L164.192 384.267L233.387 314.751L120.361 199.533L234.728 85.154Z"
fill="#4285F4"
/>
<path
d="M384.298 164.169L234.728 14.6045C215.244 -4.87859 183.659 -4.87859 164.175 14.6045C144.692 34.0876 144.692 65.671 164.175 85.1379L313.827 234.702C333.311 254.185 364.895 254.185 384.363 234.702C403.847 215.219 403.847 183.636 384.363 164.169H384.298Z"
fill="#8AB4F8"
/>
<path
d="M198.91 399.016C226.214 399.016 248.347 376.883 248.347 349.581C248.347 322.279 226.214 300.146 198.91 300.146C171.607 300.146 149.474 322.279 149.474 349.581C149.474 376.883 171.607 399.016 198.91 399.016Z"
fill="#246FDB"
/>
</svg>
)

29
apps/landing-page/components/Homepage/IntegrateInYourWorkflow/icons/other.tsx
View File

@ -1,29 +0,0 @@
import React, { SVGProps } from 'react'
export const OtherLogo = (props: SVGProps<SVGSVGElement>) => (
<svg
viewBox="0 0 512 512"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M256 282C270.359 282 282 270.359 282 256C282 241.641 270.359 230 256 230C241.641 230 230 241.641 230 256C230 270.359 241.641 282 256 282Z"
fill="#e67200"
/>
<path
d="M346 282C360.359 282 372 270.359 372 256C372 241.641 360.359 230 346 230C331.641 230 320 241.641 320 256C320 270.359 331.641 282 346 282Z"
fill="#e67200"
/>
<path
d="M166 282C180.359 282 192 270.359 192 256C192 241.641 180.359 230 166 230C151.641 230 140 241.641 140 256C140 270.359 151.641 282 166 282Z"
fill="#e67200"
/>
<path
d="M448 256C448 150 362 64 256 64C150 64 64 150 64 256C64 362 150 448 256 448C362 448 448 362 448 256Z"
stroke="#e67200"
strokeWidth="32"
strokeMiterlimit="10"
/>
</svg>
)

116
apps/landing-page/components/Homepage/IntegrateInYourWorkflow/index.tsx
View File

@ -1,116 +0,0 @@
import React from 'react'
import { Flex, Heading, SimpleGrid, Stack, Text } from '@chakra-ui/react'
import { AirtableLogo } from './icons/airtable'
import { FacebookPixelLogo } from './icons/facebook-pixel'
import { GmailLogo } from './icons/gmail'
import { GoogleSheetLogo } from './icons/google-sheets'
import { GoogleTagManagerLogo } from './icons/google-tag-manager'
import { HubspotLogo } from './icons/hubspot'
import { MailChimpLogo } from './icons/mailchimp'
import { NotionLogo } from './icons/notion'
import { OtherLogo } from './icons/other'
import { SalesforceLogo } from './icons/salesforce'
import { SlackLogo } from './icons/slack'
import { WebflowLogo } from './icons/webflow'
import { WixLogo } from './icons/wix'
import { WordpressLogo } from './icons/wordpress'
import { ZapierLogo } from './icons/zapier'
import { GlobeIcon } from '../../../assets/icons/GlobeIcon'
export const IntegrateInYourWorkflow = () => {
return (
<Flex justifyContent="center">
<Stack
pt={32}
w="full"
px="4"
spacing={20}
align={['flex-start', 'center']}
>
<Stack spacing="6" align={['flex-start', 'center']}>
<Flex
boxSize="50px"
bgColor="blue.500"
rounded="lg"
color="white"
justify="center"
align="center"
shadow="lg"
>
<GlobeIcon boxSize="30px" />
</Flex>
<Stack>
<Heading as="h1">
Integrate it in your workflow in 5 minutes
</Heading>
<Text
color="gray.500"
size="lg"
fontWeight="semibold"
textAlign={['left', 'center']}
>
Connect your form to any app in an instant
</Text>
</Stack>
<Text maxW="700px" textAlign={['left', 'center']}>
Typebot comes with native integrations that allow you to connect
your form with your existing eco system
</Text>
</Stack>
<SimpleGrid
columns={5}
spacing={{ base: 4, lg: 20 }}
maxW="900px"
w="full"
>
<Flex justifyContent="center" alignItems="center">
<GoogleSheetLogo width="70%" />
</Flex>
<Flex justifyContent="center" alignItems="center">
<SlackLogo width="90%" />
</Flex>
<Flex justifyContent="center" alignItems="center">
<HubspotLogo width="90%" />
</Flex>
<Flex justifyContent="center" alignItems="center">
<AirtableLogo width="90%" />
</Flex>
<Flex justifyContent="center" alignItems="center">
<GmailLogo width="100%" />
</Flex>
<Flex justifyContent="center" alignItems="center">
<FacebookPixelLogo width="80%" />
</Flex>
<Flex justifyContent="center" alignItems="center">
<GoogleTagManagerLogo width="90%" />
</Flex>
<Flex justifyContent="center" alignItems="center">
<MailChimpLogo width="80%" />
</Flex>
<Flex justifyContent="center" alignItems="center">
<SalesforceLogo width="100%" />
</Flex>
<Flex justifyContent="center" alignItems="center">
<ZapierLogo width="100%" />
</Flex>
<Flex justifyContent="center" alignItems="center">
<WordpressLogo width="90%" />
</Flex>
<Flex justifyContent="center" alignItems="center">
<WixLogo width="90%" />
</Flex>
<Flex justifyContent="center" alignItems="center">
<NotionLogo width="70%" />
</Flex>
<Flex justifyContent="center" alignItems="center">
<WebflowLogo width="80%" />
</Flex>
<Flex justifyContent="center" alignItems="center">
<OtherLogo width="80%" />
</Flex>
</SimpleGrid>
</Stack>
</Flex>
)
}

108
apps/landing-page/components/Homepage/Integrations.tsx Normal file
View File

@ -0,0 +1,108 @@
import { Flex, Heading, HStack, Stack, Text } from '@chakra-ui/react'
import {
GmailLogo,
MailChimpLogo,
NotionLogo,
WebflowLogo,
WordpressLogo,
SlackLogo,
AirtableLogo,
GoogleSheetLogo,
ZapierLogo,
SalesforceLogo,
CalendlyLogo,
GoogleCalendarLogo,
ShopifyLogo,
GoogleDriveLogo,
N8nLogo,
} from 'assets/logos'
import React from 'react'
const firstRowIcons = [
GmailLogo,
MailChimpLogo,
NotionLogo,
WebflowLogo,
WordpressLogo,
GoogleCalendarLogo,
N8nLogo,
GoogleDriveLogo,
]
const secondRowIcons = [
SlackLogo,
ShopifyLogo,
AirtableLogo,
GoogleSheetLogo,
ZapierLogo,
CalendlyLogo,
SalesforceLogo,
]
export const Integrations = () => (
<Flex as="section" justify="center">
<Stack w="full" align="center" spacing={12} pt={'52'}>
<Stack pos="relative" width="1400px" spacing={[4, 12]}>
<Flex
pos="absolute"
left="0"
w="33%"
h="full"
bgGradient="linear(to-r, rgba(23,25,35,1), rgba(23,25,35,0))"
pointerEvents="none"
/>
<Flex
pos="absolute"
right="0"
w="33%"
h="full"
bgGradient="linear(to-l, rgba(23,25,35,1), rgba(23,25,35,0))"
pointerEvents="none"
/>
<HStack w="full" spacing={[4, 16]}>
{firstRowIcons.map((Icon, idx) => (
<Flex
_hover={{ borderColor: 'gray.500' }}
transition="border 1s ease"
key={idx}
rounded="md"
p="8"
bgColor="gray.800"
boxSize="120px"
justifyContent="center"
align="center"
borderWidth="1px"
>
<Icon w="full" h="full" />
</Flex>
))}
</HStack>
<HStack w="full" spacing={[4, 16]} pl={['10', '20']}>
{secondRowIcons.map((Icon, idx) => (
<Flex
key={idx}
_hover={{ borderColor: 'gray.500' }}
transition="border 1s ease"
rounded="md"
p="8"
bgColor="gray.800"
boxSize="120px"
justifyContent="center"
align="center"
borderWidth="1px"
>
<Icon w="full" h="full" />
</Flex>
))}
</HStack>
</Stack>
<Stack w="full" maxWidth="1200px" px="4">
<Heading fontSize={['3xl', '4xl']}>Integrate with any platform</Heading>
<Text color="gray.400" maxW="700px" fontSize={['lg', 'xl']}>
Typebot offers several native integrations blocks as well as
instructions on how to embed typebot on particular platforms
</Text>
</Stack>
</Stack>
</Flex>
)

122
apps/landing-page/components/Homepage/IntroducingChatApps.tsx Normal file
View File

@ -0,0 +1,122 @@
import {
Button,
Flex,
Heading,
Stack,
Text,
FormControl,
FormLabel,
Input,
Checkbox,
Textarea,
VStack,
} from '@chakra-ui/react'
import React, { useEffect, useState } from 'react'
import { TypebotViewer } from 'bot-engine'
import { PublicTypebot } from 'models'
import { sendRequest } from 'utils'
import { DontIcon } from 'assets/icons/DontIcon'
import { DoIcon } from 'assets/icons/DoIcon'
export const IntroducingChatApps = () => {
const [typebot, setTypebot] = useState<PublicTypebot>()
useEffect(() => {
fetchTemplate()
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [])
const fetchTemplate = async () => {
const { data, error } = await sendRequest(`/typebots/lead-gen-lp.json`)
if (error) return
setTypebot(data as PublicTypebot)
}
return (
<Flex as="section" justify="center">
<Stack
style={{ maxWidth: '1200px' }}
pt={32}
w="full"
px="4"
spacing={16}
justifyContent="space-between"
alignItems="center"
>
<Stack spacing={6} w="full">
<Heading
fontSize={{ base: '3xl', lg: '5xl', xl: '6xl' }}
textAlign="center"
>
Introducing Conversational Apps
</Heading>
<Text
textAlign="center"
fontSize={{ base: 'lg', xl: 'xl' }}
color="gray.400"
>
Typebot is a better way to ask for information. It leads to an
increase in customer satisfaction and retention and multiply by 3
your conversion rate compared to classical forms.
</Text>
</Stack>
<Stack direction={['column', 'row']} w="full" spacing="6">
<VStack spacing={6} flex="1">
<DontIcon />
<FakeLeadGenForm />
</VStack>
<VStack spacing={6} flex="1" h="full">
<DoIcon />
{typebot && (
<Flex
w="full"
h="full"
minH={['600px', '0']}
borderWidth="1px"
rounded="md"
>
<TypebotViewer
typebot={typebot}
style={{ borderRadius: '0.375rem' }}
/>
</Flex>
)}
</VStack>
</Stack>
</Stack>
</Flex>
)
}
const FakeLeadGenForm = () => (
<Stack borderWidth="1px" spacing="4" padding="6" rounded="md" w="full">
<FormControl isRequired>
<FormLabel htmlFor="full-name">Full name</FormLabel>
<Input id="full-name" placeholder="Full name" />
</FormControl>
<FormControl isRequired>
<FormLabel htmlFor="email">Email</FormLabel>
<Input id="email" placeholder="Email" />
</FormControl>
<FormControl isRequired>
<FormLabel htmlFor="services">
What services are you interested in?
</FormLabel>
<Stack>
<Checkbox>Website Dev</Checkbox>
<Checkbox>Content Marketing</Checkbox>
<Checkbox>Social Media</Checkbox>
<Checkbox>UX/UI Design</Checkbox>
</Stack>
</FormControl>
<FormControl isRequired>
<FormLabel htmlFor="info">Additional Information</FormLabel>
<Textarea id="info" placeholder="Additional Information" />
</FormControl>
<Flex>
<Button>Submit</Button>
</Flex>
</Stack>
)

57
apps/landing-page/components/Homepage/IterateQuickly.tsx
View File

@ -1,57 +0,0 @@
import React from 'react'
import { Box, Flex, Heading, Stack, Text } from '@chakra-ui/react'
import inDepthAnalyticsSrc from 'public/images/homepage/analytics.png'
import Image from 'next/image'
import { AnalyticsIcon } from 'assets/icons/AnalyticsIcon'
export const IterateQuickly = () => {
return (
<Flex as="section" justify="center">
<Stack
style={{ maxWidth: '1200px' }}
pt={32}
w="full"
px="4"
spacing={6}
flexDir={['column', 'row-reverse']}
justifyContent="space-between"
alignItems="center"
>
<Stack spacing="6" maxW="500px">
<Flex
boxSize="50px"
bgColor="blue.500"
rounded="lg"
color="white"
justify="center"
align="center"
shadow="lg"
>
<AnalyticsIcon boxSize="30px" />
</Flex>
<Stack>
<Heading as="h1">
Iterate quickly and optimize the conversion
</Heading>
<Text color="gray.500" size="lg">
Each question has a cost in your drop-off rate.
</Text>
</Stack>
<Text>
Typebot generates an in-depth analytics graph report with completion
and drop-off rates. That helps you know at a glance a potential
bottleneck in your form. <br />
All you need to do is to fix it and hit the Publish button.
</Text>
</Stack>
<Box rounded="md" shadow="lg" maxW="500px">
<Image
src={inDepthAnalyticsSrc}
alt="incomplete results illustration"
placeholder="blur"
/>
</Box>
</Stack>
</Flex>
)
}

23
apps/landing-page/components/Homepage/ListWithVerticalLines/List.tsx
View File

@ -1,23 +0,0 @@
import { Stack, StackProps } from '@chakra-ui/react'
import * as React from 'react'
import { ListItemProps } from './ListItem'
export const List = (props: StackProps) => {
const { children, ...stackProps } = props
const items = React.useMemo(
() =>
React.Children.toArray(children)
.filter<React.ReactElement<ListItemProps>>(React.isValidElement)
.map((item, index, array) =>
index + 1 === array.length
? React.cloneElement(item, { isLastItem: true })
: item
),
[children]
)
return (
<Stack as="ul" {...stackProps}>
{items}
</Stack>
)
}

64
apps/landing-page/components/Homepage/ListWithVerticalLines/ListItem.tsx
View File

@ -1,64 +0,0 @@
import {
Stack,
Flex,
Circle,
Text,
useColorModeValue,
Heading,
StackProps,
} from '@chakra-ui/react'
import * as React from 'react'
export interface ListItemProps extends StackProps {
title: string
circleActivated?: boolean
subTitle?: string
icon?: React.ReactElement
isLastItem?: boolean
}
export const ListItem = (props: ListItemProps) => {
const {
title,
subTitle,
icon,
isLastItem,
children,
circleActivated = true,
...stackProps
} = props
return (
<Stack as="li" direction="row" spacing="4" {...stackProps}>
<Flex direction="column" alignItems="center" aria-hidden="true">
<Circle
bg={circleActivated ? 'blue.500' : 'gray.500'}
size="12"
borderWidth="4px"
borderColor={useColorModeValue('white', 'gray.800')}
color={useColorModeValue('white', 'black')}
>
{icon}
</Circle>
{!isLastItem && <Flex flex="1" borderRightWidth="1px" mb="-12" />}
</Flex>
<Stack spacing="4" pt="1" flex="1">
<Flex direction="column" mt="2">
<Heading
fontSize="2xl"
fontWeight="bold"
color={subTitle ? 'gray.600' : 'blue.400'}
>
{title}
</Heading>
{subTitle && (
<Text fontSize="sm" color="gray.600">
{subTitle}
</Text>
)}
</Flex>
<Flex>{children}</Flex>
</Stack>
</Stack>
)
}

12
apps/landing-page/components/Homepage/ListWithVerticalLines/Placeholder.tsx
View File

@ -1,12 +0,0 @@
import { Box, BoxProps, useColorModeValue } from '@chakra-ui/react'
import * as React from 'react'
export const Placeholder = (props: BoxProps) => (
<Box
bg={useColorModeValue('gray.50', 'gray.700')}
width="full"
height="32"
rounded="xl"
{...props}
/>
)

38
apps/landing-page/components/Homepage/ListWithVerticalLines/index.tsx
View File

@ -1,38 +0,0 @@
import * as React from 'react'
import { Box } from '@chakra-ui/react'
import { List } from './List'
import { ListItem } from './ListItem'
export type VerticalListItem = {
title: string
isActivated?: boolean
subTitle?: string
icon?: React.ReactElement
content: React.ReactNode
}
type Props = {
items: VerticalListItem[]
}
export const ListWithVerticalLines = ({ items }: Props) => {
return (
<Box as="section">
<Box maxW="2xl" mx="auto" p={{ base: '4', md: '8' }}>
<List spacing="12">
{items.map((item, idx) => (
<ListItem
key={idx}
title={item.title}
subTitle={item.subTitle}
icon={item.icon}
circleActivated={item.isActivated}
>
{item.content}
</ListItem>
))}
</List>
</Box>
</Box>
)
}

114
apps/landing-page/components/Homepage/MarketingCampaignRecipe.tsx
View File

@ -1,114 +0,0 @@
import React from 'react'
import { chakra, Flex, Heading, Stack, Text, VStack } from '@chakra-ui/react'
import {
ListWithVerticalLines,
VerticalListItem,
} from './ListWithVerticalLines'
export const MarketingCampaignsRecipe = () => {
return (
<Flex as="section" justify="center">
<Stack style={{ maxWidth: '1200px' }} pt={32} w="full" px="4" spacing={6}>
<VStack>
<Heading as="h1" textAlign="center">
Easy marketing campaign recipe
</Heading>
<Text color="gray.500" size="lg" textAlign="center">
Typebot takes care of almost everything in your campaign.
</Text>
</VStack>
<ListWithVerticalLines items={items} />
</Stack>
</Flex>
)
}
const items: VerticalListItem[] = [
{
title: 'Create a Landing Page',
subTitle: 'This is not handled by Typebot',
icon: <Text fontWeight="bold">1</Text>,
content: (
<Text>
You create a personalized landing page for the customers you are
targeting for this campaign.
</Text>
),
isActivated: false,
},
{
title: 'Create a lead generation form',
icon: <Text fontWeight="bold">2</Text>,
content: (
<Stack>
<Text>You need to create a form in order to qualify your lead</Text>
<Text>
Typebot allows you to create a{' '}
<chakra.span fontWeight="bold">high-converting</chakra.span> form in a
few minutes with a{' '}
<chakra.span fontWeight="bold">
dead simple building experience
</chakra.span>
</Text>
</Stack>
),
},
{
title: 'Connect the form to your existing tools',
icon: <Text fontWeight="bold">3</Text>,
content: (
<Stack>
<Text>
You need to collect your generated leads in your CRM (Hubspot,
Pipedrive) or in a Google Sheets for example.
</Text>
<Text fontWeight="bold">
With Typebot, you connect your form to your existing tools in a few
clicks thanks to our native integrations.
</Text>
</Stack>
),
},
{
title: 'Embed the form in your landing page',
icon: <Text fontWeight="bold">4</Text>,
content: (
<Stack>
<Text>
Your form needs to be embedded in your landing page. Most of the time,
it is painful when you're not a coder.
</Text>
<Text>
Typebot helps you easily embed your form with a dedicated library that
handles everything.
</Text>
</Stack>
),
},
{
title: 'Run your campaign',
subTitle: 'This is not handled by Typebot',
icon: <Text fontWeight="bold">5</Text>,
content: <Text>This is not handled by Typebot</Text>,
isActivated: false,
},
{
title: 'Iterate & improve your conversion',
icon: <Text fontWeight="bold">6</Text>,
content: (
<Stack>
<Text>
When a marketing campaign is launched you don't sit and wait for the
results. You have to analyse the results and potentially improve
things in order to increase the conversion rate.
</Text>
<Text>
Typebot comes with tools to analyse your typebot performance in real
time and helps you iterate quickly on improvements so that you
optimise your conversion rate and your campaign budget.{' '}
</Text>
</Stack>
),
},
]

55
apps/landing-page/components/Homepage/NativeFeeling.tsx
View File

@ -1,55 +0,0 @@
import React from 'react'
import { Box, Flex, Heading, Stack, Text } from '@chakra-ui/react'
import { EyeDropIcon } from 'assets/icons/EyeDropIcon'
import Image from 'next/image'
import nativeFeelingSrc from 'public/images/homepage/native-feeling.png'
export const NativeFeeling = () => {
return (
<Flex justify="center">
<Stack
style={{ maxWidth: '1200px' }}
pt={32}
w="full"
px="4"
spacing={6}
direction={['column', 'row']}
>
<Stack spacing="6">
<Flex
boxSize="50px"
bgColor="blue.500"
rounded="lg"
color="white"
justify="center"
align="center"
shadow="lg"
>
<EyeDropIcon boxSize="30px" />
</Flex>
<Stack>
<Heading as="h1">Native feeling for a higher conversion</Heading>
<Text color="gray.500" size="lg">
As if you spent time crafting this form by hand
</Text>
</Stack>
<Text>
A form that doesn't feel native to your landing page will impact
dramatically its conversion potential
<br />
Typebot allows you to integrate the form in your landing page as if
it were specifically designed for it. You can customize pretty much
anything.
</Text>
</Stack>
<Box rounded="md" shadow="lg" maxW="700px">
<Image
src={nativeFeelingSrc}
alt="native feeling illustration"
placeholder="blur"
/>
</Box>
</Stack>
</Flex>
)
}

107
apps/landing-page/components/Homepage/RealTimeResults.tsx Normal file
View File

@ -0,0 +1,107 @@
import { Flex, Stack, Heading, Text, Button, VStack } from '@chakra-ui/react'
import { ArrowRight } from 'assets/icons/ArrowRight'
import { TypebotViewer } from 'bot-engine'
import { NextChakraLink } from 'components/common/nextChakraAdapters/NextChakraLink'
import { PublicTypebot, Typebot } from 'models'
import React, { useEffect, useRef, useState } from 'react'
import { sendRequest } from 'utils'
export const RealTimeResults = () => {
const iframeRef = useRef<HTMLIFrameElement | null>(null)
const [typebot, setTypebot] = useState<PublicTypebot>()
const fetchTemplate = async () => {
const { data, error } = await sendRequest(
`/typebots/realtime-airtable.json`
)
if (error) return
const typebot = data as Typebot
setTypebot({ ...typebot, typebotId: typebot.id } as PublicTypebot)
}
useEffect(() => {
fetchTemplate()
window.addEventListener('message', processMessage)
const interval = setInterval(refreshIframeContent, 30000)
return () => {
clearInterval(interval)
window.removeEventListener('message', processMessage)
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [])
const processMessage = (event: MessageEvent) => {
console.log(event.data)
if (event.data.from === 'typebot') refreshIframeContent()
}
const refreshIframeContent = () => {
if (!iframeRef.current) return
iframeRef.current.src += ''
}
return (
<Flex as="section" justify="center">
<Stack
style={{ maxWidth: '1200px' }}
pt={'52'}
w="full"
px="4"
spacing={16}
justifyContent="space-between"
alignItems="center"
>
<VStack spacing={6}>
<Heading fontSize={{ base: '4xl', xl: '6xl' }} textAlign="center">
Collect results in real-time
</Heading>
<Text
textAlign="center"
color="gray.400"
maxW="1000px"
fontSize={{ base: 'lg', xl: 'xl' }}
>
One of the main advantage of a chat application is that you collect
the user's responses on each question.{' '}
<strong>You won't loose any valuable data.</strong>
</Text>
<Flex>
<Button
as={NextChakraLink}
rightIcon={<ArrowRight />}
href={`https://app.typebot.io/register`}
variant="ghost"
colorScheme="blue"
>
Try it now
</Button>
</Flex>
</VStack>
<Stack w="full" direction={['column', 'row']} spacing="4">
{typebot && (
<Flex w="full" h="full" minH="300" borderWidth="1px" rounded="md">
<TypebotViewer
typebot={typebot}
style={{ borderRadius: '0.375rem' }}
apiHost="https://typebot.io"
/>
</Flex>
)}
<iframe
ref={iframeRef}
src="https://airtable.com/embed/shr8nkV6DVN88LVIv?backgroundColor=blue"
width="100%"
height="533"
style={{
borderRadius: '0.5rem',
border: 'none',
backgroundColor: 'white',
}}
/>
</Stack>
</Stack>
</Flex>
)
}

59
apps/landing-page/components/Homepage/StopLoosingData.tsx
View File

@ -1,59 +0,0 @@
import React from 'react'
import { Box, chakra, Flex, Heading, Stack, Text } from '@chakra-ui/react'
import incompleteResultsSrc from 'public/images/homepage/incomplete-results.png'
import Image from 'next/image'
import { AlbumsIcon } from 'assets/icons/AlbumsIcon'
export const DontLooseData = () => {
return (
<Flex justify="center">
<Stack
style={{ maxWidth: '1200px' }}
pt={32}
w="full"
px="4"
spacing={6}
direction={['column', 'row']}
>
<Stack spacing="6">
<Flex
boxSize="50px"
bgColor="blue.500"
rounded="lg"
color="white"
justify="center"
align="center"
shadow="lg"
>
<AlbumsIcon boxSize="30px" />
</Flex>
<Stack>
<Heading as="h1">Stop losing data from your forms</Heading>
<Text color="gray.500" size="lg">
Each answered question has a huge value
</Text>
</Stack>
<Text>
nstead of collecting it only when it is fully submitted, with a
Typebot form,{' '}
<chakra.span fontWeight="bold">
you collect the result as soon as the user answers the first
question.
</chakra.span>
<br />
You have access to all the incomplete results in your dashboard so
that it helps you figure out how you can properly improve your form
</Text>
</Stack>
<Box rounded="md" shadow="lg" maxW="700px">
<Image
src={incompleteResultsSrc}
alt="incomplete results illustration"
placeholder="blur"
/>
</Box>
</Stack>
</Flex>
)
}

62
apps/landing-page/components/Homepage/StopWastingTimeOnBuilding.tsx
View File

@ -1,62 +0,0 @@
import React from 'react'
import { Box, Flex, Heading, Stack, Text } from '@chakra-ui/react'
import ConversionGraderSrc from 'public/images/homepage/conversion-grader.png'
import Image from 'next/image'
import { BuildIcon } from 'assets/icons/BuildIcon'
export const StopSpendingTimeOnBuilding = () => {
return (
<Flex justifyContent="center">
<Stack
style={{ maxWidth: '1200px' }}
pt={32}
w="full"
px="4"
spacing={6}
direction={['column', 'row']}
justifyContent="space-between"
alignItems="center"
>
<Stack spacing="6" maxW="500px">
<Flex
boxSize="50px"
bgColor="blue.500"
rounded="lg"
color="white"
justify="center"
align="center"
shadow="lg"
>
<BuildIcon boxSize="30px" />
</Flex>
<Stack>
<Heading as="h1">
Stop wasting your time on building the form
</Heading>
<Text color="gray.500" size="lg">
Easy building experience and a grader to make your life easier
</Text>
</Stack>
<Text>
A form should be improved over time based on its performance. You
shouldn't spend time working on the "perfect" first version.
<br />
Typebot comes with multiple verified templates to choose from.
<br />
And it offers a grader tool that gives a score your form in
real-time based on best practices we collected from high-performing
forms
</Text>
</Stack>
<Box rounded="md" shadow="lg" maxW="400px">
<Image
src={ConversionGraderSrc}
alt="conversion grader illustration"
placeholder="blur"
/>
</Box>
</Stack>
</Flex>
)
}

6
apps/landing-page/components/Homepage/Hero/Testimonials/Testimonial.tsx → apps/landing-page/components/Homepage/Testimonials/Testimonial.tsx
View File

@ -18,15 +18,15 @@ export const Testimonial = (props: TestimonialProps) => {
justify="space-between"
as="blockquote"
p="6"
rounded="md"
bgColor="blue.400"
rounded="lg"
bgColor="gray.800"
color="white"
shadow="lg"
{...props}
>
<Stack>
<QuoteLeftIcon boxSize="25px" />
<Text mt="3" fontSize="xl" maxW="38rem" color="gray.50">
<Text mt="3" fontSize="xl" maxW="38rem" color="gray.400">
{children}
</Text>
</Stack>

57
apps/landing-page/components/Homepage/Testimonials/Testimonials.tsx Executable file
View File

@ -0,0 +1,57 @@
import { chakra, Flex, Heading, 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 { Testimonial } from './Testimonial'
export const Testimonials = () => {
return (
<Flex as="section" justify="center">
<VStack spacing={12} pt={'52'} px="4">
<Heading textAlign={'center'}>
They'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}
>
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="Growth Strategist @ X"
image={joshuaPictureSrc}
>
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
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>
</VStack>
</Flex>
)
}

1
apps/landing-page/components/Homepage/Testimonials/index.ts Normal file
View File

@ -0,0 +1 @@
export { Testimonials } from './Testimonials'

14
apps/landing-page/components/PricingPage/PricingCard/index.tsx
View File

@ -21,17 +21,16 @@ export interface PricingCardData {
interface PricingCardProps extends CardProps {
data: PricingCardData
icon?: JSX.Element
beforeButtonLabel?: string
button: React.ReactElement
}
export const PricingCard = (props: PricingCardProps) => {
const { data, icon, button, beforeButtonLabel, ...rest } = props
const { data, icon, button, ...rest } = props
const { features, price, name } = data
const accentColor = useColorModeValue('blue.500', 'blue.200')
const accentColor = useColorModeValue('blue.500', 'white')
return (
<Card rounded="xl" {...rest}>
<Card rounded="xl" bgColor="gray.800" {...rest}>
<VStack spacing={6}>
{icon}
<Heading size="md" fontWeight="extrabold">
@ -62,17 +61,12 @@ export const PricingCard = (props: PricingCardProps) => {
as={CheckIcon}
marginEnd={2}
color={accentColor}
fill="#0042da"
fill="blue.200"
/>
{feature}
</ListItem>
))}
</List>
{beforeButtonLabel && (
<Text textAlign="center" mb="4" color="gray.600">
{beforeButtonLabel}
</Text>
)}
{button}
</Card>
)

73
apps/landing-page/components/common/Footer.tsx
View File

@ -1,60 +1,93 @@
import React, { ReactNode } from 'react'
import { Box, Container, Heading, SimpleGrid, Stack } from '@chakra-ui/react'
import {
Box,
Container,
Heading,
HStack,
SimpleGrid,
Stack,
Text,
} from '@chakra-ui/react'
import { NextChakraLink } from './nextChakraAdapters/NextChakraLink'
import { Logo } from 'assets/icons/Logo'
const facebookGroupUrl = 'https://www.facebook.com/groups/typebot'
const typebotLinkedInUrl = 'https://www.linkedin.com/company/typebot'
const typebotTwitterUrl = 'https://twitter.com/Typebot_io'
const baptisteTwitterUrl = 'https://twitter.com/baptisteArno'
export const contactUrl = 'https://bot.typebot.io/landing-page-bubble-en'
export const roadmapLink = 'https://app.typebot.io/feedback'
export const documentationLink = 'https://docs.typebot.io'
export const githubRepoLink = 'https://github.com/baptisteArno/typebot.io'
export const Footer = () => {
return (
<Box w="full" bgColor="gray.50">
<Box w="full">
<Container as={Stack} maxW={'1000px'} py={10}>
<SimpleGrid columns={[1, 2, 5]} spacing={8} px={2}>
<SimpleGrid columns={[1, 2, 4]} spacing={8} px={2}>
<Stack spacing={6}>
<Box>
<HStack>
<Logo boxSize="30px" />
</Box>
<Heading as="p" fontSize="lg">
Typebot
</Heading>
</HStack>
<Text>
Made with ❤️ by{' '}
<NextChakraLink href={baptisteTwitterUrl} color="gray.400">
@baptisteArno
</NextChakraLink>
</Text>
</Stack>
<Stack align={'flex-start'}>
<ListHeader>Product</ListHeader>
<NextChakraLink href={roadmapLink} isExternal>
<NextChakraLink
href={documentationLink}
isExternal
color="gray.400"
>
Documentation
</NextChakraLink>
<NextChakraLink href={roadmapLink} isExternal color="gray.400">
Roadmap
</NextChakraLink>
<NextChakraLink href={'/blog'}>Blog</NextChakraLink>
<NextChakraLink href={'/pricing'}>Pricing</NextChakraLink>
</Stack>
<Stack align={'flex-start'}>
<ListHeader>Comparisons</ListHeader>
<NextChakraLink href="/vs-typeform">VS Typeform</NextChakraLink>
<NextChakraLink href="/vs-landbot">VS Landbot</NextChakraLink>
<NextChakraLink href="/vs-tally">VS Tally</NextChakraLink>
<NextChakraLink href={'/pricing'} color="gray.400">
Pricing
</NextChakraLink>
</Stack>
<Stack align={'flex-start'}>
<ListHeader>Community</ListHeader>
<NextChakraLink href={facebookGroupUrl} isExternal>
<NextChakraLink href={githubRepoLink} isExternal color="gray.400">
GitHub repository
</NextChakraLink>
<NextChakraLink href={facebookGroupUrl} isExternal color="gray.400">
Facebook Group
</NextChakraLink>
<NextChakraLink href={typebotTwitterUrl} isExternal>
<NextChakraLink
href={typebotTwitterUrl}
isExternal
color="gray.400"
>
Twitter
</NextChakraLink>
<NextChakraLink href={typebotLinkedInUrl} isExternal>
<NextChakraLink
href={typebotLinkedInUrl}
isExternal
color="gray.400"
>
LinkedIn
</NextChakraLink>
</Stack>
<Stack align={'flex-start'}>
<ListHeader>Company</ListHeader>
<NextChakraLink href="mailto:baptiste@typebot.io">
<NextChakraLink href="mailto:baptiste@typebot.io" color="gray.400">
Contact
</NextChakraLink>
<NextChakraLink href={'/terms-of-service'}>
<NextChakraLink href={'/terms-of-service'} color="gray.400">
Terms of Service
</NextChakraLink>
<NextChakraLink href={'/privacy-policies'}>
<NextChakraLink href={'/privacy-policies'} color="gray.400">
Privacy Policy
</NextChakraLink>
</Stack>

51
apps/landing-page/components/common/Navbar/NavContent.tsx
View File

@ -65,7 +65,7 @@ const MobileNavContext = ({
<Button
as={NextChakraLink}
href="https://app.typebot.io/register"
colorScheme="blue"
colorScheme="orange"
w="full"
size="lg"
mt="5"
@ -90,43 +90,44 @@ const DesktopNavContent = ({
color={mode('bg.gray800', 'white')}
>
<HStack as={NextChakraLink} href="/" rel="home">
<Logo boxSize="35px" isDark={mode(false, true)} />
<Logo boxSize="35px" />
<Heading as="p" fontSize="lg">
Typebot
</Heading>
</HStack>
<HStack
as="ul"
id="nav__primary-menu"
aria-label="Main Menu"
listStyleType="none"
>
{links.map((link, idx) => (
<Box as="li" key={idx} id={`nav__menuitem-${idx}`}>
{link.children ? (
<Submenu.Desktop link={link} />
) : (
<NavLink.Desktop href={link.href ?? '#'}>
{link.label}
</NavLink.Desktop>
)}
</Box>
))}
</HStack>
<HStack spacing="8" minW="240px" justify="space-between">
<Box
<HStack spacing="4" minW="240px" justify="space-between">
<HStack
as="ul"
id="nav__primary-menu"
aria-label="Main Menu"
listStyleType="none"
>
{links.map((link, idx) => (
<Box as="li" key={idx} id={`nav__menuitem-${idx}`}>
{link.children ? (
<Submenu.Desktop link={link} />
) : (
<NavLink.Desktop href={link.href ?? '#'}>
{link.label}
</NavLink.Desktop>
)}
</Box>
))}
</HStack>
<Button
as={NextChakraLink}
href="https://app.typebot.io/signin"
colorScheme="blue"
variant="ghost"
variant="outline"
fontWeight="bold"
>
Sign in
</Box>
</Button>
<Button
as={NextChakraLink}
href="https://app.typebot.io/register"
colorScheme="blue"
colorScheme="orange"
fontWeight="bold"
>
Create a typebot

2
apps/landing-page/components/common/Navbar/NavMenu.tsx
View File

@ -9,7 +9,7 @@ export const NavMenu = (props: MotionBoxProps) => (
variants={variants}
outline="0"
opacity="0"
bg={useColorModeValue('white', 'gray.700')}
bg={useColorModeValue('white', 'gray.800')}
w="full"
shadow="lg"
px="4"

2
apps/landing-page/components/common/Navbar/SubmenuItem.tsx
View File

@ -43,7 +43,7 @@ export const SubmenuItem = (props: SubmenuItemProps) => {
w="10"
h="10"
fontSize="3xl"
color={mode('blue.600', 'blue.400')}
color={'blue.300'}
>
{icon}
</Center>

11
apps/landing-page/components/common/Navbar/_data.tsx
View File

@ -1,4 +1,4 @@
import { BookIcon } from 'assets/icons/BookIcon'
import { GitHubIcon } from 'assets/icons'
import { DocIcon } from 'assets/icons/DocIcon'
import { MapIcon } from 'assets/icons/MapIcon'
import { PeopleCircleIcon } from 'assets/icons/PeopleCircleIcon'
@ -20,11 +20,10 @@ export const links = [
label: 'Resources',
children: [
{
label: 'Blog',
description:
"Content about high-performing forms and guides on how to leverage Typebot's power",
href: '/blog',
icon: <BookIcon />,
label: 'GitHub repository',
description: 'Check out the entire source code of the project',
href: 'https://github.com/baptisteArno/typebot.io',
icon: <GitHubIcon fill="blue.300" />,
},
{
label: 'Documentation',

43
apps/landing-page/layouts/Homepage.tsx
View File

@ -1,43 +0,0 @@
import React from 'react'
import { Stack } from '@chakra-ui/react'
import Head from 'next/head'
import { Footer } from 'components/common/Footer'
import { SocialMetaTags } from 'components/common/SocialMetaTags'
import { EndCta } from 'components/Homepage/EndCta'
import { Features } from 'components/Homepage/Features'
import { Hero } from 'components/Homepage/Hero'
import { IntegrateInYourWorkflow } from 'components/Homepage/IntegrateInYourWorkflow'
import { IterateQuickly } from 'components/Homepage/IterateQuickly'
import { MarketingCampaignsRecipe } from 'components/Homepage/MarketingCampaignRecipe'
import { NativeFeeling } from 'components/Homepage/NativeFeeling'
import { DontLooseData } from 'components/Homepage/StopLoosingData'
import { StopSpendingTimeOnBuilding } from 'components/Homepage/StopWastingTimeOnBuilding'
const Homepage = () => {
return (
<Stack w="full" overflowX="hidden">
<SocialMetaTags
title="Typebot: Conversational Form Builder"
description="Convert 4x more with beautiful conversational forms. Embed them directly in your applications without a line of code."
currentUrl={`https://www.typebot.io/`}
imagePreviewUrl={`https://www.typebot.io/images/previews/home.png`}
/>
<Head>
<link rel="alternate" hrefLang="en" href="https://www.typebot.io/" />
<link rel="alternate" hrefLang="fr" href="https://www.typebot.io/fr" />
</Head>
<Hero />
<MarketingCampaignsRecipe />
<DontLooseData />
<IterateQuickly />
<StopSpendingTimeOnBuilding />
<IntegrateInYourWorkflow />
<NativeFeeling />
<Features />
<EndCta />
<Footer />
</Stack>
)
}
export default Homepage

9
apps/landing-page/lib/chakraTheme.ts
View File

@ -1,5 +1,7 @@
import { extendTheme } from '@chakra-ui/react'
const config = { initialColorMode: 'dark', useSystemColorMode: false }
const fonts = {
heading: 'Outfit',
body: 'Open Sans',
@ -75,4 +77,9 @@ const components = {
},
}
export const theme = extendTheme({ fonts, components, colors })
export const theme = extendTheme({
fonts,
components,
colors,
config,
})

3
apps/landing-page/package.json
View File

@ -20,6 +20,9 @@
"react": "17.0.2",
"react-dom": "17.0.2",
"typebot-js": "^2.1.3",
"bot-engine": "*",
"models": "*",
"utils": "*",
"@notionhq/client": "^0.3.1"
},
"devDependencies": {

3
apps/landing-page/pages/_document.tsx
View File

@ -1,3 +1,5 @@
import { ColorModeScript } from '@chakra-ui/react'
import { theme } from 'lib/chakraTheme'
import Document, { Html, Head, Main, NextScript } from 'next/document'
class MyDocument extends Document {
@ -12,6 +14,7 @@ class MyDocument extends Document {
/>
</Head>
<body>
<ColorModeScript initialColorMode={theme.config.initialColorMode} />
<Main />
<NextScript />
</body>

202
apps/landing-page/pages/blog/[slug].tsx
View File

@ -1,202 +0,0 @@
import { GetStaticPropsContext } from 'next'
import { NotionBlock, NotionText } from 'notion-blocks-chakra-ui'
import React from 'react'
import { getPage, getBlocks, getFullDatabase } from '../../lib/notion'
import Image from 'next/image'
import {
Stack,
Container,
Button,
VStack,
Heading,
HStack,
Text,
} from '@chakra-ui/react'
import {
Page,
Block,
TitlePropertyValue,
RichTextPropertyValue,
CheckboxPropertyValue,
} from '@notionhq/client/build/src/api-types'
import { Footer } from 'components/common/Footer'
import { Navbar } from 'components/common/Navbar/Navbar'
import { NextChakraLink } from 'components/common/nextChakraAdapters/NextChakraLink'
import { SocialMetaTags } from 'components/common/SocialMetaTags'
export default function Post({
page,
blocks,
}: {
page: Page
blocks: Block[]
}) {
return (
<>
<Stack
alignItems="center"
w="full"
overflowX="hidden"
pb={20}
minH="calc(100vh - 267px)"
spacing={10}
>
{page && (
<SocialMetaTags
title={
(page.properties.Name as TitlePropertyValue).title[0]?.plain_text
}
description={
(page.properties.Description as RichTextPropertyValue)
.rich_text[0]?.plain_text
}
currentUrl={`https://www.typebot.io/blog/${
(page.properties.Slug as RichTextPropertyValue).rich_text[0]
?.plain_text
}`}
imagePreviewUrl={
(page.properties.Thumbnail as RichTextPropertyValue).rich_text[0]
?.plain_text
}
/>
)}
<Navbar />
<Container as="article" maxW="900px">
{((page?.properties?.Published as CheckboxPropertyValue | undefined)
?.checkbox ||
!page) && (
<Button
as={NextChakraLink}
href="/blog"
colorScheme="gray"
variant="outline"
size="sm"
>
{'<'} Blog
</Button>
)}
{page ? (
<>
<VStack>
<Heading as="h1" fontSize="5xl" textAlign="center" mt={6}>
<NotionText
text={(page.properties.Name as TitlePropertyValue).title}
/>
</Heading>
<Heading
fontSize="md"
fontWeight="normal"
textAlign="center"
textColor="gray.500"
>
<NotionText
text={
(page.properties.Description as RichTextPropertyValue)
.rich_text
}
/>
</Heading>
{(page.properties.Author as RichTextPropertyValue | undefined)
?.rich_text[0]?.plain_text && (
<Author
author={
(page.properties.Author as RichTextPropertyValue)
.rich_text[0]?.plain_text
}
/>
)}
</VStack>
<Stack mt={6} spacing={4} maxW="700px" mx="auto">
{blocks.map((block) => (
<NotionBlock key={block.id} block={block} />
))}
</Stack>
</>
) : (
<Text textAlign="center">Blog post not found</Text>
)}
</Container>
</Stack>
<Footer />
</>
)
}
export const getStaticPaths = async () => {
if (!process.env.NOTION_DATABASE_ID)
throw new Error("Couldn't find NOTION_DATABASE_ID")
const database = await getFullDatabase(process.env.NOTION_DATABASE_ID)
return {
paths: database.filter(pageWithSlugAndId).map((page) => ({
params: {
slug: (page.properties.Slug as RichTextPropertyValue).rich_text[0]
.plain_text,
id: page.id,
},
})),
fallback: true,
}
}
const pageWithSlugAndId = (page: Page) =>
(page.properties.Slug as RichTextPropertyValue).rich_text[0]?.plain_text &&
page.id
const Author = ({ author }: { author: string }) => {
return (
<HStack>
<Image
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
src={/\(([^)]+)\)/.exec(author)![0].slice(1, -1)}
width="30px"
height="30px"
className="rounded-full"
alt="Author's picture"
/>
<Text>{author.split(' (')[0]}</Text>
</HStack>
)
}
export const getStaticProps = async (
context: GetStaticPropsContext<{ slug: string; locale: 'fr' | 'en' }>
) => {
if (!process.env.NOTION_DATABASE_ID)
throw new Error("Couldn't find NOTION_DATABASE_ID")
if (!context.params) throw new Error("Couldn't find params")
const { slug } = context.params
const page = await getPage(process.env.NOTION_DATABASE_ID, slug)
if (!page?.id) return
const blocks = await getBlocks(page?.id)
const childBlocks = await Promise.all(
blocks
.filter((block) => block.has_children)
.map(async (block) => {
return {
id: block.id,
children: await getBlocks(block.id),
}
})
)
const blocksWithChildren = blocks.map((block) => {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
//@ts-ignore
if (block.has_children && !block[block.type].children) {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
//@ts-ignore
block[block.type]['children'] = childBlocks.find(
(x) => x.id === block.id
)?.children
}
return block
})
return {
props: {
page,
blocks: blocksWithChildren,
},
revalidate: 1,
}
}

155
apps/landing-page/pages/blog/index.tsx
View File

@ -1,155 +0,0 @@
import React from 'react'
import {
Box,
Heading,
Image,
Text,
Container,
VStack,
SimpleGrid,
Flex,
} from '@chakra-ui/react'
import { getDatabase } from '../../lib/notion'
import {
DatePropertyValue,
Page,
RichText,
RichTextPropertyValue,
TitlePropertyValue,
} from '@notionhq/client/build/src/api-types'
import { NotionText } from 'notion-blocks-chakra-ui'
import { Footer } from 'components/common/Footer'
import { Navbar } from 'components/common/Navbar/Navbar'
import { NextChakraLink } from 'components/common/nextChakraAdapters/NextChakraLink'
import { SocialMetaTags } from 'components/common/SocialMetaTags'
const ArticleList = ({ posts }: { posts: Page[] }) => {
return (
<>
<Flex
alignItems="center"
justifyContent="space-between"
w="full"
flexDir="column"
>
<SocialMetaTags
title="Blog"
description="Keep up to date with the latest news related to Typebot. Learn
about conversationnal forms and how to convert more."
currentUrl={`https://www.typebot.io/blog`}
imagePreviewUrl={`https://www.typebot.io/images/previews/blog.png`}
/>
<Navbar />
<VStack maxW="1200px" mt={20} pb={56}>
<VStack maxW="700px">
<Heading as="h1" fontSize="5xl">
Blog
</Heading>
<Heading
fontSize="md"
fontWeight="normal"
textAlign="center"
textColor="gray.500"
>
Keep up to date with the latest news related to Typebot. Learn
about conversationnal forms and how to convert more.
</Heading>
</VStack>
<Container maxW="1200px">
<SimpleGrid columns={[1, 2, 3]} mt={6} py={4} spacing={10}>
{posts.map((post) => (
<BlogPost
key={post.id}
slug={`/${
(post.properties.Slug as RichTextPropertyValue).rich_text[0]
?.plain_text
}`}
title={
(post.properties.Name as TitlePropertyValue).title[0]
?.plain_text
}
description={
(post.properties.Description as RichTextPropertyValue)
.rich_text
}
imageSrc={
(post.properties.Thumbnail as RichTextPropertyValue)
.rich_text[0]?.plain_text
}
date={
new Date(
(post.properties.Created as DatePropertyValue)?.date
?.start ?? ''
)
}
/>
))}
</SimpleGrid>
</Container>
</VStack>
</Flex>
<Footer />
</>
)
}
type BlogPostProps = {
slug: string
title: string
description: RichText[]
imageSrc: string
date: Date
}
const BlogPost = ({
slug,
title,
description,
imageSrc,
date,
}: BlogPostProps) => (
<NextChakraLink
href={'/blog' + slug}
w="100%"
shadow="lg"
p={4}
rounded="lg"
_hover={{ textDecoration: 'none' }}
>
<Box borderRadius="lg" overflow="hidden">
<Image
transform="scale(1.0)"
src={imageSrc}
objectFit="contain"
width="100%"
transition="0.3s ease-in-out"
_hover={{
transform: 'scale(1.05)',
}}
alt="title thumbnail"
/>
</Box>
<Heading fontSize="xl" marginTop="4">
{title}
</Heading>
<NotionText text={description} as="p" fontSize="md" marginTop="2" />
<Text textColor="gray.400" fontSize="sm" mt={2}>
{date.toDateString()}
</Text>
</NextChakraLink>
)
export const getStaticProps = async () => {
if (!process.env.NOTION_DATABASE_ID)
throw new Error("Couldn't find NOTION_DATABASE_ID")
const database = await getDatabase(process.env.NOTION_DATABASE_ID)
return {
props: {
posts: database,
},
revalidate: 1,
}
}
export default ArticleList

36
apps/landing-page/pages/index.tsx
View File

@ -1,5 +1,37 @@
import Homepage from '../layouts/Homepage'
import { Stack } from '@chakra-ui/react'
import { Footer } from 'components/common/Footer'
import { SocialMetaTags } from 'components/common/SocialMetaTags'
import { EasyBuildingExperience } from 'components/Homepage/EasyBuildingExperience'
import { EasyEmbed } from 'components/Homepage/EasyEmbed'
import { EndCta } from 'components/Homepage/EndCta'
import { Features } from 'components/Homepage/Features'
import { Hero } from 'components/Homepage/Hero'
import { Integrations } from 'components/Homepage/Integrations'
import { IntroducingChatApps } from 'components/Homepage/IntroducingChatApps'
import { RealTimeResults } from 'components/Homepage/RealTimeResults'
import { Testimonials } from 'components/Homepage/Testimonials'
const App = Homepage
const App = () => {
return (
<Stack w="full" overflowX="hidden" bgColor="gray.900">
<SocialMetaTags
title="Typebot: Conversational Form Builder"
description="Convert 4x more with beautiful conversational forms. Embed them directly in your applications without a line of code."
currentUrl={`https://www.typebot.io/`}
imagePreviewUrl={`https://www.typebot.io/images/previews/home.png`}
/>
<Hero />
<IntroducingChatApps />
<EasyBuildingExperience />
<EasyEmbed />
<Integrations />
<RealTimeResults />
<Features />
<Testimonials />
<EndCta />
<Footer />
</Stack>
)
}
export default App

16
apps/landing-page/pages/pricing/index.tsx → apps/landing-page/pages/pricing.tsx
View File

@ -18,13 +18,13 @@ const Pricing = () => {
}, [])
return (
<Stack overflowX="hidden">
<Stack overflowX="hidden" bgColor="gray.900">
<Flex
pos="relative"
flexDir="column"
bgColor="blue.500"
minHeight="100vh"
alignItems="center"
bgGradient="linear(to-b, gray.900, gray.800)"
pb={40}
>
<SocialMetaTags
@ -70,9 +70,9 @@ const Pricing = () => {
features: [
'Unlimited typebots',
'Unlimited responses',
'Conditional branching and computations',
'Custom JS / CSS',
'Native integrations (Google Sheets, Webhooks, Zapier...)',
'Basic analytics (sessions, time, completion...)',
'Basic analytics (Sessions, time, completion...)',
],
}}
button={
@ -96,16 +96,18 @@ const Pricing = () => {
'Custom domains',
'Organize typebots in folders',
'Unlimited uploads',
'Custom Google Analytics events',
],
}}
beforeButtonLabel={"The only form builder you'll need"}
borderWidth="3px"
borderColor="orange.200"
button={
<NextChakraLink
href="https://app.typebot.io/register?subscribe=true"
_hover={{ textDecor: 'none' }}
>
<ActionButton>Subscribe now</ActionButton>
<ActionButton colorScheme="orange">
Subscribe now
</ActionButton>
</NextChakraLink>
}
/>

300
apps/landing-page/pages/vs-landbot.tsx
View File

@ -1,300 +0,0 @@
import React, { useEffect } from 'react'
import {
Heading,
VStack,
Stack,
Text,
Table,
Thead,
Tbody,
Tr,
Td,
Th,
Box,
Flex,
} from '@chakra-ui/react'
import loadLandbot from '../lib/landbot'
import Image from 'next/image'
import { initContainer } from 'typebot-js'
import { ArticleCallToAction } from 'components/common/ArticleCta'
import { Footer } from 'components/common/Footer'
import { Navbar } from 'components/common/Navbar/Navbar'
import { NextChakraLink } from 'components/common/nextChakraAdapters/NextChakraLink'
import { SocialMetaTags } from 'components/common/SocialMetaTags'
import { Yes, No } from 'components/common/TableCells'
import landbotVisualFlowSrc from 'public/images/landbot/visual-flow.png'
// eslint-disable-next-line @typescript-eslint/no-explicit-any
declare const Landbot: any
const VsTypebot = () => {
useEffect(() => {
loadLandbot().then(() => {
new Landbot.Container({
container: '#myLandbot',
configUrl:
'https://chats.landbot.io/v3/H-937813-ZLZEY720UH1TWN5S/index.json',
})
})
initContainer('typebot-container', {
publishId: 'request-class',
})
}, [])
return (
<>
<Stack
alignItems="center"
justifyContent="space-between"
w="full"
overflowX="hidden"
mb="20"
>
<SocialMetaTags
title="Typebot vs Landbot"
description="Get to know the main differences between Typebot and Landbot"
currentUrl={`https://www.typebot.io/vs-landbot`}
imagePreviewUrl={`https://www.typebot.io/vs-landbot`}
/>
<Navbar />
<VStack maxW="1200px" py={20} spacing={10} w="full">
<Heading as="h1" fontSize={['3xl', '5xl']} textAlign="center">
What makes Typebot a great Landbot alternative?
</Heading>
<Stack maxW="700px" spacing={6} textAlign="justify" w="full" px={4}>
<Text>
Both Landbot and Typebot offer the same output: beautiful
conversational forms. But Landbot is in fact a tool focused on
delivering customer service through chatbots while Typebot is
focused on getting the most out of forms.
</Text>
<Heading>User experience</Heading>
<Text>
Here is an example of the same form created with both tools:
</Text>
<Heading size="md" as="h3">
Landbot:
</Heading>
<div id="myLandbot" style={{ width: '100%', height: '500px' }} />
<Heading size="md" as="h3">
Typebot:
</Heading>
<div
id="typebot-container"
style={{ width: '100%', height: '500px' }}
/>
<Heading>Building experience</Heading>
<Text>
Landbot offers a &quot;visual flow&quot; building experience.
While it makes conditional logic more understandable. I think
it&apos;s hard to understand how the final result will look like
at a glance:
</Text>
<Box h="400px" pos="relative">
<Image
src={landbotVisualFlowSrc}
layout="fill"
objectFit="contain"
alt="Visual flow screenshot"
/>
</Box>
<Text>
The idea behind Typebot building experience is that you directly
modify the final result and you click on elements you want to
edit. Typebot also offer a &quot;visual flow&quot; building
experience when you start adding doing conditional logic
</Text>
<Heading>Pricing</Heading>
<Text>
Landbot offers a Free plan that isn&apos;t very generous as you
won&apos;t have access to advanced useful features and you will be
limited to 30 chats per month. You won&apos;t really know if your
forms are performing well with only 30 responses per month.
You&apos;ll be obligated to upgrade to at least their
&quot;PROFESSIONAL&quot; plan that offers up to 1,000 responses
for $95/month.
</Text>
<Text>
Landbot offers a human take-over feature that won&apos;t be
developed into Typebot. It won&apos;t be a live chat product
because Typebot is designed for marketers, not customer support
like Landbot. Typebot&apos;s main focus is to help marketers get
the most out of their online forms with exclusive features.
</Text>
<Text>
Landbot also offers Facebook and Whatsapp integrations. Typebot
has planned these integrations but it will be focused on helping
marketers distribute forms through Facebook and WhatsApp instead
of a focus on delivering customer service.
</Text>
<Heading as="h3" size="md">
Free plan comparison
</Heading>
<Flex overflowY="scroll">
<Table variant="simple">
<Thead>
<Tr>
<Th />
<Th>Typebot (Free plan)</Th>
<Th>Landbot (Free plan)</Th>
</Tr>
</Thead>
<Tbody>
<Tr>
<Td>Unlimited forms</Td>
<Yes />
<Yes />
</Tr>
<Tr>
<Td>Unlimited conversations</Td>
<Yes />
<No>(30 / month)</No>
</Tr>
<Tr>
<Td>Zapier integration</Td>
<Yes />
<Yes />
</Tr>
<Tr>
<Td>Slack integration</Td>
<No>Zapier, Integromat</No>
<Yes />
</Tr>
<Tr>
<Td>Sendgrid integration</Td>
<No>Zapier, Integromat</No>
<Yes />
</Tr>
<Tr>
<Td>Stripe integration</Td>
<Yes />
<No>starts at $35</No>
</Tr>
<Tr>
<Td>Google Sheets integration</Td>
<Yes />
<No>starts at $90</No>
</Tr>
<Tr>
<Td>Human take over</Td>
<No />
<Yes />
</Tr>
<Tr>
<Td>Priority Support</Td>
<Yes />
<No>(only enterprise)</No>
</Tr>
<Tr>
<Td>Webhooks</Td>
<Yes />
<No>starts at $95</No>
</Tr>
<Tr>
<Td>Hidden fields</Td>
<Yes />
<No>starts at $35</No>
</Tr>
<Tr>
<Td>Conditional logic</Td>
<Yes />
<No>starts at $35</No>
</Tr>
<Tr>
<Td>Formulas</Td>
<Yes />
<No>starts at $95</No>
</Tr>
<Tr>
<Td>Custom error messages</Td>
<Yes />
<No>starts at $35</No>
</Tr>
<Tr>
<Td>Custom typing emulation</Td>
<Yes />
<No>starts at $35</No>
</Tr>
</Tbody>
</Table>
</Flex>
<Heading as="h3" size="md">
Paid plan comparison
</Heading>
<Flex overflowY="scroll">
<Table variant="simple">
<Thead>
<Tr>
<Th />
<Th>Typebot Pro ($30/month)</Th>
<Th>Landbot ($35+/month)</Th>
</Tr>
</Thead>
<Tbody>
<Tr>
<Td>Access to incomplete submissions</Td>
<Yes />
<Yes />
</Tr>
<Tr>
<Td>Remove branding</Td>
<Yes />
<Yes>$95/month</Yes>
</Tr>
<Tr>
<Td>Custom domain</Td>
<Yes />
<No />
</Tr>
<Tr>
<Td>Facebook messenger</Td>
<No />
<Yes />
</Tr>
<Tr>
<Td>Whatsapp</Td>
<No />
<Yes>$95+/month</Yes>
</Tr>
<Tr>
<Td>In-depth analytics</Td>
<Yes />
<Yes />
</Tr>
<Tr>
<Td>Google analytics events</Td>
<Yes />
<Yes />
</Tr>
<Tr>
<Td>Team collaboration</Td>
<Yes />
<Yes />
</Tr>
<Tr>
<Td>Organize forms in folders</Td>
<Yes />
<No />
</Tr>
</Tbody>
</Table>
</Flex>
<Text>
Landbot offers other very cool features.{' '}
<NextChakraLink
href="https://landbot.io/pricing"
color="blue.400"
>
Here is an exhausting list.
</NextChakraLink>
</Text>
</Stack>
</VStack>
<ArticleCallToAction />
</Stack>
<Footer />
</>
)
}
export default VsTypebot

254
apps/landing-page/pages/vs-tally.tsx
View File

@ -1,254 +0,0 @@
import React, { useEffect } from 'react'
import {
Heading,
VStack,
Stack,
Text,
Table,
Thead,
Tbody,
Tr,
Td,
Th,
Flex,
} from '@chakra-ui/react'
import { initContainer } from 'typebot-js'
import { ArticleCallToAction } from 'components/common/ArticleCta'
import { roadmapLink, Footer } from 'components/common/Footer'
import { Navbar } from 'components/common/Navbar/Navbar'
import { NextChakraLink } from 'components/common/nextChakraAdapters/NextChakraLink'
import { SocialMetaTags } from 'components/common/SocialMetaTags'
import { Yes, No } from 'components/common/TableCells'
const VsTypebot = () => {
useEffect(() => {
initContainer('typebot-container', {
publishId: 'request-class',
})
}, [])
return (
<>
<Stack
alignItems="center"
justifyContent="space-between"
w="full"
overflowX="hidden"
mb="20"
>
<SocialMetaTags
title="Tally vs Typebot"
description="Get to know the main differences between Typebot and Tally"
currentUrl={`https://www.typebot.io/vs-typeform`}
imagePreviewUrl={`https://www.typebot.io/vs-typeform`}
/>
<Navbar />
<VStack maxW="1200px" py={20} spacing={10} w="full">
<Heading as="h1" fontSize={['3xl', '5xl']} textAlign="center">
What makes Typebot a great Tally alternative?
</Heading>
<Stack maxW="700px" spacing={6} textAlign="justify" w="full" px={4}>
<Text>
Tally user experience is quite unique and is similar to Notion. I
love the simplicity of its building experience. Tally and Typebot
seem to have the same vision for the building experience: what you
edit is the final result. They also offer similar generous pricing
where the majority of the features are available for free.
</Text>
<Text>
But these tools differ in the end-user experience: Tally offers
one-page or multi-step forms whereas Typebot offers a
conversational experience. Let&apos;s take a look at it:
</Text>
<Heading>User experience</Heading>
<Text>
Here is an example of the same form created with both tools:
</Text>
<Heading size="md" as="h3">
Tally:
</Heading>
<div
className="typeform-widget"
data-url="https://form.typeform.com/to/mKiSR43i?typeform-medium=embed-snippet"
style={{ width: '100%', height: '500px' }}
>
<iframe
src="https://tally.so/embed/nP9Gbm?hideTitle=1&alignLeft=1"
width="100%"
height="100%"
title="Request a class"
/>
</div>
<Heading size="md" as="h3">
Typebot:
</Heading>
<div
id="typebot-container"
style={{ width: '100%', height: '500px' }}
/>
<Heading>Conversion increased</Heading>
<Text>
I built Typebot because I know conversational experience allows
you to increase your conversion rate and ultimately offer a more
comfortable experience on mobile.
</Text>
<Heading as="h3" size="md">
Chat experience is comfortable on mobile
</Heading>
<Text>
Tally looks great on mobile but it still feels like a classic form
with lots of questions you have to fill. Whereas with a
conversational experience, your mind shift and it feels like
you&apos;re talking to someone.
</Text>
<Heading>Roadmap Ceiling</Heading>
<Text>
Because Tally is offering traditional formatting of its forms,
they won&apos;t be able to implement advanced features such as
drop-off rates on a question basis. This feature (available on
Typebot) is a game-changer for marketers who need to know in
real-time how their questions perform and where users tend to quit
the form.
</Text>
<Heading>Pricing</Heading>
<Text>
Both tools offer similar pricing. Everything is unlimited and for
free. You&apos;ll need to subscribe only if you need advanced
features and remove the branding.
</Text>
<Heading as="h3" size="md">
Free plan comparison
</Heading>
<Flex overflowY="scroll">
<Table variant="simple">
<Thead>
<Tr>
<Th />
<Th>Typebot (Free plan)</Th>
<Th>Tally (Free plan)</Th>
</Tr>
</Thead>
<Tbody>
<Tr>
<Td>Unlimited forms</Td>
<Yes />
<Yes />
</Tr>
<Tr>
<Td>Unlimited responses</Td>
<Yes />
<Yes />
</Tr>
<Tr>
<Td>Collect payments</Td>
<Yes />
<Yes>5% commission</Yes>
</Tr>
<Tr>
<Td>File upload</Td>
<No>
<NextChakraLink href={roadmapLink} color="blue.400">
Roadmap
</NextChakraLink>
</No>
<Yes />
</Tr>
<Tr>
<Td>Calculator</Td>
<Yes />
<Yes />
</Tr>
<Tr>
<Td>Hidden fields</Td>
<Yes />
<Yes />
</Tr>
<Tr>
<Td>Zapier</Td>
<Yes />
<Yes />
</Tr>
<Tr>
<Td>Integromat</Td>
<Yes />
<Yes />
</Tr>
<Tr>
<Td>Google Sheets</Td>
<Yes />
<Yes />
</Tr>
<Tr>
<Td>Redirect</Td>
<Yes />
<Yes />
</Tr>
<Tr>
<Td>Custom subdomain</Td>
<Yes />
<No />
</Tr>
</Tbody>
</Table>
</Flex>
<Heading as="h3" size="md">
Paid plan comparison
</Heading>
<Flex overflowY="scroll">
<Table variant="simple">
<Thead>
<Tr>
<Th />
<Th>Typebot Pro ($30/month)</Th>
<Th>Tally ($29/month)</Th>
</Tr>
</Thead>
<Tbody>
<Tr>
<Td>Collaboration</Td>
<Yes />
<Yes />
</Tr>
<Tr>
<Td>Remove branding</Td>
<Yes />
<Yes />
</Tr>
<Tr>
<Td>Custom domains</Td>
<Yes />
<Yes />
</Tr>
<Tr>
<Td>Workspaces</Td>
<Yes />
<Yes />
</Tr>
<Tr>
<Td>Access to incomplete submissions</Td>
<Yes />
<No />
</Tr>
<Tr>
<Td>In-depth analytics</Td>
<Yes />
<No />
</Tr>
<Tr>
<Td>Google analytics events</Td>
<Yes />
<No />
</Tr>
</Tbody>
</Table>
</Flex>
</Stack>
</VStack>
<ArticleCallToAction />
</Stack>
<Footer />
</>
)
}
export default VsTypebot

449
apps/landing-page/pages/vs-typeform.tsx
View File

@ -1,449 +0,0 @@
import React, { useEffect } from 'react'
import {
Heading,
VStack,
Stack,
Text,
Table,
Thead,
Tbody,
Tr,
Td,
Th,
Flex,
} from '@chakra-ui/react'
import { initContainer } from 'typebot-js'
import { CheckIcon } from 'assets/icons/CheckIcon'
import { CloseIcon } from 'assets/icons/CloseIcon'
import { ArticleCallToAction } from 'components/common/ArticleCta'
import { Footer } from 'components/common/Footer'
import { Navbar } from 'components/common/Navbar/Navbar'
import { SocialMetaTags } from 'components/common/SocialMetaTags'
import { Yes, No } from 'components/common/TableCells'
import loadTypeform from 'lib/typeform'
const VsTypebot = () => {
useEffect(() => {
loadTypeform().then()
initContainer('typebot-container', {
publishId: 'request-class',
})
}, [])
return (
<>
<Stack
alignItems="center"
justifyContent="space-between"
w="full"
overflowX="hidden"
mb="20"
>
<SocialMetaTags
title="Typebot vs Typeform"
description="Get to know the main differences between Typebot and Typeform"
currentUrl={`https://www.typebot.io/vs-typeform`}
imagePreviewUrl={`https://www.typebot.io/vs-typeform`}
/>
<Navbar />
<VStack maxW="1200px" py={20} spacing={10} w="full">
<Heading as="h1" fontSize={['3xl', '5xl']} textAlign="center">
What makes Typebot a great Typeform alternative?
</Heading>
<Stack maxW="700px" spacing={6} textAlign="justify" w="full" px={4}>
<Text>
I am a big fan of Typeform user experience. This is probably what
motivated me to create an alternative that keeps Typeform slick
design but also offers a unique conversational experience that
would make my forms convert more.
</Text>
<Text>
Along the journey, I figured that a conversational experience also
unlocks many possibilities in terms of conversion rate
optimization for marketers. That&apos;s exactly where Typebot is
headed.
</Text>
<Heading>User experience</Heading>
<Text>
Here is an example of the same form created with both tools:
</Text>
<Heading size="md" as="h3">
Typeform:
</Heading>
<div
className="typeform-widget"
data-url="https://form.typeform.com/to/mKiSR43i?typeform-medium=embed-snippet"
style={{ width: '100%', height: '500px' }}
/>
<Heading size="md" as="h3">
Typebot:
</Heading>
<div
id="typebot-container"
style={{ width: '100%', height: '500px' }}
/>
<Heading>Conversion increased</Heading>
<Text>
Typebot&apos;s users report a better conversion rate compared to
Typeform forms. All of this is thanks to a conversation :
</Text>
<Heading as="h3" size="md">
Collect real-time results
</Heading>
<Text>
With a Typeform, you collect the answer only when your user clicks
on the &quot;Submit&quot; button located at end of the form. If
your users are leaving the form at a specific question, you
won&apos;t even know this. With Typebot, if a user answers only
one question, you will still collect the answer and will never
lose any valuable information.
</Text>
<Text>
What&apos;s the powerful math behind this feature? Imagine 300
users are interacting with your form but only 100 of them fully
completed it. With Typebot, you&apos;ll still see responses from
300 users while with Typeform, you&apos;ll only see responses from
the 100 people that clicked on &quot;submit&quot;.
</Text>
<Heading as="h3" size="md">
Chat experience is comfortable on mobile
</Heading>
<Text>
Typeform is responsive and looks good on mobile but it still feels
like a form you need to fill. Whereas with a conversational
experience, your mind shift and it feels like you&apos;re talking
to someone.
</Text>
<Heading>Pricing</Heading>
<Text>
Typeform recently changed its pricing and now offers a Free plan
that includes meaningful features without limits (logic jumps,
ending screens, and the number of typeforms you can create). But
they instead limited the number of responses you can collect per
month to only 10 and the questions per typeform to 10 as well.
</Text>
<Text>
The problem with these limitations is that you won&apos;t know if
your forms are actually performing well with only 10 responses per
month. You&apos;ll be obligated to upgrade to at least their
&quot;Plus&quot; plan that offers up to 1,000 responses for
$55/month
</Text>
<Heading as="h3" size="md">
Free plan comparison
</Heading>
<Flex overflowY="scroll">
<Table variant="simple">
<Thead>
<Tr>
<Th />
<Th>Typebot (Free plan)</Th>
<Th>Typeform (Free plan)</Th>
</Tr>
</Thead>
<Tbody>
<Tr>
<Td>Unlimited forms</Td>
<Td>
<CheckIcon fill="#0042da" width="25px" />
</Td>
<Td>
<CheckIcon fill="#0042da" width="25px" />
</Td>
</Tr>
<Tr>
<Td>Unlimited logic</Td>
<Td>
<CheckIcon fill="#0042da" width="25px" />
</Td>
<Td>
<CheckIcon fill="#0042da" width="25px" />
</Td>
</Tr>
<Tr>
<Td>Unlimited responses</Td>
<Td>
<CheckIcon fill="#0042da" width="25px" />
</Td>
<Td display="flex">
<CloseIcon width="25px" />
<Text ml={1} fontSize="sm">
(10 / month)
</Text>
</Td>
</Tr>
<Tr>
<Td>Unlimited questions</Td>
<Td>
<CheckIcon fill="#0042da" width="25px" />
</Td>
<Td display="flex">
<CloseIcon width="25px" />
<Text ml={1} fontSize="sm">
(10 / form)
</Text>
</Td>
</Tr>
<Tr>
<Td>Hidden fields</Td>
<Td>
<CheckIcon fill="#0042da" width="25px" />
</Td>
<Td>
<CheckIcon fill="#0042da" width="25px" />
</Td>
</Tr>
<Tr>
<Td>Calculator</Td>
<Td>
<CheckIcon fill="#0042da" width="25px" />
</Td>
<Td>
<CheckIcon fill="#0042da" width="25px" />
</Td>
</Tr>
<Tr>
<Td>Templates</Td>
<Td>
<CheckIcon fill="#0042da" width="25px" />
</Td>
<Td>
<CheckIcon fill="#0042da" width="25px" />
</Td>
</Tr>
<Tr>
<Td>Download your data</Td>
<Td>
<CheckIcon fill="#0042da" width="25px" />
</Td>
<Td>
<CheckIcon fill="#0042da" width="25px" />
</Td>
</Tr>
<Tr>
<Td>Native integrations</Td>
<Td>
<CheckIcon fill="#0042da" width="25px" />
</Td>
<Td>
<CheckIcon fill="#0042da" width="25px" />
</Td>
</Tr>
<Tr>
<Td>Collect payments</Td>
<Td>
<CheckIcon fill="#0042da" width="25px" />
</Td>
<Td display="flex">
<CloseIcon width="25px" />
<Text ml={1} fontSize="sm">
(starts at $30)
</Text>
</Td>
</Tr>
<Tr>
<Td>Redirect</Td>
<Td>
<CheckIcon fill="#0042da" width="25px" />
</Td>
<Td display="flex">
<CloseIcon width="25px" />
<Text ml={1} fontSize="sm">
(starts at $60)
</Text>
</Td>
</Tr>
<Tr>
<Td>File upload</Td>
<Td>
<CheckIcon fill="#0042da" width="25px" />
</Td>
<Td display="flex">
<CloseIcon width="25px" />
<Text ml={1} fontSize="sm">
(starts at $30)
</Text>
</Td>
</Tr>
<Tr>
<Td>Webhooks</Td>
<Td>
<CheckIcon fill="#0042da" width="25px" />
</Td>
<Td display="flex">
<CloseIcon width="25px" />
<Text ml={1} fontSize="sm">
(starts at $30)
</Text>
</Td>
</Tr>
<Tr>
<Td>Custom link preview</Td>
<Td>
<CheckIcon fill="#0042da" width="25px" />
</Td>
<Td display="flex">
<CloseIcon width="25px" />
<Text ml={1} fontSize="sm">
(starts at $30)
</Text>
</Td>
</Tr>
<Tr>
<Td>Custom subdomain</Td>
<Td>
<CheckIcon fill="#0042da" width="25px" />
</Td>
<Td display="flex">
<CloseIcon width="25px" />
<Text ml={1} fontSize="sm">
(starts at $50)
</Text>
</Td>
</Tr>
<Tr>
<Td>Google analytics integration</Td>
<Td>
<CheckIcon fill="#0042da" width="25px" />
</Td>
<Td display="flex">
<CloseIcon width="25px" />
<Text ml={1} fontSize="sm">
(starts at $108)
</Text>
</Td>
</Tr>
<Tr>
<Td>Facebook pixel</Td>
<Td>
<CheckIcon fill="#0042da" width="25px" />
</Td>
<Td display="flex">
<CloseIcon width="25px" />
<Text ml={1} fontSize="sm">
(starts at $108)
</Text>
</Td>
</Tr>
<Tr>
<Td>Google Tag Manager</Td>
<Td>
<CheckIcon fill="#0042da" width="25px" />
</Td>
<Td display="flex">
<CloseIcon width="25px" />
<Text ml={1} fontSize="sm">
(starts at $108)
</Text>
</Td>
</Tr>
<Tr>
<Td>Priority support</Td>
<Td>
<CheckIcon fill="#0042da" width="25px" />
</Td>
<Td display="flex">
<CloseIcon width="25px" />
<Text ml={1} fontSize="sm">
(starts at $108)
</Text>
</Td>
</Tr>
</Tbody>
</Table>
</Flex>
<Heading as="h3" size="md">
Paid plan comparison
</Heading>
<Flex overflowY="scroll">
<Table variant="simple">
<Thead>
<Tr>
<Th />
<Th>Typebot Pro ($30/month)</Th>
<Th>Typeform ($30+/month)</Th>
</Tr>
</Thead>
<Tbody>
<Tr>
<Td>Access to incomplete submissions</Td>
<Yes />
<No />
</Tr>
<Tr>
<Td>Remove branding</Td>
<Td>
<CheckIcon fill="#0042da" width="25px" />
</Td>
<Td>$66/month</Td>
</Tr>
<Tr>
<Td>Unlimited file upload</Td>
<Td>
<CheckIcon fill="#0042da" width="25px" />
</Td>
<Td>$108/month (4GB)</Td>
</Tr>
<Tr>
<Td>Team collaboration</Td>
<Td display="flex">
<CheckIcon fill="#0042da" width="25px" />
<Text ml="1" fontSize="sm">
(unlimited)
</Text>
</Td>
<Td>$66 for 3 users</Td>
</Tr>
<Tr>
<Td>Custom domains</Td>
<Td>
<CheckIcon fill="#0042da" width="25px" />
</Td>
<Td>
<CloseIcon width="25px" />
</Td>
</Tr>
<Tr>
<Td>Salesforce integration</Td>
<Td>
<CloseIcon width="25px" />
</Td>
<Td>$108/month</Td>
</Tr>
<Tr>
<Td>Schedule a close date</Td>
<Td>
<CloseIcon width="25px" />
</Td>
<Td>$108/month</Td>
</Tr>
<Tr>
<Td>Drop-off rates</Td>
<Yes />
<Td>$108/month</Td>
</Tr>
<Tr>
<Td>Google analytics events</Td>
<Yes />
<No />
</Tr>
<Tr>
<Td>Organize forms in folders</Td>
<Yes />
<No />
</Tr>
</Tbody>
</Table>
</Flex>
</Stack>
</VStack>
<ArticleCallToAction />
</Stack>
<Footer />
</>
)
}
export default VsTypebot

BIN
apps/landing-page/public/blog/better-conversion/deia.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 126 KiB

BIN
apps/landing-page/public/blog/better-conversion/makerlead.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1015 KiB

BIN
apps/landing-page/public/blog/better-conversion/nefer.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 63 KiB

BIN
apps/landing-page/public/blog/examples/exemple-customer-support-en.gif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.7 MiB

BIN
apps/landing-page/public/blog/examples/exemple-event-en.gif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.9 MiB

Some files were not shown because too many files have changed in this diff Show More