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 | 1x | @if (isBrowser) {
<ngb-carousel #carousel [showNavigationIndicators]="true" [interval]="5000" [pauseOnHover]="false" [keyboard]="true"
[wrap]="true" class="home_banner-carousel" (slide)="onSlide($event)">
@for (banner of banners(); track banner.id || $index) {
<ng-template ngbSlide>
<div class="home_banner">
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="home_banner-a">
@if (banner.badges && banner.badges.length > 0) {
<span>
<mat-icon>workspace_premium</mat-icon> {{ banner.badges[0] }}
</span>
}
<h1>{{ banner.title }}</h1>
<p>{{ banner.subtitle }}</p>
<ul>
<li *ngFor="let item of banner.checklist; let i = index">
@if (i === 0) {
<svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<path
d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" />
</svg>
} @else if (i === 1) {
<svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<path
d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z" />
</svg>
} @else if (i === 2) {
<svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<path
d="m15.477 12.89 1.515 8.526a.5.5 0 0 1-.81.47l-3.58-2.687a1 1 0 0 0-1.197 0l-3.586 2.686a.5.5 0 0 1-.81-.469l1.514-8.526" />
<circle cx="12" cy="8" r="6" />
</svg>
} @else {
<mat-icon>check_circle</mat-icon>
}
{{ item }}
</li>
</ul>
<button type="button" (click)="openApplyPagebanner()">{{ banner.ctaLabel }}
<mat-icon>arrow_forward</mat-icon></button>
</div>
</div>
<div class="col-lg-6">
<div class="home_banner-b">
<!-- Main Background Image (Phone/UPI) -->
<div class="banner-main-image-wrapper">
<img [src]="banner.heroImage2 || 'assets/images/upi-payment-Bz-9uih-.png'"
[attr.alt]="banner.title + ' UPI experience preview'" class="main-img" priority>
</div>
<!-- Floating Badge: Happy Customers -->
@if (banner.label1) {
<div class="floating-badge badge-customers">
<div class="badge-content">
<span class="highlight-text">{{ banner.label1.split(',')[0] }}</span>
<span class="sub-text">{{ banner.label1.split(',')[1] }}</span>
</div>
</div>
}
<!-- Floating Badge: UPI Ready -->
@if (banner.label2) {
<div class="floating-badge badge-upi">
<div class="badge-content">
<span class="highlight-text warning">{{ banner.label2.split(',')[0] }}</span>
<span class="sub-text">{{ banner.label2.split(',')[1] }}</span>
</div>
</div>
}
<!-- Floating Card Image -->
<div class="floating-card">
<img [src]="banner.heroImage" [attr.alt]="banner.title + ' credit card visual'" title="Credit card banner" class="card-img">
</div>
</div>
</div>
</div>
</div>
</div>
</ng-template>
}
</ngb-carousel>
}
@if (!isBrowser) {
<!-- Server-render fallback: render nothing to avoid timers during SSR/hydration -->
<div class="home_banner-placeholder"></div>
}
<div id="offers">
@if (offerBanner(); as banner) {
<div class="home_banner-c">
<div class="container">
<div class="row">
<div class="col-lg-8">
<ul>
<li><mat-icon class="big-icon">workspace_premium</mat-icon></li>
<li>
<p><mat-icon>stars_2</mat-icon> {{ banner.title }}</p>
<h4>{{ banner.description }}</h4>
</li>
</ul>
</div>
<div class="col-lg-4 offer-action-col">
<button type="button" (click)="openApplyPage(banner.link)">{{ banner.ctaLabel }}
<mat-icon>arrow_forward</mat-icon></button>
</div>
</div>
</div>
</div>
}
</div>
|