first pass - kryz inspired
This commit is contained in:
@@ -0,0 +1,42 @@
|
||||
<section class="hero">
|
||||
<!-- Mountain background layer -->
|
||||
<div class="hero-mountains" aria-hidden="true">
|
||||
<img src="assets/svg/mountain-silhouette.svg" alt="">
|
||||
</div>
|
||||
|
||||
<!-- Gradient overlay -->
|
||||
<div class="hero-gradient"></div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="hero-content container">
|
||||
<div class="hero-inner">
|
||||
<div class="hero-icon">
|
||||
<img src="assets/svg/orange-flower.svg" alt="" class="hero-flower">
|
||||
</div>
|
||||
<h1 class="hero-title">
|
||||
<span class="hero-line1">KMountain</span>
|
||||
<span class="hero-line2 text-accent">Flower Radio</span>
|
||||
</h1>
|
||||
<p class="hero-subtitle">
|
||||
Your community-powered, nonprofit radio station — bringing music,
|
||||
stories, and connection to the mountain towns and beyond since 1987.
|
||||
</p>
|
||||
<p class="hero-subtitle hero-tagline">
|
||||
Free to stream. Funded by you. Always on-air.
|
||||
</p>
|
||||
<div class="hero-actions">
|
||||
<a routerLink="/donate" class="btn btn-hero-primary">Support the Station</a>
|
||||
<a routerLink="/schedule" class="btn btn-hero-secondary">View Schedule</a>
|
||||
</div>
|
||||
<div class="hero-listeners">
|
||||
<span class="listeners-dot"></span>
|
||||
<span class="listeners-text">Live on-air now — Stream free worldwide</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mountain divider at bottom -->
|
||||
<div class="hero-divider" aria-hidden="true">
|
||||
<img src="assets/svg/mountain-divider.svg" alt="">
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,166 @@
|
||||
@use '../../styles/variables' as *;
|
||||
@use '../../styles/mixins' as *;
|
||||
|
||||
.hero {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.hero-mountains {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: center bottom;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-gradient {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 1;
|
||||
background: $sky-gradient;
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
text-align: center;
|
||||
padding: $spacing-3xl $spacing-lg;
|
||||
}
|
||||
|
||||
.hero-inner {
|
||||
@include fade-in;
|
||||
}
|
||||
|
||||
.hero-icon {
|
||||
margin-bottom: $spacing-lg;
|
||||
animation: float 4s ease-in-out infinite;
|
||||
|
||||
.hero-flower {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin: 0 auto;
|
||||
filter: drop-shadow(0 4px 12px rgba(232, 122, 46, 0.4));
|
||||
}
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
margin-bottom: $spacing-md;
|
||||
}
|
||||
|
||||
.hero-line1 {
|
||||
display: block;
|
||||
font-size: 3.5rem;
|
||||
font-weight: 700;
|
||||
color: var(--color-white);
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.hero-line2 {
|
||||
display: block;
|
||||
font-size: 3rem;
|
||||
font-weight: 700;
|
||||
@include gradient-text(var(--color-accent-light), var(--color-accent));
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 1.15rem;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
max-width: 600px;
|
||||
margin: 0 auto $spacing-sm;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.hero-tagline {
|
||||
font-style: italic;
|
||||
color: var(--color-accent-muted);
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
|
||||
.hero-actions {
|
||||
display: flex;
|
||||
gap: $spacing-md;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
margin: $spacing-lg 0;
|
||||
}
|
||||
|
||||
.btn-hero-primary {
|
||||
@include button-style($accent-orange, $neutral-white, $accent-orange-dark);
|
||||
font-size: 1.1rem;
|
||||
padding: $spacing-sm $spacing-xl;
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
|
||||
.btn-hero-secondary {
|
||||
@include button-style(transparent, var(--color-white), rgba(255,255,255,0.15));
|
||||
border: 2px solid rgba(255, 255, 255, 0.4);
|
||||
font-size: 1.1rem;
|
||||
padding: $spacing-sm $spacing-xl;
|
||||
letter-spacing: 0.03em;
|
||||
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
}
|
||||
|
||||
.hero-listeners {
|
||||
margin-top: $spacing-xl;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: $spacing-sm;
|
||||
font-size: 0.95rem;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.listeners-dot {
|
||||
display: inline-block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: $radius-full;
|
||||
background: $success-green;
|
||||
animation: pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(74, 158, 79, 0.4); }
|
||||
50% { opacity: 0.7; box-shadow: 0 0 0 6px rgba(74, 158, 79, 0); }
|
||||
}
|
||||
|
||||
.hero-divider {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 3;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive
|
||||
@media (max-width: #{$bp-md - 1px}) {
|
||||
.hero-line1 { font-size: 2.5rem; }
|
||||
.hero-line2 { font-size: 2.2rem; }
|
||||
.hero-subtitle { font-size: 1rem; }
|
||||
.hero-flower { width: 70px; height: 70px; }
|
||||
.hero-actions { flex-direction: column; align-items: center; }
|
||||
}
|
||||
|
||||
@media (max-width: #{$bp-sm - 1px}) {
|
||||
.hero-line1 { font-size: 2rem; }
|
||||
.hero-line2 { font-size: 1.8rem; }
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-hero',
|
||||
standalone: true,
|
||||
imports: [],
|
||||
templateUrl: './hero.component.html',
|
||||
styleUrl: './hero.component.scss',
|
||||
})
|
||||
export class HeroComponent {}
|
||||
Reference in New Issue
Block a user