kfj001/kmtnflower
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

data driven about us screen

Browse Source
This commit is contained in:
kfj001
2026-06-21 05:24:40 +00:00
parent f52625b37b
commit 1b537b3dfd
34 changed files with 2119 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/about/about.component.html
+63 -38
View File
@@ -1,5 +1,6 @@
<section class="about">
<div class="container">
<!-- Intro -->
<div class="about-intro">
<img [src]="config().hero_icon_url" alt="" class="about-flower-decor" aria-hidden="true">
<h2>About <span class="text-accent">{{ config().name_primary }} {{ config().name_secondary }}</span></h2>
@@ -10,45 +11,69 @@
</p>
</div>
<div class="about-grid">
<div class="about-card">
<div class="card-icon">🎵</div>
<h3>Our Music</h3>
<p>
From bluegrass and folk to jazz and classical, our playlists reflect
the rich cultural tapestry of the high country and its neighbors. We
feature local artists alongside the world's best voices.
</p>
</div>
<div class="about-card">
<div class="card-icon">🤝</div>
<h3>Our Community</h3>
<p>
Every show is staffed by volunteers who live and work in these
mountains. From high school DJs to retired teachers, our team is your
community — passionate about sharing what they love.
</p>
</div>
<div class="about-card">
<div class="card-icon">📡</div>
<h3>Our Reach</h3>
<p>
Over the air on {{ config().frequency }} and streaming live worldwide. Whether you're
hiking the ridgeline or on the other side of the planet, our signal
— and our welcome — goes everywhere.
</p>
</div>
<div class="about-card">
<div class="card-icon">🌱</div>
<h3>Our Mission</h3>
<p>
To keep public radio free, independent, and deeply rooted in place.
No corporate advertising, no spin — just music, conversation, and
community served with care.
</p>
</div>
</div>
<!-- Community Highlights Grid -->
@if (communityHighlights$ | async; as highlights) {
@if (highlights.length) {
<div class="about-grid">
@for (highlight of highlights; track highlight.id) {
<div class="about-card">
<div class="card-icon">{{ highlight.icon }}</div>
<h3>{{ highlight.title }}</h3>
<p>{{ highlight.description }}</p>
</div>
}
</div>
}
}
<!-- History Timeline -->
@if (historyEntries$ | async; as entries) {
@if (entries.length) {
<div class="timeline-section">
<h2 class="section-title">Our <span class="text-accent">History</span></h2>
<div class="timeline">
@for (entry of entries; track entry.id; let index = $index) {
<div class="timeline-item" [class.even]="index % 2 === 1">
<div class="timeline-card">
<span class="timeline-year">{{ entry.year }}</span>
<h3>{{ entry.title }}</h3>
<p>{{ entry.body }}</p>
</div>
</div>
}
</div>
</div>
}
}
<!-- Team Roster -->
@if (teamMembers$ | async; as members) {
@if (members.length) {
<div class="team-section">
<h2 class="section-title">Our <span class="text-accent">Team</span></h2>
<div class="team-grid">
@for (member of members; track member.id) {
<div class="team-card">
<div class="team-photo">
@if (member.photo_url) {
<img [src]="member.photo_url" [alt]="member.name">
} @else {
<span>{{ member.name.charAt(0) }}</span>
}
</div>
<h3>{{ member.name }}</h3>
<p class="team-title">{{ member.title }}</p>
@if (member.bio) {
<p class="team-bio">{{ member.bio }}</p>
}
</div>
}
</div>
</div>
}
}
<!-- Donation CTA -->
<div class="about-cta">
<div class="about-flower-divider" aria-hidden="true">
<img [src]="config().logo_url" alt="">