99 lines
2.0 KiB
Vue
99 lines
2.0 KiB
Vue
// components/HeroBox.vue
|
|
<template>
|
|
<section class="heroBox" :aria-label="ariaLabel">
|
|
<NuxtImg
|
|
provider="strapi"
|
|
:src="image"
|
|
class="hero-bg"
|
|
sizes="sm:100vw md:100vw lg:100vw"
|
|
alt=""
|
|
aria-hidden="true"
|
|
priority
|
|
loading="eager"
|
|
preload
|
|
fetchpriority="high"
|
|
/>
|
|
<div class="container-10 content">
|
|
<h1>{{ $t(content.headline1) }}</h1>
|
|
<h2>{{ $t(content.headline2) }}</h2>
|
|
<h3>{{ $t(content.headline3) }}</h3>
|
|
</div>
|
|
<svg class="sectionWave wave-bottom" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 20" aria-hidden="true">
|
|
<path d="M 0 0 L 500 0 L 500 14 Q 354.4 -2.8 250 11 Q 145.6 24.8 0 14 L 0 0 Z" fill="#FFF"/>
|
|
</svg>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineProps({
|
|
image: String,
|
|
ariaLabel: String,
|
|
content: {
|
|
type: Object,
|
|
required: true
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style lang="sass" scoped>
|
|
.heroBox
|
|
position: relative
|
|
min-height: 35rem
|
|
height: 70vh
|
|
display: flex
|
|
align-items: center
|
|
justify-content: center
|
|
overflow: hidden
|
|
|
|
&::after
|
|
position: absolute
|
|
content: ""
|
|
z-index: 0
|
|
top: 0
|
|
left: 0
|
|
width: 100%
|
|
height: 100%
|
|
background-image: linear-gradient(
|
|
to bottom right,
|
|
rgba(255,255,255,0.4) 0%,
|
|
rgba(255,255,255,0.3) 2%,
|
|
rgba(0, 0, 0, 0.7) 60%,
|
|
rgba(255, 255, 255, 0) 100%,
|
|
transparent 100%
|
|
)
|
|
|
|
.hero-bg
|
|
position: absolute
|
|
inset: 0
|
|
width: 100%
|
|
height: 100%
|
|
object-fit: cover
|
|
object-position: center top
|
|
z-index: -1
|
|
|
|
.content, h1, h2, h3
|
|
position: relative
|
|
z-index: 1
|
|
|
|
h1, h2, h3
|
|
color: white
|
|
z-index: 2
|
|
line-height: 1.5
|
|
max-width: 70%
|
|
@media (max-width: 768px)
|
|
max-width: 100%
|
|
|
|
h1
|
|
margin-top: 3rem
|
|
font-size: clamp(2rem, 1.4rem + 3vw, 2.8rem)
|
|
margin-bottom: 0
|
|
font-family: 'Comfortaa'
|
|
|
|
h2
|
|
font-size: clamp(1.2rem, .7rem + 2vw, 2rem)
|
|
margin: .8rem 0 .8rem 0
|
|
font-family: 'Comfortaa'
|
|
|
|
h3
|
|
font-size: 1.2rem
|
|
</style> |