📝 (blog) Improve Image MDX component

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/<POST_FILENAME>` folder where `<POST_FILENAME>` is the name of the mdx file you are creating/editing.
+All images need to be placed under the `public/images/blog/<POST_FILENAME>` folder where `<POST_FILENAME>` 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: `<Image src="/images/blog/my-awesome-blog-post/image.jpg" alt="My awesome image" />`
+- `Image`: To display an image. `width` and `height` props are required and must match the actual size of the image. Example: `<Image src="/images/blog/my-awesome-blog-post/image.jpg" alt="My awesome image" width={800} height={600} />`
 - `Callout`: To display a callout. Example: `<Callout status="info">This is an info callout</Callout>`. You can provide a `status` prop with the value `info`, `warning`, `success`, or `error`.
 - `Tweet`: To embed a tweet. Example: `<Tweet id="1234567890123456789" />`
 - `Typebot`: To embed a typebot as a Standard component. Example: `<Typebot typebot="<YOUR_BOT_PUBLIC_ID>" />`. You can provide the same props as the [Standard component](../../deploy/web/libraries/react#standard).

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

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
 
-<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.