📝 Add "Top 5 Alternatives to Landbot" article

Co-authored-by: Baptiste Arnaud <contact@baptiste-arnaud.fr>
Co-authored-by: Baptiste Arnaud <baptiste.arnaud95@gmail.com>

apps/docs/contribute/guides/blog.mdx

@@ -48,5 +48,27 @@ Here are all the components you can use in your blog post:
 - `YouTube`: To embed a YouTube video. Example: `<YouTube id="<YOUTUBE_VIDEO_ID>" />`
 - `Loom`: To embed a Loom video. Example: `<Loom id="<LOOM_VIDEO_ID>" />`
 - `Cta`: To display a call-to-action that redirects to Typebot. Example: `<Cta />`
+- `Table`: To display a table. It expects 2 props: `headers` and `rows`. Example:
 
-For rendering tables you should use the native html table related tags.
+  ```tsx
+  <Table
+    headers={['Feature', 'Typebot', 'Landbot']}
+    rows={[
+      [
+        'Pricing',
+        'Free plan, $39/mo Starter, $99/mo Pro',
+        'Free plan, €40/mo Starter, €150/mo Pro, €400/mo Business',
+      ],
+      [
+        'Integrations',
+        'Google Sheets, Webhooks, Zapier, Make, SendGrid',
+        'Dialogflow, Salesforce, Slack, Google Sheets, Zapier, Mailchimp',
+      ],
+      [
+        'Customization',
+        'Full theme customization, custom CSS',
+        'Limited theme options',
+      ],
+    ]}
+  />
+  ```

apps/landing-page/app/blog/[slug]/Post.tsx

@@ -2,28 +2,13 @@
 'use client'
 
 import { Link } from '@chakra-ui/next-js'
-import {
-  Alert,
-  AlertIcon,
-  Heading,
-  Stack,
-  Table,
-  TableCaption,
-  TableContainer,
-  Tbody,
-  Td,
-  Text,
-  Tfoot,
-  Th,
-  Thead,
-  Tr,
-  Image,
-} from '@chakra-ui/react'
+import { Alert, AlertIcon, Heading, Stack, Text, Image } from '@chakra-ui/react'
 import { MDXRemote, MDXRemoteSerializeResult } from 'next-mdx-remote'
 import { highlight } from 'sugar-high'
 import { Tweet } from './Tweet'
 import { Standard } from '@typebot.io/nextjs'
 import { EndCta } from '@/components/Homepage/EndCta'
