
<template>
    <h2 class="section-title">
        <span>{{ title }}</span><br>
        <GradientText v-if="gradient">{{ gradient }}</GradientText>
    </h2>
    <div class="section-divider"></div>
    <p class="section-subtitle" v-if="subtitle">
        {{ subtitle }}
    </p>
</template>

<style scoped>
.section-divider {
    width: 128px;
    height: 4px;
    background: var(--gradient-adventure);
    margin: 2rem auto;
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 100%, 8px 100%);
}

.section-title {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: bold;
    text-align: center;
    margin-bottom: 1rem;
    line-height: 1.1;
}

.section-subtitle {
    font-size: 1.25rem;
    color: var(--muted-foreground);
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}
</style>
<script setup lang="ts">

import GradientText from "@/components/dredgy/GradientText.vue";


const props = defineProps<{
    title: string
    gradient?: string
    subtitle?: string
}>()
</script>
