<script setup lang="ts">
defineProps<{
  eyebrow?: string
  title: string
  description: string
}>()
</script>

<template>
  <div class="flex flex-col gap-2 border-b border-violet-100 pb-4 md:flex-row md:items-end md:justify-between">
    <div>
    <p v-if="eyebrow" class="text-xs font-semibold uppercase tracking-[0.28em] text-violet-500">{{ eyebrow }}</p>
      <h2 class="mt-1 text-2xl font-semibold text-slate-900">{{ title }}</h2>
    </div>
    <p class="max-w-xl text-sm leading-6 text-slate-500">{{ description }}</p>
  </div>
</template>
