eafonyang
24 lines
1.2 KiB
Vue
24 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
import type { SectionBlock } from '~/types/site';
|
|
|
|
const props = defineProps<{ section: SectionBlock }>();
|
|
|
|
const { overline, title, subtitle, content, overlineStyle, titleStyle, bodyStyle } = useSectionContent(props.section);
|
|
</script>
|
|
|
|
<template>
|
|
<div class="section-container py-120px flex-col-center text-center max-w-800px">
|
|
<p v-if="overline" class="text-13px font-semibold tracking-widest uppercase" :class="section.theme === 'dark' ? 'text-primary-300' : 'text-primary'" :style="overlineStyle">
|
|
{{ overline }}
|
|
</p>
|
|
<h2 class="mt-16px text-3xl md:text-5xl font-bold leading-tight" :class="section.theme === 'dark' ? 'text-white' : 'text-gray-900 dark:text-white'" :style="titleStyle">
|
|
{{ title }}
|
|
</h2>
|
|
<p v-if="subtitle" class="mt-20px text-lg md:text-xl" :class="section.theme === 'dark' ? 'text-gray-300' : 'text-gray-600 dark:text-gray-300'" :style="bodyStyle">
|
|
{{ subtitle }}
|
|
</p>
|
|
<div v-if="content" class="mt-16px text-15px leading-relaxed" :class="section.theme === 'dark' ? 'text-gray-400' : 'text-gray-500 dark:text-gray-400'" :style="bodyStyle" v-html="content" />
|
|
<SectionCta :section="section" class="mt-32px justify-center" />
|
|
</div>
|
|
</template>
|