<?php
include 'hicashglobal.php';
?>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Unified Commerce Page</title>

    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Inter', sans-serif;
        }

        body {
            background: #f7f7f7;
            color: #111;
            line-height: 1.6;
        }

        .container {
            width: 90%;
            max-width: 1200px;
            margin: auto;
        }

        section {
            padding: 80px 0;
        }

        /* HERO */
        .hero {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 50px;
        }

        .hero-text {
            flex: 1;
        }

        .hero-text h1 {
            font-size: 42px;
            font-weight: 700;
            margin-bottom: 20px;
        }

        .hero-text p {
            font-size: 18px;
            margin-bottom: 25px;
            color: #555;
        }

        .btn {
            display: inline-block;
            padding: 14px 28px;
            background: #00b87c;
            color: #fff;
            text-decoration: none;
            border-radius: 6px;
            font-weight: 600;
        }

        .hero-img {
            flex: 1;
        }

        .hero-img img {
            width: 100%;
            border-radius: 8px;
        }

        /* FEATURES */
        .features {
            display: flex;
            justify-content: space-between;
            text-align: center;
            gap: 40px;
        }

        .feature {
            flex: 1;
        }

        .feature h4 {
            margin-top: 15px;
            font-weight: 600;
        }

        /* CENTER SECTION */
        .center-section {
            text-align: center;
        }

        .center-box {
            display: flex;
            justify-content: center;
            gap: 30px;
            margin-top: 40px;
        }

        .box {
            background: #eee;
            padding: 30px;
            border-radius: 12px;
            width: 220px;
        }

        /* IMAGE LEFT TEXT RIGHT */
        .split {
            display: flex;
            align-items: center;
            gap: 50px;
        }

        .split img {
            width: 100%;
            border-radius: 8px;
        }

        .split-text {
            flex: 1;
        }

        .split-img {
            flex: 1;
        }

        /* DARK SECTION */
        .dark {
            background: #0b1c2d;
            color: #fff;
        }

        .dark .split-text p {
            color: #cfcfcf;
        }

        .token-box {
            background: #10263d;
            padding: 40px;
            margin-top: 60px;
            border-radius: 12px;
            text-align: center;
        }

        /* CARDS */
        .cards {
            display: flex;
            gap: 25px;
            margin-top: 40px;
        }

        .card {
            flex: 1;
            background: #eee;
            padding: 30px;
            text-align: center;
            border-radius: 10px;
        }

        .card img {
            width: 100%;
            max-width: 200px;
        }

        /* GRID IMAGE + TEXT */
        .grid-two {
            display: flex;
            gap: 60px;
            align-items: center;
        }

        .grid-two img {
            width: 100%;
            border-radius: 8px;
        }

        /* QUOTE */
        .quote {
            font-style: italic;
            margin-top: 40px;
            color: #666;
        }

        /* DASHBOARD */
        .dashboard {
            display: flex;
            gap: 60px;
            align-items: center;
        }

        .dashboard img {
            width: 100%;
            border-radius: 10px;
        }

        /* RESPONSIVE */
        @media(max-width:991px) {

            .hero,
            .split,
            .grid-two,
            .dashboard,
            .features,
            .cards {
                flex-direction: column;
            }

            .hero-text h1 {
                font-size: 32px;
            }

        }
    </style>
</head>

<body>

    <!-- HERO -->
    <section>
        <div class="container hero">
            <div class="hero-text">
                <h1>Connect your data for better customer experiences with unified commerce</h1>
                <p>Take your omnichannel payments capabilities to the next level by connecting online and in-store data
                    in one system.</p>
                <a href="#" class="btn">Ready to talk to Commerce?</a>
            </div>

            <div class="hero-img">
                <img src="./image91.webp" alt="">
            </div>
        </div>
    </section>

    <!-- FEATURES -->
    <section>
        <div class="container features">
            <div class="feature">
                <h4>Give customers more flexibility</h4>
                <p>Deliver seamless experiences across channels.</p>
            </div>
            <div class="feature">
                <h4>Build customer loyalty</h4>
                <p>Create consistent journeys everywhere.</p>
            </div>
            <div class="feature">
                <h4>Connect data from all channels</h4>
                <p>Make better decisions with unified data.</p>
            </div>
        </div>
    </section>

    <!-- WHY UNIFIED -->
    <section>
        <div class="container center-section">
            <h2>Why Unified Commerce?</h2>
            <p>Customers love the flexibility of purchasing across multiple channels. But, even if you’re delivering
                omnichannel services, you’re missing out on valuable cross-channel insights if your backend systems
                aren’t connected. Only then it is possible to become a truly Unified Commerce business.

            </p>

            <div class="center-box">
                <div class="box">Omnichannel</div>
                <div class="box">Unified Commerce</div>
            </div>
        </div>
    </section>

    <!-- SPLIT SECTION -->
    <section>
        <div class="container split">
            <div class="split-text">
                <h2>Take omnichannel solutions to the next level</h2>
                <p>Upgrade your commerce strategy with seamless online and in-store integration.</p>
                <ul>
                    <li>Improve conversion</li>
                    <li>Increase loyalty</li>
                    <li>Connect online & offline</li>
                </ul>
            </div>

            <div class="split-img">
                <img src="./image92.webp" alt="">
            </div>
        </div>
    </section>

    <!-- DARK SECTION -->
    <section class="dark">
        <div class="container split">
            <div class="split-text">
                <h2>Give shoppers what they really want</h2>
                <p>Get to know the customer behind each payment. Connect transactions to individuals and build a deeper
                    understanding of their behavior. Track your performance across channels and regions and make
                    informed business decisions. For example, see how opening a store can impact your ecommerce sales in
                    that area.

                </p>
            </div>

            <div class="split-img">
                <img src="./image93.webp" alt="">
            </div>
        </div>

        <div class="container">
            <div class="token-box">
                <h3>The power of tokenization</h3>
                <p>Tokenization lets you capture customer card details and replace them with an encrypted token. So you
                    can recognize returning customers across channels without storing sensitive card data.

                </p>
                <a href="#" class="btn">Read more</a>
            </div>
        </div>
    </section>

    <!-- CARDS -->
    <section>
        <div class="container">
            <h2>Serve your customers better omnichannel payment solutions</h2>

            <div class="cards">
                <div class="card">
                    <img src="./image94.svg">
                    <p>Order in-app, collect in person</p>
                </div>
                <div class="card">
                    <img src="./image95.svg">
                    <p>Self-serve and pay</p>
                </div>
                <div class="card">
                    <img src="./image96.svg">
                    <p>Buy online return in store</p>
                </div>
                <div class="card">
                    <img src="./image97.svg">
                    <p>Buy in store, ship home</p>
                </div>
            </div>
        </div>
    </section>

    <!-- GRID SECTION -->
    <section>
        <div class="container grid-two">
            <div>
                <img src="./image98.webp">
            </div>
            <div>
                <h2>Keep your business agile</h2>
                <p>Simplify your business by consolidating your payments into one system. This will make it easier to
                    introduce new technology, open new channels, and expand to new regions. You’ll always be one step
                    ahead of consumer trends and able to move fast if things change suddenly.

                </p>
            </div>
        </div>
    </section>

    <!-- DASHBOARD -->
    <section>
        <div class="container dashboard">
            <div>
                <h2>All your data in one place</h2>
                <p>Track performance across channels with unified reporting dashboards.</p>
            </div>
            <div>
                <img src="./image99.webp">
            </div>
        </div>
    </section>

  <?php
include 'mainseesion.php';
include 'footer.php';
?>

</body>

</html>