91 lines
3.3 KiB
HTML
91 lines
3.3 KiB
HTML
<section class="about">
|
|
<div class="container">
|
|
<!-- Intro -->
|
|
<div class="about-intro">
|
|
<img [src]="resolveImageUrl(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>
|
|
<p class="section-intro">
|
|
For nearly four decades, {{ config().name_primary }} {{ config().name_secondary }} has been the voice of our
|
|
community — a nonprofit, listener-supported radio station dedicated to
|
|
music, local news, and the stories that bind mountain towns together.
|
|
</p>
|
|
</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]="resolveImageUrl(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]="resolveImageUrl(config().logo_url)" alt="">
|
|
</div>
|
|
<h3>Become a Member</h3>
|
|
<p class="section-intro">
|
|
As a {{ config().nonprofit_type }} nonprofit, every donation keeps our airwaves free and our
|
|
signal strong. Members receive exclusive perks and the satisfaction of
|
|
knowing they helped make this possible.
|
|
</p>
|
|
<a routerLink="/donate" class="btn">Join the Station</a>
|
|
</div>
|
|
</div>
|
|
</section>
|