first pass - kryz inspired
This commit is contained in:
kfj001 committed
1 parent
3063d01ec5
commit
771e1e166f
53 files changed
+10521
No files matched your search
@@ -0,0 +1,73 @@
|
||||
<section class="donate">
|
||||
<!-- Hero banner -->
|
||||
<div class="donate-banner">
|
||||
<div class="donate-banner-overlay">
|
||||
<div class="container donate-banner-content">
|
||||
<img src="assets/svg/orange-flower.svg" alt="" class="donate-flower-hero" aria-hidden="true">
|
||||
<h2>Keep the Music <span class="text-accent">Free</span></h2>
|
||||
<p class="donate-subtitle">
|
||||
KMountain Flower Radio is 100% listener-funded and independent.
|
||||
Your gift keeps our signal strong and our airwaves free for everyone.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<!-- Donation tiers -->
|
||||
<div class="donate-tiers">
|
||||
<h3>Choose Your Level of Support</h3>
|
||||
<div class="tiers-grid">
|
||||
<div class="tier-card" *ngFor="let tier of tiers">
|
||||
<div class="tier-icon">{{ tier.icon }}</div>
|
||||
<div class="tier-amount">${{ tier.amount }}</div>
|
||||
<div class="tier-period">per month</div>
|
||||
<h4>{{ tier.name }}</h4>
|
||||
<ul class="tier-benefits">
|
||||
<li *ngFor="let benefit of tier.benefits">{{ benefit }}</li>
|
||||
</ul>
|
||||
<a href="#" class="btn btn-tier">Select {{ tier.name }}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- One-time donation -->
|
||||
<div class="donate-one-time">
|
||||
<div class="donate-flower-divider" aria-hidden="true">
|
||||
<img src="assets/svg/small-flower.svg" alt="">
|
||||
</div>
|
||||
<h3>Or Make a One-Time Gift</h3>
|
||||
<p class="section-intro">
|
||||
Every dollar matters — from $5 to $5,000. No amount is too small to make
|
||||
a difference. All donations are tax-deductible (EIN: 84-XXXXXXX).
|
||||
</p>
|
||||
<a href="#" class="btn btn-lg">Give Any Amount</a>
|
||||
</div>
|
||||
|
||||
<!-- Why donate -->
|
||||
<div class="donate-why">
|
||||
<div class="why-grid">
|
||||
<div class="why-item">
|
||||
<span class="why-icon">📻</span>
|
||||
<strong>98.7 FM Signal</strong>
|
||||
<p>Covering 3 mountain counties and the valleys between</p>
|
||||
</div>
|
||||
<div class="why-item">
|
||||
<span class="why-icon">🎙️</span>
|
||||
<strong>24/7 On-Air</strong>
|
||||
<p>Over 15,000 hours of programming per year</p>
|
||||
</div>
|
||||
<div class="why-item">
|
||||
<span class="why-icon">🌍</span>
|
||||
<strong>Worldwide Stream</strong>
|
||||
<p>Accessible from every corner of the globe, free forever</p>
|
||||
</div>
|
||||
<div class="why-item">
|
||||
<span class="why-icon">🎓</span>
|
||||
<strong>Youth Programs</strong>
|
||||
<p>Free radio training for 200+ local students each year</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,197 @@
|
||||
@use '../../styles/variables' as *;
|
||||
@use '../../styles/mixins' as *;
|
||||
|
||||
.donate {
|
||||
background: var(--color-cream);
|
||||
}
|
||||
|
||||
// Banner
|
||||
.donate-banner {
|
||||
position: relative;
|
||||
margin-bottom: $spacing-3xl;
|
||||
}
|
||||
|
||||
.donate-banner-overlay {
|
||||
background: $mixed-gradient;
|
||||
padding: $spacing-3xl $spacing-lg;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.donate-banner-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.donate-flower-hero {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin: 0 auto $spacing-md;
|
||||
opacity: 0.7;
|
||||
animation: float 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.donate-banner h2 {
|
||||
color: var(--color-white);
|
||||
font-size: 2.4rem;
|
||||
margin-bottom: $spacing-md;
|
||||
}
|
||||
|
||||
.donate-subtitle {
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
font-size: 1.1rem;
|
||||
max-width: 550px;
|
||||
margin: 0 auto;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
// Tiers
|
||||
.donate-tiers {
|
||||
text-align: center;
|
||||
margin-bottom: $spacing-3xl;
|
||||
|
||||
h3 {
|
||||
font-size: 1.8rem;
|
||||
margin-bottom: $spacing-xl;
|
||||
}
|
||||
}
|
||||
|
||||
.tiers-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||||
gap: $spacing-lg;
|
||||
margin-bottom: $spacing-xl;
|
||||
}
|
||||
|
||||
.tier-card {
|
||||
@include card-style;
|
||||
padding: $spacing-xl;
|
||||
text-align: center;
|
||||
background: var(--color-white);
|
||||
border-top: 4px solid var(--color-accent);
|
||||
|
||||
.tier-icon {
|
||||
font-size: 2rem;
|
||||
margin-bottom: $spacing-sm;
|
||||
}
|
||||
|
||||
.tier-amount {
|
||||
font-size: 2.8rem;
|
||||
font-weight: 700;
|
||||
color: var(--color-accent);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.tier-period {
|
||||
font-size: 0.85rem;
|
||||
color: var(--color-medium);
|
||||
margin-bottom: $spacing-md;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.2rem;
|
||||
color: var(--color-primary);
|
||||
margin-bottom: $spacing-md;
|
||||
}
|
||||
|
||||
.tier-benefits {
|
||||
list-style: none;
|
||||
text-align: left;
|
||||
margin-bottom: $spacing-lg;
|
||||
|
||||
li {
|
||||
padding: $spacing-xs 0;
|
||||
font-size: 0.9rem;
|
||||
color: var(--color-dark);
|
||||
border-bottom: 1px solid var(--color-light);
|
||||
|
||||
&::before {
|
||||
content: '✓ ';
|
||||
color: $success-green;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-tier {
|
||||
@include button-style($accent-orange, $neutral-white, $accent-orange-dark);
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
// One-time
|
||||
.donate-one-time {
|
||||
text-align: center;
|
||||
padding: $spacing-2xl $spacing-lg;
|
||||
background: var(--color-primary);
|
||||
border-radius: $radius-xl;
|
||||
margin-bottom: $spacing-3xl;
|
||||
|
||||
.donate-flower-divider {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin: 0 auto $spacing-md;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
filter: brightness(1.2);
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: var(--color-white);
|
||||
font-size: 1.6rem;
|
||||
margin-bottom: $spacing-sm;
|
||||
}
|
||||
|
||||
.section-intro {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
margin-bottom: $spacing-lg;
|
||||
}
|
||||
|
||||
.btn-lg {
|
||||
@include button-style($accent-orange, $neutral-white, $accent-orange-dark);
|
||||
font-size: 1.2rem;
|
||||
padding: $spacing-md $spacing-2xl;
|
||||
}
|
||||
}
|
||||
|
||||
// Why
|
||||
.donate-why {
|
||||
padding-bottom: $spacing-xl;
|
||||
}
|
||||
|
||||
.why-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||||
gap: $spacing-lg;
|
||||
|
||||
.why-item {
|
||||
text-align: center;
|
||||
padding: $spacing-lg;
|
||||
|
||||
.why-icon {
|
||||
display: block;
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: $spacing-sm;
|
||||
}
|
||||
|
||||
strong {
|
||||
display: block;
|
||||
color: var(--color-primary);
|
||||
margin-bottom: $spacing-xs;
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 0.9rem;
|
||||
color: var(--color-medium);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: #{$bp-md - 1px}) {
|
||||
.donate-banner h2 { font-size: 1.8rem; }
|
||||
.tiers-grid { grid-template-columns: 1fr; max-width: 320px; margin-left: auto; margin-right: auto; }
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { NgFor } from '@angular/common';
|
||||
|
||||
interface Tier {
|
||||
name: string;
|
||||
amount: number;
|
||||
icon: string;
|
||||
benefits: string[];
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-donate',
|
||||
standalone: true,
|
||||
imports: [NgFor],
|
||||
templateUrl: './donate.component.html',
|
||||
styleUrl: './donate.component.scss',
|
||||
})
|
||||
export class DonateComponent {
|
||||
readonly tiers: Tier[] = [
|
||||
{
|
||||
name: 'Seed',
|
||||
amount: 5,
|
||||
icon: '🌱',
|
||||
benefits: [
|
||||
'Digital thank-you card',
|
||||
'Name listed on our website',
|
||||
'Quarterly newsletter',
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'Stream',
|
||||
amount: 15,
|
||||
icon: '🎵',
|
||||
benefits: [
|
||||
'All Seed benefits',
|
||||
'KMountain Flower pin',
|
||||
'Priority show-request line',
|
||||
'Annual station update call',
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'Ridge',
|
||||
amount: 30,
|
||||
icon: '🏔️',
|
||||
benefits: [
|
||||
'All Stream benefits',
|
||||
'Official member patch',
|
||||
'Exclusive show invitations',
|
||||
'Annual station tour',
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'Summit',
|
||||
amount: 60,
|
||||
icon: '⭐',
|
||||
benefits: [
|
||||
'All Ridge benefits',
|
||||
'Featured on the Summit Wall',
|
||||
'Name on-air during anniversary special',
|
||||
'Lifetime patron recognition',
|
||||
],
|
||||
},
|
||||
];
|
||||
}
|
||||
Reference in new issue
Block a user