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 112 113 | 1x | <section class="testimonials-section py-5" aria-labelledby="demo-heading">
<div class="testimonial-header">
<span><mat-icon>bolt</mat-icon> Interactive Demo</span>
<h2 id="demo-heading">Experience the Magic of</h2>
<h3>UPI Payments with PNB RuPay Card</h3>
<p>See how easy it is to pay using your PNB RuPay Credit Card on any UPI app</p>
</div>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="phone-mockup">
<div class="phone-screen">
<img [@fadeAnimation]="selectedIndex()" [src]="activeStep().image" [style]="'width: 100%; height: 100%; object-fit: cover; border-radius: 24px;'" alt="UPI App Screenshot">
</div>
</div>
</div>
<div class="col-md-6">
<div class="demo-content">
<ul>
<li class="demo-step-item" *ngFor="let step of steps; let i = index" (click)="setActive(i)"
[ngClass]="{'active': selectedIndex() === i, 'done': selectedIndex() > i}"
[style.border-color]="selectedIndex() === i ? hardcolor : ''"
[style.background-color]="selectedIndex() === i ? step.color + '0a' : (selectedIndex() > i ? '#fdf8f9' : '')">
<div>
<div class="icon-wrapper">
@if (selectedIndex() > i) {
<div class="done-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"></circle>
<path d="m9 12 2 2 4-4"></path>
</svg>
</div>
} @else {
<mat-icon [style.background-color]="selectedIndex() === i ? step.color : ''"
[style.color]="selectedIndex() === i ? '#fff' : ''">{{ step.icon
}}</mat-icon>
}
</div>
</div>
<div>
<h4 [style.color]="selectedIndex() === i ? hardcolor : ''">{{ step.title }}</h4>
<p>{{ step.description }}</p>
</div>
@if (selectedIndex() === i) {
<div class="ms-auto step-chevron">
<mat-icon [style.color]="hardcolor">chevron_right</mat-icon>
</div>
}
</li>
</ul>
<div class="demo-content_a">
<button type="button" (click)="goPrev()" class="arrow-btn">
<mat-icon>navigate_before</mat-icon>
</button>
<button type="button" (click)="goNext()" class="arrow-btn">
<mat-icon>navigate_next</mat-icon>
</button>
</div>
</div>
<div class="demo-content_b">
<h4><mat-icon>bolt</mat-icon> Why Choose PNB RuPay for UPI?</h4>
<ul>
<li><mat-icon>check_circle</mat-icon> Works with ALL UPI apps - PhonePe, Google Pay, Paytm &
more</li>
<li><mat-icon>check_circle</mat-icon> Earn reward points on every UPI transaction</li>
<li><mat-icon>check_circle</mat-icon> 30-day billing cycle for better cash flow management</li>
<li><mat-icon>check_circle</mat-icon> Instant virtual card activation</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Testimonials Section -->
<section class="testimonials-section py-5" aria-labelledby="testimonials-heading">
<div class="container">
<div class="testimonial-header">
<h2 id="testimonials-heading">What Our Customers Say</h2>
<p>Real experiences from PNB RuPay Card users</p>
</div>
<div class="row">
<div class="col-md-4" *ngFor="let testimonial of testimonials; let i = index">
<div class="testimonial-card">
<div class="testimonial-avatar">
<img [src]="testimonial.avatar" [alt]="testimonial.name">
</div>
<div class="testimonial-content">
<div class="testimonial-header">
<h4>{{ testimonial.name }}</h4>
<span class="testimonial-role">{{ testimonial.role }}</span>
<div class="testimonial-rating">
<span *ngFor="let star of [].constructor(testimonial.rating); let j = index">
<mat-icon>star</mat-icon>
</span>
</div>
</div>
<p>{{ testimonial.content }}</p>
</div>
</div>
</div>
</div>
</div>
</section>
</section> |