59 lines
1.3 KiB
Vue
59 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
import type { PropType } from 'vue'
|
|
|
|
const props = defineProps({
|
|
title: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
description: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
logo: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
sectionLogo: {
|
|
type: null as unknown as PropType<string | null>,
|
|
default: null,
|
|
required: false,
|
|
},
|
|
thumbnail: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
alt: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
})
|
|
|
|
const sentence = computed(() => {
|
|
return props.description.split('.').at(0) + '...'
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="w-full h-full flex flex-col justify-end text-white relative">
|
|
<img
|
|
:src="thumbnail"
|
|
:alt="alt"
|
|
class="w-full h-full object-cover absolute top-0 left-0"
|
|
/>
|
|
<div class="absolute top-0 left-0 p-5">
|
|
<img :src="logo" alt="Logo" class="w-[100] h-[100]" />
|
|
</div>
|
|
<div v-if="sectionLogo" class="absolute top-0 right-0 p-5">
|
|
<img :src="sectionLogo" alt="Logo" class="w-[100] h-[100]" />
|
|
</div>
|
|
|
|
<div class="mb-5 px-5" style="text-shadow: black 1px 1px 10px">
|
|
<h1 class="m-0 text-[60px]">{{ title }}</h1>
|
|
<strong class="min-h-[90px] m-0 text-[24px]" style="font-family: Lato">
|
|
{{ sentence }}
|
|
</strong>
|
|
</div>
|
|
</div>
|
|
</template>
|