diff --git a/apps/landing-page/next.config.mjs b/apps/landing-page/next.config.mjs
index e5b77c0deb..58f34ff08e 100644
--- a/apps/landing-page/next.config.mjs
+++ b/apps/landing-page/next.config.mjs
@@ -1,3 +1,4 @@
+import createMDX from "@next/mdx";
 import { configureRuntimeEnv } from "next-runtime-env/build/configure.js";
 
 configureRuntimeEnv();
@@ -7,7 +8,8 @@ const nextConfig = {
   eslint: {
     ignoreDuringBuilds: true,
   },
-  transpilePackages: ["utils", "models"],
+  transpilePackages: ["@typebot.io/lib"],
+  pageExtensions: ["mdx", "ts", "tsx"],
   async redirects() {
     return [
       {
@@ -38,4 +40,6 @@ const nextConfig = {
   },
 };
 
-export default nextConfig;
+const withMDX = createMDX({});
+
+export default withMDX(nextConfig);
diff --git a/apps/landing-page/package.json b/apps/landing-page/package.json
index 75bee9025e..8df063bc6f 100644
--- a/apps/landing-page/package.json
+++ b/apps/landing-page/package.json
@@ -15,17 +15,21 @@
     "@chakra-ui/react": "2.8.2",
     "@emotion/react": "11.11.4",
     "@emotion/styled": "11.11.5",
+    "@mdx-js/loader": "3.0.1",
+    "@mdx-js/react": "3.0.1",
+    "@next/mdx": "14.2.15",
     "@typebot.io/billing": "workspace:*",
+    "@typebot.io/env": "workspace:*",
     "@typebot.io/lib": "workspace:*",
     "@typebot.io/nextjs": "workspace:*",
     "@typebot.io/prisma": "workspace:*",
     "@typebot.io/typebot": "workspace:*",
-    "@typebot.io/env": "workspace:*",
+    "@types/mdx": "2.0.13",
     "aos": "2.3.4",
+    "fast-glob": "^3.3.2",
     "focus-visible": "5.2.0",
     "framer-motion": "11.1.7",
     "next": "14.2.13",
-    "next-mdx-remote": "4.4.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-tweet": "3.2.1",
diff --git a/apps/landing-page/src/app/blog/[slug]/Post.tsx b/apps/landing-page/src/app/blog/[slug]/Post.tsx
deleted file mode 100644
index 155812fa7f..0000000000
--- a/apps/landing-page/src/app/blog/[slug]/Post.tsx
+++ /dev/null
@@ -1,191 +0,0 @@
-/* eslint-disable jsx-a11y/alt-text */
-"use client";
-
-import { EndCta } from "@/components/Homepage/EndCta";
-import { Link } from "@chakra-ui/next-js";
-import {
-  Alert,
-  AlertIcon,
-  AlertTitle,
-  Heading,
-  Stack,
-  Text,
-} from "@chakra-ui/react";
-import { Standard } from "@typebot.io/nextjs";
-import { MDXRemote, type MDXRemoteSerializeResult } from "next-mdx-remote";
-import Image from "next/image";
-import { highlight } from "sugar-high";
-import { Table } from "./Table";
-import { Tweet } from "./Tweet";
-
-type Props = {
-  metadata: {
-    title: string;
-    publishedAt: string;
-  };
-  mdxSource: MDXRemoteSerializeResult;
-};
-
-export const Post = ({ metadata, mdxSource }: Props) => (
-  <Stack spacing={10} my="20" w="full">
-    <Stack mx="auto" w="full" maxW={["full", "46rem"]} px={[3, 3, 0]}>
-      <Heading>{metadata.title}</Heading>
-      <Text>{formatDate(metadata.publishedAt)}</Text>
-    </Stack>
-    <Stack
-      mx="auto"
-      spacing={0}
-      as="article"
-      px={3}
-      w="full"
-      className="prose prose-quoteless prose-neutral prose-invert max-w-none"
-    >
-      <MDXRemote
-        {...mdxSource}
-        components={{
-          h1: (props) => <Heading as="h1" {...props} />,
-          h2: (props) => <Heading as="h2" fontSize="3xl" {...props} />,
-          h3: (props) => <Heading as="h3" fontSize="2xl" {...props} />,
-          h4: (props) => <Heading as="h4" fontSize="xl" {...props} />,
-          h5: (props) => <Heading as="h5" fontSize="lg" {...props} />,
-          h6: (props) => <Heading as="h6" fontSize="md" {...props} />,
-          code: ({ children, ...props }) => {
-            if (!props.className || props.className?.includes("md"))
-              return <code {...props}>{children}</code>;
-            const hightlightedCode = highlight(children?.toString() ?? "");
-            return (
-              <code
-                dangerouslySetInnerHTML={{ __html: hightlightedCode }}
-                {...props}
-              />
-            );
-          },
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          link: (props: any) => <Link {...props} />,
-          Image: (props) => (
-            <Image
-              style={{
-                borderRadius: ".5rem",
-                ...props.style,
-              }}
-              {...props}
-            />
-          ),
-          Callout: ({ children, title, ...props }) => (
-            <Alert rounded="md" {...props}>
-              <AlertIcon />
-              {title ? <AlertTitle>{title}</AlertTitle> : null}
-              {children}
-            </Alert>
-          ),
-          Tweet,
-          Typebot: (props) => (
-            <Standard
-              style={{
-                borderRadius: "0.375rem",
-                borderWidth: "1px",
-                height: "533px",
-                ...props.style,
-              }}
-              {...props}
-            />
-          ),
-          Youtube: ({ id }: { id: string }) => (
-            <div className="w-full">
-              <div
-                style={{
-                  position: "relative",
-                  paddingBottom: "64.63195691202873%",
-                  height: 0,
-                  width: "100%",
-                }}
-              >
-                <iframe
-                  title="Youtube video"
-                  src={`https://www.youtube.com/embed/${id}`}
-                  allowFullScreen
-                  style={{
-                    position: "absolute",
-                    top: 0,
-                    left: 0,
-                    width: "100%",
-                    height: "100%",
-                  }}
-                />
-              </div>
-            </div>
-          ),
-          Loom: ({ id }: { id: string }) => (
-            <div className="w-full">
-              <div
-                style={{
-                  position: "relative",
-                  paddingBottom: "64.63195691202873%",
-                  height: 0,
-                  width: "100%",
-                }}
-              >
-                <iframe
-                  title="Loom video"
-                  src={`https://www.loom.com/embed/${id}`}
-                  allowFullScreen
-                  style={{
-                    position: "absolute",
-                    top: 0,
-                    left: 0,
-                    width: "100%",
-                    height: "100%",
-                  }}
-                />
-              </div>
-            </div>
-          ),
-          Cta: (props) => (
-            <EndCta
-              style={{ maxWidth: "none", ...props.style }}
-              w="full"
-              h="auto"
-              py="0"
-              className="w-full"
-              bgGradient={undefined}
-              polygonsBaseTop="0px"
-              {...props}
-            />
-          ),
-          Table,
-        }}
-      />
-    </Stack>
-  </Stack>
-);
-
-function formatDate(date: string) {
-  const currentDate = new Date().getTime();
-  const dateWithTimezone = date.includes("T") ? date : `${date}T00:00:00`;
-  const targetDate = new Date(dateWithTimezone).getTime();
-  const timeDifference = Math.abs(currentDate - targetDate);
-  const daysAgo = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
-
-  const fullDate = new Date(dateWithTimezone).toLocaleString("en-us", {
-    month: "long",
-    day: "numeric",
-    year: "numeric",
-  });
-
-  if (daysAgo < 1) {
-    return "Today";
-  }
-  if (daysAgo < 7) {
-    return `${fullDate} (${daysAgo}d ago)`;
-  }
-  if (daysAgo < 30) {
-    const weeksAgo = Math.floor(daysAgo / 7);
-    return `${fullDate} (${weeksAgo}w ago)`;
-  }
-  if (daysAgo < 365) {
-    const monthsAgo = Math.floor(daysAgo / 30);
-    return `${fullDate} (${monthsAgo}mo ago)`;
-  }
-  const yearsAgo = Math.floor(daysAgo / 365);
-  return `${fullDate} (${yearsAgo}y ago)`;
-}
diff --git a/apps/landing-page/src/app/blog/[slug]/page.tsx b/apps/landing-page/src/app/blog/[slug]/page.tsx
deleted file mode 100644
index a3c53c2d88..0000000000
--- a/apps/landing-page/src/app/blog/[slug]/page.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import { getBlogPosts } from "@/app/db/blog";
-import type { Metadata } from "next";
-import { serialize } from "next-mdx-remote/serialize";
-import { notFound } from "next/navigation";
-import { Post } from "./Post";
-import "@/assets/prose.css";
-import { env } from "@typebot.io/env";
-
-export async function generateMetadata({
-  params,
-}: {
-  params: { slug: string };
-}): Promise<Metadata | undefined> {
-  const post = getBlogPosts().find(
-    (post) => post.slug === params.slug && post.metadata.publishedAt,
-  );
-  if (!post) {
-    return;
-  }
-
-  const {
-    title,
-    publishedAt: publishedTime,
-    summary: description,
-    image,
-  } = post.metadata;
-  const ogImage = image
-    ? `${env.LANDING_PAGE_URL}${image}`
-    : `${env.LANDING_PAGE_URL}/og?title=${title}`;
-
-  return {
-    title,
-    description,
-    openGraph: {
-      title,
-      description,
-      type: "article",
-      publishedTime,
-      url: `${env.LANDING_PAGE_URL}/blog/${post.slug}`,
-      images: [
-        {
-          url: ogImage,
-        },
-      ],
-    },
-    twitter: {
-      card: "summary_large_image",
-      title,
-      description,
-      images: [ogImage],
-    },
-  };
-}
-
-export default async function Blog({ params }: { params: { slug: string } }) {
-  const post = getBlogPosts().find(
-    (post) => post.slug === params.slug && post.metadata.publishedAt,
-  );
-
-  if (!post) {
-    notFound();
-  }
-
-  const mdxSource = await serialize(post.content);
-
-  return <Post metadata={post.metadata} mdxSource={mdxSource} />;
-}
diff --git a/apps/landing-page/content/add-chatbot-to-wordpress.mdx b/apps/landing-page/src/app/blog/add-chatbot-to-wordpress/page.mdx
similarity index 96%
rename from apps/landing-page/content/add-chatbot-to-wordpress.mdx
rename to apps/landing-page/src/app/blog/add-chatbot-to-wordpress/page.mdx
index 89a3fc23e9..2938c7b3ba 100644
--- a/apps/landing-page/content/add-chatbot-to-wordpress.mdx
+++ b/apps/landing-page/src/app/blog/add-chatbot-to-wordpress/page.mdx
@@ -1,8 +1,16 @@
----
-title: 'How to Add Chatbot in WordPress: Quick and Easy Way'
-description: 'Learn how to add a chatbot to your WordPress site using Typebot.'
-publishedAt: '2024-06-20'
----
+import Post from "@/features/blog/components/Post";
+import { generateMetadata } from "@/features/blog/helpers";
+
+export const post = {
+  title: "How to Add Chatbot in WordPress: Quick and Easy Way",
+  description:
+    "Learn how to add a chatbot to your WordPress site using Typebot",
+  postedAt: new Date("2024-06-20"),
+};
+
+export const metadata = generateMetadata(post);
+
+export default (props) => <Post post={post} {...props} />;
 
 Imagine having a virtual assistant that can engage with your website visitors 24/7. It could answer their questions, guide them through your products or services, and even capture leads. That's the power of chatbots. Adding one to your WordPress site is now simpler than ever.
 
diff --git a/apps/landing-page/content/ai-open-source-tools.mdx b/apps/landing-page/src/app/blog/ai-open-source-tools/page.mdx
similarity index 96%
rename from apps/landing-page/content/ai-open-source-tools.mdx
rename to apps/landing-page/src/app/blog/ai-open-source-tools/page.mdx
index cbe05d5e71..1ed6829500 100644
--- a/apps/landing-page/content/ai-open-source-tools.mdx
+++ b/apps/landing-page/src/app/blog/ai-open-source-tools/page.mdx
@@ -1,8 +1,16 @@
----
-title: 'Top 10 AI Open Source Tools for Your Business'
-summary: 'Discover top AI open source tools to boost your business. Learn how these innovative solutions can enhance operations, save costs, and drive growth. Explore now!'
-publishedAt: '2024-09-05'
----
+import Post from "@/features/blog/components/Post";
+import { generateMetadata } from "@/features/blog/helpers";
+
+export const post = {
+  title: "Top 10 AI Open Source Tools for Your Business",
+  description:
+    "Disover top AI open source tools to boost your business. Learn how these innovative solutions can enhance operations, save costs, and drive growth. Explore now!",
+  postedAt: new Date("2024-09-05"),
+};
+
+export const metadata = generateMetadata(post);
+
+export default (props) => <Post post={post} {...props} />;
 
 **[Open-source](https://typebot.io/blog/open-source-chatbots) AI tools** offer powerful solutions without breaking the bank or sacrificing data control. These tools are changing how businesses innovate. From collaborative AI agents to local language models, this article explores the top 10 AI open source tools that can enhance your operations. Learn how these technologies are making new opportunities available for businesses of all sizes.
 
diff --git a/apps/landing-page/content/benefits-ai-chatbot.mdx b/apps/landing-page/src/app/blog/benefits-ai-chatbot/page.mdx
similarity index 94%
rename from apps/landing-page/content/benefits-ai-chatbot.mdx
rename to apps/landing-page/src/app/blog/benefits-ai-chatbot/page.mdx
index 24995413db..30ec24bf14 100644
--- a/apps/landing-page/content/benefits-ai-chatbot.mdx
+++ b/apps/landing-page/src/app/blog/benefits-ai-chatbot/page.mdx
@@ -1,8 +1,16 @@
----
-title: '16 Benefits of AI Chatbots that will Convince Skeptics'
-summary: 'Discover 16 game-changing benefits of AI chatbots that boost customer service, drive sales, and cut costs. Learn how to implement this powerful tool for your business success.'
-publishedAt: '2024-07-31'
----
+import Post from "@/features/blog/components/Post";
+import { generateMetadata } from "@/features/blog/helpers";
+
+export const post = {
+  title: "16 Benefits of AI Chatbots that will Convince Skeptics",
+  description:
+    "Discover 16 game-changing benefits of AI chatbots that boost customer service, drive sales, and cut costs. Learn how to implement this powerful tool for your business success.",
+  postedAt: new Date("2024-07-31"),
+};
+
+export const metadata = generateMetadata(post);
+
+export default (props) => <Post post={post} {...props} />;
 
 AI chatbots offer **round-the-clock customer service**, speak multiple languages, and learn from every interaction. These digital assistants don't just cut response times—they also help boost sales.
 
diff --git a/apps/landing-page/content/best-chatbot-for-wordpress.mdx b/apps/landing-page/src/app/blog/best-chatbot-for-wordpress/page.mdx
similarity index 98%
rename from apps/landing-page/content/best-chatbot-for-wordpress.mdx
rename to apps/landing-page/src/app/blog/best-chatbot-for-wordpress/page.mdx
index 1d3b80c5b1..1020d8fc2e 100644
--- a/apps/landing-page/content/best-chatbot-for-wordpress.mdx
+++ b/apps/landing-page/src/app/blog/best-chatbot-for-wordpress/page.mdx
@@ -1,8 +1,16 @@
----
-title: 'Top 10 Best Chatbot for Your Wordpress Website in 2024'
-summary: 'Discover the top 10 WordPress chatbot plugins to boost customer service, generate leads, and increase engagement. Find the best fit for your website'
-publishedAt: '2024-05-02'
----
+import Post from "@/features/blog/components/Post";
+import { generateMetadata } from "@/features/blog/helpers";
+
+export const post = {
+  title: "Top 10 Best Chatbot for Your Wordpress Website in 2024",
+  description:
+    "Discover the top 10 WordPress chatbot plugins to boost customer service, generate leads, and increase engagement. Find the best fit for your website",
+  postedAt: new Date("2024-05-02"),
+};
+
+export const metadata = generateMetadata(post);
+
+export default (props) => <Post post={post} {...props} />;
 
 **Seamless communication with customers is crucial for business success**. As more interactions move online, chatbots have emerged as a game-changer, enabling 24/7 support and personalized engagement.
 
diff --git a/apps/landing-page/content/best-crm-for-shopify.mdx b/apps/landing-page/src/app/blog/best-crm-for-shopify/page.mdx
similarity index 96%
rename from apps/landing-page/content/best-crm-for-shopify.mdx
rename to apps/landing-page/src/app/blog/best-crm-for-shopify/page.mdx
index b9089f8483..001352b4d7 100644
--- a/apps/landing-page/content/best-crm-for-shopify.mdx
+++ b/apps/landing-page/src/app/blog/best-crm-for-shopify/page.mdx
@@ -1,8 +1,16 @@
----
-title: 'Top 5 Best CRM for Shopify'
-description: 'Discover the best CRM solutions for Shopify to boost customer engagement. Streamline interactions, and automate tasks with our top picks and expert tips.'
-publishedAt: '2024-06-14'
----
+import Post from "@/features/blog/components/Post";
+import { generateMetadata } from "@/features/blog/helpers";
+
+export const post = {
+  title: "Top 10 Best Chatbot for Your Wordpress Website in 2024",
+  description:
+    "Discover the best CRM solutions to boost customer service, generate leads, and increase engagement. Find the best fit for your website",
+  postedAt: new Date("2024-06-14"),
+};
+
+export const metadata = generateMetadata(post);
+
+export default (props) => <Post post={post} {...props} />;
 
 A powerful CRM tool can greatly improve **customer interactions** and enhance **sales and marketing efforts**. The right CRM solution for your Shopify store can help you deliver fantastic customer experiences. This, in turn, helps you stand out and grow in the competitive eCommerce world.
 
diff --git a/apps/landing-page/content/best-marketing-chatgpt-prompts.mdx b/apps/landing-page/src/app/blog/best-marketing-chatgpt-prompts/page.mdx
similarity index 97%
rename from apps/landing-page/content/best-marketing-chatgpt-prompts.mdx
rename to apps/landing-page/src/app/blog/best-marketing-chatgpt-prompts/page.mdx
index 6564a8c5f8..0b90ae382d 100644
--- a/apps/landing-page/content/best-marketing-chatgpt-prompts.mdx
+++ b/apps/landing-page/src/app/blog/best-marketing-chatgpt-prompts/page.mdx
@@ -1,8 +1,16 @@
----
-title: '10 Best Marketing ChatGPT Prompts for Content Creation and More'
-summary: 'Unlock the power of AI with these 10 best ChatGPT prompts for marketing - from content creation to email campaigns, brainstorming, social media, and more. '
-publishedAt: '2024-05-31'
----
+import Post from "@/features/blog/components/Post";
+import { generateMetadata } from "@/features/blog/helpers";
+
+export const post = {
+  title: "10 Best Marketing ChatGPT Prompts for Content Creation and More",
+  description:
+    "Unlock the power of AI with these 10 best ChatGPT prompts for marketing - from content creation to email campaigns, brainstorming, social media, and more.",
+  postedAt: new Date("2024-05-31"),
+};
+
+export const metadata = generateMetadata(post);
+
+export default (props) => <Post post={post} {...props} />;
 
 Imagine having a marketing assistant who never sleeps, understands your every need, and delivers outstanding content on demand. No, it’s not a dream, it’s the power of ChatGPT.
 
diff --git a/apps/landing-page/content/best-whatsapp-chatbot.mdx b/apps/landing-page/src/app/blog/best-whatsapp-chatbot/page.mdx
similarity index 96%
rename from apps/landing-page/content/best-whatsapp-chatbot.mdx
rename to apps/landing-page/src/app/blog/best-whatsapp-chatbot/page.mdx
index 420a83cdfa..1cefedbe92 100644
--- a/apps/landing-page/content/best-whatsapp-chatbot.mdx
+++ b/apps/landing-page/src/app/blog/best-whatsapp-chatbot/page.mdx
@@ -1,8 +1,16 @@
----
-title: 'Top 5 Best WhatsApp Chatbot Tools Compared'
-summary: 'Discover the top 5 WhatsApp chatbot platforms for businesses in 2024. Compare features, pricing, and use cases to choose the best solution to your business'
-publishedAt: '2024-04-25'
----
+import Post from "@/features/blog/components/Post";
+import { generateMetadata } from "@/features/blog/helpers";
+
+export const post = {
+  title: "Top 5 Best WhatsApp Chatbot Tools Compared",
+  description:
+    "Discover the top 5 WhatsApp chatbot platforms for businesses in 2024. Compare features, pricing, and use cases to choose the best solution to your business",
+  postedAt: new Date("2024-04-25"),
+};
+
+export const metadata = generateMetadata(post);
+
+export default (props) => <Post post={post} {...props} />;
 
 **Did you know that over 2 billion people use WhatsApp worldwide?** With such a massive global user base, it's no wonder businesses are scrambling to leverage WhatsApp as a channel for customer communication and engagement. But with so many chatbot solutions on the market, how do you choose the **best WhatsApp chatbot** for your needs? In this comprehensive guide, we'll compare the top 5 WhatsApp chatbot tools and dive deep into their features, strengths, weaknesses, and ideal use cases.
 
diff --git a/apps/landing-page/content/chatbot-best-practices.mdx b/apps/landing-page/src/app/blog/chatbot-best-practices/page.mdx
similarity index 97%
rename from apps/landing-page/content/chatbot-best-practices.mdx
rename to apps/landing-page/src/app/blog/chatbot-best-practices/page.mdx
index 3f8dde4236..f43b07b5e4 100644
--- a/apps/landing-page/content/chatbot-best-practices.mdx
+++ b/apps/landing-page/src/app/blog/chatbot-best-practices/page.mdx
@@ -1,8 +1,16 @@
----
-title: 'Chatbot Best Practices for 2024'
-summary: 'Discover cutting-edge chatbot best practices for 2024. Boost engagement with non-invasive AI, personalization, and seamless integrations. '
-publishedAt: '2024-09-23'
----
+import Post from "@/features/blog/components/Post";
+import { generateMetadata } from "@/features/blog/helpers";
+
+export const post = {
+  title: "Chatbot Best Practices for 2024",
+  description:
+    "Discover cutting-edge chatbot best practices for 2024. Boost engagement with non-invasive AI, personalization, and seamless integrations. ",
+  postedAt: new Date("2024-09-23"),
+};
+
+export const metadata = generateMetadata(post);
+
+export default (props) => <Post post={post} {...props} />;
 
 In 2024, chatbot design is changing significantly. Chatbots are no longer intrusive, one-size-fits-all bots. They have evolved into sophisticated AI agents that perform tasks seamlessly across multiple channels.
 
diff --git a/apps/landing-page/content/chatbot-com-alternatives.mdx b/apps/landing-page/src/app/blog/chatbot-com-alternatives/page.mdx
similarity index 96%
rename from apps/landing-page/content/chatbot-com-alternatives.mdx
rename to apps/landing-page/src/app/blog/chatbot-com-alternatives/page.mdx
index 3acd12479f..6b34369f97 100644
--- a/apps/landing-page/content/chatbot-com-alternatives.mdx
+++ b/apps/landing-page/src/app/blog/chatbot-com-alternatives/page.mdx
@@ -1,8 +1,16 @@
----
-title: "Chatbot.com Alternatives: Top 5 Chatbot Solutions for 2024"
-summary: "Discover top Chatbot.com alternatives for 2024. Compare features, pricing, and user reviews to find the perfect chatbot solution."
-publishedAt: "2024-07-24"
----
+import Post from "@/features/blog/components/Post";
+import { generateMetadata } from "@/features/blog/helpers";
+
+export const post = {
+  title: "Chatbot.com Alternatives: Top 5 Chatbot Solutions for 2024",
+  description:
+    "Discover top Chatbot.com alternatives for 2024. Compare features, pricing, and user reviews to find the perfect chatbot solution.",
+  postedAt: new Date("2024-07-24"),
+};
+
+export const metadata = generateMetadata(post);
+
+export default (props) => <Post post={post} {...props} />;
 
 Finding the right chatbot solution can make a huge difference for your business. While Chatbot.com has its strengths, you might seek better pricing, tailored features, or enhanced AI capabilities.
 
diff --git a/apps/landing-page/content/chatbot-script-examples.mdx b/apps/landing-page/src/app/blog/chatbot-script-examples/page.mdx
similarity index 97%
rename from apps/landing-page/content/chatbot-script-examples.mdx
rename to apps/landing-page/src/app/blog/chatbot-script-examples/page.mdx
index 021ba0c69d..6d99bdaf65 100644
--- a/apps/landing-page/content/chatbot-script-examples.mdx
+++ b/apps/landing-page/src/app/blog/chatbot-script-examples/page.mdx
@@ -1,8 +1,16 @@
----
-title: 'Creating Powerful Chatbot Script: examples, tips, prompts'
-summary: 'Discover powerful chatbot script examples. Learn tips and best practices for creating conversations that drive results.'
-publishedAt: '2024-08-14'
----
+import Post from "@/features/blog/components/Post";
+import { generateMetadata } from "@/features/blog/helpers";
+
+export const post = {
+  title: "Creating Powerful Chatbot Script: examples, tips, prompts",
+  description:
+    "Discover powerful chatbot script examples. Learn tips and best practices for creating conversations that drive results.",
+  postedAt: new Date("2024-08-14"),
+};
+
+export const metadata = generateMetadata(post);
+
+export default (props) => <Post post={post} {...props} />;
 
 Some chatbots feel like talking to a wall, while others seem to read your mind. The secret lies in the script.
 
diff --git a/apps/landing-page/content/chatfuel-alternatives.mdx b/apps/landing-page/src/app/blog/chatfuel-alternatives/page.mdx
similarity index 95%
rename from apps/landing-page/content/chatfuel-alternatives.mdx
rename to apps/landing-page/src/app/blog/chatfuel-alternatives/page.mdx
index 96907e5d8e..9594f26a6c 100644
--- a/apps/landing-page/content/chatfuel-alternatives.mdx
+++ b/apps/landing-page/src/app/blog/chatfuel-alternatives/page.mdx
@@ -1,8 +1,16 @@
----
-title: "Chatfuel Alternatives: Which Platform Fits Your Business Best?"
-summary: "Discover the best Chatfuel alternatives for building engaging chatbots. Our comprehensive guide explores top platforms, features, and actionable tips."
-publishedAt: "2024-06-03"
----
+import Post from "@/features/blog/components/Post";
+import { generateMetadata } from "@/features/blog/helpers";
+
+export const post = {
+  title: "Chatfuel Alternatives: Which Platform Fits Your Business Best?",
+  description:
+    "Discover the best Chatfuel alternatives for building engaging chatbots. Our comprehensive guide explores top platforms, features, and actionable tips.",
+  postedAt: new Date("2024-06-03"),
+};
+
+export const metadata = generateMetadata(post);
+
+export default (props) => <Post post={post} {...props} />;
 
 Are you tired of Chatfuel's limitations and seeking a more powerful chatbot solution?
 
diff --git a/apps/landing-page/content/create-whatsapp-chatbot.mdx b/apps/landing-page/src/app/blog/create-whatsapp-chatbot/page.mdx
similarity index 97%
rename from apps/landing-page/content/create-whatsapp-chatbot.mdx
rename to apps/landing-page/src/app/blog/create-whatsapp-chatbot/page.mdx
index cc2d977c2d..c8b196dcec 100644
--- a/apps/landing-page/content/create-whatsapp-chatbot.mdx
+++ b/apps/landing-page/src/app/blog/create-whatsapp-chatbot/page.mdx
@@ -1,8 +1,16 @@
----
-title: 'Create WhatsApp Chatbot: A Step-by-Step Guide'
-summary: 'Discover how to create an engaging WhatsApp chatbot with Typebot's intuitive no-code platform.'
-publishedAt: '2024-05-09'
----
+import Post from "@/features/blog/components/Post";
+import { generateMetadata } from "@/features/blog/helpers";
+
+export const post = {
+  title: "Create WhatsApp Chatbot: A Step-by-Step Guide",
+  description:
+    "Discover how to create an engaging WhatsApp chatbot with Typebot's intuitive no-code platform.",
+  postedAt: new Date("2024-05-09"),
+};
+
+export const metadata = generateMetadata(post);
+
+export default (props) => <Post post={post} {...props} />;
 
 Imagine being able to reach your customers or audience instantly. You can do this through the messaging app they use every day - WhatsApp. Create a chatbot for Whatsapp allows you to provide a seamless and convenient way to interact with your audience.
 
diff --git a/apps/landing-page/content/customer-success-manager-job-description.mdx b/apps/landing-page/src/app/blog/customer-success-manager-job-description/page.mdx
similarity index 97%
rename from apps/landing-page/content/customer-success-manager-job-description.mdx
rename to apps/landing-page/src/app/blog/customer-success-manager-job-description/page.mdx
index 242ac00bb9..611571b78e 100644
--- a/apps/landing-page/content/customer-success-manager-job-description.mdx
+++ b/apps/landing-page/src/app/blog/customer-success-manager-job-description/page.mdx
@@ -1,8 +1,16 @@
----
-title: 'Customer Success Manager Job Description: 3 Templates for 2024'
-summary: 'Craft a great customer success manager job description. We will explore examples for different career stages and highlight the traits that make a CSM stand out'
-publishedAt: '2024-06-05'
----
+import Post from "@/features/blog/components/Post";
+import { generateMetadata } from "@/features/blog/helpers";
+
+export const post = {
+  title: "Customer Success Manager Job Description: 3 Templates for 2024",
+  description:
+    "Craft a great customer success manager job description. We will explore examples for different career stages and highlight the traits that make a CSM stand out",
+  postedAt: new Date("2024-06-05"),
+};
+
+export const metadata = generateMetadata(post);
+
+export default (props) => <Post post={post} {...props} />;
 
 A Customer Success Manager (CSM) knows your customers well and ensures they keep coming back. As businesses focus more on customer retention and satisfaction, the role of a CSM becomes essential.
 
diff --git a/apps/landing-page/content/ecommerce-chatbot.mdx b/apps/landing-page/src/app/blog/ecommerce-chatbot/page.mdx
similarity index 97%
rename from apps/landing-page/content/ecommerce-chatbot.mdx
rename to apps/landing-page/src/app/blog/ecommerce-chatbot/page.mdx
index 6badbe2c6b..7cadf54897 100644
--- a/apps/landing-page/content/ecommerce-chatbot.mdx
+++ b/apps/landing-page/src/app/blog/ecommerce-chatbot/page.mdx
@@ -1,8 +1,16 @@
----
-title: "Using Chatbots in Ecommerce: All you need to know"
-publishedAt: "2024-07-19"
-summary: "Checkout the best chatbot solutions. Discover how AI-powered virtual assistants revolutionize customer experiences, drive sales, and streamline operations."
----
+import Post from "@/features/blog/components/Post";
+import { generateMetadata } from "@/features/blog/helpers";
+
+export const post = {
+  title: "Using Chatbots in Ecommerce: All you need to know",
+  description:
+    "Checkout the best chatbot solutions. Discover how AI-powered virtual assistants revolutionize customer experiences, drive sales, and streamline operations.",
+  postedAt: new Date("2024-07-19"),
+};
+
+export const metadata = generateMetadata(post);
+
+export default (props) => <Post post={post} {...props} />;
 
 Providing exceptional customer service is paramount for **ecommerce businesses** to thrive. Online shoppers demand instant gratification and personalized experiences. Chatbots have emerged as a game-changing solution.
 
diff --git a/apps/landing-page/content/example.mdx b/apps/landing-page/src/app/blog/example/page.mdx
similarity index 74%
rename from apps/landing-page/content/example.mdx
rename to apps/landing-page/src/app/blog/example/page.mdx
index 12570b0af6..9da34b7c63 100644
--- a/apps/landing-page/content/example.mdx
+++ b/apps/landing-page/src/app/blog/example/page.mdx
@@ -1,7 +1,14 @@
----
-title: 'Blog post example'
-summary: 'A short summary of the blog post.'
----
+import Post from "@/features/blog/components/Post";
+import { generateMetadata } from "@/features/blog/helpers";
+
+export const post = {
+  title: "Blog post example",
+  description: "A short summary of the blog post.",
+};
+
+export const metadata = generateMetadata(post);
+
+export default (props) => <Post post={post} {...props} />;
 
 <Image src="/images/builder-screenshot.png" alt="awesome image" />
 
diff --git a/apps/landing-page/content/landbot-alternative.mdx b/apps/landing-page/src/app/blog/landbot-alternative/page.mdx
similarity index 93%
rename from apps/landing-page/content/landbot-alternative.mdx
rename to apps/landing-page/src/app/blog/landbot-alternative/page.mdx
index 83a75c3584..fb4ca40997 100644
--- a/apps/landing-page/content/landbot-alternative.mdx
+++ b/apps/landing-page/src/app/blog/landbot-alternative/page.mdx
@@ -1,8 +1,16 @@
----
-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"
----
+import Post from "@/features/blog/components/Post";
+import { generateMetadata } from "@/features/blog/helpers";
+
+export const post = {
+  title: "Top 5 Alternatives to Landbot",
+  description:
+    "Discover the top 5 Landbot alternatives for creating engaging chatbots without coding. Compare features, pricing, and integrations to find the best fit.",
+  postedAt: new Date("2024-04-19"),
+};
+
+export const metadata = generateMetadata(post);
+
+export default (props) => <Post post={post} {...props} />;
 
 **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.
 
diff --git a/apps/landing-page/content/lead-generation-chatbot.mdx b/apps/landing-page/src/app/blog/lead-generation-chatbot/page.mdx
similarity index 96%
rename from apps/landing-page/content/lead-generation-chatbot.mdx
rename to apps/landing-page/src/app/blog/lead-generation-chatbot/page.mdx
index 21deec34b8..f0003144bd 100644
--- a/apps/landing-page/content/lead-generation-chatbot.mdx
+++ b/apps/landing-page/src/app/blog/lead-generation-chatbot/page.mdx
@@ -1,8 +1,16 @@
----
-title: 'Lead Generation Chatbot: The Ultimate Guide to Boosting Your Sales'
-summary: 'Discover how lead generation chatbots can revolutionize your business. Boost engagement, conversions, and sales with AI-powered chatbots. Learn best practices and see examples from top companies.'
-publishedAt: '2024-04-22'
----
+import Post from "@/features/blog/components/Post";
+import { generateMetadata } from "@/features/blog/helpers";
+
+export const post = {
+  title: "Lead Generation Chatbot: The Ultimate Guide to Boosting Your Sales",
+  description:
+    "Discover how lead generation chatbots can revolutionize your business. Boost engagement, conversions, and sales with AI-powered chatbots. Learn best practices and see examples from top companies.",
+  postedAt: new Date("2024-04-22"),
+};
+
+export const metadata = generateMetadata(post);
+
+export default (props) => <Post post={post} {...props} />;
 
 **Lead generation chatbots** have become an essential tool for businesses looking to boost their sales efforts. Imagine having a highly efficient team member who is available around the clock. This team member is ready to engage with potential customers and guide them through the sales funnel.
 
diff --git a/apps/landing-page/content/manychat-alternatives.mdx b/apps/landing-page/src/app/blog/manychat-alternatives/page.mdx
similarity index 95%
rename from apps/landing-page/content/manychat-alternatives.mdx
rename to apps/landing-page/src/app/blog/manychat-alternatives/page.mdx
index 5c6dfbc6de..3e6a0a4ffc 100644
--- a/apps/landing-page/content/manychat-alternatives.mdx
+++ b/apps/landing-page/src/app/blog/manychat-alternatives/page.mdx
@@ -1,8 +1,16 @@
----
-title: "5 Top ManyChat Alternatives to Supercharge Your Chatbots"
-summary: "Discover top ManyChat alternatives to elevate your chatbot strategy. Explore powerful platforms with AI, multi-channel support, and customizable workflows for better conversational marketing."
-publishedAt: "2024-10-03"
----
+import Post from "@/features/blog/components/Post";
+import { generateMetadata } from "@/features/blog/helpers";
+
+export const post = {
+  title: "5 Top ManyChat Alternatives to Supercharge Your Chatbots",
+  description:
+    "Discover top ManyChat alternatives to elevate your chatbot strategy. Explore powerful platforms with AI, multi-channel support, and customizable workflows for better conversational marketing.",
+  postedAt: new Date("2024-10-03"),
+};
+
+export const metadata = generateMetadata(post);
+
+export default (props) => <Post post={post} {...props} />;
 
 Are you feeling constrained by ManyChat's limitations? You're not alone. Many businesses seek more flexible and powerful chatbot solutions.
 
diff --git a/apps/landing-page/content/open-source-chatbots.mdx b/apps/landing-page/src/app/blog/open-source-chatbots/page.mdx
similarity index 96%
rename from apps/landing-page/content/open-source-chatbots.mdx
rename to apps/landing-page/src/app/blog/open-source-chatbots/page.mdx
index 89acd61c67..c548df6f62 100644
--- a/apps/landing-page/content/open-source-chatbots.mdx
+++ b/apps/landing-page/src/app/blog/open-source-chatbots/page.mdx
@@ -1,8 +1,16 @@
----
-title: 'Open Source Chatbots: Features, Benefits, and Best Platforms'
-summary: 'Discover the power of open source chatbots! Learn about top platforms, key features, and how to choose the best one for your business.'
-publishedAt: '2024-08-07'
----
+import Post from "@/features/blog/components/Post";
+import { generateMetadata } from "@/features/blog/helpers";
+
+export const post = {
+  title: "Open Source Chatbots: Features, Benefits, and Best Platforms",
+  description:
+    "Discover the power of open source chatbots! Learn about top platforms, key features, and how to choose the best one for your business.",
+  postedAt: new Date("2024-08-07"),
+};
+
+export const metadata = generateMetadata(post);
+
+export default (props) => <Post post={post} {...props} />;
 
 **Open-source chatbots** empower businesses to create customizable and cost-effective automated solutions. These tools transform customer engagement strategies. In this article, we examine their features, benefits, and top platforms.
 
diff --git a/apps/landing-page/src/app/blog/page.tsx b/apps/landing-page/src/app/blog/page.tsx
index bdfe60b62c..34a3d0a1d5 100644
--- a/apps/landing-page/src/app/blog/page.tsx
+++ b/apps/landing-page/src/app/blog/page.tsx
@@ -1,5 +1,28 @@
-import { getBlogPosts } from "@/app/db/blog";
-import { Posts } from "./Posts";
+import { Posts } from "@/features/blog/components/Posts";
+import type { BlogPost, BlogPostModel } from "@/features/blog/types";
+import glob from "fast-glob";
+
+const importPost = async (postFilename: string): Promise<BlogPost> => {
+  const slug = postFilename
+    .replace(/(\/page)?\.mdx$/, "")
+    .split("/")
+    .pop();
+  if (!slug)
+    throw new Error(`Could not parse slug from filename: ${postFilename}`);
+  const postModule = await import(`${postFilename}`);
+  const postModel = postModule.post as BlogPostModel;
+  return {
+    slug,
+    ...postModel,
+  };
+};
+
+const findAllPosts = async (): Promise<BlogPost[]> => {
+  const postFilenames = await glob("**/page.mdx", {
+    cwd: ".",
+  });
+  return await Promise.all(postFilenames.map(importPost));
+};
 
 export const metadata = {
   title: "Typebot Blog",
@@ -7,8 +30,8 @@ export const metadata = {
     "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() {
-  const allBlogs = getBlogPosts();
+export default async function Home() {
+  const posts = await findAllPosts();
 
-  return <Posts allBlogs={allBlogs} />;
+  return <Posts posts={posts} />;
 }
diff --git a/apps/landing-page/content/react-chatbot.mdx b/apps/landing-page/src/app/blog/react-chatbot/page.mdx
similarity index 74%
rename from apps/landing-page/content/react-chatbot.mdx
rename to apps/landing-page/src/app/blog/react-chatbot/page.mdx
index e55602b475..11178f7264 100644
--- a/apps/landing-page/content/react-chatbot.mdx
+++ b/apps/landing-page/src/app/blog/react-chatbot/page.mdx
@@ -1,8 +1,16 @@
----
-title: 'How to Build a React Chatbot: Three Methods Explained'
-description: 'Learn how to build a React chatbot using three methods: no-code, API integration, and full-stack development.'
-publishedAt: '2024-07-11'
----
+import Post from "@/features/blog/components/Post";
+import { generateMetadata } from "@/features/blog/helpers";
+
+export const post = {
+  title: "How to Build a React Chatbot: Three Methods Explained",
+  description:
+    "Learn how to build a React chatbot using three methods: no-code, API integration, and full-stack development.",
+  postedAt: new Date("2024-07-11"),
+};
+
+export const metadata = generateMetadata(post);
+
+export default (props) => <Post post={post} {...props} />;
 
 To enhance user engagement in your React application, adding a chatbot can be a game changer. You don't need to get overwhelmed by complex code. React chatbots offer interactive and responsive interfaces.
 
@@ -47,32 +55,32 @@ Typebot is an open-source platform that makes it easy to create chatbots for Rea
 ### Real-World Use Cases of React Chatbots
 
 <Table
-  headers={['Industry', 'Use Case', 'Example']}
+  headers={["Industry", "Use Case", "Example"]}
   rows={[
     [
-      'E-commerce',
-      'Product recommendations',
-      'Suggesting items based on browsing history',
+      "E-commerce",
+      "Product recommendations",
+      "Suggesting items based on browsing history",
     ],
     [
-      'Healthcare',
-      'Symptom checker',
-      'Guiding users through initial health assessments',
+      "Healthcare",
+      "Symptom checker",
+      "Guiding users through initial health assessments",
     ],
     [
-      'Finance',
-      'Account management',
-      'Helping users check balances and make transfers',
+      "Finance",
+      "Account management",
+      "Helping users check balances and make transfers",
     ],
     [
-      'Education',
-      'Course enrollment',
-      'Assisting students in selecting and registering for classes',
+      "Education",
+      "Course enrollment",
+      "Assisting students in selecting and registering for classes",
     ],
     [
-      'Travel',
-      'Booking assistance',
-      'Helping users find and book flights or accommodations',
+      "Travel",
+      "Booking assistance",
+      "Helping users find and book flights or accommodations",
     ],
   ]}
 />
@@ -118,13 +126,13 @@ npm install @typebot.io/js @typebot.io/react
 5. Create a new component in your React app:
 
 ```jsx
-import { Bubble } from '@typebot.io/react'
+import { Bubble } from "@typebot.io/react";
 
 const ChatbotComponent = () => {
-  return <Bubble typebot="YOUR_TYPEBOT_ID" />
-}
+  return <Bubble typebot="YOUR_TYPEBOT_ID" />;
+};
 
-export default ChatbotComponent
+export default ChatbotComponent;
 ```
 
 ### Adding Typebot Chatbot to Existing React Applications
@@ -132,7 +140,7 @@ export default ChatbotComponent
 1. Import the **ChatbotComponent** where needed:
 
 ```jsx
-import ChatbotComponent from './ChatbotComponent'
+import ChatbotComponent from "./ChatbotComponent";
 
 function App() {
   return (
@@ -140,7 +148,7 @@ function App() {
       <h1>My React App</h1>
       <ChatbotComponent />
     </div>
-  )
+  );
 }
 ```
 
@@ -149,10 +157,10 @@ function App() {
 ```jsx
 <Bubble
   typebot="your-typebot-id"
-  theme={{ button: { backgroundColor: '#0042DA' } }}
+  theme={{ button: { backgroundColor: "#0042DA" } }}
   prefilledVariables={{
-    'User Name': 'John Doe',
-    'Page URL': window.location.href,
+    "User Name": "John Doe",
+    "Page URL": window.location.href,
   }}
 />
 ```
@@ -211,9 +219,9 @@ npm install axios daisyui@latest
 
 ```javascript
 module.exports = {
-  content: ['./src/**/*.{js,jsx,ts,tsx}'],
-  plugins: [require('daisyui')],
-}
+  content: ["./src/**/*.{js,jsx,ts,tsx}"],
+  plugins: [require("daisyui")],
+};
 ```
 
 ### Setting Up Typebot API
@@ -227,22 +235,22 @@ module.exports = {
 Create a `ChatComponent.tsx` file:
 
 ```tsx
-import React, { useState } from 'react'
+import React, { useState } from "react";
 
 const ChatComponent: React.FC = () => {
   const [messages, setMessages] = useState<
     Array<{ text: string; isUser: boolean }>
-  >([])
-  const [inputMessage, setInputMessage] = useState('')
+  >([]);
+  const [inputMessage, setInputMessage] = useState("");
 
   const handleSendMessage = async () => {
-    if (inputMessage.trim() === '') return
+    if (inputMessage.trim() === "") return;
 
-    setMessages([...messages, { text: inputMessage, isUser: true }])
-    setInputMessage('')
+    setMessages([...messages, { text: inputMessage, isUser: true }]);
+    setInputMessage("");
 
     // API call will be implemented here
-  }
+  };
 
   return (
     <div className="flex flex-col h-screen">
@@ -250,11 +258,11 @@ const ChatComponent: React.FC = () => {
         {messages.map((message, index) => (
           <div
             key={index}
-            className={`chat ${message.isUser ? 'chat-end' : 'chat-start'}`}
+            className={`chat ${message.isUser ? "chat-end" : "chat-start"}`}
           >
             <div
               className={`chat-bubble ${
-                message.isUser ? 'chat-bubble-primary' : 'chat-bubble-secondary'
+                message.isUser ? "chat-bubble-primary" : "chat-bubble-secondary"
               }`}
             >
               {message.text}
@@ -277,10 +285,10 @@ const ChatComponent: React.FC = () => {
         </div>
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default ChatComponent
+export default ChatComponent;
 ```
 
 ### Fetching Responses from Typebot API
@@ -288,25 +296,25 @@ export default ChatComponent
 Implement API calls in `handleSendMessage`:
 
 ```typescript
-import axios from 'axios'
+import axios from "axios";
 
-const TYPEBOT_API_URL = 'https://typebot.io/api/v1/typebots'
-const PUBLIC_ID = 'your_public_id'
-const [sessionId, setSessionId] = useState<string | null>(null)
+const TYPEBOT_API_URL = "https://typebot.io/api/v1/typebots";
+const PUBLIC_ID = "your_public_id";
+const [sessionId, setSessionId] = useState<string | null>(null);
 
 const handleSendMessage = async () => {
-  if (inputMessage.trim() === '') return
+  if (inputMessage.trim() === "") return;
 
-  setMessages([...messages, { text: inputMessage, isUser: true }])
-  setInputMessage('')
+  setMessages([...messages, { text: inputMessage, isUser: true }]);
+  setInputMessage("");
 
   try {
-    let response
+    let response;
     if (!sessionId) {
       response = await axios.post(`${TYPEBOT_API_URL}/${PUBLIC_ID}/startChat`, {
         message: inputMessage,
-      })
-      setSessionId(response.data.sessionId)
+      });
+      setSessionId(response.data.sessionId);
     } else {
       response = await axios.post(
         `${TYPEBOT_API_URL}/${PUBLIC_ID}/continueChat`,
@@ -314,23 +322,23 @@ const handleSendMessage = async () => {
           sessionId,
           message: inputMessage,
         }
-      )
+      );
     }
 
     const botMessages = response.data.messages.map(
       (msg: { content: string }) => ({
         text: msg.content.richText[0].children
           .map((children) => children.text)
-          .join(' '),
+          .join(" "),
         isUser: false,
       })
-    )
+    );
 
-    setMessages((prevMessages) => [...prevMessages, ...botMessages])
+    setMessages((prevMessages) => [...prevMessages, ...botMessages]);
   } catch (error) {
-    console.error('Error sending message:', error)
+    console.error("Error sending message:", error);
   }
-}
+};
 ```
 
 ### Handling User Inputs and Responses in UI
@@ -342,11 +350,11 @@ Update the UI to display bot responses:
   {messages.map((message, index) => (
     <div
       key={index}
-      className={`chat ${message.isUser ? 'chat-end' : 'chat-start'}`}
+      className={`chat ${message.isUser ? "chat-end" : "chat-start"}`}
     >
       <div
         className={`chat-bubble ${
-          message.isUser ? 'chat-bubble-primary' : 'chat-bubble-secondary'
+          message.isUser ? "chat-bubble-primary" : "chat-bubble-secondary"
         }`}
       >
         {message.text}
@@ -364,11 +372,11 @@ Implement error handling:
 try {
   // API calls
 } catch (error) {
-  console.error('Error in chat flow:', error)
+  console.error("Error in chat flow:", error);
   setMessages((prevMessages) => [
     ...prevMessages,
-    { text: 'An error occurred. Please try again.', isUser: false },
-  ])
+    { text: "An error occurred. Please try again.", isUser: false },
+  ]);
 }
 ```
 
@@ -449,27 +457,27 @@ npm install --save-dev typescript @types/express @types/node @types/cors
 Create a `server.ts` file in the `server` directory:
 
 ```typescript
-import express from 'express'
-import cors from 'cors'
-import dotenv from 'dotenv'
+import express from "express";
+import cors from "cors";
+import dotenv from "dotenv";
 
-dotenv.config()
+dotenv.config();
 
-const app = express()
-app.use(cors())
-app.use(express.json())
+const app = express();
+app.use(cors());
+app.use(express.json());
 
-const PORT = process.env.PORT || 3001
+const PORT = process.env.PORT || 3001;
 
-app.post('/api/chat', (req, res) => {
-  const userMessage = req.body.message
+app.post("/api/chat", (req, res) => {
+  const userMessage = req.body.message;
   // Chatbot logic will be implemented here
   res.json({
     response: `You said: "${userMessage}". This is a placeholder response.`,
-  })
-})
+  });
+});
 
-app.listen(PORT, () => console.log(`Server running on port ${PORT}`))
+app.listen(PORT, () => console.log(`Server running on port ${PORT}`));
 ```
 
 ### Creating Business Logic
@@ -478,22 +486,22 @@ Implement a simple chatbot logic in `server.ts`:
 
 ```typescript
 const generateResponse = (message: string): string => {
-  if (message.toLowerCase().includes('hello')) {
-    return 'Hello! How can I assist you today?'
-  } else if (message.toLowerCase().includes('help')) {
-    return "I'm here to help. What do you need assistance with?"
-  } else if (message.toLowerCase().includes('bye')) {
-    return 'Goodbye! Have a great day!'
+  if (message.toLowerCase().includes("hello")) {
+    return "Hello! How can I assist you today?";
+  } else if (message.toLowerCase().includes("help")) {
+    return "I'm here to help. What do you need assistance with?";
+  } else if (message.toLowerCase().includes("bye")) {
+    return "Goodbye! Have a great day!";
   } else {
-    return "I'm not sure how to respond to that. Can you please rephrase your question?"
+    return "I'm not sure how to respond to that. Can you please rephrase your question?";
   }
-}
+};
 
-app.post('/api/chat', (req, res) => {
-  const userMessage = req.body.message
-  const botResponse = generateResponse(userMessage)
-  res.json({ response: botResponse })
-})
+app.post("/api/chat", (req, res) => {
+  const userMessage = req.body.message;
+  const botResponse = generateResponse(userMessage);
+  res.json({ response: botResponse });
+});
 ```
 
 ### Designing the Chatbot Interface in React using Daisy UI
@@ -501,32 +509,32 @@ app.post('/api/chat', (req, res) => {
 Create a `ChatComponent.tsx` in your React src directory:
 
 ```tsx
-import React, { useState } from 'react'
-import axios from 'axios'
+import React, { useState } from "react";
+import axios from "axios";
 
 const ChatComponent: React.FC = () => {
   const [messages, setMessages] = useState<
     Array<{ text: string; isUser: boolean }>
-  >([])
-  const [inputMessage, setInputMessage] = useState('')
+  >([]);
+  const [inputMessage, setInputMessage] = useState("");
 
   const handleSendMessage = async () => {
-    if (inputMessage.trim() === '') return
+    if (inputMessage.trim() === "") return;
 
-    setMessages([...messages, { text: inputMessage, isUser: true }])
-    setInputMessage('')
+    setMessages([...messages, { text: inputMessage, isUser: true }]);
+    setInputMessage("");
 
     try {
-      const response = await axios.post('/api/chat', { message: inputMessage })
+      const response = await axios.post("/api/chat", { message: inputMessage });
       setMessages([
         ...messages,
         { text: inputMessage, isUser: true },
         { text: response.data.response, isUser: false },
-      ])
+      ]);
     } catch (error) {
-      console.error('Error sending message:', error)
+      console.error("Error sending message:", error);
     }
-  }
+  };
 
   return (
     <div className="flex flex-col h-screen">
@@ -534,11 +542,11 @@ const ChatComponent: React.FC = () => {
         {messages.map((message, index) => (
           <div
             key={index}
-            className={`chat ${message.isUser ? 'chat-end' : 'chat-start'}`}
+            className={`chat ${message.isUser ? "chat-end" : "chat-start"}`}
           >
             <div
               className={`chat-bubble ${
-                message.isUser ? 'chat-bubble-primary' : 'chat-bubble-secondary'
+                message.isUser ? "chat-bubble-primary" : "chat-bubble-secondary"
               }`}
             >
               {message.text}
@@ -561,10 +569,10 @@ const ChatComponent: React.FC = () => {
         </div>
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default ChatComponent
+export default ChatComponent;
 ```
 
 ### Deploying and Testing
@@ -588,12 +596,12 @@ By following these steps, you can create a full-stack **React chatbot** with a c
 Update the axios call in `ChatComponent.tsx` to use an environment variable:
 
 ```typescript
-const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:3001'
+const API_URL = import.meta.env.VITE_API_URL || "http://localhost:3001";
 
 // In handleSendMessage:
 const response = await axios.post(`${API_URL}/api/chat`, {
   message: inputMessage,
-})
+});
 ```
 
 ### Error Handling and Debugging
@@ -605,11 +613,11 @@ Implement error handling in both frontend and backend:
 try {
   // API call
 } catch (error) {
-  console.error('Error sending message:', error)
+  console.error("Error sending message:", error);
   setMessages((prevMessages) => [
     ...prevMessages,
-    { text: 'An error occurred. Please try again.', isUser: false },
-  ])
+    { text: "An error occurred. Please try again.", isUser: false },
+  ]);
 }
 
 // Backend (server.ts)
@@ -620,10 +628,10 @@ app.use(
     res: express.Response,
     next: express.NextFunction
   ) => {
-    console.error(err.stack)
-    res.status(500).send('Something broke!')
+    console.error(err.stack);
+    res.status(500).send("Something broke!");
   }
-)
+);
 ```
 
 ### Best Practices for State Management
@@ -663,24 +671,24 @@ Implement branching conversations based on user inputs:
 
 ```typescript
 const generateResponse = (message: string, context: any): string => {
-  if (context.stage === 'greeting') {
-    if (message.toLowerCase().includes('help')) {
-      context.stage = 'help'
-      return 'What kind of help do you need? 1. Technical Support 2. Account Issues 3. Billing'
+  if (context.stage === "greeting") {
+    if (message.toLowerCase().includes("help")) {
+      context.stage = "help";
+      return "What kind of help do you need? 1. Technical Support 2. Account Issues 3. Billing";
     } else {
-      return 'Hello! How can I assist you today?'
+      return "Hello! How can I assist you today?";
     }
-  } else if (context.stage === 'help') {
-    if (message.includes('1')) {
-      return 'For technical support, please describe your issue.'
-    } else if (message.includes('2')) {
-      return 'For account issues, please provide your account number.'
-    } else if (message.includes('3')) {
-      return "For billing inquiries, I'll transfer you to our billing department."
+  } else if (context.stage === "help") {
+    if (message.includes("1")) {
+      return "For technical support, please describe your issue.";
+    } else if (message.includes("2")) {
+      return "For account issues, please provide your account number.";
+    } else if (message.includes("3")) {
+      return "For billing inquiries, I'll transfer you to our billing department.";
     }
   }
-  return "I'm not sure how to respond. Can you please clarify?"
-}
+  return "I'm not sure how to respond. Can you please clarify?";
+};
 ```
 
 ### Integrations with Third-Party Services
@@ -688,13 +696,13 @@ const generateResponse = (message: string, context: any): string => {
 #### OpenAI Integration
 
 ```typescript
-import { Configuration, OpenAIApi } from 'openai'
+import { Configuration, OpenAIApi } from "openai";
 
 // Initialize the OpenAI configuration
 const configuration = new Configuration({
   apiKey: process.env.OPENAI_API_KEY,
-})
-const openai = new OpenAIApi(configuration)
+});
+const openai = new OpenAIApi(configuration);
 
 const generateResponse = async (
   message: string,
@@ -702,52 +710,52 @@ const generateResponse = async (
 ): Promise<string> => {
   try {
     const completion = await openai.createChatCompletion({
-      model: 'gpt-3.5-turbo', // You can change this to a different model if needed
+      model: "gpt-3.5-turbo", // You can change this to a different model if needed
       messages: [
         {
-          role: 'system',
-          content: 'You are a helpful customer service assistant.',
+          role: "system",
+          content: "You are a helpful customer service assistant.",
         },
         {
-          role: 'user',
+          role: "user",
           content: `Current stage: ${context.stage}. User message: ${message}`,
         },
       ],
       max_tokens: 150, // Adjust as needed
       temperature: 0.7, // Adjust for more or less randomness in responses
-    })
+    });
 
     return (
       completion.data.choices[0].message?.content ||
       "I'm sorry, I couldn't generate a response."
-    )
+    );
   } catch (error) {
-    console.error('Error calling OpenAI API:', error)
-    return "I'm sorry, there was an error processing your request."
+    console.error("Error calling OpenAI API:", error);
+    return "I'm sorry, there was an error processing your request.";
   }
-}
+};
 ```
 
 #### Google Sheets Integration
 
 ```typescript
-import { google } from 'googleapis'
+import { google } from "googleapis";
 
 const sheets = google.sheets({
-  version: 'v4',
+  version: "v4",
   auth: process.env.GOOGLE_API_KEY,
-})
+});
 
 const logToSheet = async (message: string, response: string) => {
   await sheets.spreadsheets.values.append({
-    spreadsheetId: 'YOUR_SHEET_ID',
-    range: 'Sheet1!A:C',
-    valueInputOption: 'USER_ENTERED',
+    spreadsheetId: "YOUR_SHEET_ID",
+    range: "Sheet1!A:C",
+    valueInputOption: "USER_ENTERED",
     requestBody: {
       values: [[new Date().toISOString(), message, response]],
     },
-  })
-}
+  });
+};
 ```
 
 ### Theming and Custom UI Design
@@ -761,16 +769,16 @@ module.exports = {
     themes: [
       {
         mytheme: {
-          primary: '#4B5563',
-          secondary: '#60A5FA',
-          accent: '#37CDBE',
-          neutral: '#3D4451',
-          'base-100': '#FFFFFF',
+          primary: "#4B5563",
+          secondary: "#60A5FA",
+          accent: "#37CDBE",
+          neutral: "#3D4451",
+          "base-100": "#FFFFFF",
         },
       },
     ],
   },
-}
+};
 ```
 
 ### Performance Optimization
@@ -780,9 +788,9 @@ module.exports = {
 3. Optimize API calls with debouncing or throttling.
 
 ```typescript
-import { useDebounce } from 'use-debounce'
+import { useDebounce } from "use-debounce";
 
-const [value] = useDebounce(text, 1000)
+const [value] = useDebounce(text, 1000);
 ```
 
 Building a **React chatbot** offers diverse approaches, from no-code solutions to full-stack implementations. This article explored three methods: using Typebot for rapid deployment, integrating Typebot's API for customization, and building a complete solution from scratch.
diff --git a/apps/landing-page/content/train-chatbot-on-your-own-data.mdx b/apps/landing-page/src/app/blog/train-chatbot-on-your-own-data/page.mdx
similarity index 96%
rename from apps/landing-page/content/train-chatbot-on-your-own-data.mdx
rename to apps/landing-page/src/app/blog/train-chatbot-on-your-own-data/page.mdx
index b56107c53f..ab2035ef84 100644
--- a/apps/landing-page/content/train-chatbot-on-your-own-data.mdx
+++ b/apps/landing-page/src/app/blog/train-chatbot-on-your-own-data/page.mdx
@@ -1,8 +1,16 @@
----
-title: How to Train Chatbot on Your Own Data with Typebot and ChatGPT
-description: Maximize your chatbot's potential with Typebot and OpenAI's ChatGPT. This guide offers a step-by-step tutorial on creating a personalized assistant.
-publishedAt: 2024-05-16
----
+import Post from "@/features/blog/components/Post";
+import { generateMetadata } from "@/features/blog/helpers";
+
+export const post = {
+  title: "How to Train Chatbot on Your Own Data with Typebot and ChatGPT",
+  description:
+    "Maximize your chatbot's potential with Typebot and OpenAI's ChatGPT. This guide offers a step-by-step tutorial on creating a personalized assistant.",
+  postedAt: new Date("2024-05-16"),
+};
+
+export const metadata = generateMetadata(post);
+
+export default (props) => <Post post={post} {...props} />;
 
 Imagine having a chatbot that understands your unique needs and can answer all your Typebot-related queries flawlessly. Sounds like magic, right? With the power of Typebot and OpenAI's ChatGPT, you can create a custom assistant trained on your own data. This guide will walk you through the exact steps to make this happen, so you can focus on what really matters—engaging with your users. Ready to transform your chatbot experience?
 
diff --git a/apps/landing-page/content/typebot-is-now-fair-source.mdx b/apps/landing-page/src/app/blog/typebot-is-now-fair-source/page.mdx
similarity index 91%
rename from apps/landing-page/content/typebot-is-now-fair-source.mdx
rename to apps/landing-page/src/app/blog/typebot-is-now-fair-source/page.mdx
index 331c4a0ac2..edb0ec719f 100644
--- a/apps/landing-page/content/typebot-is-now-fair-source.mdx
+++ b/apps/landing-page/src/app/blog/typebot-is-now-fair-source/page.mdx
@@ -1,8 +1,16 @@
----
-title: Typebot is now Fair Source
-description: Typebot is migrating from AGPLv3 to FSL, a new license that gives maximum while ensuring fairness for the project owner.
-publishedAt: 2024-09-30
----
+import Post from "@/features/blog/components/Post";
+import { generateMetadata } from "@/features/blog/helpers";
+
+export const post = {
+  title: "Typebot is now Fair Source",
+  description:
+    "Typebot is migrating from AGPLv3 to FSL, a new license that gives maximum while ensuring fairness for the project owner.",
+  postedAt: new Date("2024-09-30"),
+};
+
+export const metadata = generateMetadata(post);
+
+export default (props) => <Post post={post} {...props} />;
 
 ## AGPLv3
 
diff --git a/apps/landing-page/content/upsell-using-ai-chatbot.mdx b/apps/landing-page/src/app/blog/upsell-using-ai-chatbot/page.mdx
similarity index 96%
rename from apps/landing-page/content/upsell-using-ai-chatbot.mdx
rename to apps/landing-page/src/app/blog/upsell-using-ai-chatbot/page.mdx
index f721e5300f..ba0bb844db 100644
--- a/apps/landing-page/content/upsell-using-ai-chatbot.mdx
+++ b/apps/landing-page/src/app/blog/upsell-using-ai-chatbot/page.mdx
@@ -1,8 +1,16 @@
----
-title: 'Upsell Using AI Chatbot: Boost Your Revenue on Shopify'
-description: 'Boost your Shopify revenue with AI chatbot upselling. Learn to create, integrate, and optimize an AI assistant that turns browsers into buyers.'
-publishedAt: '2024-06-26'
----
+import Post from "@/features/blog/components/Post";
+import { generateMetadata } from "@/features/blog/helpers";
+
+export const post = {
+  title: "Upsell Using AI Chatbot: Boost Your Revenue on Shopify",
+  description:
+    "Boost your Shopify revenue with AI chatbot upselling. Learn to create, integrate, and optimize an AI assistant that turns browsers into buyers.",
+  postedAt: new Date("2024-06-26"),
+};
+
+export const metadata = generateMetadata(post);
+
+export default (props) => <Post post={post} {...props} />;
 
 Imagine turning every product page on your Shopify store into a savvy salesperson, one that never sleeps and always knows the perfect upsell. Sounds like a retailer's dream, right? Well, buckle up, because we're about to turn that dream into reality using AI chatbots.
 
@@ -188,7 +196,7 @@ In Typebot, create a new variable called "Current product". Select 'Custom' in V
 and activate 'Execute on client'. Put this code in the field:
 
 ```jsx
-document.querySelector('h1').innerText
+document.querySelector("h1").innerText;
 ```
 
 This little bit of code tells Typebot, "Hey, the customer is looking at this product right now!"
@@ -417,12 +425,12 @@ Numbers don't lie, folks. Let's get down to the nitty-gritty of performance anal
 Here's a quick snapshot of what your metrics dashboard might look like:
 
 <Table
-  headers={['Metric', 'Current', 'Goal']}
+  headers={["Metric", "Current", "Goal"]}
   rows={[
-    ['Engagement Rate', '15%', '25%'],
-    ['Avg. Conversation Length', '4 messages', '6 messages'],
-    ['Upsell Success Rate', '10%', '15%'],
-    ['Customer Satisfaction', '4.2/5', '4.5/5'],
+    ["Engagement Rate", "15%", "25%"],
+    ["Avg. Conversation Length", "4 messages", "6 messages"],
+    ["Upsell Success Rate", "10%", "15%"],
+    ["Customer Satisfaction", "4.2/5", "4.5/5"],
   ]}
 />
 
diff --git a/apps/landing-page/content/webflow-chatbot.mdx b/apps/landing-page/src/app/blog/webflow-chatbot/page.mdx
similarity index 95%
rename from apps/landing-page/content/webflow-chatbot.mdx
rename to apps/landing-page/src/app/blog/webflow-chatbot/page.mdx
index 9a3300eaae..09e31e8dde 100644
--- a/apps/landing-page/content/webflow-chatbot.mdx
+++ b/apps/landing-page/src/app/blog/webflow-chatbot/page.mdx
@@ -1,8 +1,16 @@
----
-title: 'Add Chatbot to Webflow: Easy Integration Guide Without Code'
-summary: 'Learn how to add a chatbot to Webflow easily. Boost engagement with AI-powered interactions, step-by-step integration guide, and customizable templates. Transform your site today!'
-publishedAt: '2024-09-25'
----
+import Post from "@/features/blog/components/Post";
+import { generateMetadata } from "@/features/blog/helpers";
+
+export const post = {
+  title: "Add Chatbot to Webflow: Easy Integration Guide Without Code",
+  description:
+    "Learn how to add a chatbot to Webflow easily. Boost engagement with AI-powered interactions, step-by-step integration guide, and customizable templates. Transform your site today!",
+  postedAt: new Date("2024-09-25"),
+};
+
+export const metadata = generateMetadata(post);
+
+export default (props) => <Post post={post} {...props} />;
 
 Transform your static Webflow site into an interactive, AI-powered customer service hub. By adding a chatbot to Webflow, you revolutionize how you engage with visitors.
 
diff --git a/apps/landing-page/content/webflow-popup-contact-form.mdx b/apps/landing-page/src/app/blog/webflow-popup-contact-form/page.mdx
similarity index 94%
rename from apps/landing-page/content/webflow-popup-contact-form.mdx
rename to apps/landing-page/src/app/blog/webflow-popup-contact-form/page.mdx
index 5740531150..1865f5b117 100644
--- a/apps/landing-page/content/webflow-popup-contact-form.mdx
+++ b/apps/landing-page/src/app/blog/webflow-popup-contact-form/page.mdx
@@ -1,8 +1,16 @@
----
-title: 'Create a Stunning Webflow Popup Contact Form in Minutes'
-summary: 'Learn how to create an eye-catching Webflow popup contact form in minutes. Boost engagement, capture leads, and enhance your website's design with this step-by-step guide.'
-publishedAt: '2024-09-11'
----
+import Post from "@/features/blog/components/Post";
+import { generateMetadata } from "@/features/blog/helpers";
+
+export const post = {
+  title: "Create a Stunning Webflow Popup Contact Form in Minutes",
+  description:
+    "Learn how to create an eye-catching Webflow popup contact form in minutes. Boost engagement, capture leads, and enhance your website",
+  postedAt: new Date("2024-09-11"),
+};
+
+export const metadata = generateMetadata(post);
+
+export default (props) => <Post post={post} {...props} />;
 
 Want to capture leads without disrupting your website's sleek design? The **Webflow popup contact form** can boost engagement. It combines Webflow's elegant design capabilities with a functional lead generation system.
 
@@ -46,10 +54,10 @@ Don't forget the finishing touches:
 
 <div
   style={{
-    display: 'grid',
-    'grid-template-columns': 'repeat(2, minmax(0, 1fr))',
-    gap: '10px',
-    alignItems: 'center',
+    display: "grid",
+    "grid-template-columns": "repeat(2, minmax(0, 1fr))",
+    gap: "10px",
+    alignItems: "center",
   }}
 >
   <Image
diff --git a/apps/landing-page/content/whatsapp-business-benefits.mdx b/apps/landing-page/src/app/blog/whatsapp-business-benefits/page.mdx
similarity index 95%
rename from apps/landing-page/content/whatsapp-business-benefits.mdx
rename to apps/landing-page/src/app/blog/whatsapp-business-benefits/page.mdx
index d945373fba..9cc7277b6b 100644
--- a/apps/landing-page/content/whatsapp-business-benefits.mdx
+++ b/apps/landing-page/src/app/blog/whatsapp-business-benefits/page.mdx
@@ -1,8 +1,16 @@
----
-title: 'Why you need to use WhatsApp Business: Top Benefits and Features'
-description: 'Discover the top benefits of WhatsApp Business for your company. Boost engagement, automate support, and scale your reach.'
-publishedAt: '2024-07-05'
----
+import Post from "@/features/blog/components/Post";
+import { generateMetadata } from "@/features/blog/helpers";
+
+export const post = {
+  title: "Why you need to use WhatsApp Business: Top Benefits and Features",
+  description:
+    "Discover the top benefits of WhatsApp Business for your company. Boost engagement, automate support, and scale your reach.",
+  postedAt: new Date("2024-07-05"),
+};
+
+export const metadata = generateMetadata(post);
+
+export default (props) => <Post post={post} {...props} />;
 
 WhatsApp Business lets you reach 2.2 billion potential customers with a single message. But why are businesses choosing this platform? From high engagement rates to automation features, WhatsApp Business transforms how companies connect with their audience.
 
diff --git a/apps/landing-page/src/app/blog/[slug]/tweet.css b/apps/landing-page/src/features/blog/assets/tweet.css
similarity index 100%
rename from apps/landing-page/src/app/blog/[slug]/tweet.css
rename to apps/landing-page/src/features/blog/assets/tweet.css
diff --git a/apps/landing-page/src/features/blog/components/Header.tsx b/apps/landing-page/src/features/blog/components/Header.tsx
new file mode 100644
index 0000000000..e58a7eb268
--- /dev/null
+++ b/apps/landing-page/src/features/blog/components/Header.tsx
@@ -0,0 +1,40 @@
+import { Heading, Stack, Text } from "@chakra-ui/react";
+
+export const formatDate = (date: string) => {
+  const currentDate = new Date().getTime();
+  const dateWithTimezone = date.includes("T") ? date : `${date}T00:00:00`;
+  const targetDate = new Date(dateWithTimezone).getTime();
+  const timeDifference = Math.abs(currentDate - targetDate);
+  const daysAgo = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
+
+  const fullDate = new Date(dateWithTimezone).toLocaleString("en-us", {
+    month: "long",
+    day: "numeric",
+    year: "numeric",
+  });
+
+  if (daysAgo < 1) {
+    return "Today";
+  }
+  if (daysAgo < 7) {
+    return `${fullDate} (${daysAgo}d ago)`;
+  }
+  if (daysAgo < 30) {
+    const weeksAgo = Math.floor(daysAgo / 7);
+    return `${fullDate} (${weeksAgo}w ago)`;
+  }
+  if (daysAgo < 365) {
+    const monthsAgo = Math.floor(daysAgo / 30);
+    return `${fullDate} (${monthsAgo}mo ago)`;
+  }
+  const yearsAgo = Math.floor(daysAgo / 365);
+  return `${fullDate} (${yearsAgo}y ago)`;
+};
+
+type Props = { children: string; date: string };
+export const Header = ({ children, date }: Props) => (
+  <Stack mx="auto" w="full" maxW={["full", "46rem"]} px={[3, 3, 0]}>
+    <Heading>{children}</Heading>
+    <Text>{formatDate(date)}</Text>
+  </Stack>
+);
diff --git a/apps/landing-page/src/features/blog/components/Post.tsx b/apps/landing-page/src/features/blog/components/Post.tsx
new file mode 100644
index 0000000000..7846b06d66
--- /dev/null
+++ b/apps/landing-page/src/features/blog/components/Post.tsx
@@ -0,0 +1,48 @@
+import { Heading, Stack, Text } from "@chakra-ui/react";
+import type { PropsWithChildren } from "react";
+import type { BlogPostModel } from "../types";
+import "@/assets/prose.css";
+
+export type PostViewProps = PropsWithChildren<{
+  post: BlogPostModel;
+}>;
+
+export default function Post(props: PostViewProps) {
+  return (
+    <Stack spacing={10} my="20" w="full">
+      <Stack
+        mx="auto"
+        spacing={0}
+        as="article"
+        px={3}
+        w="full"
+        className="prose prose-quoteless prose-neutral prose-invert max-w-none"
+      >
+        <Stack
+          as="header"
+          mx="auto"
+          w="full"
+          maxW={["full", "46rem"]}
+          px={[3, 3, 0]}
+        >
+          <Heading as="h1" mb="0">
+            {props.post.title}
+          </Heading>
+          <Text
+            as="time"
+            dateTime={props.post.postedAt?.toISOString()}
+            color="gray.500"
+          >
+            {props.post.postedAt?.toLocaleDateString("en-US", {
+              day: "numeric",
+              month: "long",
+              year: "numeric",
+              timeZone: "UTC",
+            })}
+          </Text>
+        </Stack>
+        {props.children}
+      </Stack>
+    </Stack>
+  );
+}
diff --git a/apps/landing-page/src/app/blog/Posts.tsx b/apps/landing-page/src/features/blog/components/Posts.tsx
similarity index 66%
rename from apps/landing-page/src/app/blog/Posts.tsx
rename to apps/landing-page/src/features/blog/components/Posts.tsx
index 866f58682a..ca12c2bb95 100644
--- a/apps/landing-page/src/app/blog/Posts.tsx
+++ b/apps/landing-page/src/features/blog/components/Posts.tsx
@@ -1,18 +1,14 @@
 "use client";
 import { Link } from "@chakra-ui/next-js";
 import { Heading, Stack, Text } from "@chakra-ui/react";
+import { isDefined } from "@typebot.io/lib/utils";
+import type { BlogPost } from "../types";
 
 type Props = {
-  allBlogs: {
-    metadata: {
-      title: string;
-      publishedAt: string;
-    };
-    slug: string;
-  }[];
+  posts: BlogPost[];
 };
 
-export const Posts = ({ allBlogs }: Props) => (
+export const Posts = ({ posts }: Props) => (
   <Stack
     spacing={10}
     mx="auto"
@@ -23,12 +19,10 @@ export const Posts = ({ allBlogs }: Props) => (
   >
     <Heading>Latest blog posts:</Heading>
     <Stack>
-      {allBlogs
-        .filter((post) => post.metadata.publishedAt)
+      {posts
+        .filter((post) => isDefined(post.postedAt))
         .sort((a, b) => {
-          if (
-            new Date(a.metadata.publishedAt) > new Date(b.metadata.publishedAt)
-          ) {
+          if (new Date(a.postedAt!) > new Date(b.postedAt!)) {
             return -1;
           }
           return 1;
@@ -43,10 +37,10 @@ export const Posts = ({ allBlogs }: Props) => (
               p="4"
             >
               <Heading as="h2" fontSize="2xl">
-                {post.metadata.title}
+                {post.title}
               </Heading>
               <Text color="gray.500">
-                {new Date(post.metadata.publishedAt).toDateString()}
+                {new Date(post.postedAt!).toDateString()}
               </Text>
             </Stack>
           </Link>
diff --git a/apps/landing-page/src/app/blog/[slug]/Table.tsx b/apps/landing-page/src/features/blog/components/Table.tsx
similarity index 100%
rename from apps/landing-page/src/app/blog/[slug]/Table.tsx
rename to apps/landing-page/src/features/blog/components/Table.tsx
diff --git a/apps/landing-page/src/app/blog/[slug]/Tweet.tsx b/apps/landing-page/src/features/blog/components/Tweet.tsx
similarity index 96%
rename from apps/landing-page/src/app/blog/[slug]/Tweet.tsx
rename to apps/landing-page/src/features/blog/components/Tweet.tsx
index 1f6b5e085d..6b9f71fa4c 100644
--- a/apps/landing-page/src/app/blog/[slug]/Tweet.tsx
+++ b/apps/landing-page/src/features/blog/components/Tweet.tsx
@@ -1,6 +1,6 @@
 import { EmbeddedTweet, TweetNotFound, type TweetProps } from "react-tweet";
 import { getTweet } from "react-tweet/api";
-import "./tweet.css";
+import "../assets/tweet.css";
 
 const TweetContent = async ({ id, components, onError }: TweetProps) => {
   let error;
diff --git a/apps/landing-page/src/features/blog/components/chakraClientComponents.ts b/apps/landing-page/src/features/blog/components/chakraClientComponents.ts
new file mode 100644
index 0000000000..22def5faee
--- /dev/null
+++ b/apps/landing-page/src/features/blog/components/chakraClientComponents.ts
@@ -0,0 +1,5 @@
+"use client";
+import { Link } from "@chakra-ui/next-js";
+import { Alert, AlertIcon, AlertTitle, Heading } from "@chakra-ui/react";
+
+export { Heading, Link, Alert, AlertIcon, AlertTitle };
diff --git a/apps/landing-page/src/features/blog/helpers.ts b/apps/landing-page/src/features/blog/helpers.ts
new file mode 100644
index 0000000000..fdcec6ed19
--- /dev/null
+++ b/apps/landing-page/src/features/blog/helpers.ts
@@ -0,0 +1,26 @@
+import { env } from "@typebot.io/env";
+import type { BlogPost } from "./types";
+
+export const generateMetadata = (post: BlogPost) => {
+  const ogImage = "";
+  return {
+    title: post.title,
+    description: post.description,
+    openGraph: {
+      type: "article",
+      publishedTime: post.postedAt?.toISOString(),
+      url: `${env.LANDING_PAGE_URL}/blog/${post.slug}`,
+      images: [
+        {
+          url: ogImage,
+        },
+      ],
+    },
+    twitter: {
+      card: "summary_large_image",
+      title: post.title,
+      description: post.description,
+      images: [ogImage],
+    },
+  };
+};
diff --git a/apps/landing-page/src/features/blog/types.ts b/apps/landing-page/src/features/blog/types.ts
new file mode 100644
index 0000000000..01fbf415b8
--- /dev/null
+++ b/apps/landing-page/src/features/blog/types.ts
@@ -0,0 +1,10 @@
+export interface BlogPostModel {
+  title: string;
+  description: string;
+  author: string;
+  postedAt?: Date;
+}
+
+export interface BlogPost extends BlogPostModel {
+  slug: string;
+}
diff --git a/apps/landing-page/src/mdx-components.tsx b/apps/landing-page/src/mdx-components.tsx
new file mode 100644
index 0000000000..486167c4d1
--- /dev/null
+++ b/apps/landing-page/src/mdx-components.tsx
@@ -0,0 +1,135 @@
+import { EndCta } from "@/components/Homepage/EndCta";
+import type { AlertProps } from "@chakra-ui/react";
+import { Standard } from "@typebot.io/nextjs";
+import type { MDXComponents } from "mdx/types";
+import Image from "next/image";
+import { highlight } from "sugar-high";
+import { Header } from "./features/blog/components/Header";
+import { Table } from "./features/blog/components/Table";
+import { Tweet } from "./features/blog/components/Tweet";
+import {
+  Alert,
+  AlertIcon,
+  AlertTitle,
+  Heading,
+  Link,
+} from "./features/blog/components/chakraClientComponents";
+
+const components: MDXComponents = {
+  h1: (props) => <Heading as="h1" {...props} />,
+  h2: (props) => <Heading as="h2" fontSize="3xl" {...props} />,
+  h3: (props) => <Heading as="h3" fontSize="2xl" {...props} />,
+  h4: (props) => <Heading as="h4" fontSize="xl" {...props} />,
+  h5: (props) => <Heading as="h5" fontSize="lg" {...props} />,
+  h6: (props) => <Heading as="h6" fontSize="md" {...props} />,
+  code: ({ children, ...props }) => {
+    if (!props.className || props.className?.includes("md"))
+      return <code {...props}>{children}</code>;
+    const hightlightedCode = highlight(children?.toString() ?? "");
+    return (
+      <code dangerouslySetInnerHTML={{ __html: hightlightedCode }} {...props} />
+    );
+  },
+  link: (props: any) => <Link {...props} />,
+  Image: (props) => (
+    <Image
+      style={{
+        borderRadius: ".5rem",
+        ...props.style,
+      }}
+      {...props}
+    />
+  ),
+  Callout: ({ children, title, ...props }: AlertProps) => (
+    <Alert rounded="md" {...props}>
+      <AlertIcon />
+      {title ? <AlertTitle>{title}</AlertTitle> : null}
+      {children}
+    </Alert>
+  ),
+  Tweet,
+  Typebot: (props: any) => (
+    <Standard
+      style={{
+        borderRadius: "0.375rem",
+        borderWidth: "1px",
+        height: "533px",
+        ...props.style,
+      }}
+      {...props}
+    />
+  ),
+  Youtube: ({ id }: { id: string }) => (
+    <div className="w-full">
+      <div
+        style={{
+          position: "relative",
+          paddingBottom: "64.63195691202873%",
+          height: 0,
+          width: "100%",
+        }}
+      >
+        <iframe
+          title="Youtube video"
+          src={`https://www.youtube.com/embed/${id}`}
+          allowFullScreen
+          style={{
+            position: "absolute",
+            top: 0,
+            left: 0,
+            width: "100%",
+            height: "100%",
+          }}
+        />
+      </div>
+    </div>
+  ),
+  Loom: ({ id }: { id: string }) => (
+    <div className="w-full">
+      <div
+        style={{
+          position: "relative",
+          paddingBottom: "64.63195691202873%",
+          height: 0,
+          width: "100%",
+        }}
+      >
+        <iframe
+          title="Loom video"
+          src={`https://www.loom.com/embed/${id}`}
+          allowFullScreen
+          style={{
+            position: "absolute",
+            top: 0,
+            left: 0,
+            width: "100%",
+            height: "100%",
+          }}
+        />
+      </div>
+    </div>
+  ),
+  Cta: (props) => (
+    <EndCta
+      style={{ maxWidth: "none", ...props.style }}
+      w="full"
+      h="auto"
+      py="0"
+      className="w-full"
+      bgGradient={null}
+      polygonsBaseTop="0px"
+      {...props}
+    />
+  ),
+  Table,
+  Header,
+};
+
+export function useMDXComponents(
+  otherComponents: MDXComponents,
+): MDXComponents {
+  return {
+    ...otherComponents,
+    ...components,
+  };
+}
diff --git a/bun.lockb b/bun.lockb
index d95a99f8ad..99f4fa3e23 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/packages/embeds/nextjs/tsup.config.ts b/packages/embeds/nextjs/tsup.config.ts
index 41bdd1c1ad..22a2e0fc0e 100644
--- a/packages/embeds/nextjs/tsup.config.ts
+++ b/packages/embeds/nextjs/tsup.config.ts
@@ -1,9 +1,12 @@
 import { defineConfig } from "tsup";
 
-export default defineConfig((options) => ({
+export default defineConfig(() => ({
   entry: ["src/index.ts"],
   format: "esm",
   platform: "browser",
   dts: true,
   clean: true,
+  banner: {
+    js: '"use client"',
+  },
 }));
diff --git a/packages/embeds/react/src/Standard.tsx b/packages/embeds/react/src/Standard.tsx
index e6dd9e6337..92a267f9b3 100644
--- a/packages/embeds/react/src/Standard.tsx
+++ b/packages/embeds/react/src/Standard.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import type { BotProps } from "@typebot.io/js";
 import type React from "react";
 import { useEffect, useRef } from "react";
diff --git a/yarn.lock b/yarn.lock
index 88c3177a39..3085a1c629 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1,6 +1,6 @@
 # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
 # yarn lockfile v1
-# bun ./bun.lockb --hash: D8219EA518735298-0574c093f7e07d3c-38278079867692F3-0b2415de251941e8
+# bun ./bun.lockb --hash: 60F312876B2C6D2D-d5ec8d9305908d00-F5891CE5E6C21F2A-5378a6ef7d86e4c1
 
 
 "@ai-sdk/anthropic@0.0.30":
@@ -3967,6 +3967,14 @@
   dependencies:
     "@lukeed/csprng" "^1.1.0"
 
+"@mdx-js/loader@3.0.1":
+  version "3.0.1"
+  resolved "https://registry.npmjs.org/@mdx-js/loader/-/loader-3.0.1.tgz"
+  integrity sha512-YbYUt7YyEOdFxhyuCWmLKf5vKhID/hJAojEUnheJk4D8iYVLFQw+BAoBWru/dHGch1omtmZOPstsmKPyBF68Tw==
+  dependencies:
+    "@mdx-js/mdx" "^3.0.0"
+    source-map "^0.7.0"
+
 "@mdx-js/mdx@^2.2.1":
   version "2.3.0"
   resolved "https://registry.npmjs.org/@mdx-js/mdx/-/mdx-2.3.0.tgz"
@@ -3990,6 +3998,35 @@
     unist-util-visit "^4.0.0"
     vfile "^5.0.0"
 
+"@mdx-js/mdx@^3.0.0":
+  version "3.0.1"
+  resolved "https://registry.npmjs.org/@mdx-js/mdx/-/mdx-3.0.1.tgz"
+  integrity sha512-eIQ4QTrOWyL3LWEe/bu6Taqzq2HQvHcyTMaOrI95P2/LmJE7AsfPfgJGuFLPVqBUE1BC1rik3VIhU+s9u72arA==
+  dependencies:
+    "@types/estree" "^1.0.0"
+    "@types/estree-jsx" "^1.0.0"
+    "@types/hast" "^3.0.0"
+    "@types/mdx" "^2.0.0"
+    collapse-white-space "^2.0.0"
+    devlop "^1.0.0"
+    estree-util-build-jsx "^3.0.0"
+    estree-util-is-identifier-name "^3.0.0"
+    estree-util-to-js "^2.0.0"
+    estree-walker "^3.0.0"
+    hast-util-to-estree "^3.0.0"
+    hast-util-to-jsx-runtime "^2.0.0"
+    markdown-extensions "^2.0.0"
+    periscopic "^3.0.0"
+    remark-mdx "^3.0.0"
+    remark-parse "^11.0.0"
+    remark-rehype "^11.0.0"
+    source-map "^0.7.0"
+    unified "^11.0.0"
+    unist-util-position-from-estree "^2.0.0"
+    unist-util-stringify-position "^4.0.0"
+    unist-util-visit "^5.0.0"
+    vfile "^6.0.0"
+
 "@mdx-js/react@^2.2.1":
   version "2.3.0"
   resolved "https://registry.npmjs.org/@mdx-js/react/-/react-2.3.0.tgz"
@@ -3998,6 +4035,13 @@
     "@types/mdx" "^2.0.0"
     "@types/react" ">=16"
 
+"@mdx-js/react@3.0.1":
+  version "3.0.1"
+  resolved "https://registry.npmjs.org/@mdx-js/react/-/react-3.0.1.tgz"
+  integrity sha512-9ZrPIU4MGf6et1m1ov3zKf+q9+deetI51zprKB1D/z3NOb+rUxxtEl3mCjW5wTGh6VhRdwPueh1oRzi6ezkA8A==
+  dependencies:
+    "@types/mdx" "^2.0.0"
+
 "@mintlify/cli@4.0.228":
   version "4.0.228"
   resolved "https://registry.npmjs.org/@mintlify/cli/-/cli-4.0.228.tgz"
@@ -4181,6 +4225,18 @@
   resolved "https://registry.npmjs.org/@next/env/-/env-14.2.13.tgz"
   integrity sha512-s3lh6K8cbW1h5Nga7NNeXrbe0+2jIIYK9YaA9T7IufDWnZpozdFUp6Hf0d5rNWUKu4fEuSX2rCKlGjCrtylfDw==
 
+"@next/env@14.2.15":
+  version "14.2.15"
+  resolved "https://registry.npmjs.org/@next/env/-/env-14.2.15.tgz"
+  integrity sha512-S1qaj25Wru2dUpcIZMjxeMVSwkt8BK4dmWHHiBuRstcIyOsMapqT4A4jSB6onvqeygkSSmOkyny9VVx8JIGamQ==
+
+"@next/mdx@14.2.15":
+  version "14.2.15"
+  resolved "https://registry.npmjs.org/@next/mdx/-/mdx-14.2.15.tgz"
+  integrity sha512-OQWxKY5jWtHqPXdN3s5mj/LsD57pxt8CQsY4VQtTfQdQn6rNPd1bjN+kpbtezXdjgrKhvTJAb1yv1XGvzlh0uw==
+  dependencies:
+    source-map "^0.7.0"
+
 "@next/swc-darwin-arm64@14.2.3":
   version "14.2.3"
   resolved "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.3.tgz"
@@ -4191,6 +4247,11 @@
   resolved "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.13.tgz"
   integrity sha512-IkAmQEa2Htq+wHACBxOsslt+jMoV3msvxCn0WFSfJSkv/scy+i/EukBKNad36grRxywaXUYJc9mxEGkeIs8Bzg==
 
+"@next/swc-darwin-arm64@14.2.15":
+  version "14.2.15"
+  resolved "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.15.tgz"
+  integrity sha512-Rvh7KU9hOUBnZ9TJ28n2Oa7dD9cvDBKua9IKx7cfQQ0GoYUwg9ig31O2oMwH3wm+pE3IkAQ67ZobPfEgurPZIA==
+
 "@next/swc-darwin-x64@14.2.3":
   version "14.2.3"
   resolved "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.3.tgz"
@@ -4201,6 +4262,11 @@
   resolved "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.13.tgz"
   integrity sha512-Dv1RBGs2TTjkwEnFMVL5XIfJEavnLqqwYSD6LXgTPdEy/u6FlSrLBSSfe1pcfqhFEXRAgVL3Wpjibe5wXJzWog==
 
+"@next/swc-darwin-x64@14.2.15":
+  version "14.2.15"
+  resolved "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.15.tgz"
+  integrity sha512-5TGyjFcf8ampZP3e+FyCax5zFVHi+Oe7sZyaKOngsqyaNEpOgkKB3sqmymkZfowy3ufGA/tUgDPPxpQx931lHg==
+
 "@next/swc-linux-arm64-gnu@14.2.3":
   version "14.2.3"
   resolved "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.3.tgz"
@@ -4211,6 +4277,11 @@
   resolved "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.13.tgz"
   integrity sha512-yB1tYEFFqo4ZNWkwrJultbsw7NPAAxlPXURXioRl9SdW6aIefOLS+0TEsKrWBtbJ9moTDgU3HRILL6QBQnMevg==
 
+"@next/swc-linux-arm64-gnu@14.2.15":
+  version "14.2.15"
+  resolved "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.15.tgz"
+  integrity sha512-3Bwv4oc08ONiQ3FiOLKT72Q+ndEMyLNsc/D3qnLMbtUYTQAmkx9E/JRu0DBpHxNddBmNT5hxz1mYBphJ3mfrrw==
+
 "@next/swc-linux-arm64-musl@14.2.3":
   version "14.2.3"
   resolved "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.3.tgz"
@@ -4221,6 +4292,11 @@
   resolved "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.13.tgz"
   integrity sha512-v5jZ/FV/eHGoWhMKYrsAweQ7CWb8xsWGM/8m1mwwZQ/sutJjoFaXchwK4pX8NqwImILEvQmZWyb8pPTcP7htWg==
 
+"@next/swc-linux-arm64-musl@14.2.15":
+  version "14.2.15"
+  resolved "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.15.tgz"
+  integrity sha512-k5xf/tg1FBv/M4CMd8S+JL3uV9BnnRmoe7F+GWC3DxkTCD9aewFRH1s5rJ1zkzDa+Do4zyN8qD0N8c84Hu96FQ==
+
 "@next/swc-linux-x64-gnu@14.2.3":
   version "14.2.3"
   resolved "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.3.tgz"
@@ -4231,6 +4307,11 @@
   resolved "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.13.tgz"
   integrity sha512-aVc7m4YL7ViiRv7SOXK3RplXzOEe/qQzRA5R2vpXboHABs3w8vtFslGTz+5tKiQzWUmTmBNVW0UQdhkKRORmGA==
 
+"@next/swc-linux-x64-gnu@14.2.15":
+  version "14.2.15"
+  resolved "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.15.tgz"
+  integrity sha512-kE6q38hbrRbKEkkVn62reLXhThLRh6/TvgSP56GkFNhU22TbIrQDEMrO7j0IcQHcew2wfykq8lZyHFabz0oBrA==
+
 "@next/swc-linux-x64-musl@14.2.3":
   version "14.2.3"
   resolved "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.3.tgz"
@@ -4241,6 +4322,11 @@
   resolved "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.13.tgz"
   integrity sha512-4wWY7/OsSaJOOKvMsu1Teylku7vKyTuocvDLTZQq0TYv9OjiYYWt63PiE1nTuZnqQ4RPvME7Xai+9enoiN0Wrg==
 
+"@next/swc-linux-x64-musl@14.2.15":
+  version "14.2.15"
+  resolved "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.15.tgz"
+  integrity sha512-PZ5YE9ouy/IdO7QVJeIcyLn/Rc4ml9M2G4y3kCM9MNf1YKvFY4heg3pVa/jQbMro+tP6yc4G2o9LjAz1zxD7tQ==
+
 "@next/swc-win32-arm64-msvc@14.2.3":
   version "14.2.3"
   resolved "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.3.tgz"
@@ -4251,6 +4337,11 @@
   resolved "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.13.tgz"
   integrity sha512-uP1XkqCqV2NVH9+g2sC7qIw+w2tRbcMiXFEbMihkQ8B1+V6m28sshBwAB0SDmOe0u44ne1vFU66+gx/28RsBVQ==
 
+"@next/swc-win32-arm64-msvc@14.2.15":
+  version "14.2.15"
+  resolved "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.15.tgz"
+  integrity sha512-2raR16703kBvYEQD9HNLyb0/394yfqzmIeyp2nDzcPV4yPjqNUG3ohX6jX00WryXz6s1FXpVhsCo3i+g4RUX+g==
+
 "@next/swc-win32-ia32-msvc@14.2.3":
   version "14.2.3"
   resolved "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.3.tgz"
@@ -4261,6 +4352,11 @@
   resolved "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.13.tgz"
   integrity sha512-V26ezyjPqQpDBV4lcWIh8B/QICQ4v+M5Bo9ykLN+sqeKKBxJVDpEc6biDVyluTXTC40f5IqCU0ttth7Es2ZuMw==
 
+"@next/swc-win32-ia32-msvc@14.2.15":
+  version "14.2.15"
+  resolved "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.15.tgz"
+  integrity sha512-fyTE8cklgkyR1p03kJa5zXEaZ9El+kDNM5A+66+8evQS5e/6v0Gk28LqA0Jet8gKSOyP+OTm/tJHzMlGdQerdQ==
+
 "@next/swc-win32-x64-msvc@14.2.3":
   version "14.2.3"
   resolved "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.3.tgz"
@@ -4271,6 +4367,11 @@
   resolved "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.13.tgz"
   integrity sha512-WwzOEAFBGhlDHE5Z73mNU8CO8mqMNLqaG+AO9ETmzdCQlJhVtWZnOl2+rqgVQS+YHunjOWptdFmNfbpwcUuEsw==
 
+"@next/swc-win32-x64-msvc@14.2.15":
+  version "14.2.15"
+  resolved "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.15.tgz"
+  integrity sha512-SzqGbsLsP9OwKNUG9nekShTwhj6JSB9ZLMWQ8g1gG6hdE5gQLncbnbymrwy2yVmH9nikSLYRYxYMFu78Ggp7/g==
+
 "@nextjournal/lang-clojure@^1.0.0":
   version "1.0.0"
   resolved "https://registry.npmjs.org/@nextjournal/lang-clojure/-/lang-clojure-1.0.0.tgz"
@@ -6599,7 +6700,7 @@
   dependencies:
     "@types/unist" "*"
 
-"@types/mdx@^2.0.0":
+"@types/mdx@2.0.13", "@types/mdx@^2.0.0":
   version "2.0.13"
   resolved "https://registry.npmjs.org/@types/mdx/-/mdx-2.0.13.tgz"
   integrity sha512-+OWZQfAYyio6YkJb3HLxDrvnx6SWWDbC0zVPfBRzUk0/nqoDyf6dNxQi3eArPe8rJ473nobTMQ/8Zk+LxJ+Yuw==
@@ -9421,6 +9522,11 @@ codemirror-lang-mermaid@^0.5.0:
     "@lezer/highlight" "^1.1.6"
     "@lezer/lr" "^1.3.10"
 
+collapse-white-space@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/collapse-white-space/-/collapse-white-space-2.1.0.tgz"
+  integrity sha512-loKTxY1zCOuG4j9f6EPnuyyYkf58RnhhWTvRoZEokgB+WbdXehfjFviyOVYkqzEWz1Q5kRiZdBYS5SwxbQYwzw==
+
 collect-v8-coverage@^1.0.0:
   version "1.0.2"
   resolved "https://registry.npmjs.org/collect-v8-coverage/-/collect-v8-coverage-1.0.2.tgz"
@@ -10697,6 +10803,13 @@ estree-util-attach-comments@^2.0.0:
   dependencies:
     "@types/estree" "^1.0.0"
 
+estree-util-attach-comments@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/estree-util-attach-comments/-/estree-util-attach-comments-3.0.0.tgz"
+  integrity sha512-cKUwm/HUcTDsYh/9FgnuFqpfquUbwIqwKM26BVCGDPVgvaCl/nDCCjUfiLlx6lsEZ3Z4RFxNbOQ60pkaEwFxGw==
+  dependencies:
+    "@types/estree" "^1.0.0"
+
 estree-util-build-jsx@^2.0.0:
   version "2.2.2"
   resolved "https://registry.npmjs.org/estree-util-build-jsx/-/estree-util-build-jsx-2.2.2.tgz"
@@ -10706,6 +10819,16 @@ estree-util-build-jsx@^2.0.0:
     estree-util-is-identifier-name "^2.0.0"
     estree-walker "^3.0.0"
 
+estree-util-build-jsx@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.npmjs.org/estree-util-build-jsx/-/estree-util-build-jsx-3.0.1.tgz"
+  integrity sha512-8U5eiL6BTrPxp/CHbs2yMgP8ftMhR5ww1eIKoWRMlqvltHF8fZn5LRDvTKuxD3DUn+shRbLGqXemcP51oFCsGQ==
+  dependencies:
+    "@types/estree-jsx" "^1.0.0"
+    devlop "^1.0.0"
+    estree-util-is-identifier-name "^3.0.0"
+    estree-walker "^3.0.0"
+
 estree-util-is-identifier-name@^2.0.0:
   version "2.1.0"
   resolved "https://registry.npmjs.org/estree-util-is-identifier-name/-/estree-util-is-identifier-name-2.1.0.tgz"
@@ -11729,6 +11852,28 @@ hast-util-to-estree@^2.0.0:
     unist-util-position "^4.0.0"
     zwitch "^2.0.0"
 
+hast-util-to-estree@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.npmjs.org/hast-util-to-estree/-/hast-util-to-estree-3.1.0.tgz"
+  integrity sha512-lfX5g6hqVh9kjS/B9E2gSkvHH4SZNiQFiqWS0x9fENzEl+8W12RqdRxX6d/Cwxi30tPQs3bIO+aolQJNp1bIyw==
+  dependencies:
+    "@types/estree" "^1.0.0"
+    "@types/estree-jsx" "^1.0.0"
+    "@types/hast" "^3.0.0"
+    comma-separated-tokens "^2.0.0"
+    devlop "^1.0.0"
+    estree-util-attach-comments "^3.0.0"
+    estree-util-is-identifier-name "^3.0.0"
+    hast-util-whitespace "^3.0.0"
+    mdast-util-mdx-expression "^2.0.0"
+    mdast-util-mdx-jsx "^3.0.0"
+    mdast-util-mdxjs-esm "^2.0.0"
+    property-information "^6.0.0"
+    space-separated-tokens "^2.0.0"
+    style-to-object "^0.4.0"
+    unist-util-position "^5.0.0"
+    zwitch "^2.0.0"
+
 hast-util-to-html@^8.0.3:
   version "8.0.4"
   resolved "https://registry.npmjs.org/hast-util-to-html/-/hast-util-to-html-8.0.4.tgz"
@@ -12983,7 +13128,7 @@ jest-worker@^29.7.0:
     merge-stream "^2.0.0"
     supports-color "^8.0.0"
 
-jiti@^1.18.2:
+jiti@^1.18.2, jiti@^1.21.0:
   version "1.21.6"
   resolved "https://registry.npmjs.org/jiti/-/jiti-1.21.6.tgz"
   integrity sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==
@@ -13287,17 +13432,21 @@ ky@1.2.4:
     "@chakra-ui/react" "2.8.2"
     "@emotion/react" "11.11.4"
     "@emotion/styled" "11.11.5"
+    "@mdx-js/loader" "3.0.1"
+    "@mdx-js/react" "3.0.1"
+    "@next/mdx" "14.2.15"
     "@typebot.io/billing" "packages/billing"
     "@typebot.io/env" "packages/env"
     "@typebot.io/lib" "packages/lib"
     "@typebot.io/nextjs" "packages/embeds/nextjs"
     "@typebot.io/prisma" "packages/prisma"
     "@typebot.io/typebot" "packages/typebot"
+    "@types/mdx" "2.0.13"
     aos "2.3.4"
+    fast-glob "^3.3.2"
     focus-visible "5.2.0"
     framer-motion "11.1.7"
     next "14.2.13"
-    next-mdx-remote "4.4.1"
     react "18.2.0"
     react-dom "18.2.0"
     react-tweet "3.2.1"
@@ -13569,6 +13718,11 @@ markdown-extensions@^1.0.0:
   resolved "https://registry.npmjs.org/markdown-extensions/-/markdown-extensions-1.1.1.tgz"
   integrity sha512-WWC0ZuMzCyDHYCasEGs4IPvLyTGftYwh6wIEOULOF0HXcqZlhwRzrK0w2VUlxWA98xnvb/jszw4ZSkJ6ADpM6Q==
 
+markdown-extensions@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/markdown-extensions/-/markdown-extensions-2.0.0.tgz"
+  integrity sha512-o5vL7aDWatOTX8LzaS1WMoaoxIiLRQJuIKKe2wAw6IeULDHaqbiqiggmx+pKvZDb1Sj+pE46Sn1T7lCqfFtg1Q==
+
 markdown-table@^3.0.0:
   version "3.0.3"
   resolved "https://registry.npmjs.org/markdown-table/-/markdown-table-3.0.3.tgz"
@@ -13738,6 +13892,17 @@ mdast-util-mdx@^2.0.0:
     mdast-util-mdxjs-esm "^1.0.0"
     mdast-util-to-markdown "^1.0.0"
 
+mdast-util-mdx@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/mdast-util-mdx/-/mdast-util-mdx-3.0.0.tgz"
+  integrity sha512-JfbYLAW7XnYTTbUsmpu0kdBUVe+yKVJZBItEjwyYJiDJuZ9w4eeaqks4HQO+R7objWgS2ymV60GYpI14Ug554w==
+  dependencies:
+    mdast-util-from-markdown "^2.0.0"
+    mdast-util-mdx-expression "^2.0.0"
+    mdast-util-mdx-jsx "^3.0.0"
+    mdast-util-mdxjs-esm "^2.0.0"
+    mdast-util-to-markdown "^2.0.0"
+
 mdast-util-mdx-expression@^1.0.0:
   version "1.3.2"
   resolved "https://registry.npmjs.org/mdast-util-mdx-expression/-/mdast-util-mdx-expression-1.3.2.tgz"
@@ -14167,6 +14332,20 @@ micromark-extension-mdx-expression@^1.0.0:
     micromark-util-types "^1.0.0"
     uvu "^0.5.0"
 
+micromark-extension-mdx-expression@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/micromark-extension-mdx-expression/-/micromark-extension-mdx-expression-3.0.0.tgz"
+  integrity sha512-sI0nwhUDz97xyzqJAbHQhp5TfaxEvZZZ2JDqUo+7NvyIYG6BZ5CPPqj2ogUoPJlmXHBnyZUzISg9+oUmU6tUjQ==
+  dependencies:
+    "@types/estree" "^1.0.0"
+    devlop "^1.0.0"
+    micromark-factory-mdx-expression "^2.0.0"
+    micromark-factory-space "^2.0.0"
+    micromark-util-character "^2.0.0"
+    micromark-util-events-to-acorn "^2.0.0"
+    micromark-util-symbol "^2.0.0"
+    micromark-util-types "^2.0.0"
+
 micromark-extension-mdx-jsx@^1.0.0, micromark-extension-mdx-jsx@^1.0.3:
   version "1.0.5"
   resolved "https://registry.npmjs.org/micromark-extension-mdx-jsx/-/micromark-extension-mdx-jsx-1.0.5.tgz"
@@ -14183,6 +14362,23 @@ micromark-extension-mdx-jsx@^1.0.0, micromark-extension-mdx-jsx@^1.0.3:
     estree-util-is-identifier-name "^2.0.0"
     micromark-factory-mdx-expression "^1.0.0"
 
+micromark-extension-mdx-jsx@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.npmjs.org/micromark-extension-mdx-jsx/-/micromark-extension-mdx-jsx-3.0.1.tgz"
+  integrity sha512-vNuFb9czP8QCtAQcEJn0UJQJZA8Dk6DXKBqx+bg/w0WGuSxDxNr7hErW89tHUY31dUW4NqEOWwmEUNhjTFmHkg==
+  dependencies:
+    "@types/acorn" "^4.0.0"
+    "@types/estree" "^1.0.0"
+    devlop "^1.0.0"
+    estree-util-is-identifier-name "^3.0.0"
+    micromark-factory-mdx-expression "^2.0.0"
+    micromark-factory-space "^2.0.0"
+    micromark-util-character "^2.0.0"
+    micromark-util-events-to-acorn "^2.0.0"
+    micromark-util-symbol "^2.0.0"
+    micromark-util-types "^2.0.0"
+    vfile-message "^4.0.0"
+
 micromark-extension-mdx-md@^1.0.0:
   version "1.0.1"
   resolved "https://registry.npmjs.org/micromark-extension-mdx-md/-/micromark-extension-mdx-md-1.0.1.tgz"
@@ -14190,6 +14386,13 @@ micromark-extension-mdx-md@^1.0.0:
   dependencies:
     micromark-util-types "^1.0.0"
 
+micromark-extension-mdx-md@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/micromark-extension-mdx-md/-/micromark-extension-mdx-md-2.0.0.tgz"
+  integrity sha512-EpAiszsB3blw4Rpba7xTOUptcFeBFi+6PY8VnJ2hhimH+vCQDirWgsMpz7w1XcZE7LVrSAUGb9VJpG9ghlYvYQ==
+  dependencies:
+    micromark-util-types "^2.0.0"
+
 micromark-extension-mdxjs@^1.0.0:
   version "1.0.1"
   resolved "https://registry.npmjs.org/micromark-extension-mdxjs/-/micromark-extension-mdxjs-1.0.1.tgz"
@@ -14204,6 +14407,20 @@ micromark-extension-mdxjs@^1.0.0:
     micromark-util-combine-extensions "^1.0.0"
     micromark-util-types "^1.0.0"
 
+micromark-extension-mdxjs@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/micromark-extension-mdxjs/-/micromark-extension-mdxjs-3.0.0.tgz"
+  integrity sha512-A873fJfhnJ2siZyUrJ31l34Uqwy4xIFmvPY1oj+Ean5PHcPBYzEsvqvWGaWcfEIr11O5Dlw3p2y0tZWpKHDejQ==
+  dependencies:
+    acorn "^8.0.0"
+    acorn-jsx "^5.0.0"
+    micromark-extension-mdx-expression "^3.0.0"
+    micromark-extension-mdx-jsx "^3.0.0"
+    micromark-extension-mdx-md "^2.0.0"
+    micromark-extension-mdxjs-esm "^3.0.0"
+    micromark-util-combine-extensions "^2.0.0"
+    micromark-util-types "^2.0.0"
+
 micromark-extension-mdxjs-esm@^1.0.0:
   version "1.0.5"
   resolved "https://registry.npmjs.org/micromark-extension-mdxjs-esm/-/micromark-extension-mdxjs-esm-1.0.5.tgz"
@@ -14219,6 +14436,21 @@ micromark-extension-mdxjs-esm@^1.0.0:
     uvu "^0.5.0"
     vfile-message "^3.0.0"
 
+micromark-extension-mdxjs-esm@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/micromark-extension-mdxjs-esm/-/micromark-extension-mdxjs-esm-3.0.0.tgz"
+  integrity sha512-DJFl4ZqkErRpq/dAPyeWp15tGrcrrJho1hKK5uBS70BCtfrIFg81sqcTVu3Ta+KD1Tk5vAtBNElWxtAa+m8K9A==
+  dependencies:
+    "@types/estree" "^1.0.0"
+    devlop "^1.0.0"
+    micromark-core-commonmark "^2.0.0"
+    micromark-util-character "^2.0.0"
+    micromark-util-events-to-acorn "^2.0.0"
+    micromark-util-symbol "^2.0.0"
+    micromark-util-types "^2.0.0"
+    unist-util-position-from-estree "^2.0.0"
+    vfile-message "^4.0.0"
+
 micromark-factory-destination@^1.0.0:
   version "1.1.0"
   resolved "https://registry.npmjs.org/micromark-factory-destination/-/micromark-factory-destination-1.1.0.tgz"
@@ -14271,6 +14503,21 @@ micromark-factory-mdx-expression@^1.0.0:
     micromark-util-events-to-acorn "^1.0.0"
     unist-util-position-from-estree "^1.0.0"
 
+micromark-factory-mdx-expression@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.npmjs.org/micromark-factory-mdx-expression/-/micromark-factory-mdx-expression-2.0.2.tgz"
+  integrity sha512-5E5I2pFzJyg2CtemqAbcyCktpHXuJbABnsb32wX2U8IQKhhVFBqkcZR5LRm1WVoFqa4kTueZK4abep7wdo9nrw==
+  dependencies:
+    "@types/estree" "^1.0.0"
+    devlop "^1.0.0"
+    micromark-factory-space "^2.0.0"
+    micromark-util-character "^2.0.0"
+    micromark-util-events-to-acorn "^2.0.0"
+    micromark-util-symbol "^2.0.0"
+    micromark-util-types "^2.0.0"
+    unist-util-position-from-estree "^2.0.0"
+    vfile-message "^4.0.0"
+
 micromark-factory-space@^1.0.0:
   version "1.1.0"
   resolved "https://registry.npmjs.org/micromark-factory-space/-/micromark-factory-space-1.1.0.tgz"
@@ -14449,6 +14696,20 @@ micromark-util-events-to-acorn@^1.0.0:
     uvu "^0.5.0"
     vfile-message "^3.0.0"
 
+micromark-util-events-to-acorn@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.npmjs.org/micromark-util-events-to-acorn/-/micromark-util-events-to-acorn-2.0.2.tgz"
+  integrity sha512-Fk+xmBrOv9QZnEDguL9OI9/NQQp6Hz4FuQ4YmCb/5V7+9eAh1s6AYSvL20kHkD67YIg7EpE54TiSlcsf3vyZgA==
+  dependencies:
+    "@types/acorn" "^4.0.0"
+    "@types/estree" "^1.0.0"
+    "@types/unist" "^3.0.0"
+    devlop "^1.0.0"
+    estree-util-visit "^2.0.0"
+    micromark-util-symbol "^2.0.0"
+    micromark-util-types "^2.0.0"
+    vfile-message "^4.0.0"
+
 micromark-util-html-tag-name@^1.0.0:
   version "1.2.0"
   resolved "https://registry.npmjs.org/micromark-util-html-tag-name/-/micromark-util-html-tag-name-1.2.0.tgz"
@@ -15164,7 +15425,7 @@ next@14.2.3:
     "@next/swc-linux-arm64-musl" "14.2.3"
     "@next/swc-win32-arm64-msvc" "14.2.3"
 
-next@*, "next@12.x || 13.x || 14.x", next@14.2.13, next@>=13, "next@>=13.4 <14.0.2 || ^14.0.3", "next@^12.2.5 || ^13 || ^14", "next@^13.2.0 || ^14.0 || ^15.0.0-rc.0", "next@^8.1.1-canary.54 || ^9.0.0 || ^10.0.0-0 || ^11.0.0 || ^12.0.0 || ^13.0.0":
+next@*, next@14.2.13, next@>=13, "next@>=13.4 <14.0.2 || ^14.0.3", "next@^12.2.5 || ^13 || ^14", "next@^13.2.0 || ^14.0 || ^15.0.0-rc.0", "next@^8.1.1-canary.54 || ^9.0.0 || ^10.0.0-0 || ^11.0.0 || ^12.0.0 || ^13.0.0":
   version "14.2.13"
   resolved "https://registry.npmjs.org/next/-/next-14.2.13.tgz"
   integrity sha512-BseY9YNw8QJSwLYD7hlZzl6QVDoSFHL/URN5K64kVEVpCsSOWeyjbIGK+dZUaRViHTaMQX8aqmnn0PHBbGZezg==
@@ -15187,6 +15448,29 @@ next@*, "next@12.x || 13.x || 14.x", next@14.2.13, next@>=13, "next@>=13.4 <14.0
     "@next/swc-linux-arm64-musl" "14.2.13"
     "@next/swc-win32-arm64-msvc" "14.2.13"
 
+"next@12.x || 13.x || 14.x":
+  version "14.2.15"
+  resolved "https://registry.npmjs.org/next/-/next-14.2.15.tgz"
+  integrity sha512-h9ctmOokpoDphRvMGnwOJAedT6zKhwqyZML9mDtspgf4Rh3Pn7UTYKqePNoDvhsWBAO5GoPNYshnAUGIazVGmw==
+  dependencies:
+    busboy "1.6.0"
+    postcss "8.4.31"
+    "@next/env" "14.2.15"
+    styled-jsx "5.1.1"
+    graceful-fs "^4.2.11"
+    "@swc/helpers" "0.5.5"
+    caniuse-lite "^1.0.30001579"
+  optionalDependencies:
+    "@next/swc-darwin-x64" "14.2.15"
+    "@next/swc-darwin-arm64" "14.2.15"
+    "@next/swc-linux-x64-gnu" "14.2.15"
+    "@next/swc-linux-x64-musl" "14.2.15"
+    "@next/swc-win32-x64-msvc" "14.2.15"
+    "@next/swc-linux-arm64-gnu" "14.2.15"
+    "@next/swc-win32-ia32-msvc" "14.2.15"
+    "@next/swc-linux-arm64-musl" "14.2.15"
+    "@next/swc-win32-arm64-msvc" "14.2.15"
+
 next-auth@4.24.8:
   version "4.24.8"
   resolved "https://registry.npmjs.org/next-auth/-/next-auth-4.24.8.tgz"
@@ -15202,7 +15486,7 @@ next-auth@4.24.8:
     "@babel/runtime" "^7.20.13"
     preact-render-to-string "^5.1.19"
 
-next-mdx-remote@4.4.1, next-mdx-remote@^4.4.1:
+next-mdx-remote@^4.4.1:
   version "4.4.1"
   resolved "https://registry.npmjs.org/next-mdx-remote/-/next-mdx-remote-4.4.1.tgz"
   integrity sha512-1BvyXaIou6xy3XoNF4yaMZUCb6vD2GTAa5ciOa6WoO+gAUTYsb1K4rI/HSC2ogAWLrb/7VSV52skz07vOzmqIQ==
@@ -15927,7 +16211,7 @@ postcss@8.4.31, postcss@8.x, postcss@^8.0.0, postcss@^8.0.9, postcss@^8.1.0, pos
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
-postcss@^8.4.47:
+postcss@^8.4.23, postcss@^8.4.47:
   version "8.4.47"
   resolved "https://registry.npmjs.org/postcss/-/postcss-8.4.47.tgz"
   integrity sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==
@@ -16594,6 +16878,13 @@ react@*, "react@16.10.2 - 18", react@18.0.0, react@18.2.0, react@18.x, "react@>=
   dependencies:
     loose-envify "^1.1.0"
 
+"react@^16.0.0 || ^17.0.0 || ^18.0.0", react@^18.2.0, react@^18.3.1:
+  version "18.3.1"
+  resolved "https://registry.npmjs.org/react/-/react-18.3.1.tgz"
+  integrity sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==
+  dependencies:
+    loose-envify "^1.1.0"
+
 react-clientside-effect@^1.2.6:
   version "1.2.6"
   resolved "https://registry.npmjs.org/react-clientside-effect/-/react-clientside-effect-1.2.6.tgz"
@@ -16609,6 +16900,14 @@ react-dom@*, react-dom@18.0.0, react-dom@18.2.0, "react-dom@>= 16.3", "react-dom
     scheduler "^0.23.0"
     loose-envify "^1.1.0"
 
+react-dom@^18.2.0:
+  version "18.3.1"
+  resolved "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz"
+  integrity sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==
+  dependencies:
+    scheduler "^0.23.2"
+    loose-envify "^1.1.0"
+
 react-email@3.0.1:
   version "3.0.1"
   resolved "https://registry.npmjs.org/react-email/-/react-email-3.0.1.tgz"
@@ -16961,6 +17260,14 @@ remark-mdx@^2.0.0:
     mdast-util-mdx "^2.0.0"
     micromark-extension-mdxjs "^1.0.0"
 
+remark-mdx@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.npmjs.org/remark-mdx/-/remark-mdx-3.0.1.tgz"
+  integrity sha512-3Pz3yPQ5Rht2pM5R+0J2MrGoBSrzf+tJG94N+t/ilfdh8YLyyKYtidAYwTveB20BoHAcwIopOUqhcmh2F7hGYA==
+  dependencies:
+    mdast-util-mdx "^3.0.0"
+    micromark-extension-mdxjs "^3.0.0"
+
 remark-parse@^10.0.0:
   version "10.0.2"
   resolved "https://registry.npmjs.org/remark-parse/-/remark-parse-10.0.2.tgz"
@@ -17294,7 +17601,7 @@ saxes@^6.0.0:
   dependencies:
     xmlchars "^2.2.0"
 
-scheduler@>=0.19.0, scheduler@^0.23.0:
+scheduler@>=0.19.0, scheduler@^0.23.0, scheduler@^0.23.2:
   version "0.23.2"
   resolved "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz"
   integrity sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==
@@ -18021,7 +18328,7 @@ style-mod@^4.0.0, style-mod@^4.1.0:
   resolved "https://registry.npmjs.org/style-mod/-/style-mod-4.1.2.tgz"
   integrity sha512-wnD1HyVqpJUI2+eKZ+eo1UwghftP6yuFheBqqe+bWCotBjC2K1YnteJILRMs3SM4V/0dLEW1SC27MWP5y+mwmw==
 
-style-to-object@^0.4.1:
+style-to-object@^0.4.0, style-to-object@^0.4.1:
   version "0.4.4"
   resolved "https://registry.npmjs.org/style-to-object/-/style-to-object-0.4.4.tgz"
   integrity sha512-HYNoHZa2GorYNyqiCaBgsxvcJIn7OHq6inEga+E6Ke3m5JkoqpQbnFssk4jwe+K7AhGa2fcha4wSOf1Kn01dMg==
@@ -18191,7 +18498,7 @@ tabbable@^6.0.1, tabbable@^6.2.0:
   resolved "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz"
   integrity sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==
 
-tailwindcss@3.3.3, "tailwindcss@>=3.0.0 || insiders":
+tailwindcss@3.3.3:
   version "3.3.3"
   resolved "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.3.tgz"
   integrity sha512-A0KgSkef7eE4Mf+nKJ83i75TMyq8HqY3qmFIJSWy8bNt0v1lG7jUcpGpoTFxAwYcWOphcTBLPPJg+bDfhDf52w==
@@ -18219,6 +18526,34 @@ tailwindcss@3.3.3, "tailwindcss@>=3.0.0 || insiders":
     postcss-load-config "^4.0.1"
     postcss-selector-parser "^6.0.11"
 
+"tailwindcss@>=3.0.0 || insiders":
+  version "3.4.13"
+  resolved "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.13.tgz"
+  integrity sha512-KqjHOJKogOUt5Bs752ykCeiwvi0fKVkr5oqsFNt/8px/tA8scFPIlkygsf6jXrfCqGHz7VflA6+yytWuM+XhFw==
+  dependencies:
+    arg "^5.0.2"
+    dlv "^1.1.3"
+    jiti "^1.21.0"
+    is-glob "^4.0.3"
+    postcss "^8.4.23"
+    resolve "^1.22.2"
+    sucrase "^3.32.0"
+    chokidar "^3.5.3"
+    fast-glob "^3.3.0"
+    lilconfig "^2.1.0"
+    didyoumean "^1.2.2"
+    micromatch "^4.0.5"
+    picocolors "^1.0.0"
+    postcss-js "^4.0.1"
+    glob-parent "^6.0.2"
+    object-hash "^3.0.0"
+    normalize-path "^3.0.0"
+    postcss-import "^15.1.0"
+    postcss-nested "^6.0.1"
+    "@alloc/quick-lru" "^5.2.0"
+    postcss-load-config "^4.0.1"
+    postcss-selector-parser "^6.0.11"
+
 tapable@^2.1.1, tapable@^2.2.0:
   version "2.2.1"
   resolved "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz"
@@ -19340,7 +19675,7 @@ webidl-conversions@^7.0.0:
   resolved "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz"
   integrity sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==
 
-webpack@>=4.40.0, webpack@^5.1.0:
+webpack@>=4.40.0, webpack@>=5, webpack@^5.1.0:
   version "5.95.0"
   resolved "https://registry.npmjs.org/webpack/-/webpack-5.95.0.tgz"
   integrity sha512-2t3XstrKULz41MNMBF+cJ97TyHdyQ8HCt//pqErqDvNjU9YQBnZxIHa11VXsi7F3mb5/aO2tuDxdeTPdU7xu9Q==