<script setup>
defineProps({
  eyebrow: String,
  title: String,
  subtitle: String,
})
</script>

<template>
  <section class="page-hero">
    <div class="container">
      <span v-if="eyebrow" class="eyebrow">{{ eyebrow }}</span>
      <h1>{{ title }}</h1>
      <p v-if="subtitle" class="page-hero__sub">{{ subtitle }}</p>
    </div>
  </section>
</template>

<style scoped>
.page-hero {
  padding: var(--space-9) 0 var(--space-7);
  border-bottom: 1px solid var(--color-border-soft);
  background:
    radial-gradient(800px 360px at 90% 0%, rgba(0, 229, 255, 0.08), transparent 60%);
}
.page-hero__sub {
  font-size: 1.15rem;
  color: var(--color-text-muted);
  max-width: 720px;
  margin: var(--space-4) 0 0;
}
</style>
