

<?php
require_once 'merchant/config.php';
include 'aluu-header.php';
?>

<style>
    /* Shared brand-gradient accent for headline highlights (kept in one
       place instead of repeating the inline gradient on every heading). */
    .text-gradient {
        background-image: linear-gradient(115deg, #0282ad 35%, #FFA37B 100%);
        color: transparent;
        display: inline-block;
        width: max-content;
        background-clip: text;
        -webkit-background-clip: text;
    }

    /* Compact WhatsApp-support CTA band (replaces the old "team" section). */
    .support-cta {
        background: var(--tg-section-background, #0b1120);
        border-radius: 150px 0 0 0;
        padding: 90px 0;
        text-align: center;
    }
    .support-cta .title {
        color: var(--tg-white, #fff);
        margin-bottom: 15px;
    }
    .support-cta p {
        color: var(--tg-gray-four, #b7bdcb);
        max-width: 560px;
        margin: 0 auto 30px;
    }

    /* Homepage-only button accent: white text on a blue button, maroon on
       hover (the ".btn span" element is the hover-fill circle that expands
       to cover the button -- was --tg-primary-color/orange sitewide).
       Scoped to this page only, so Services/Merchant/etc. keep their own
       button color untouched. */
    .btn {
        background: var(--tg-secondary-color);
    }
    .btn span {
        background: #8B1538;
    }

    /* ---- Custom hero + about visuals: replaces the old generic stock
       illustrations with a built product mockup (phone QR/pay flow,
       webhook-response card) and a dashboard/transaction-list mockup,
       both in the blue/maroon/white palette. No external images. ---- */
    .mockup-scene {
        position: relative;
        min-height: 460px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 30px;
    }
    .mockup-glow {
        position: absolute;
        border-radius: 50%;
        filter: blur(85px);
        z-index: 0;
        pointer-events: none;
    }
    .mockup-glow-a { width: 300px; height: 300px; background: #1971ff4d; top: 0; right: 10px; }
    .mockup-glow-b { width: 240px; height: 240px; background: #8b15384d; bottom: 0; left: 0; }
    .mockup-dots {
        position: absolute;
        inset: 0;
        background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1.5px, transparent 1.5px);
        background-size: 22px 22px;
        -webkit-mask-image: radial-gradient(circle at center, #000 40%, transparent 75%);
        mask-image: radial-gradient(circle at center, #000 40%, transparent 75%);
        z-index: 0;
        pointer-events: none;
    }

    /* Phone mockup (hero) */
    .phone-mockup {
        position: relative;
        z-index: 1;
        width: 250px;
        background: #0d1117;
        border: 6px solid #1b2230;
        border-radius: 34px;
        box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
        overflow: hidden;
    }
    .phone-notch {
        width: 84px;
        height: 18px;
        background: #1b2230;
        border-radius: 0 0 14px 14px;
        margin: 0 auto;
    }
    .phone-screen {
        background: #ffffff;
        padding: 20px 18px 24px;
    }
    .phone-app-header {
        text-align: center;
        font-weight: 700;
        color: #14161c;
        font-size: 14px;
        margin-bottom: 14px;
    }
    .qr-block {
        background: #f3f5fb;
        border-radius: 14px;
        padding: 14px;
        display: flex;
        justify-content: center;
        margin-bottom: 14px;
    }
    .qr-block svg { width: 118px; height: 118px; }
    .phone-amount {
        text-align: center;
        font-size: 20px;
        font-weight: 800;
        color: #14161c;
        margin-bottom: 12px;
    }
    .phone-status {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        background: #e7faf0;
        color: #17a463;
        font-weight: 600;
        font-size: 13px;
        padding: 9px;
        border-radius: 12px;
    }
    .phone-status svg { width: 16px; height: 16px; flex: none; }

    /* Floating cards, shared by hero + about mockups */
    .floating-card {
        position: absolute;
        z-index: 2;
        left: -20px;
        bottom: 30px;
        background: rgba(13, 17, 23, 0.88);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 14px;
        padding: 13px 15px;
        box-shadow: 0 20px 45px rgba(0, 0, 0, 0.45);
        min-width: 165px;
    }
    .floating-card-row {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 12px;
        font-weight: 600;
        color: #fff;
        margin-bottom: 8px;
    }
    .status-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: #1971ff; box-shadow: 0 0 0 4px #1971ff33; }
    .floating-card-code {
        margin: 0;
        font-family: 'SFMono-Regular', Consolas, Menlo, monospace;
        font-size: 11px;
        line-height: 1.5;
        color: #9fd3ff;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 8px;
        padding: 7px 9px;
        white-space: pre;
    }
    .floating-badge {
        position: absolute;
        z-index: 2;
        right: -6px;
        top: 20px;
        display: flex;
        align-items: center;
        gap: 7px;
        background: #8b1538;
        color: #fff;
        font-size: 12px;
        font-weight: 600;
        padding: 9px 15px;
        border-radius: 30px;
        box-shadow: 0 15px 35px rgba(139, 21, 56, 0.45);
        white-space: nowrap;
    }
    .floating-badge svg { width: 15px; height: 15px; flex: none; }

    /* Dashboard/transaction-list mockup (about section) */
    .dashboard-mockup {
        position: relative;
        z-index: 1;
        width: 310px;
        background: rgba(13, 17, 23, 0.92);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 20px;
        padding: 18px;
        box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
        text-align: left;
    }
    .dashboard-header {
        font-weight: 700;
        color: #fff;
        font-size: 13px;
        margin-bottom: 12px;
    }
    .txn-row {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 0;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
    }
    .txn-row:first-of-type { border-top: none; padding-top: 0; }
    .txn-icon {
        width: 34px;
        height: 34px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 10px;
        font-weight: 700;
        color: #fff;
        flex: none;
    }
    .txn-icon-upi { background: #1971ff; }
    .txn-icon-crypto { background: #8b1538; }
    .txn-info { display: flex; flex-direction: column; flex: 1; min-width: 0; }
    .txn-title { color: #fff; font-size: 12.5px; font-weight: 600; }
    .txn-sub { color: #9aa4b2; font-size: 11.5px; }
    .txn-badge { font-size: 10.5px; font-weight: 700; padding: 4px 10px; border-radius: 20px; flex: none; }
    .txn-badge-success { background: #17a46333; color: #3ddb92; }
    .txn-badge-pending { background: #ff903433; color: #ffb066; }

    @media (max-width: 991px) {
        .mockup-scene { min-height: 360px; padding: 15px; }
        .phone-mockup { width: 205px; }
        .dashboard-mockup { width: 250px; }
        .floating-card { left: 0; bottom: 5px; min-width: 145px; }
        .floating-card-code { font-size: 10px; }
    }

    /* ---- Portfolio carousel: "payment page preview" cards (replaces the
       old stock e-wallet/shopping illustrations) -- each represents a real
       page type this gateway actually generates: UPI checkout, crypto
       checkout, the success redirect, and a merchant's own branded
       checkout ("Powered by" strip, same as payment3/pay_now.php). ---- */
    .page-preview-card {
        width: 100%;
        height: 500px;
        background: #fff;
        border-radius: 30px;
        overflow: hidden;
        box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
        display: flex;
        flex-direction: column;
    }
    .page-preview-chrome {
        background: #eef1f7;
        padding: 10px 14px;
        display: flex;
        align-items: center;
        gap: 6px;
        flex: none;
    }
    .page-preview-chrome .pdot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
    .page-preview-url {
        margin-left: 8px;
        background: #fff;
        border-radius: 20px;
        padding: 5px 12px;
        font-size: 11px;
        color: #6b7280;
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .page-preview-body {
        flex: 1;
        padding: 30px 24px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        background: #f7f8fc;
    }
    .page-preview-merchant { font-size: 12px; color: #8a93a3; font-weight: 700; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; }
    .page-preview-amount { font-size: 26px; font-weight: 800; color: #14161c; margin-bottom: 16px; }
    .page-preview-qr { background: #fff; border: 1px solid #e7eaf0; border-radius: 16px; padding: 12px; margin-bottom: 14px; }
    .page-preview-qr svg { width: 96px; height: 96px; }
    .page-preview-hint { font-size: 12px; color: #8a93a3; margin-bottom: 16px; }
    .page-preview-methods { display: flex; gap: 8px; }
    .page-preview-method-badge { font-size: 10px; font-weight: 700; color: #fff; padding: 5px 10px; border-radius: 8px; background: #1971ff; }
    .page-preview-method-badge.alt { background: #8b1538; }
    .page-preview-check {
        width: 60px; height: 60px; border-radius: 50%;
        background: #17a463; display: flex; align-items: center; justify-content: center;
        margin-bottom: 16px;
    }
    .page-preview-check svg { width: 30px; height: 30px; }
    .page-preview-title { font-size: 16px; font-weight: 700; color: #14161c; margin-bottom: 6px; }
    .page-preview-sub { font-size: 12px; color: #8a93a3; margin-bottom: 4px; }
    .page-preview-crypto-box {
        width: 100%;
        background: #fff; border: 1px solid #e7eaf0; border-radius: 12px;
        padding: 10px 12px; font-size: 10.5px; color: #6b7280;
        font-family: 'SFMono-Regular', Consolas, Menlo, monospace;
        margin-bottom: 14px; word-break: break-all;
    }
    .page-preview-status { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: #ffb066; background: #ff903422; padding: 6px 14px; border-radius: 20px; }
    .page-preview-status .pdot2 { width: 7px; height: 7px; border-radius: 50%; background: #ffb066; flex: none; }
    .page-preview-poweredby { margin-top: 18px; padding-top: 14px; border-top: 1px solid #e7eaf0; font-size: 10.5px; color: #b0b6c0; display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; }
    .page-preview-poweredby b { color: #6b7280; }

    @media (max-width: 991px) {
        .page-preview-card { height: 440px; }
    }

    /* ---- Shared feature-card component: replaces the plain webp-icon
       grids in the Services and Tools sections with cards matching the
       rest of the page (glass card, blue/maroon icon badge). ---- */
    .feature-card {
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 20px;
        padding: 32px 26px;
        height: 100%;
        transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease;
    }
    .feature-card:hover {
        transform: translateY(-6px);
        border-color: rgba(255, 255, 255, 0.18);
        background: rgba(255, 255, 255, 0.05);
    }
    .feature-icon-badge {
        width: 52px;
        height: 52px;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 20px;
    }
    .feature-icon-badge.badge-blue { background: linear-gradient(135deg, #1971ff, #2c3eef); }
    .feature-icon-badge.badge-maroon { background: linear-gradient(135deg, #a01d47, #6d0f2b); }
    .feature-icon-badge svg { width: 24px; height: 24px; }
    .feature-card h4, .feature-card h3 {
        color: #fff;
        font-size: 18px;
        margin-bottom: 10px;
    }
    .feature-card p {
        color: #b7bdcb;
        font-size: 14.5px;
        line-height: 1.7;
        margin-bottom: 0;
        opacity: 1;
    }

    /* Consultation section touches: swap the pink stat badges for the page
       palette, and give the form card the same soft glow used elsewhere. */
    .consultation-list ul li:nth-child(odd) .icon span { background: #1971ff; }
    .consultation-list ul li:nth-child(even) .icon span { background: #8b1538; }
    .consultation-form-wrap { position: relative; overflow: hidden; }
    .consultation-form-wrap::before {
        content: "";
        position: absolute;
        width: 220px;
        height: 220px;
        background: #1971ff40;
        filter: blur(80px);
        border-radius: 50%;
        top: -80px;
        right: -60px;
        z-index: 0;
    }
    .consultation-form-wrap > * { position: relative; z-index: 1; }

    /* WhatsApp support band: icon badge + the same glow/dot backdrop used
       in the hero and about mockups, instead of plain text on flat bg. */
    .support-cta { position: relative; overflow: hidden; }
    .support-cta .mockup-dots { opacity: 0.6; }
    .support-cta-icon {
        position: relative;
        z-index: 1;
        width: 64px;
        height: 64px;
        margin: 0 auto 22px;
        border-radius: 18px;
        background: linear-gradient(135deg, #17c964, #0e9c4c);
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 15px 35px rgba(23, 201, 100, 0.35);
    }
    .support-cta-icon svg { width: 30px; height: 30px; }
    .support-cta .container { position: relative; z-index: 1; }
</style>

    <!-- main-area -->
    <main>

        <!-- banner-area -->
        <section class="banner-area banner-bg">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-lg-6">
                        <div class="banner-img wow fadeInLeft" data-wow-delay=".4s">
                            <div class="mockup-scene">
                                <div class="mockup-glow mockup-glow-a"></div>
                                <div class="mockup-glow mockup-glow-b"></div>
                                <div class="mockup-dots"></div>

                                <div class="phone-mockup">
                                    <div class="phone-notch"></div>
                                    <div class="phone-screen">
                                        <div class="phone-app-header">Scan &amp; Pay</div>
                                        <div class="qr-block">
                                            <svg viewBox="0 0 29 29" xmlns="http://www.w3.org/2000/svg">
                                                <rect x="0" y="0" width="7" height="7" fill="#14161c"/>
                                                <rect x="1" y="1" width="5" height="5" fill="#fff"/>
                                                <rect x="2" y="2" width="3" height="3" fill="#14161c"/>
                                                <rect x="22" y="0" width="7" height="7" fill="#14161c"/>
                                                <rect x="23" y="1" width="5" height="5" fill="#fff"/>
                                                <rect x="24" y="2" width="3" height="3" fill="#14161c"/>
                                                <rect x="0" y="22" width="7" height="7" fill="#14161c"/>
                                                <rect x="1" y="23" width="5" height="5" fill="#fff"/>
                                                <rect x="2" y="24" width="3" height="3" fill="#14161c"/>
                                                <path fill="#14161c" d="M9 9h1v1h-1zM11 9h1v1h-1zM13 9h1v1h-1zM15 9h1v1h-1zM18 9h1v1h-1zM20 9h1v1h-1zM23 9h1v1h-1zM26 9h1v1h-1zM10 11h1v1h-1zM12 11h1v1h-1zM14 11h1v1h-1zM17 11h1v1h-1zM19 11h1v1h-1zM22 11h1v1h-1zM25 11h1v1h-1zM27 11h1v1h-1zM9 13h1v1h-1zM11 13h1v1h-1zM14 13h1v1h-1zM16 13h1v1h-1zM19 13h1v1h-1zM21 13h1v1h-1zM24 13h1v1h-1zM26 13h1v1h-1zM1 15h1v1h-1zM3 15h1v1h-1zM5 15h1v1h-1zM10 15h1v1h-1zM12 15h1v1h-1zM15 15h1v1h-1zM18 15h1v1h-1zM20 15h1v1h-1zM23 15h1v1h-1zM25 15h1v1h-1zM27 15h1v1h-1zM9 17h1v1h-1zM11 17h1v1h-1zM14 17h1v1h-1zM17 17h1v1h-1zM19 17h1v1h-1zM22 17h1v1h-1zM24 17h1v1h-1zM27 17h1v1h-1zM1 19h1v1h-1zM4 19h1v1h-1zM6 19h1v1h-1zM10 19h1v1h-1zM13 19h1v1h-1zM16 19h1v1h-1zM19 19h1v1h-1zM22 19h1v1h-1zM25 19h1v1h-1zM27 19h1v1h-1zM10 21h1v1h-1zM13 21h1v1h-1zM16 21h1v1h-1zM19 21h1v1h-1zM22 21h1v1h-1zM25 21h1v1h-1zM27 21h1v1h-1zM9 23h1v1h-1zM12 23h1v1h-1zM15 23h1v1h-1zM18 23h1v1h-1zM21 23h1v1h-1zM24 23h1v1h-1zM27 23h1v1h-1zM9 25h1v1h-1zM12 25h1v1h-1zM16 25h1v1h-1zM19 25h1v1h-1zM22 25h1v1h-1zM25 25h1v1h-1zM27 25h1v1h-1zM10 27h1v1h-1zM13 27h1v1h-1zM16 27h1v1h-1zM19 27h1v1h-1zM22 27h1v1h-1zM25 27h1v1h-1z"/>
                                            </svg>
                                        </div>
                                        <div class="phone-amount">₹499.00</div>
                                        <div class="phone-status">
                                            <svg viewBox="0 0 24 24" fill="none" stroke="#17a463" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>
                                            Payment Successful
                                        </div>
                                    </div>
                                </div>

                                <div class="floating-card">
                                    <div class="floating-card-row"><span class="status-dot"></span> Webhook fired</div>
                                    <pre class="floating-card-code">{
  "status": "SUCCESS"
}</pre>
                                </div>

                                <div class="floating-badge">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l7 3v6c0 4.5-3 8-7 9-4-1-7-4.5-7-9V6z"/><path d="M9 12l2 2 4-4"/></svg>
                                    Signed &amp; Verified
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="banner-content">
                            <span class="sub-title wow fadeInUp" data-wow-delay=".2s">Instant <strong>Approval</strong>
                                in 2 minutes.</span>
                            <h2 class="title wow fadeInUp" data-wow-delay=".4s">Fastest API for <span
                                    class="text-gradient">UPI Payments</span> Solution</h2>
                            <a href="merchant/register" class="btn wow fadeInUp" data-wow-delay=".6s">Get
                                Started<span></span></a>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- banner-area-end -->

        <!-- services-area -->
        <section class="services-area pt-35 pb-95">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-xl-3 col-lg-4 col-md-6 col-sm-10">
                        <div class="feature-card wow fadeInUp" data-wow-delay=".2s">
                            <div class="feature-icon-badge badge-blue">
                                <svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round"><circle cx="7" cy="7" r="3"/><circle cx="17" cy="17" r="3"/><path d="M19 5L5 19"/></svg>
                            </div>
                            <h4 class="title">0% Txn Fees</h4>
                            <p>No fees on payments received using <?= $website_settings['title'] ?>. Just subscribe and use.</p>
                        </div>
                    </div>
                    <div class="col-xl-3 col-lg-4 col-md-6 col-sm-10">
                        <div class="feature-card wow fadeInUp" data-wow-delay=".4s">
                            <div class="feature-icon-badge badge-maroon">
                                <svg viewBox="0 0 24 24" fill="white"><path d="M13 2 3 14h7l-1 8 10-12h-7l1-8z"/></svg>
                            </div>
                            <h4 class="title">Fast Transactions</h4>
                            <p><?= $website_settings['title'] ?> is built for speed, processing your payment status in
                                seconds.</p>
                        </div>
                    </div>
                    <div class="col-xl-3 col-lg-4 col-md-6 col-sm-10">
                        <div class="feature-card wow fadeInUp" data-wow-delay=".6s">
                            <div class="feature-icon-badge badge-blue">
                                <svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 4L2 12l6 8M16 4l6 8-6 8"/></svg>
                            </div>
                            <h4 class="title">Easy Integration</h4>
                            <p>Integrate <?= $website_settings['title'] ?> into your web/app in minutes with our
                                detailed documentation.</p>
                        </div>
                    </div>
                    <div class="col-xl-3 col-lg-4 col-md-6 col-sm-10">
                        <div class="feature-card wow fadeInUp" data-wow-delay=".8s">
                            <div class="feature-icon-badge badge-maroon">
                                <svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16v12H7l-3 3z"/></svg>
                            </div>
                            <h4 class="title">Live Support</h4>
                            <p><?= $website_settings['title'] ?> offers WhatsApp support for all your technical and
                                non-technical queries.</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- services-area-end -->


        <!-- about-area -->
        <section class="about-area">
            <div class="container custom-container">
                <div class="about-inner">
                    <div class="row align-items-center justify-content-center">
                        <div class="col-46 order-0 order-lg-2">
                            <div class="about-img text-end">
                                <div class="mockup-scene">
                                    <div class="mockup-glow mockup-glow-a"></div>
                                    <div class="mockup-glow mockup-glow-b"></div>
                                    <div class="mockup-dots"></div>

                                    <div class="dashboard-mockup">
                                        <div class="dashboard-header">Recent Transactions</div>
                                        <div class="txn-row">
                                            <div class="txn-icon txn-icon-upi">UPI</div>
                                            <div class="txn-info">
                                                <span class="txn-title">Order #PG48213</span>
                                                <span class="txn-sub">UPI</span>
                                            </div>
                                            <span class="txn-badge txn-badge-success">Success</span>
                                        </div>
                                        <div class="txn-row">
                                            <div class="txn-icon txn-icon-crypto">₿</div>
                                            <div class="txn-info">
                                                <span class="txn-title">Order #PG77190</span>
                                                <span class="txn-sub">Crypto</span>
                                            </div>
                                            <span class="txn-badge txn-badge-success">Success</span>
                                        </div>
                                        <div class="txn-row">
                                            <div class="txn-icon txn-icon-upi">UPI</div>
                                            <div class="txn-info">
                                                <span class="txn-title">Order #PG10234</span>
                                                <span class="txn-sub">UPI</span>
                                            </div>
                                            <span class="txn-badge txn-badge-pending">Pending</span>
                                        </div>
                                    </div>

                                    <div class="floating-badge">
                                        <svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="7" r="3"/><path d="M2 21v-1a6 6 0 0 1 6-6h2a6 6 0 0 1 6 6v1"/><circle cx="17" cy="8" r="2.5"/><path d="M17 13a5 5 0 0 1 5 5v1"/></svg>
                                        Multi-user access
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-54">
                            <div class="about-content">
                                <div class="section-title mb-25">
                                    <span class="sub-title">About UPI Gateway</span>
                                    <h2 class="title">Simplify your Online Payments with Our <span
                                    class="text-gradient">UPI Integration</span></h2>
                                </div>
                                <p>Introducing our UPI gateway integration services to streamline online payments for
                                    your business and we're here to revolutionize your payment experience.</p>
                                <ul class="list-wrap">
                                    <li>
                                        <div class="icon">
                                            <svg viewBox="0 0 24 24" width="36" height="36" fill="none" stroke="white" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7h13l-3-3M20 17H7l3 3"/></svg>
                                        </div>
                                        <div class="content">
                                            <h4 class="title">Seamless Transactions</h4>
                                            <p>Experience seamless transactions with our UPI gateway solutions.</p>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icon">
                                            <svg viewBox="0 0 24 24" width="36" height="36" fill="none" stroke="white" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="14" rx="2"/><path d="M3 9h18"/><circle cx="8" cy="13" r="1"/></svg>
                                        </div>
                                        <div class="content">
                                            <h4 class="title">User-Friendly Interface</h4>
                                            <p>Our user-friendly interface makes UPI payments a breeze for your
                                                customers.</p>
                                        </div>
                                    </li>
                                </ul>
                                <!-- <div class="about-content-bottom">
                                    <span>Join hands with us for a revolution in online payments.</span>
                                    <div class="read-more-btn">
                                        <a href="merchant/index" class="btn">Learn More <span></span></a>
                                    </div>
                                </div> -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- about-area-end -->




        <!-- consultation-area -->
        <section class="consultation-area pt-120 pb-120" id="contact">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-lg-7">
                        <div class="consultation-content">
                            <div class="section-title mb-25">
                                <svg viewBox="0 0 24 24" width="24" height="24" fill="white"><path d="M13 2 3 14h7l-1 8 10-12h-7l1-8z"/></svg>
                                <span class="sub-title">Secure and Fast UPI Gateway</span>
                                <h2 class="title">Choose Our UPI Integration Services</h2>
                            </div>
                            <p>Experience the best UPI gateway integration with our services. And we are committed to
                                providing secure and fast payment solutions for your business.</p>
                            <div class="consultation-list">
                                <ul class="list-wrap">
                                    <li>
                                        <div class="icon">
                                            <svg viewBox="0 0 24 24" width="40" height="40" fill="none" stroke="white" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 3"/></svg>
                                            <span>24/7</span>
                                        </div>
                                        <div class="content">
                                            <h6 class="title">Automated Status Checks</h6>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icon">
                                            <svg viewBox="0 0 24 24" width="40" height="40" fill="none" stroke="white" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l7 3v6c0 4.5-3 8-7 9-4-1-7-4.5-7-9V6z"/></svg>
                                            <span>UPI</span>
                                        </div>
                                        <div class="content">
                                            <h6 class="title">Secure Payments</h6>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
         <div class="col-lg-5">
    <div class="consultation-form-wrap">
        <h4 class="title">Free Consultation</h4>
        <form id="contactForm">
            <div class="form-grp">
                <input type="text" id="name" placeholder="Name" required>
            </div>
            <div class="form-grp">
                <input type="email" id="email" placeholder="Email Address" required>
            </div>
            <div class="form-grp">
                <input type="text" id="phone" placeholder="Phone Number" required>
            </div>
            <div class="form-grp">
                <select id="supportType" class="form-select" required>
                    <option value="Integration Support">Integration Support</option>
                    <option value="Account Support">Account Support</option>
                    <option value="Other Technical Support">Other Technical Support</option>
                </select>
            </div>
            <button class="btn" type="submit">Contact</button>
        </form>

        <div id="responseMessage" style="margin-top: 10px;"></div>

        <script>
            document.getElementById("contactForm").addEventListener("submit", function (event) {
                event.preventDefault();

                const name = document.getElementById("name").value.trim();
                const email = document.getElementById("email").value.trim();
                const phone = document.getElementById("phone").value.trim();
                const supportType = document.getElementById("supportType").value;

                const formData = new FormData();
                formData.append("name", name);
                formData.append("email", email);
                formData.append("phone", phone);
                formData.append("supportType", supportType);

                fetch("send-mail.php", {
                    method: "POST",
                    body: formData
                })
                .then(response => response.text())
                .then(result => {
                    document.getElementById("responseMessage").innerHTML = `<span style="color: green;">${result}</span>`;
                    document.getElementById("contactForm").reset();
                })
                .catch(error => {
                    document.getElementById("responseMessage").innerHTML = `<span style="color: red;">Something went wrong!</span>`;
                });
                      });
                  </script>
              </div>
          </div>
                </div><!-- /.row -->
            <div class="consultation-shape-wrap">
                <img loading="lazy" src="newassets/img/images/consultation_shape01.png" alt=""
                    class="shape-one ribbonRotate">
                <img loading="lazy" src="newassets/img/images/consultation_shape02.png" alt=""
                    class="shape-two float-bob-x">
            </div>
            </div><!-- /.container -->
        </section>
        <!-- consultation-area-end -->


        <!-- project-area -->
        <section class="project-area">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-xl-4">
                        <div class="project-content">
                            <div class="section-title white-title mb-30">
                                <span class="sub-title">Explore Our Portfolio</span>
                                <h2 class="title">Discover Our <span
                                        class="text-gradient">Payment Pages</span></h2>
                            </div>
                            <p>Explore some of our recent launched UPI payment pages. And we take pride in our
                                innovative
                                solutions.</p>
                            <div class="content-bottom">
                                <a href="demo" class="btn">View Demo<span></span></a>
                                <div class="project-nav">
                                    <button class="swiper-button-prev">Prev</button>
                                    <button class="swiper-button-next">Next</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-8">
                        <div class="project-item-wrap">
                            <div class="swiper-container project-active">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide">
                                        <div class="project-item">
                                            <div class="page-preview-card">
                                                <div class="page-preview-chrome">
                                                    <span class="pdot" style="background:#ff6159"></span>
                                                    <span class="pdot" style="background:#ffbd2e"></span>
                                                    <span class="pdot" style="background:#28c941"></span>
                                                    <div class="page-preview-url">pay.aluu.in/checkout</div>
                                                </div>
                                                <div class="page-preview-body">
                                                    <div class="page-preview-merchant">Merchant Checkout</div>
                                                    <div class="page-preview-amount">₹499.00</div>
                                                    <div class="page-preview-qr">
                                                        <svg viewBox="0 0 29 29" xmlns="http://www.w3.org/2000/svg">
                                                            <rect x="0" y="0" width="7" height="7" fill="#14161c"/><rect x="1" y="1" width="5" height="5" fill="#fff"/><rect x="2" y="2" width="3" height="3" fill="#14161c"/>
                                                            <rect x="22" y="0" width="7" height="7" fill="#14161c"/><rect x="23" y="1" width="5" height="5" fill="#fff"/><rect x="24" y="2" width="3" height="3" fill="#14161c"/>
                                                            <rect x="0" y="22" width="7" height="7" fill="#14161c"/><rect x="1" y="23" width="5" height="5" fill="#fff"/><rect x="2" y="24" width="3" height="3" fill="#14161c"/>
                                                            <path fill="#14161c" d="M9 9h1v1h-1zM12 9h1v1h-1zM15 9h1v1h-1zM19 9h1v1h-1zM23 9h1v1h-1zM26 9h1v1h-1zM10 12h1v1h-1zM14 12h1v1h-1zM17 12h1v1h-1zM21 12h1v1h-1zM25 12h1v1h-1zM1 15h1v1h-1zM4 15h1v1h-1zM9 15h1v1h-1zM13 15h1v1h-1zM17 15h1v1h-1zM21 15h1v1h-1zM25 15h1v1h-1zM10 18h1v1h-1zM14 18h1v1h-1zM18 18h1v1h-1zM22 18h1v1h-1zM26 18h1v1h-1zM9 21h1v1h-1zM13 21h1v1h-1zM17 21h1v1h-1zM21 21h1v1h-1zM25 21h1v1h-1zM10 24h1v1h-1zM14 24h1v1h-1zM19 24h1v1h-1zM23 24h1v1h-1zM27 24h1v1h-1zM12 27h1v1h-1zM16 27h1v1h-1zM20 27h1v1h-1zM24 27h1v1h-1z"/>
                                                        </svg>
                                                    </div>
                                                    <div class="page-preview-hint">Scan with any UPI app</div>
                                                    <div class="page-preview-methods">
                                                        <span class="page-preview-method-badge">UPI</span>
                                                        <span class="page-preview-method-badge alt">Intent</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="swiper-slide">
                                        <div class="project-item">
                                            <div class="page-preview-card">
                                                <div class="page-preview-chrome">
                                                    <span class="pdot" style="background:#ff6159"></span>
                                                    <span class="pdot" style="background:#ffbd2e"></span>
                                                    <span class="pdot" style="background:#28c941"></span>
                                                    <div class="page-preview-url">pay.aluu.in/crypto</div>
                                                </div>
                                                <div class="page-preview-body">
                                                    <div class="page-preview-merchant">Crypto Checkout</div>
                                                    <div class="page-preview-amount">12.50 USDT</div>
                                                    <div class="page-preview-qr">
                                                        <svg viewBox="0 0 29 29" xmlns="http://www.w3.org/2000/svg">
                                                            <rect x="0" y="0" width="7" height="7" fill="#14161c"/><rect x="1" y="1" width="5" height="5" fill="#fff"/><rect x="2" y="2" width="3" height="3" fill="#14161c"/>
                                                            <rect x="22" y="0" width="7" height="7" fill="#14161c"/><rect x="23" y="1" width="5" height="5" fill="#fff"/><rect x="24" y="2" width="3" height="3" fill="#14161c"/>
                                                            <rect x="0" y="22" width="7" height="7" fill="#14161c"/><rect x="1" y="23" width="5" height="5" fill="#fff"/><rect x="2" y="24" width="3" height="3" fill="#14161c"/>
                                                            <path fill="#14161c" d="M9 9h1v1h-1zM12 9h1v1h-1zM15 9h1v1h-1zM19 9h1v1h-1zM23 9h1v1h-1zM26 9h1v1h-1zM10 12h1v1h-1zM14 12h1v1h-1zM17 12h1v1h-1zM21 12h1v1h-1zM25 12h1v1h-1zM1 15h1v1h-1zM4 15h1v1h-1zM9 15h1v1h-1zM13 15h1v1h-1zM17 15h1v1h-1zM21 15h1v1h-1zM25 15h1v1h-1zM10 18h1v1h-1zM14 18h1v1h-1zM18 18h1v1h-1zM22 18h1v1h-1zM26 18h1v1h-1zM9 21h1v1h-1zM13 21h1v1h-1zM17 21h1v1h-1zM21 21h1v1h-1zM25 21h1v1h-1zM10 24h1v1h-1zM14 24h1v1h-1zM19 24h1v1h-1zM23 24h1v1h-1zM27 24h1v1h-1zM12 27h1v1h-1zM16 27h1v1h-1zM20 27h1v1h-1zM24 27h1v1h-1z"/>
                                                        </svg>
                                                    </div>
                                                    <div class="page-preview-crypto-box">TQn9&hellip;p4kL7m (wallet address)</div>
                                                    <div class="page-preview-status"><span class="pdot2"></span> Awaiting Payment</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="swiper-slide">
                                        <div class="project-item">
                                            <div class="page-preview-card">
                                                <div class="page-preview-chrome">
                                                    <span class="pdot" style="background:#ff6159"></span>
                                                    <span class="pdot" style="background:#ffbd2e"></span>
                                                    <span class="pdot" style="background:#28c941"></span>
                                                    <div class="page-preview-url">pay.aluu.in/success</div>
                                                </div>
                                                <div class="page-preview-body">
                                                    <div class="page-preview-check">
                                                        <svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>
                                                    </div>
                                                    <div class="page-preview-title">Payment Successful</div>
                                                    <div class="page-preview-sub">Order #PG48213</div>
                                                    <div class="page-preview-sub">Redirecting to merchant&hellip;</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="swiper-slide">
                                        <div class="project-item">
                                            <div class="page-preview-card">
                                                <div class="page-preview-chrome">
                                                    <span class="pdot" style="background:#ff6159"></span>
                                                    <span class="pdot" style="background:#ffbd2e"></span>
                                                    <span class="pdot" style="background:#28c941"></span>
                                                    <div class="page-preview-url">pay.aluu.in/instant-pay/&hellip;</div>
                                                </div>
                                                <div class="page-preview-body">
                                                    <div class="page-preview-merchant">Your Brand Here</div>
                                                    <div class="page-preview-amount">₹1,299.00</div>
                                                    <div class="page-preview-qr">
                                                        <svg viewBox="0 0 29 29" xmlns="http://www.w3.org/2000/svg">
                                                            <rect x="0" y="0" width="7" height="7" fill="#14161c"/><rect x="1" y="1" width="5" height="5" fill="#fff"/><rect x="2" y="2" width="3" height="3" fill="#14161c"/>
                                                            <rect x="22" y="0" width="7" height="7" fill="#14161c"/><rect x="23" y="1" width="5" height="5" fill="#fff"/><rect x="24" y="2" width="3" height="3" fill="#14161c"/>
                                                            <rect x="0" y="22" width="7" height="7" fill="#14161c"/><rect x="1" y="23" width="5" height="5" fill="#fff"/><rect x="2" y="24" width="3" height="3" fill="#14161c"/>
                                                            <path fill="#14161c" d="M9 9h1v1h-1zM12 9h1v1h-1zM15 9h1v1h-1zM19 9h1v1h-1zM23 9h1v1h-1zM26 9h1v1h-1zM10 12h1v1h-1zM14 12h1v1h-1zM17 12h1v1h-1zM21 12h1v1h-1zM25 12h1v1h-1zM1 15h1v1h-1zM4 15h1v1h-1zM9 15h1v1h-1zM13 15h1v1h-1zM17 15h1v1h-1zM21 15h1v1h-1zM25 15h1v1h-1zM10 18h1v1h-1zM14 18h1v1h-1zM18 18h1v1h-1zM22 18h1v1h-1zM26 18h1v1h-1zM9 21h1v1h-1zM13 21h1v1h-1zM17 21h1v1h-1zM21 21h1v1h-1zM25 21h1v1h-1zM10 24h1v1h-1zM14 24h1v1h-1zM19 24h1v1h-1zM23 24h1v1h-1zM27 24h1v1h-1zM12 27h1v1h-1zM16 27h1v1h-1zM20 27h1v1h-1zM24 27h1v1h-1z"/>
                                                        </svg>
                                                    </div>
                                                    <div class="page-preview-hint">Custom checkout, your branding</div>
                                                    <div class="page-preview-poweredby">Powered by <b><?= $website_settings['title'] ?></b></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="project-shape-wrap">
                <!-- newassets/img/project/ never shipped with this template --
                     reusing the decorative shapes already used (and present)
                     in the consultation section below. -->
                <img loading="lazy" src="newassets/img/images/consultation_shape01.png" alt=""
                    class="shape-one ribbonRotate">
                <img loading="lazy" src="newassets/img/images/consultation_shape02.png" alt=""
                    class="shape-two ribbonRotate">
            </div>
        </section>
        <!-- project-area-end -->


        <!-- tools-area -->
        <section class="tools-area">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-lg-6">
                        <div class="section-title title-style-two white-title text-center mb-50">
                            <span class="sub-title">Our UPI Gateway Tools</span>
                            <h2 class="title">Discover the Tools We Use for UPI Solutions</h2>
                        </div>
                    </div>
                </div>

                <div class="tools-item-wrap">
                    <div class="row justify-content-center">
                        <div class="col-xl-3 col-lg-4 col-md-6 col-sm-8">
                            <div class="feature-card">
                                <div class="feature-icon-badge badge-blue">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 4L2 12l6 8M16 4l6 8-6 8"/></svg>
                                </div>
                                <h3 class="title">Payments API</h3>
                                <p>We leverage UPI Gateway APIs for seamless integration with your platform.</p>
                            </div>
                        </div>
                        <div class="col-xl-3 col-lg-4 col-md-6 col-sm-8">
                            <div class="feature-card">
                                <div class="feature-icon-badge badge-maroon">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 11-3-6.7"/><path d="M21 3v6h-6"/></svg>
                                </div>
                                <h3 class="title">Processing Tools</h3>
                                <p>We use advanced payment processing tools to ensure secure transactions.</p>
                            </div>
                        </div>
                        <div class="col-xl-3 col-lg-4 col-md-6 col-sm-8">
                            <div class="feature-card">
                                <div class="feature-icon-badge badge-blue">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="M6 9l4 3-4 3M13 15h5"/></svg>
                                </div>
                                <h3 class="title">Integration SDK</h3>
                                <p>Our integration SDK simplifies the process of integrating UPI Gateway.</p>
                            </div>
                        </div>
                        <div class="col-xl-3 col-lg-4 col-md-6 col-sm-8">
                            <div class="feature-card">
                                <div class="feature-icon-badge badge-maroon">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l7 3v6c0 4.5-3 8-7 9-4-1-7-4.5-7-9V6z"/><path d="M9 12l2 2 4-4"/></svg>
                                </div>
                                <h3 class="title">Security Measures</h3>
                                <p>We implement robust security measures to protect UPI transactions.</p>
                            </div>
                        </div>
                        <div class="col-xl-3 col-lg-4 col-md-6 col-sm-8">
                            <div class="feature-card">
                                <div class="feature-icon-badge badge-blue">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="14" rx="2"/><path d="M3 9h18"/><circle cx="8" cy="13" r="1"/></svg>
                                </div>
                                <h3 class="title">UX Design</h3>
                                <p>We focus on creating a user-friendly experience for UPI payments.</p>
                            </div>
                        </div>
                        <div class="col-xl-3 col-lg-4 col-md-6 col-sm-8">
                            <div class="feature-card">
                                <div class="feature-icon-badge badge-maroon">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20V10M10 20V4M16 20v-7M22 20H2"/></svg>
                                </div>
                                <h3 class="title">Analytics Tools</h3>
                                <p>We utilize analytics tools to monitor UPI transactions Also Track Reports.</p>
                            </div>
                        </div>
                        <div class="col-xl-3 col-lg-4 col-md-6 col-sm-8">
                            <div class="feature-card">
                                <div class="feature-icon-badge badge-blue">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="5" width="20" height="14" rx="2"/><path d="M2 10h20"/></svg>
                                </div>
                                <h3 class="title">Custom Checkout</h3>
                                <p>We offer customization options for UPI gateway Checkout URL.</p>
                            </div>
                        </div>
                        <div class="col-xl-3 col-lg-4 col-md-6 col-sm-8">
                            <div class="feature-card">
                                <div class="feature-icon-badge badge-maroon">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16v12H7l-3 3z"/></svg>
                                </div>
                                <h3 class="title">Tech Support</h3>
                                <p>Our team provides dedicated technical support for UPI gateway integration.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- tools-area-end -->







        <!-- support-cta-area -->
        <section class="support-cta">
            <div class="mockup-dots"></div>
            <div class="container">
                <div class="support-cta-icon">
                    <svg viewBox="0 0 24 24" fill="white"><path d="M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.48 1.32 5L2 22l5.25-1.38a9.9 9.9 0 0 0 4.79 1.22h.01c5.46 0 9.91-4.45 9.91-9.91C21.96 6.45 17.5 2 12.04 2zm5.8 14.02c-.24.68-1.39 1.3-1.93 1.38-.5.08-1.12.11-1.81-.11-.42-.13-.95-.31-1.64-.6-2.9-1.25-4.79-4.17-4.93-4.36-.14-.19-1.18-1.57-1.18-3 0-1.42.75-2.12 1.01-2.41.27-.29.58-.36.78-.36h.55c.18 0 .42-.07.65.5.24.58.81 2 .88 2.15.07.14.12.31.02.5-.09.19-.14.31-.28.48-.14.17-.29.37-.42.5-.14.14-.28.29-.12.57.16.28.72 1.18 1.54 1.92 1.06.95 1.95 1.24 2.23 1.38.28.14.44.12.6-.07.16-.19.68-.79.87-1.06.19-.28.37-.23.62-.14.26.09 1.63.77 1.91.91.28.14.47.21.54.33.07.12.07.68-.17 1.36z"/></svg>
                </div>
                <div class="section-title white-title mb-20">
                    <span class="sub-title">We're Here to Help</span>
                    <h2 class="title">Need a Hand Getting Started?</h2>
                </div>
                <p>Our support team is a message away for anything from integration questions to account issues
                    &mdash; technical or not.</p>
                <a href="https://wa.me/<?= preg_replace('/\D/', '', $website_settings['contact_phone']) ?>"
                    target="_blank" class="btn">Connect on WhatsApp <span></span></a>
            </div>
        </section>
        <!-- support-cta-area-end -->

    </main>
    <!-- main-area-end -->

    <?php include 'aluu-footer.php'; ?>