# All files / app/carousel-banner carousel-banner.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
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    1241x

     @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>