# All files / app/cards cards.component.html

100% Statements 1/1
100% Branches 0/0
100% Functions 0/0
100% Lines 1/1

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    1111x

     <section class="testimonials-section py-5" id="cards" aria-labelledby="cards-heading">
      <div class="testimonial-header">
        <span>Our Credit Cards</span>
        <h2 id="cards-heading">Choose Your Perfect</h2>
        <h3>Banking Partner</h3>
        <p>
          From everyday spending to luxury experiences, find the credit card that matches<br>
          your lifestyle and financial goals.
        </p>
      </div>

      <div class="container">

        <!-- Top Action Cards -->
        <div class="row">
          @if (showCardMatcher) {
          <div class="col-md-1"></div>

          <div class="col-md-5">
            <div class="our_cards-c">
              <h2>Not sure which card suits you?</h2>
              <p>Answer 3 quick questions to find your perfect match</p>
              <button type="button" (click)="openApplyPage()">
                <mat-icon>search</mat-icon> Find My Perfect Card
              </button>
            </div>
          </div>
          }

          <div class="col-12 col-md-5" [class.mx-auto]="!showCardMatcher">
            <div class="our_cards-c diff">
              <h2>Check if you are Prequalified</h2>
              <p>See if you're pre-qualified with no impact to your credit score</p>
              <button type="button" (click)="checkPrequalification()">
                <mat-icon>shield</mat-icon> Check Prequalification
              </button>
            </div>
          </div>
        </div>

        <!-- Filters -->
        <div class="cards_filter" aria-label="Filter cards by category">
          <ul>
            <li *ngFor="let filter of filters()">
              <button
                type="button"
                class="filter-chip"
                (click)="setFilter(filter)"
                (keydown)="onFilterKeydown($event, filter)"
                [class.active]="selectedFilter() === filter"
                [attr.aria-pressed]="selectedFilter() === filter"
              >
                {{ filter }}
              </button>
            </li>
          </ul>
        </div>

        <!-- Cards Grid -->
        <div class="row g-4 mb-5">
          @for (item of filteredCards(); track item.id || $index) {
          <div class="col-md-4">
            <div class="testimonial-card p-4 h-100 d-flex flex-column" [class.most-popular]="item.isMostPopular">

              @if (item.isMostPopular) {
              <div class="popular-badge">
                <span>Most Popular</span>
              </div>
              }

              <div class="our_cards">
                <h2>{{ item.name }}</h2>
                <p>{{ item.cardType }}</p>

                <div class="card-image-wrapper my-3">
                  <img [src]="item.image" [alt]="item.name + ' Credit Card'" title="Credit Card" loading="lazy"
                    decoding="async" class="card-image-display">
                </div>

                <h3>{{ item.annualFee }} <span>Annual Fee</span></h3>
                <h4>{{ item.creditLimit }} <span>Credit Limit</span></h4>
              </div>

              <div class="our_cards-a">
                <ul>
                  <li *ngFor="let perk of item.perks">
                    <mat-icon>check_small</mat-icon> {{ perk }}
                  </li>
                </ul>
                <a [href]="item.applyUrl || 'https://apply.creditcard.pnb.bank.in/'" target="_blank"
                  rel="noopener noreferrer">
                  <button type="button">
                    Apply Now <mat-icon>bolt</mat-icon>
                  </button>
                </a>
              </div>

            </div>
          </div>
          }
        </div>

        <!-- View All -->
        @if (visibleCount() < filteredTotal()) { <div class="our_cards-b">
          <button type="button" (click)="viewAll()">View All Cards</button>
      </div>
      }

      </div>
    </section>