diff --git a/apps/docs/contribute/guides/blog.mdx b/apps/docs/contribute/guides/blog.mdx index 111e58495..c2fa43e63 100644 --- a/apps/docs/contribute/guides/blog.mdx +++ b/apps/docs/contribute/guides/blog.mdx @@ -37,11 +37,11 @@ summary: 'A short summary of the blog post.' By default the og image is generated from the title of the blog post. If you want to use a custom og image, you can specify a `image` field in the frontmatter. -All images need to be placed under the `public/images/blog/` folder where `` is the name of the mdx file you are creating/editing. +All images need to be placed under the `public/images/blog/` folder where `` is the name of the mdx file you are creating/editing. The image file name should be in lowercase and separated by `-`. Here are all the components you can use in your blog post: -- `Image`: To display an image. Example: `My awesome image` +- `Image`: To display an image. `width` and `height` props are required and must match the actual size of the image. Example: `My awesome image` - `Callout`: To display a callout. Example: `This is an info callout`. You can provide a `status` prop with the value `info`, `warning`, `success`, or `error`. - `Tweet`: To embed a tweet. Example: `` - `Typebot`: To embed a typebot as a Standard component. Example: ``. You can provide the same props as the [Standard component](../../deploy/web/libraries/react#standard). diff --git a/apps/landing-page/app/blog/[slug]/Post.tsx b/apps/landing-page/app/blog/[slug]/Post.tsx index 08cf5b02a..52f5fdda3 100644 --- a/apps/landing-page/app/blog/[slug]/Post.tsx +++ b/apps/landing-page/app/blog/[slug]/Post.tsx @@ -2,13 +2,14 @@ 'use client' import { Link } from '@chakra-ui/next-js' -import { Alert, AlertIcon, Heading, Stack, Text, Image } from '@chakra-ui/react' +import { Alert, AlertIcon, Heading, Stack, Text } 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' +import Image from 'next/image' type Props = { metadata: { @@ -50,7 +51,7 @@ export const Post = ({ metadata, mdxSource }: Props) => ( // eslint-disable-next-line @typescript-eslint/no-explicit-any link: (props: any) => , Image: (props) => ( - + ), Callout: ({ children, ...props }) => ( diff --git a/apps/landing-page/content/landbot-alternative.mdx b/apps/landing-page/content/landbot-alternative.mdx index 7473f5174..8692567bd 100644 --- a/apps/landing-page/content/landbot-alternative.mdx +++ b/apps/landing-page/content/landbot-alternative.mdx @@ -65,7 +65,12 @@ While Typebot is a newer player compared to Landbot, its powerful features and o ### 2. ChatBot -Chatbot.com website +Chatbot.com website ChatBot offers a user-friendly drag-and-drop conversation builder with multiple bot response formats. Key features include: @@ -78,7 +83,12 @@ Pricing starts at **$52/month for small companies** after a 14-day free trial, w ### 3. ManyChat -ManyChat website +ManyChat website ManyChat is a chatbot platform focused on Facebook Messenger and Instagram. It provides: @@ -90,7 +100,12 @@ Pricing includes a free plan for 1K contacts, with pro plans starting at **$15/m ### 4. Collect.chat -Collect.chat website +Collect.chat website Collect.chat is a chatbot platform that allows you to create conversational forms and surveys. It offers: @@ -104,7 +119,12 @@ When comparing pricing and features between these alternatives and Landbot, it's ### 5. Typeform -Tyepform website +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. diff --git a/apps/landing-page/public/images/blog/chatbot_com_website.png b/apps/landing-page/public/images/blog/landbot-alternative/chatbot-com-website.png similarity index 100% rename from apps/landing-page/public/images/blog/chatbot_com_website.png rename to apps/landing-page/public/images/blog/landbot-alternative/chatbot-com-website.png diff --git a/apps/landing-page/public/images/blog/collect_chat_website.png b/apps/landing-page/public/images/blog/landbot-alternative/collect-chat-website.png similarity index 100% rename from apps/landing-page/public/images/blog/collect_chat_website.png rename to apps/landing-page/public/images/blog/landbot-alternative/collect-chat-website.png diff --git a/apps/landing-page/public/images/blog/manychat_website.png b/apps/landing-page/public/images/blog/landbot-alternative/manychat-website.png similarity index 100% rename from apps/landing-page/public/images/blog/manychat_website.png rename to apps/landing-page/public/images/blog/landbot-alternative/manychat-website.png diff --git a/apps/landing-page/public/images/blog/typeform_website.png b/apps/landing-page/public/images/blog/landbot-alternative/typeform-website.png similarity index 100% rename from apps/landing-page/public/images/blog/typeform_website.png rename to apps/landing-page/public/images/blog/landbot-alternative/typeform-website.png