57 lines
1.3 KiB
Vue
57 lines
1.3 KiB
Vue
<script setup>
|
|
defineProps({
|
|
eyebrow: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
title: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
description: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
image: {
|
|
type: String,
|
|
default: "/images/banner-bg.jpg",
|
|
},
|
|
routes: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<section
|
|
class="relative overflow-hidden bg-black bg-cover bg-center text-white"
|
|
:style="{ backgroundImage: `url(${image})` }"
|
|
>
|
|
<div class="absolute inset-0 bg-black/55" />
|
|
<div class="absolute inset-x-0 bottom-0 h-24 bg-gradient-to-t from-white to-transparent" />
|
|
<div class="container-gm relative z-10 py-24 md:py-32">
|
|
<p
|
|
v-if="eyebrow"
|
|
class="text-sm uppercase tracking-[0.34em] text-white/65"
|
|
data-hero-reveal
|
|
>
|
|
{{ eyebrow }}
|
|
</p>
|
|
<h1 class="mt-5 max-w-4xl text-balance text-[34px] font-semibold leading-tight md:text-[42px]" data-hero-reveal>
|
|
{{ title }}
|
|
</h1>
|
|
<p
|
|
v-if="description"
|
|
class="mt-6 max-w-2xl text-base leading-8 text-white/78 md:text-lg"
|
|
data-hero-reveal
|
|
>
|
|
{{ description }}
|
|
</p>
|
|
<div v-if="routes.length" class="mt-8" data-hero-reveal>
|
|
<SectionRouteLinks :routes="routes" light />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|