MDX compile error in blog.mdx

[next-mdx-remote] error compiling MDX:
Unexpected character `!` (U+0021) before name, expected a character that can start a name, such as a letter, `$`, or `_` (note: to create a comment in MDX, use `{/* text */}`)

More information: https://mdxjs.com/docs/troubleshooting-mdx

Raw MDX source:

<section className="hero">
  <h1>Blog</h1>
  <p>Insights, updates, and perspectives on cross-border payments, treasury, and FX.</p>
</section>

<section className="blog-index">
  <div className="posts">
    <article className="post" data-draft="false">
      <h2><a href="/p/blog/how-to-reduce-cross-border-payment-costs-for-indian-businesses">How to Reduce Cross-Border Payment Costs for Indian Businesses</a></h2>
      <p className="meta">Published</p>
      <p>Practical strategies Indian businesses can use to cut fees, improve FX rates, and streamline international payments.</p>
    </article>
    <!-- Additional blog posts will be listed here automatically as they are published. Each post should include a title, description, and date. -->
  </div>
</section>