working 3 tier approach

src/app/donate/donate.component.html

@@ -17,18 +17,24 @@
     <!-- 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>
+      @if (loading) {
+        <div class="schedule-loading">Loading tiers&hellip;</div>
+      } @else if (tiers.length === 0) {
+        <div class="schedule-empty">No donation tiers available. Check back soon!</div>
+      } @else {
+        <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>
+      }
     </div>
 
     <!-- One-time donation -->
@@ -48,22 +54,22 @@
     <div class="donate-why">
       <div class="why-grid">
         <div class="why-item">
-          <span class="why-icon">📻</span>
+          <span class="why-icon">&#x1F4FB;</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>
+          <span class="why-icon">&#x1F399;</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>
+          <span class="why-icon">&#x1F30D;</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>
+          <span class="why-icon">&#x1F393;</span>
           <strong>Youth Programs</strong>
           <p>Free radio training for 200+ local students each year</p>
         </div>

src/app/donate/donate.component.ts

@@ -1,12 +1,8 @@
-import { Component } from '@angular/core';
+import { Component, inject, OnInit } from '@angular/core';
 import { NgFor } from '@angular/common';
 
-interface Tier {
-  name: string;
-  amount: number;
-  icon: string;
-  benefits: string[];
-}
+import { TierService } from '../services/tier.service';
+import { Tier } from '../interfaces/tier';
 
 @Component({
   selector: 'app-donate',
@@ -15,50 +11,22 @@ interface Tier {
   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',
-      ],
-    },
-  ];
+export class DonateComponent implements OnInit {
+  private tierService = inject(TierService);
+
+  tiers: Tier[] = [];
+  loading = true;
+
+  ngOnInit(): void {
+    this.tierService.getTiers().subscribe({
+      next: (data) => {
+        this.tiers = data;
+        this.loading = false;
+      },
+      error: () => {
+        this.loading = false;
+        this.tiers = [];
+      },
+    });
+  }
 }