2
0

📝 (blog) Improve Image MDX component

This commit is contained in:
Baptiste Arnaud
2024-04-22 19:47:43 +02:00
parent ccc974f5f9
commit 5fb20e36eb
7 changed files with 29 additions and 8 deletions

View File

@@ -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) => <Link {...props} />,
Image: (props) => (
<Image rounded="md" maxW={['full', '46rem']} {...props} />
<Image {...props} style={{ borderRadius: '.5rem' }} />
),
Callout: ({ children, ...props }) => (
<Alert rounded="md" {...props}>

View File

@@ -65,7 +65,12 @@ While Typebot is a newer player compared to Landbot, its powerful features and o
### 2. ChatBot
<Image src="/images/blog/chatbot_com_website.png" alt="Chatbot.com website" />
<Image
src="/images/blog/landbot-alternative/chatbot-com-website.png"
alt="Chatbot.com website"
width={2000}
height={1199}
/>
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
<Image src="/images/blog/manychat_website.png" alt="ManyChat website" />
<Image
src="/images/blog/landbot-alternative/manychat-website.png"
alt="ManyChat website"
width={2000}
height={1038}
/>
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
<Image src="/images/blog/collect_chat_website.png" alt="Collect.chat website" />
<Image
src="/images/blog/landbot-alternative/collect-chat-website.png"
alt="Collect.chat website"
width={2000}
height={1031}
/>
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
<Image src="/images/blog/typeform_website.png" alt="Tyepform website" />
<Image
src="/images/blog/landbot-alternative/typeform-website.png"
alt="Tyepform website"
width={2000}
height={1241}
/>
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.

View File

Before

Width:  |  Height:  |  Size: 922 KiB

After

Width:  |  Height:  |  Size: 922 KiB

View File

Before

Width:  |  Height:  |  Size: 227 KiB

After

Width:  |  Height:  |  Size: 227 KiB

View File

Before

Width:  |  Height:  |  Size: 220 KiB

After

Width:  |  Height:  |  Size: 220 KiB