<x-app-layout>
    <x-slot name="css">
        <style>
            .layout-top-spacing {
                min-height: calc(100vh - 260px) !important;
            }
            p {
                font-size: 1rem;
            }
            ul {
                padding-left: 20px;
            }
            ul li {
                font-size: 1rem;
                margin-bottom: 12px;
                color: #515365;
            }
            .footer-section {
                position: relative !important;
                margin: 0px auto;
            }
            em {
                color: #6A442E;
            }
            .imageAbt img {
                max-width: 500px;
            }
            .aboutTextImg {
                background-color: #fff;
                padding: 30px;
                box-shadow: 0 2px 25px 0 #ccc;
                max-width: 600px;
            }
            .aboutTextImg.aboutTextImg-1 {
                margin-left: -150px;
            }
            .aboutTextImg.aboutTextImg-2 {
                margin: 0 -150px 0 auto;
                position: relative;
                z-index: 1;
            }
            @media (max-width: 992px) {
                .aboutTextImg.aboutTextImg-1 {
                    margin-left: 0;
                    margin-top: -50px;
                }
                .aboutTextImg.aboutTextImg-2 {
                    margin: 0;
                    margin-top: -50px;
                }
            }
        </style>
    </x-slot>
    <div class="container">
        <div class="page-header">
            <div class="page-title">
                <h3>{{ __('common.AboutUsApp') }}</h3>
            </div>
        </div>
    </div>
    <div class="container layout-top-spacing">
        <div class=" layout-spacing">
            <div class="">
                <div class="mt-4">
                    <h4 class="pt-3 text-dark">Coffee runs can be a hassle.</h4>
                    <p>Going around collecting orders, writing them down, finding a café which serves everything and
                        then having to ask your boss to pay you back… can be stressful.</p>
                    <p>With the Java Go app coffee runs are <b>faster,</b> more <b>efficient</b> and most importantly,
                        <b>stress-free!</b> </p>
                    <p>Java Go also connects you to great independent cafés across London! </p>
                    <div class="row pt-4 align-items-center position-relative">
                        <div class="col-lg-6">
                            <div class="imageAbt text-lg-right"><img
                                    src="{{asset('assets/img/login-left-bg.jpg')}}" alt="">
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="aboutTextImg aboutTextImg-1">
                                <h4>Using the app allows you to have hassle-free coffee runs by eliminating the need to:
                                </h4>
                                <ul>
                                    <li>Ask colleagues for their orders individually</li>
                                    <li>Write down or memorise orders</li>
                                    <li>Chase colleagues to pay you back</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="row pt-4 align-items-center">
                        <div class="col-lg-6 order-lg-1 order-2">
                            <div class="aboutTextImg aboutTextImg-2">
                                <h4>Other benefits include:</h4>
                                <ul>
                                    <li>Your loyalty cards are automatically stamped</li>
                                    <li>Discovering independent cafés local to you</li>
                                    <li> Searching cafés using specific categories (i.e. vegan cafés)</li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-lg-6 order-lg-2 order-1">
                            <div class="imageAbt"><img
                                    src="{{ asset('assets/img/forgot-left-img.jpg') }}" alt="">
                            </div>
                        </div>
                    </div>
                    <br>
                    <p>Java Go rewards you for ordering from independent cafés by stamping your loyalty card when you
                        put an order in, it also allows you to find local independent cafés and browse their menus. </p>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>