<template>
	<div class="hero-title">{{ props.title }}</div>
</template>

<script lang="ts" setup>
const props = defineProps({
	title: {
		type: String,
		default: '',
	},
});
</script>

<style scoped lang="scss">
.hero-title {
	color: #0253b0;
	text-align: left;
	padding: 8px 15px;
	background: linear-gradient(135deg, #d2e8ff, #fcfeff);
	box-shadow: 0 8px 20px #fcfeff;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
</style>
