49 lines
1.0 KiB
Vue
49 lines
1.0 KiB
Vue
|
|
<template>
|
|
<h2 class="section-title">
|
|
<span v-if="title">{{ title }}</span><br v-if="title">
|
|
<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>
|