diff --git a/apps/docs/contribute/guides/blog.mdx b/apps/docs/contribute/guides/blog.mdx
index 444cf254f..111e58495 100644
--- a/apps/docs/contribute/guides/blog.mdx
+++ b/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: `
-
+
{metadata.title}
{formatDate(metadata.publishedAt)}
@@ -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"
>
(
// eslint-disable-next-line @typescript-eslint/no-explicit-any
link: (props: any) =>
@@ -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) => (
-
-
-
- ),
- thead: Thead,
- tbody: Tbody,
- th: Th,
- td: Td,
- tfoot: Tfoot,
- tr: Tr,
- caption: TableCaption,
+ Table,
}}
/>
diff --git a/apps/landing-page/app/blog/[slug]/Table.tsx b/apps/landing-page/app/blog/[slug]/Table.tsx
new file mode 100644
index 000000000..b9aa67fe8
--- /dev/null
+++ b/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) => (
+
+
+
+
+ {headers.map((header, index) => (
+ {header}
+ ))}
+
+
+
+ {rows.map((row, index) => (
+
+ {row.map((cell, cellIndex) => (
+ {cell}
+ ))}
+
+ ))}
+
+
+
+)
diff --git a/apps/landing-page/app/blog/page.tsx b/apps/landing-page/app/blog/page.tsx
index fb4c6c248..56266e335 100644
--- a/apps/landing-page/app/blog/page.tsx
+++ b/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() {
diff --git a/apps/landing-page/assets/prose.css b/apps/landing-page/assets/prose.css
index 5b6c9cfc5..212594d18 100644
--- a/apps/landing-page/assets/prose.css
+++ b/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;
}
diff --git a/apps/landing-page/components/Homepage/EndCta.tsx b/apps/landing-page/components/Homepage/EndCta.tsx
index 5f6772331..a00ab74d5 100644
--- a/apps/landing-page/components/Homepage/EndCta.tsx
+++ b/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 (
{
justifyContent="center"
{...props}
>
-
-
- Improve conversion and user engagement with typebots
-
+ {props.heading ? (
+
+ {props.heading}
+
+ ) : null}
{
+type Props = {
+ baseTop?: string
+}
+export const BackgroundPolygons = ({ baseTop = '100px' }: Props) => {
return (
<>
{
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"
>
diff --git a/apps/landing-page/content/landbot-alternative.mdx b/apps/landing-page/content/landbot-alternative.mdx
new file mode 100644
index 000000000..7473f5174
--- /dev/null
+++ b/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
+
+
+
+
-