<template>
	<div
		class="hero-title"
		:style="'color:' + props.color + ';text-align:' + props.textAlign + ';padding:' + props.padding"
	>
		{{ props.title }}
	</div>
</template>

<script lang="ts" setup>
const props = defineProps({
	title: {
		type: String,
		default: '',
	},
	color: {
		type: String,
		default: '#0253b0',
	},
	textAlign: {
		type: String,
		default: 'left',
	},
	padding: {
		type: String,
		default: '8px 15px',
	},
});
</script>

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