@extends('layouts.home')
@section('title', config('app.name', 'ultimatePOS'))

@section('content')
    <style type="text/css">
        .navbar{margin-bottom: 0px!important}
        .product-page .section-header:after {
            content: "";
            direction: block;
            position: absolute;
            z-index: 1;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
        }
        .text-center {
            text-align: center;
        }
        .product-page .pay-area .product-name {
            margin-bottom: 0px;
            padding-bottom: 15px;
            color: rgb(255, 255, 255);
            font-size: 32px;
            font-weight: 300;
        }
        .product-page .product-image {
            position: relative;
            z-index: 2;
            margin: 30px auto 30px;
            overflow: hidden;
        }
        .product-page .product-image img {
            width: 100%;
        }
        .cs_hero.cs_style_1 .cs_hero_title {
            margin-bottom: 20px;
        }
        .cs_hero_title {
            font-size: 30px;
            line-height: 1.4em;
        }
        .cs_text_white {
            color: #000;
        }
        .cs_hero_subtitle {
            margin-bottom: 45px;
            color: rgb(49 46 46 / 79%);
            font-size: 17px;
        }
        .fadeIn {
            -webkit-animation-name: fadeIn;
            animation-name: fadeIn;
        }
        .cs_section_heading.cs_style_1 .cs_section_subtitle {
            font-weight: 600;
            margin-bottom: 5px;
            font-size: 13px;
            line-height: 1.1em;
            text-align: left;
        }

        .cs_text_accent {
            color: #1d60dc;
        }
        .cs_iconbox.cs_style_2 .cs_number_box {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 5px;
            font-size: 13px;
            font-weight: 600;
        }
        .cs_bg_accent {
            background-color: #1d60dc;
        }
        .text_white {
            color: #ffffff;
        }
        .cs_iconbox.cs_style_2 .cs_iconbox_title {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 5px;
        }
        .cs_section_heading.cs_style_1 .cs_section_title {
            font-size: 22px;
            line-height: 1.3em;
            position: relative;
            z-index: 2;
        }
        .main-footer {
            background: #fff !important;
            padding: 2px!important;
            color: #444;
            font-size: 14px;
        }
        small {
            font-size: 70%;
        }
        @media screen and (max-width: 600px) {
            .sec-button{
                visibility: hidden;
                clear: both;
                float: left;
                display: none;
              }
          }
    </style>

<div id="productPage" class="section-header product-page gradient-light-blue" data-turbolinks="false">

    <div class="container product-header-centered">
        <div class="row d-flex-center text-center">
            <div class="col-sm-12 col-md-6">
                <div class="product-image">
                    <img src="{{ asset( 'img/cashier.svg') }}" alt="MPOS Dashboard 2 PRO Image" loading="lazy">
                </div>
            </div>
            <div class="col-sm-12 col-md-6">
                <div class="pay-area">
                    <div class="cs_hero_text text-center">
                      <h1 class="cs_hero_title cs_text_white wow fadeInUp" data-wow-duration="0.8s" data-wow-delay="0.2s" style="visibility: visible; animation-duration: 0.8s; animation-delay: 0.2s; animation-name: fadeInUp;">
                        Maximize sales with our advanced {{ config('app.name', 'ultimatePOS') }} software solutions. <h3 class="tagline">
                                        {{ env('APP_TITLE', '') }}
                                        </h3>
                      </h1>
                      <p class="cs_hero_subtitle wow fadeIn" data-wow-duration="0.8s" data-wow-delay="0.25s" style="visibility: visible; animation-duration: 0.8s; animation-delay: 0.25s; animation-name: fadeIn;">
                        Our advanced POS software is designed to revolutionize your business operations. With its powerful features and <br>user-friendly interface, enhance customer experiences, and boost your overall efficiency.
                      </p>
                    </div>
                    <div class="cs_section_heading cs_style_1">
                      <p class="cs_section_subtitle cs_text_accent">Software Key Features</p>
                      <h3 class="cs_section_title mb-0">Powerful Features with Incredible Design</h3>
                    </div>
                    <div class="row cs_gap_y_40">
                      <div class="col-lg-6">
                        <div class="cs_iconbox cs_style_2">
                          <div class="cs_number_box cs_bg_accent text_white">01</div>
                          <h3 class="cs_iconbox_title">Inventory Management</h3>
                          <p class="cs_iconbox_subtitle">Pos can analyze large volumes of data quickly and accurate, valuable.
                          </p>
                        </div>
                      </div>
                      <div class="col-lg-6">
                        <div class="cs_iconbox cs_style_2">
                          <div class="cs_number_box cs_bg_accent text_white">02</div>
                          <h3 class="cs_iconbox_title">Sales &amp; Payment Process</h3>
                          <p class="cs_iconbox_subtitle">If can analyze large volumes of data quickly and accurate, valuable.
                          </p>
                        </div>
                      </div>
                      <div class="col-lg-6">
                        <div class="cs_iconbox cs_style_2">
                          <div class="cs_number_box cs_bg_accent text_white">03</div>
                          <h3 class="cs_iconbox_title">Report and Analysis</h3>
                          <p class="cs_iconbox_subtitle">If can analyze large volumes of data quickly and accurate, valuable.
                          </p>
                        </div>
                      </div>
                      <div class="col-lg-6">
                        <div class="cs_iconbox cs_style_2">
                          <div class="cs_number_box cs_bg_accent text_white">04</div>
                          <h3 class="cs_iconbox_title">Secure Fast Transaction</h3>
                          <p class="cs_iconbox_subtitle">Pos can analyze large volumes of data quickly and accurate, valuable.
                          </p>
                        </div>
                      </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @include('layouts.partials.footer_pos')

</div>
<script type="text/javascript">

</script>



@endsection