admin/www/app/components/section/layouts/LayoutFullBanner.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-[var(--sec-py,120px)] flex-col-center text-center max-w-800px">
    <p v-if="overline" class="text-14px font-semibold tracking-widest uppercase" :class="section.theme === 'dark' ? 'text-primary-300' : 'text-primary'" :style="overlineStyle">
      {{ overline }}
    </p>
    <h2 class="mt-16px 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="rich-text 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>