80 lines
1.6 KiB
Vue
80 lines
1.6 KiB
Vue
<template>
|
|
<section
|
|
:id="id"
|
|
class="relative flex flex-col p-4 md:p-12 mb-8 items-center justify-center gap-4 md:gap-8 text-center h-dvh lg:h-[85dvh] bg-gradient-conic-hero rounded-3xl">
|
|
|
|
<img
|
|
v-if="shapes.shape_1"
|
|
:src="`/img/${shapes.shape_1}`"
|
|
alt="hero background shape left"
|
|
class="absolute left-0 bottom-0 h-60 md:h-25.6" >
|
|
<img
|
|
v-if="shapes.shape_2"
|
|
:src="`/img/${shapes.shape_2}`"
|
|
alt="hero background shape right"
|
|
class="absolute right-0 top-0 h-60 md:h-25.6" >
|
|
|
|
<div class=" flex flex-col items-center z-10 gap-6 px-4 max-w-3xl">
|
|
<h1 class="text-32 md:text-40 lg:text-5xl font-bold">{{ title }}</h1>
|
|
<p class="text-24 max-w-2xl">{{ subtitle }}</p>
|
|
<NuxtLink v-if="button" :to="button.link">
|
|
<ButtonCTA :color="button.color" class="uppercase mt-6">
|
|
{{ button.label }}
|
|
</ButtonCTA>
|
|
</NuxtLink>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
export default {
|
|
props: {
|
|
id: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
title: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
subtitle: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
button: {
|
|
type: Object,
|
|
default: () => ({
|
|
label: "",
|
|
link: "",
|
|
}),
|
|
},
|
|
shapes: {
|
|
type: Object,
|
|
default: () => ({
|
|
shape_1: "",
|
|
shape_2: "",
|
|
}),
|
|
},
|
|
},
|
|
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
p {
|
|
font-size: 24px;
|
|
}
|
|
|
|
text-24 {
|
|
@media screen and (min-width: 1023px) {
|
|
font-size: 24px;
|
|
}
|
|
@media screen and (max-width: 1023px) {
|
|
font-size: 20px;
|
|
}
|
|
@media screen and (max-width: 640px) {
|
|
font-size: 18px;
|
|
}
|
|
}
|
|
</style> |