chore(lp): 📦️ Import existing Landing page

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

@@ -0,0 +1,114 @@
+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>
+    ),
+  },
+]