+import { Table } from './Table'
 
 type Props = {
   metadata: {
@@ -35,7 +20,7 @@ type Props = {
 
 export const Post = ({ metadata, mdxSource }: Props) => (
   <Stack spacing={10} my="20" w="full">
-    <Stack mx="auto" w="full" maxW="65ch">
+    <Stack mx="auto" w="full" maxW={['full', '46rem']} px={3}>
       <Heading>{metadata.title}</Heading>
       <Text>{formatDate(metadata.publishedAt)}</Text>
     </Stack>
@@ -43,7 +28,9 @@ export const Post = ({ metadata, mdxSource }: Props) => (
       mx="auto"
       spacing={0}
       as="article"
-      className="prose prose-quoteless prose-neutral prose-invert max-w-none w-full px-3 sm:px-0"
+      px={3}
+      w="full"
+      className="prose prose-quoteless prose-neutral prose-invert max-w-none"
     >
       <MDXRemote
         {...mdxSource}
@@ -63,7 +50,7 @@ export const Post = ({ metadata, mdxSource }: Props) => (
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
           link: (props: any) => <Link {...props} />,
           Image: (props) => (
-            <Image rounded="md" maxW={['full', '65ch']} {...props} />
+            <Image rounded="md" maxW={['full', '46rem']} {...props} />
           ),
           Callout: ({ children, ...props }) => (
             <Alert rounded="md" {...props}>
@@ -126,23 +113,14 @@ export const Post = ({ metadata, mdxSource }: Props) => (
               {...props}
               style={{ maxWidth: 'none' }}
               w="full"
-              height="70vh"
+              h="auto"
+              py="0"
               className="w-full"
               bgGradient={undefined}
+              polygonsBaseTop="0px"
             />
           ),
-          table: (props) => (
-            <TableContainer>
-              <Table {...props} />
-            </TableContainer>
-          ),
-          thead: Thead,
-          tbody: Tbody,
-          th: Th,
-          td: Td,
-          tfoot: Tfoot,
-          tr: Tr,
-          caption: TableCaption,
+          Table,
         }}
       />
     </Stack>

apps/landing-page/app/blog/[slug]/Table.tsx

@@ -0,0 +1,37 @@
+import {
+  Table as ChakraTable,
+  TableContainer,
+  Tbody,
+  Td,
+  Th,
+  Thead,
+  Tr,
+} from '@chakra-ui/react'
+
+type Props = {
+  headers: string[]
+  rows: string[][]
+}
+
+export const Table = ({ headers, rows }: Props) => (
+  <TableContainer maxW="60rem">
+    <ChakraTable>
+      <Thead>
+        <Tr>
+          {headers.map((header, index) => (
+            <Th key={index}>{header}</Th>
+          ))}
+        </Tr>
+      </Thead>
+      <Tbody>
+        {rows.map((row, index) => (
+          <Tr key={index}>
+            {row.map((cell, cellIndex) => (
+              <Td key={cellIndex}>{cell}</Td>
+            ))}
+          </Tr>
+        ))}
+      </Tbody>
+    </ChakraTable>
+  </TableContainer>
+)

apps/landing-page/app/blog/page.tsx

@@ -2,8 +2,9 @@ import { getBlogPosts } from '@/app/db/blog'
 import { Posts } from './Posts'
 
 export const metadata = {
-  title: 'Blog',
-  description: 'Read my thoughts on software development, design, and more.',
+  title: 'Typebot Blog',
+  description:
+    'The official Typebot blog where we share our thoughts and tips on everything related to chatbots, conversational marketing, customer support and more.',
 }
 
 export default function Home() {

apps/landing-page/assets/prose.css

@@ -15,7 +15,8 @@
 }
 
 .prose > * {
-  max-width: 65ch;
+  width: 100%;
+  max-width: 46rem;
   margin-left: auto;
   margin-right: auto;
 }

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

@@ -12,7 +12,12 @@ import Link from 'next/link'
 import React from 'react'
 import { BackgroundPolygons } from './Hero/BackgroundPolygons'
 
-export const EndCta = (props: StackProps) => {
+type Props = {
+  heading?: string
+  polygonsBaseTop?: string
+} & StackProps
+
+export const EndCta = (props: Props) => {
   return (
     <VStack
       as="section"
@@ -23,22 +28,24 @@ export const EndCta = (props: StackProps) => {
       justifyContent="center"
       {...props}
     >
-      <BackgroundPolygons />
+      <BackgroundPolygons baseTop={props.polygonsBaseTop} />
       <VStack
         spacing="6"
-        maxW="2xl"
+        maxW="3xl"
         mx="auto"
         px={{ base: '6', lg: '8' }}
         py={{ base: '16', sm: '20' }}
         textAlign="center"
       >
-        <Heading
-          fontWeight="extrabold"
-          letterSpacing="tight"
-          data-aos="fade-up"
-        >
-          Improve conversion and user engagement with typebots
-        </Heading>
+        {props.heading ? (
+          <Heading
+            fontWeight="extrabold"
+            letterSpacing="tight"
+            data-aos="fade-up"
+          >
+            {props.heading}
+          </Heading>
+        ) : null}
         <Flex>
           <Button
             as={Link}

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

@@ -1,7 +1,10 @@
 import { chakra } from '@chakra-ui/react'
 import React from 'react'
 
-export const BackgroundPolygons = () => {
+type Props = {
+  baseTop?: string
+}
+export const BackgroundPolygons = ({ baseTop = '100px' }: Props) => {
   return (
     <>
       <chakra.div
@@ -9,7 +12,7 @@ export const BackgroundPolygons = () => {
         className="floating animation-delay-3000"
         pos="absolute"
         left="0px"
-        top="100px"
+        top={baseTop}
         data-aos="fade"
         data-aos-delay="200"
       >
@@ -20,7 +23,7 @@ export const BackgroundPolygons = () => {
         className="floating animation-delay-4000"
         pos="absolute"
         right="-10px"
-        top="30px"
+        top={`calc(${baseTop} - '70px')`}
         data-aos="fade"
         data-aos-delay="200"
       >

apps/landing-page/content/landbot-alternative.mdx

@@ -0,0 +1,115 @@
+---
+title: 'Top 5 Alternatives to Landbot'
+summary: 'Discover the top 5 Landbot alternatives for creating engaging chatbots without coding. Compare features, pricing, and integrations to find the best fit.'
+publishedAt: '2024-04-19'
+---
+
+**Chatbots have become an essential tool for modern businesses looking to enhance customer engagement and streamline support.** With the right chatbot platform, you can create interactive experiences that guide users, answer questions, and even close sales.
+
+Landbot has been a popular choice, but is it the best fit for your needs? **In this article, we'll explore the top 5 Landbot alternatives, comparing features, pricing, and integration options to help you make an informed decision.**
+
+## Understanding Chatbots
+
+**Chatbots play a crucial role in modern business by providing 24/7 customer support, automating lead generation, and streamlining processes.** They can handle a wide range of tasks, from answering FAQs to guiding users through complex workflows. However, not all chatbots are created equal.
+
+To identify which type of chatbot suits your business needs, consider the following:
+
+1. **Complexity of interactions:** Do you need a simple Q&A bot or a more advanced conversational flow? Determine the level of complexity required for your chatbot to effectively engage with your customers and address their needs.
+2. **Channels:** Where do you want to deploy your chatbot? Consider whether you want to integrate the chatbot on your website, messaging apps, or across multiple platforms to maximize its reach and accessibility.
+3. **Integrations:** What other tools and services do you need your chatbot to work with? Ensure that the chatbot platform you choose can seamlessly integrate with your existing systems, such as CRM, payment gateways, or analytics tools.
+4. **Customization:** How much control do you need over the chatbot's appearance and behavior? Look for a platform that offers flexibility in designing the chatbot's interface, defining its personality, and tailoring its responses to align with your brand's voice and tone.
+
+By understanding these factors, you can narrow down your options and find the chatbot platform that aligns with your goals and requirements. Choosing the right chatbot alternative to Landbot will help you create engaging conversational experiences for your customers and drive business growth.
+
+## Other Alternatives to Landbot
+
+While Landbot is a popular choice for building chatbots, there are several compelling alternatives worth considering. Let's take a closer look at some of the top options and how they compare to Landbot:
+
+### 1. Typebot
+
+Typebot is an open-source chatbot builder that stands out for its powerful visual builder, ability to embed chatbots anywhere, and real-time data collection. Here are some key advantages of Typebot compared to Landbot:
+
+- **More generous Free plan** with 200 chats included in Typebot, almost all building blocks available.
+- **Intuitive drag-and-drop interface** with over 30 building blocks for creating complex chatbot flows without coding
+- **Embed anywhere** using a fast native JS library, without iframes or external dependencies
+- **Real-time results collection** stored in a table view for easy analysis
+- **Full customization** options to match your brand's look and feel
+- **Native integrations** with popular services like Google Sheets, Zapier, OpenAI, HTTP requests and more
+- **Open-source and flexible**, with no vendor lock-in and easy-to-use APIs
+- **In-depth analytics** like drop-off rates and completion rates
+
+<Table
+  headers={['Feature', 'Typebot', 'Landbot']}
+  rows={[
+    [
+      'Pricing',
+      'Free plan, $39/mo Starter, $99/mo Pro',
+      'Free plan, €40/mo Starter, €150/mo Pro, €400/mo Business',
+    ],
+    [
+      'Integrations',
+      'Google Sheets, Webhooks, Zapier, Make, SendGrid',
+      'Dialogflow, Salesforce, Slack, Google Sheets, Zapier, Mailchimp',
+    ],
+    [
+      'Customization',
+      'Full theme customization, custom CSS',
+      'Limited theme options',
+    ],
+  ]}
+/>
+
+<Youtube id="u8FZHvlYviw" />
+
+While Typebot is a newer player compared to Landbot, its powerful features and open-source flexibility make it a compelling choice, especially for those who value control over their data.
+
+### 2. ChatBot
+
+<Image src="/images/blog/chatbot_com_website.png" alt="Chatbot.com website" />
+ChatBot offers a user-friendly drag-and-drop conversation builder with multiple bot
+response formats. Key features include:
+
+- Test chatbots before launching
+- Customizable chat widget
+- Onboarding lessons and templates
+- Integrations with LiveChat, Facebook Messenger, Zapier, WordPress, Shopify, and more
+
+Pricing starts at **$52/month for small companies** after a 14-day free trial, with plans scaling up for larger needs.
+
+### 3. ManyChat
+
+<Image src="/images/blog/manychat_website.png" alt="ManyChat website" />
+
+ManyChat is a chatbot platform focused on Facebook Messenger and Instagram. It provides:
+
+- Visual flow builder for creating chatbot sequences
+- Broadcasts, drip campaigns, customer segmentation
+- Integrations with Zapier, Shopify, Mailchimp, and more
+
+Pricing includes a free plan for 1K contacts, with pro plans starting at **$15/mo that scale based on number of contacts**.
+
+### 4. Collect.chat
+
+<Image src="/images/blog/collect_chat_website.png" alt="Collect.chat website" />
+
+Collect.chat is a chatbot platform that allows you to create conversational forms and surveys. It offers:
+
+- Easy-to-use drag-and-drop builder
+- Conditional logic and branching
+- Integrations with Slack, Google Sheets, Zapier, and more
+
+Pricing starts at **$29/month for the Basic plan**, with higher tiers for additional features and responses.
+
+When comparing pricing and features between these alternatives and Landbot, it's important to consider your specific needs and budget. While Landbot offers a robust feature set, options like Typebot and ManyChat may provide more flexibility and better value depending on your use case.
+
+### 5. Typeform
+
+<Image src="/images/blog/typeform_website.png" alt="Tyepform website" />
+
+While not a traditional chatbot platform, Typeform allows you to create interactive forms and surveys that can mimic conversational experiences. It's a good choice if you need to collect structured data from users. Typeform's engaging interface can help increase completion rates compared to standard forms.
+
+## Try Typebot Today
+
+If you're ready to take your chatbot experience to the next level, why not give Typebot a try? Its generous free plan, intuitive interface, and extensive customization options make it a compelling alternative to Landbot.
+
+<Cta heading="Tap into the power of a free chatbot today and see the difference for yourself." />

apps/landing-page/pages/about.tsx

@@ -97,7 +97,7 @@ const AboutPage = () => {
           tutorials.
         </Text>
       </Stack>
-      <EndCta />
+      <EndCta heading="Improve conversion and user engagement with typebots" />
       <Footer />
     </div>
   )

apps/landing-page/pages/index.tsx

@@ -23,7 +23,7 @@ const App = () => {
       <RealTimeResults />
       <Features />
       <Testimonials />
-      <EndCta />
+      <EndCta heading="Improve conversion and user engagement with typebots" />
       <Footer />
     </Stack>
   )