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 111 | 1x | <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>
|