working 3 tier approach

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 = [];
+      },
+    });
+  }
 }