140 lines
2.7 KiB
Vue
140 lines
2.7 KiB
Vue
<template>
|
|
<section class="hero">
|
|
<div class="hero-bg"></div>
|
|
<div class="hero-overlay"></div>
|
|
|
|
<div class="hero-content">
|
|
<h1 class="hero-title animate-fade">
|
|
<GradientText>Travel.</GradientText><br>
|
|
<span>On the Edge</span>
|
|
</h1>
|
|
|
|
<p class="hero-subtitle animate-slide">
|
|
We don't go wherever is trendy. <br/>
|
|
We set the trends.
|
|
</p>
|
|
<div class="hero-buttons">
|
|
<EdgyButton classes="btn-secondary">View Tours</EdgyButton>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="scroll-indicator">
|
|
<div class="scroll-mouse">
|
|
<div class="scroll-dot"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</template>
|
|
|
|
<style scoped>
|
|
/* Hero Section */
|
|
.hero {
|
|
position: relative;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hero-bg {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 120%;
|
|
background-image: url('/img/hero.jpg');
|
|
background-size: cover;
|
|
background-position: center;
|
|
will-change: transform;
|
|
}
|
|
|
|
.hero-overlay {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 120%;
|
|
background: var(--gradient-hero);
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.hero-content {
|
|
position: relative;
|
|
z-index: 10;
|
|
text-align: center;
|
|
max-width: 1000px;
|
|
padding: 0 2rem;
|
|
}
|
|
|
|
.hero-title {
|
|
font-size: clamp(3rem, 8vw, 6rem);
|
|
font-weight: bold;
|
|
margin-bottom: 1.5rem;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
.hero-subtitle {
|
|
font-size: clamp(1.125rem, 2.5vw, 1.5rem);
|
|
color: var(--muted-foreground);
|
|
margin-bottom: 2rem;
|
|
max-width: 600px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.hero-buttons {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
align-items: center;
|
|
}
|
|
|
|
@media (min-width: 640px) {
|
|
.hero-buttons {
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
@media (max-width: 767px) {
|
|
|
|
.hero-content {
|
|
padding: 0 1rem;
|
|
}
|
|
}
|
|
|
|
.scroll-indicator {
|
|
position: absolute;
|
|
bottom: 2rem;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
animation: bounce 2s infinite;
|
|
}
|
|
|
|
.scroll-mouse {
|
|
width: 24px;
|
|
height: 40px;
|
|
border: 2px solid var(--foreground);
|
|
border-radius: 12px;
|
|
display: flex;
|
|
justify-content: center;
|
|
padding-top: 8px;
|
|
}
|
|
|
|
.scroll-dot {
|
|
width: 4px;
|
|
height: 12px;
|
|
background: var(--foreground);
|
|
border-radius: 2px;
|
|
animation: pulse 2s infinite;
|
|
}
|
|
|
|
</style>
|
|
|
|
<script setup lang="ts">
|
|
|
|
import EdgyButton from "@/components/dredgy/EdgyButton.vue";
|
|
import GradientText from "@/components/dredgy/GradientText.vue";
|
|
</script>
|