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 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 | 1x 1x 1x 1x 1x 13x 13x 13x 13x 15x 1x 7x 7x 7x 1x 2x 3x 18x 18x 1x 40x 18x 18x 17x 15x | import { Component, computed, signal, OnInit, OnDestroy } from '@angular/core';
import { trigger, transition, style, animate } from '@angular/animations';
import { MatIcon } from '@angular/material/icon';
import { NgClass, NgFor } from '@angular/common';
interface DemoStep {
icon: string;
title: string;
description: string;
color: string;
image: string;
}
interface Testimonial {
name: string;
role: string;
content: string;
rating: number;
avatar: string;
}
@Component({
selector: 'app-demo',
templateUrl: './demo.component.html',
styleUrls: ['./demo.component.css'],
imports: [
MatIcon,
NgClass,
NgFor,
],
animations: [
trigger('fadeAnimation', [
transition(':enter', [
style({ opacity: 0 }),
animate('750ms ease-in-out', style({ opacity: 1 }))
]),
transition('* => *', [
style({ opacity: 0 }),
animate('750ms ease-in-out', style({ opacity: 1 }))
])
])
]
})
export class DemoComponent implements OnInit, OnDestroy {
hardcolor: string = "#a33360";
readonly steps: DemoStep[] = [
{
icon: 'smartphone',
title: 'Open Any UPI App',
description: 'Launch your favorite UPI app - PhonePe, Google Pay, Paytm, or any other',
color: '#2563eb',
image: '/assets/PNB RuPay Card Section - Cropped/Open Any UPI App.png'
},
{
icon: 'qr_code_scanner',
title: 'Scan QR Code',
description: "Simply scan the merchant's QR code at any store or online",
color: '#9333ea',
image: '/assets/PNB RuPay Card Section - Cropped/Scan QR Code.png'
},
{
icon: 'credit_card',
title: 'Select PNB RuPay Card',
description: 'Choose your PNB RuPay Credit Card from your linked payment methods',
color: '#a33360',
image: '/assets/PNB RuPay Card Section - Cropped/Select PNB RuPay Card.png'
},
{
icon: 'check_circle',
title: 'Payment Done!',
description: 'Your payment is complete with reward points earned instantly',
color: '#16a34a',
image: '/assets/PNB RuPay Card Section - Cropped/Payment Done!.png'
},
];
readonly testimonials: Testimonial[] = [
{
name: "Rajesh Kumar",
role: "Small Business Owner",
content: "PNB RuPay Credit Card has revolutionized my payment process. The UPI integration is seamless and I earn reward points on every transaction. Highly recommended!",
rating: 5,
avatar: "assets/avatars/rajesh.jpg"
},
{
name: "Priya Sharma",
role: "Freelance Designer",
content: "I love using my PNB RuPay Card for UPI payments. It's accepted everywhere and the cashback offers are amazing. The best part is instant virtual card activation.",
rating: 5,
avatar: "assets/avatars/priya.jpg"
},
{
name: "Amit Patel",
role: "Marketing Manager",
content: "As someone who travels frequently, the PNB RuPay Card on UPI has been a game-changer. No more carrying cash, and the reward points add up quickly. Excellent service!",
rating: 4,
avatar: "assets/avatars/amit.jpg"
}
];
readonly selectedIndex = signal(0);
private autoplayInterval: any;
readonly activeStep = computed(() => this.steps[this.selectedIndex()] ?? this.steps[0]);
getBackgroundImageUrl(): string {
return `url(${this.activeStep().image})`;
}
setActive(index: number): void {
this.stopAutoplay();
this.selectedIndex.set(index);
// Restart autoplay after manual selection
setTimeout(() => {
this.startAutoplay();
}, 8000); // Start autoplay after 2 slides (8 seconds)
}
goPrev(): void {
this.selectedIndex.update((value) => (value === 0 ? this.steps.length - 1 : value - 1));
}
goNext(): void {
this.selectedIndex.update((value) => (value === this.steps.length - 1 ? 0 : value + 1));
}
startAutoplay(): void {
this.stopAutoplay();
this.autoplayInterval = setInterval(() => {
this.goNext();
}, 5000); // 5 seconds per slide
}
stopAutoplay(): void {
if (this.autoplayInterval) {
clearInterval(this.autoplayInterval);
this.autoplayInterval = null;
}
}
ngOnInit(): void {
this.startAutoplay();
}
ngOnDestroy(): void {
this.stopAutoplay();
}
} |