<?php $__env->startSection('title', 'Mobile App'); ?>

<?php $__env->startSection('guest'); ?>
<div class="mobile-app-site">
    <?php echo $__env->make('partials.public-site-nav', ['navClass' => 'site-nav manual-nav', 'menuId' => 'mobileAppPublicMenu'], array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>

    <header class="mobile-app-hero">
        <div class="container">
            <div class="row align-items-center g-4">
                <div class="col-lg-7">
                    <span class="site-eyebrow">Mobile app installation</span>
                    <h1>Use NewKipp Microfinance Solution like a mobile app from any modern browser.</h1>
                    <p>Install the same system on phones, tablets, and desktops. Supported browsers show the direct install prompt; other browsers show clear Add to Home Screen instructions.</p>
                    <div class="d-flex flex-wrap gap-2">
                        <button class="btn btn-primary btn-lg" type="button" data-pwa-install>
                            <i class="bi bi-phone me-2"></i><span data-pwa-install-label>Install app</span>
                        </button>
                        <a href="<?php echo e(route('manual')); ?>#mobile-app" class="btn btn-outline-light btn-lg"><i class="bi bi-book me-2"></i>Read manual</a>
                    </div>
                </div>
                <div class="col-lg-5">
                    <div class="mobile-app-preview">
                        <div class="mobile-app-phone">
                            <div class="mobile-app-phone-top"></div>
                            <div class="mobile-app-phone-screen">
                                <span>NewKipp</span>
                                <strong>Member dashboard</strong>
                                <div><i class="bi bi-wallet2"></i><em>Savings</em></div>
                                <div><i class="bi bi-cash-coin"></i><em>Loans</em></div>
                                <div><i class="bi bi-graph-up-arrow"></i><em>Reports</em></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <main>
        <section class="site-section">
            <div class="container">
                <div class="site-section-head">
                    <span class="site-eyebrow dark">Browser support</span>
                    <h2>One install button, different browser instructions.</h2>
                    <p>The app now detects the browser and either opens the native install prompt or explains the manual steps.</p>
                </div>
                <div class="mobile-app-grid">
                    <div>
                        <i class="bi bi-browser-chrome"></i>
                        <strong>Chrome, Edge, Brave, Opera</strong>
                        <p>Click Install app. If the browser supports PWA install, the native install prompt opens immediately.</p>
                    </div>
                    <div>
                        <i class="bi bi-android2"></i>
                        <strong>Android browsers</strong>
                        <p>Use Install app from the button when available, or open the browser menu and choose Add to Home screen.</p>
                    </div>
                    <div>
                        <i class="bi bi-apple"></i>
                        <strong>iPhone and iPad Safari</strong>
                        <p>Tap Share, choose Add to Home Screen, then tap Add. Apple does not always show an automatic install prompt.</p>
                    </div>
                    <div>
                        <i class="bi bi-browser-firefox"></i>
                        <strong>Firefox</strong>
                        <p>Firefox has limited PWA install support. Use the browser menu if Add to Home Screen is available, or open from bookmarks.</p>
                    </div>
                    <div>
                        <i class="bi bi-laptop"></i>
                        <strong>Desktop use</strong>
                        <p>On supported desktop browsers, install from the button or the install icon in the address bar.</p>
                    </div>
                    <div>
                        <i class="bi bi-wifi-off"></i>
                        <strong>Offline screen</strong>
                        <p>The installed app shows a friendly offline page if internet drops. Live transactions still need reconnection.</p>
                    </div>
                </div>
            </div>
        </section>

        <section class="site-section site-soft">
            <div class="container">
                <div class="row g-4 align-items-center">
                    <div class="col-lg-5">
                        <span class="site-eyebrow dark">Important note</span>
                        <h2>Use HTTPS when hosted online.</h2>
                        <p class="site-lead">PWA installation and service workers work properly on secure domains. Localhost works for testing, but your public mobile app link should be your hosted domain.</p>
                    </div>
                    <div class="col-lg-7">
                        <div class="mobile-app-checklist">
                            <div><i class="bi bi-check-circle"></i><span>Upload the system to your domain or tenant subdomain.</span></div>
                            <div><i class="bi bi-check-circle"></i><span>Enable SSL/HTTPS in cPanel.</span></div>
                            <div><i class="bi bi-check-circle"></i><span>Open the website on the phone browser.</span></div>
                            <div><i class="bi bi-check-circle"></i><span>Tap Install app or follow the shown browser instructions.</span></div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <footer class="site-footer">
        <div class="container d-flex flex-column flex-md-row justify-content-between gap-3 py-4">
            <div class="site-brand"><span>NK</span><strong>NewKipp Microfinance Solution Mobile App</strong></div>
            <div class="d-flex flex-wrap gap-3 small">
                <a href="<?php echo e(route('landing')); ?>">Website</a>
                <a href="<?php echo e(route('manual')); ?>">User manual</a>
                <a href="<?php echo e(route('login')); ?>">Sign in</a>
            </div>
        </div>
    </footer>
</div>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\Users\Polite hp\Documents\Codex\2026-05-08\build-a-complete-production-ready-saas\microfinance-saas\resources\views\mobile-app.blade.php ENDPATH**/ ?>