101 lines
2.4 KiB
Vue
101 lines
2.4 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
|
|
const props = defineProps<{
|
|
theme: string
|
|
t: (key: string) => string
|
|
}>()
|
|
|
|
const logoSrc = computed(() => {
|
|
if (props.theme === 'unicorn') return '/src/assets/images/logo_unicorn.png'
|
|
if (props.theme === 'luxury') return '/src/assets/images/logo_luxury.png'
|
|
if (props.theme === 'win95') return '/src/assets/images/logo_win95.png'
|
|
if (props.theme === 'nat') return '/src/assets/images/logo_nat.png'
|
|
return '/src/assets/images/logo_classic.png'
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<section id="home" class="hero">
|
|
<div class="container hero-content">
|
|
<div class="logo-container">
|
|
<img :src="logoSrc" :key="theme" alt="Haumdaucher Logo" class="hero-logo" />
|
|
</div>
|
|
<h1 class="hero-title">{{ t('hero.title') }}</h1>
|
|
<p class="hero-subtitle">{{ t('hero.subtitle') }}</p>
|
|
<div class="scroll-indicator">↓</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.hero {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hero-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.logo-container {
|
|
margin-bottom: 40px;
|
|
perspective: 1000px;
|
|
}
|
|
|
|
.hero-logo {
|
|
width: 300px;
|
|
height: auto;
|
|
animation: logo-entry 1s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
}
|
|
|
|
@keyframes logo-entry {
|
|
0% { transform: scale(0.5) rotateY(90deg); opacity: 0; }
|
|
100% { transform: scale(1) rotateY(0); opacity: 1; }
|
|
}
|
|
|
|
.hero-title {
|
|
font-size: clamp(1.8rem, 8vw, 4rem); /* Reduced base from 2rem to 1.8rem */
|
|
margin-bottom: 10px;
|
|
text-transform: uppercase;
|
|
line-height: 1.1;
|
|
width: 100%;
|
|
max-width: 100vw;
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
.hero-subtitle {
|
|
font-size: clamp(1rem, 5vw, 1.5rem);
|
|
font-style: italic;
|
|
width: 100%;
|
|
padding: 0 20px;
|
|
}
|
|
|
|
.scroll-indicator {
|
|
margin-top: 60px;
|
|
font-size: 2rem;
|
|
animation: bounce 2s infinite;
|
|
}
|
|
|
|
@keyframes bounce {
|
|
0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
|
|
40% {transform: translateY(-10px);}
|
|
60% {transform: translateY(-5px);}
|
|
}
|
|
|
|
[data-theme='luxury'] .hero-title {
|
|
background: linear-gradient(45deg, #d4af37, #f7ef8a, #d4af37);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
text-shadow: 0 10px 20px rgba(0,0,0,0.3);
|
|
}
|
|
|
|
[data-theme='unicorn'] .hero-title {
|
|
background: linear-gradient(45deg, #f06292, #ba68c8, #64b5f6);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
</style>
|