92 lines
2.3 KiB
Vue
92 lines
2.3 KiB
Vue
<template>
|
|
<section class="relative text-white">
|
|
<!-- Background layer -->
|
|
<div class="absolute inset-0 bg-cover bg-center bg-no-repeat w-full h-full"
|
|
:style="bgImage ? `background-image: url('${bgImage}')` : ''"
|
|
></div>
|
|
|
|
<!-- Overlay for readability -->
|
|
<div class="absolute inset-0 bg-black/5"></div>
|
|
|
|
<div class="relative z-10 h-full flex items-center justify-center md:justify-end pt-16 md:pt-24 pb-8 sm:pb-8 px-8 sm:px-12 lg:px-16">
|
|
<div class="bg-blue-600/80 p-8 rounded-lg shadow-lg w-full md:w-auto md:max-w-3xl">
|
|
<div class="flex flex-col items-end text-right">
|
|
<!-- Main Title -->
|
|
<h1 class="text-3xl sm:text-4xl md:text-5xl font-bold mb-4 text-white">
|
|
{{ $t(line1Key) }}
|
|
</h1>
|
|
|
|
<!-- Subtitle 1 -->
|
|
<p class="text-md sm:text-xl md:text-2xl text-white mb-4 font-semibold">
|
|
{{ $t(line2Key) }}
|
|
</p>
|
|
|
|
<!-- Subtitle 2 -->
|
|
<p class="text-sm sm:text-lg text-gray-200 font-light mb-2 tracking-wide max-w-2xl">
|
|
{{ $t(line3Key) }}
|
|
</p>
|
|
<!-- Subtitle 3 -->
|
|
<p v-if="line4Key" class="text-sm sm:text-lg text-gray-200 mb-4 font-light max-w-3xl">
|
|
{{ $t(line4Key) }}
|
|
</p>
|
|
<!-- Subtitle 4 -->
|
|
<p v-if="line5Key" class="text-md sm:text-2xl text-white mb-6 font-semibold max-w-3xl">
|
|
{{ $t(line5Key) }}
|
|
</p>
|
|
|
|
<!-- Buttons -->
|
|
<div class="flex flex-col sm:flex-row gap-4 justify-end mt-4">
|
|
<slot></slot>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
defineProps<{
|
|
line1Key: string;
|
|
line2Key: string;
|
|
line3Key: string;
|
|
line4Key?: string;
|
|
line5Key?: string;
|
|
bgImage?: string;
|
|
}>();
|
|
</script>
|
|
|
|
<style scoped>
|
|
section {
|
|
min-height: 550px;
|
|
}
|
|
|
|
h1, p {
|
|
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
section {
|
|
min-height: 500px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
section {
|
|
min-height: 450px;
|
|
}
|
|
.container {
|
|
justify-content: center;
|
|
}
|
|
.w-full.md\:w-4\/5 {
|
|
align-items: center;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
section {
|
|
min-height: 400px;
|
|
}
|
|
}
|
|
</style>
|