CtaBlockB content could be abstracted

[prescience-data]

These appear to be similar/identical so could be scoped into their own CtaBlockBContent (or similar) component:

https://github.com/cssninjaStudio/vulk/blob/main/src/components/blocks/cta-blocks/CtaBlockB.vue#L49

https://github.com/cssninjaStudio/vulk/blob/main/src/components/blocks/cta-blocks/CtaBlockB.vue#L90

 export interface CtaBlockBProps {
  primary: CtaBlockBItemProps
  secondary: CtaBlockBItemProps
  inverted?: boolean
  boxed?: boolean
  color?: CtaBLockBColor
  shapes?: boolean
  animated?: boolean
 }

 export interface CtaBlockBItemProps  {
    title: string
    content: string
    cta: string
    link: string
    inverted: boolean
    textClasses: string[]
    blockClasses: string[]
 }

[prescience-data]

FWIW this was my current full implementation:

DualCta.vue

<script setup lang="ts">
  import { computed } from "vue"

  import type { SplitCtaBlockProps } from "./modules/SplitCtaBlock.vue"

  export type SplitCtaColor = "default" | "primary" | "darker"

  export interface SplitCtaProps {
    blocks: {
      left: SplitCtaBlockProps
      right: SplitCtaBlockProps
    }
    inverted?: boolean
    boxed?: boolean
    color?: SplitCtaColor
    shapes?: boolean
    animated?: boolean
  }

  const props = withDefaults(defineProps<SplitCtaProps>(), {
    inverted: false,
    boxed: false,
    color: "default",
    shapes: false,
    animated: false
  })

  const container = computed(() => ({
    inverted:
      (props.boxed && props.color === "primary") ||
      props.color === "darker" ||
      (props.inverted && props.color === "default"),
    textClasses: [
      props.boxed && props.color === "primary" && `has-text-white`,
      props.boxed && props.color === "darker" && `has-text-white`,
      props.inverted &&
        !props.boxed &&
        props.color === "default" &&
        `text-light`
    ],
    blockClasses: [
      props.inverted &&
        !props.boxed &&
        props.color === "default" &&
        `is-inverted`,
      props.boxed && `is-boxed`,
      props.shapes && `has-shapes`,
      props.animated && `is-animated`,
      props.color && `is-${props.color}`
    ]
  }))

  const leftBlock = computed(() => ({
    ...props.blocks.left,
    ...container.value
  }))
  const rightBlock = computed(() => ({
    ...props.blocks.right,
    ...container.value
  }))
</script>
<template>
  <div class="mx-auto max-w-8 py-6">
    <div class="columns is-vcentered b-flex-tablet-p">
      <div class="column is-6">
        <SplitCtaBlock v-bind="leftBlock" />
      </div>
      <div class="column is-6">
        <SplitCtaBlock v-bind="rightBlock" />
      </div>
    </div>
  </div>
</template>

DualCtaContent.vue

<script setup lang="ts">
  export interface SplitCtaBlockProps {
    title: string
    content: string
    cta: string
    link: string
    inverted?: boolean
    blockClasses?: string[]
    textClasses?: string[]
  }

  const props = withDefaults(defineProps<SplitCtaBlockProps>(), {
    inverted: false,
    blockClasses: undefined,
    textClasses: undefined
  })
</script>

<template>
  <div class="cta-block mobile:mb-6" :class="props.blockClasses">
    <div class="cta-content">
      <Title
        tag="h3"
        :size="4"
        weight="semi"
        :inverted="props.inverted"
        leading
      >
        <span>{{ props.title }}</span>
      </Title>
      <p
        class="paragraph mx-auto max-w-3 mb-4 opacity-70"
        :class="props.textClasses"
      >
        <slot>
          {{ props.content }}
        </slot>
      </p>
      <Buttons alignment="centered">
        <Button color="primary" :long="3" :to="props.link" raised>
          {{ props.cta }}
        </Button>
      </Buttons>
    </div>
    <div class="moving-shape moving-shape-1"></div>
    <div class="moving-shape moving-shape-2"></div>
    <div class="moving-shape moving-shape-3"></div>
    <div class="moving-shape moving-shape-4"></div>
    <div class="moving-shape moving-shape-5"></div>
  </div>
</template>

<style scoped lang="scss">
  .cta-block {
    text-align: center;

    .cta-content {
      position: relative;
      z-index: 1;
    }

    &.is-boxed {
      position: relative;
      background: var(--card-bg-color);
      border: 1px solid var(--card-border-color);
      padding: 3.5rem;
      max-width: 740px;
      margin: 0 auto;
      border-radius: 1.5rem;
      overflow: hidden;

      .moving-shape {
        display: none;
        position: absolute;
        height: 50px;
        border-radius: 50rem;
        background: var(--widget-grey);
        transition: transform 0.4s ease, opacity 0.15s, width 0.6s;
        z-index: 0;

        &.moving-shape-1 {
          top: 30px;
          left: 80px;
          width: 90px;
        }

        &.moving-shape-2 {
          bottom: 30px;
          right: 40px;
          width: 110px;
        }

        &.moving-shape-3 {
          bottom: 80px;
          left: 10px;
          width: 70px;
        }

        &.moving-shape-4 {
          bottom: -20px;
          left: 80px;
          width: 80px;
        }

        &.moving-shape-5 {
          top: 60px;
          right: -20px;
          width: 70px;
        }
      }

      &.has-shapes {
        .moving-shape {
          display: block;
        }
      }

      &.is-animated {
        .moving-shape {
          opacity: 0;

          &.moving-shape-1 {
            transform: translateX(-350px);
            width: 250px;
            transition-delay: 0.15s;
          }

          &.moving-shape-2 {
            transform: translateX(-400px);
            width: 250px;
            transition-delay: 0.55s;
          }

          &.moving-shape-3 {
            transform: translateX(-280px);
            width: 250px;
            transition-delay: 0.35s;
          }

          &.moving-shape-4 {
            transform: translateX(-350px);
            width: 250px;
            transition-delay: 0.65s;
          }

          &.moving-shape-5 {
            transform: translateX(-450px);
            width: 250px;
            transition-delay: 0.4s;
          }
        }

        &:hover {
          .moving-shape {
            opacity: 1;
            transform: translateX(0) !important;

            &.moving-shape-1 {
              width: 90px;
            }

            &.moving-shape-2 {
              width: 110px;
            }

            &.moving-shape-3 {
              width: 70px;
            }

            &.moving-shape-4 {
              width: 80px;
            }

            &.moving-shape-5 {
              width: 70px;
            }
          }
        }
      }

      &.is-primary {
        background: var(--cta-boxed-primary-bg-color);
        border: none;

        .moving-shape {
          opacity: 0.2;
        }

        &.is-animated:hover {
          .moving-shape {
            opacity: 0.1;
          }
        }
      }

      &.is-darker {
        background: var(--cta-boxed-darker-bg-color);
        border: none;

        .moving-shape {
          opacity: 0.05;
        }

        &.is-animated:hover {
          .moving-shape {
            opacity: 0.05;
          }
        }
      }
    }
  }

  .is-dark {
    .cta-block {
      &.is-boxed:not(.is-primary):not(.is-darker) {
        .moving-shape {
          opacity: 0.05;
        }
      }

      &.is-boxed {
        &.is-animated:hover {
          .moving-shape {
            opacity: 0.05;
          }
        }
      }
    }
  }
</style>