nuxt content not rendering components properly

---
title: 'MVP development'
---
::content-hero
<div class="flex flex-col md:w-1/2 w-full mt-12 text-balance gap-12">
      <div>
        ::content-title{type="h2"}
            Your Vision, Crafted with Care and Precision.
        ::
      </div>
      <div>
        ::content-title
          We create tailored
          <span
              :class="[{ [`bg-[url('/assets/images/swoosh-sharpie.svg')] bg-no-repeat swoosh`]: mounted && colorMode.value === 'light' }]"
              class="text-blew">
            digital solutions
          </span>
          for every stage of business,
          built with care and designed for growth.
        ::
      </div>
      <div>
        <span class="font-semibold text-gandalf-700 text-lg">Marijn Wijbenga &#8212; Digital Solutions Architect</span>
      </div>
      <div class="mt-8 mx-auto sm:mx-0">
        ::content-button
          Get a free consultation
        ::
      </div>
    </div>
    <div class="md:w-1/2 w-full h-[39rem] hidden md:block">
      <div
          class="bg-[url('/assets/images/hero-image-wybit.png')]
          h-full bg-contain bg-no-repeat bg-right"></div>
    </div>
::

// content-button
<script setup lang="ts">
...props here
</script>

<template>
  <UiButton
      :layout-type="layoutType"
      :button-size="buttonSize"
      :button-type="buttonType"
  >
    <slot></slot>
  </UiButton>
</template>

<style scoped>

</style>