@extends('frontend.includes.master')
@section('title', @$data['title'])
@section('content')
    <div class=" new-main-content">
        {{-- start --}}
        <div class="bg-gradient-frontend ">
            <div class="container">
                <div class="row mt-5 py-5 align-items-center ">
                    <div class="col-lg-6">
                        <div class="side-img">
                            <img src="{{ url('images/hrm_new.png') }}" alt="">
                        </div>

                    </div>
                    <div class="offset-lg-1 col-lg-5">
                        <div class="side-content">
                            <h2 class="text-left">Learn More About Our Useful Attributes
                            </h2>
                            <p>HRMS software has a hand in your company’s advancement as you can easily conduct your
                                business operations and production to marketing and sales</p>
                            <div class="hr-list">
                                <ul>
                                    <li>
                                        <i class="fas fa-angle-double-right"></i> <span>Employee-centric</span>
                                    </li>
                                    <li>
                                        <i class="fas fa-angle-double-right"></i> <span>Development-centric</span>
                                    </li>
                                    <li>
                                        <i class="fas fa-angle-double-right"></i> <span>Individual progress</span>
                                    </li>
                                    <li>
                                        <i class="fas fa-angle-double-right"></i> <span>Decision making</span>
                                    </li>
                                    <li>
                                        <i class="fas fa-angle-double-right"></i> <span>Continuity</span>
                                    </li>
                                    <li>
                                        <i class="fas fa-angle-double-right"></i> <span>Universal</span>
                                    </li>
                                </ul>
                            </div>

                            <div class="users-count-container">
                                <div class="row">
                                    <div class="col-6 mb-3 ">
                                        <div class="users-count-box text-center">
                                            <h3>1500+</h3>
                                            <p>Active Users</p>
                                        </div>

                                    </div>
                                    <div class="col-6 mb-3">
                                        <div class="users-count-box text-center">
                                            <h3>24/7</h3>
                                            <p>Dedicated Support
                                            </p>
                                        </div>

                                    </div>
                                    <div class="col-6 mb-3">
                                        <div class="users-count-box text-center">
                                            <h3>1K+</h3>
                                            <p>Global clients
                                            </p>
                                        </div>

                                    </div>
                                    <div class="col-6 mb-3">
                                        <div class="users-count-box text-center">
                                            <h3>100+</h3>
                                            <p>Client Testimonials
                                            </p>
                                        </div>

                                    </div>
                                </div>

                            </div>


                        </div>

                    </div>

                </div>
            </div>
        </div>
        {{-- end --}}
        {{-- start --}}
        <div class="container">
            <div class="card-section pt-5 pb-4">
                <div class="row">
                    <div class="col-lg-4 col-md-6 mb-2">
                        <div class=" card-shadows-cus">
                            <div class="card-body p-5 my-md-3 my-lg-3 my-sm-0">
                                <div class="card-icon">
                                    <i class="fas fa-dollar-sign"></i>

                                </div>
                                <div class="card-text">
                                    <h3>Employee-centric </h3>
                                    <p class="mb-0">
                                        Make the lives of your employees less problematic. Try to create an atmosphere where
                                        your employees feel like giving their best every day. You can only expect more work
                                        efficiency if you are able to keep your employees happier.
                                    </p>
                                </div>
                            </div>
                        </div>

                    </div>

                    <div class="col-lg-4 col-md-6 mb-2">
                        <div class=" card-shadows-cus">
                            <div class="card-body p-5 my-md-3 my-lg-3 my-sm-0">
                                <div class="card-icon">
                                    <i class="fas fa-shield-alt"></i>

                                </div>
                                <div class="card-text">
                                    <h3>Development-centric</h3>
                                    <p class="mb-0">
                                        To meet your business demands, it is very crucial to meet current and future growth
                                        requirements. For fulfilling them, employees’ development is a must. Through your
                                        agile strategies and planning it out beforehand can be helpful to reach your goals.
                                    </p>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="col-lg-4 col-md-6 mb-2">
                        <div class=" card-shadows-cus">
                            <div class="card-body p-5 my-md-3 my-lg-3 my-sm-0">
                                <div class="card-icon">
                                    <i class="far fa-copy"></i>

                                </div>
                                <div class="card-text">
                                    <h3>Individual progress</h3>
                                    <p class="mb-0">
                                        Having the ability to develop individual relationships with the employees can be
                                        beneficial for any company. You can easily get to know their general behavior,
                                        social aspects of life, emotional well- being and act upon it to improve employee
                                        experience.
                                    </p>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="col-lg-4 col-md-6 mb-2">
                        <div class=" card-shadows-cus">
                            <div class="card-body p-5 my-md-3 my-lg-3 my-sm-0">
                                <div class="card-icon">
                                    <i class="fas fa-dollar-sign"></i>

                                </div>
                                <div class="card-text">
                                    <h3>
                                        Decision making
                                    </h3>
                                    <p class="mb-0">
                                        It is very essential to know how to use data rather than just collecting them.
                                        Crunching data after getting helpful information can make an impact on
                                        decision-making. Easily dive into future possibilities, also analyze potential
                                        outcomes beforehand.
                                    </p>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="col-lg-4 col-md-6 mb-2">
                        <div class=" card-shadows-cus">
                            <div class="card-body p-5 my-md-3 my-lg-3 my-sm-0">
                                <div class="card-icon">
                                    <i class="fas fa-shield-alt"></i>

                                </div>
                                <div class="card-text">
                                    <h3>
                                        Continuity
                                    </h3>
                                    <p class="mb-0">
                                        It may occur to anybody, even the HR management people can get sick. Keeping
                                        constant workflow and overcome such disruptions, it is vital to get notified earlier
                                        or get to know employees’ health condition, effectiveness, feelings towards their
                                        job.
                                    </p>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="col-lg-4 col-md-6 mb-2">
                        <div class=" card-shadows-cus">
                            <div class="card-body p-5 my-md-3 my-lg-3 my-sm-0">
                                <div class="card-icon">

                                    <i class="far fa-copy"></i>
                                </div>
                                <div class="card-text">
                                    <h3>Universal</h3>
                                    <p class="mb-0">
                                        Universality is the most vital feature for HRM software. It really doesn’t matter if
                                        you are running only a two-person job or a company of 500+ employees, this software
                                        is applicable for any. It is truly reliable for any type of organization.
                                    </p>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        {{-- end --}}

        {{-- start --}}
        <div class="container">

            <div class="card-section pt-5 pb-4">
                <div class="row">
                    <div class="col-md-12">
                        <h2 class="text-center">ONE intuitive HR system</h2>
                        <p class="text-center">Get rid of the paperwork and spreadsheets floating around your office and
                            Turn into beautiful online people database with employee profiles.</p>
                    </div>
                    <div class="col-lg-4 col-md-6">
                        <div class="text-center ">
                            <div class="card-body ">
                                <div class="card-icon">
                                    <i class="fas fa-sign-out-alt"></i>

                                </div>
                                <div class="card-text">
                                    <h3>Leave</h3>
                                    <p class="mb-0">
                                        Employees can express their Leave Type, Find Assigned Leaves and get Leave Request
                                        approval. They can also submit necessary documents to ensure the validity of their
                                        leave.


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

                    </div>
                    <div class="col-lg-4 col-md-6">
                        <div class="text-center ">
                            <div class="card-body ">
                                <div class="card-icon">
                                    <i class="fas fa-calendar-check"></i>
                                </div>
                                <div class="card-text">
                                    <h3>Attendance</h3>
                                    <p class="mb-0">
                                        Records employees’ In /Out time, Working hours, Overtime automatically in its
                                        system. Whether they are working from home or office, their activities can be easily
                                        traceable to authority.
                                    </p>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="col-lg-4 col-md-6">
                        <div class="text-center ">
                            <div class="card-body ">
                                <div class="card-icon">
                                    <i class="fas fa-hand-holding-usd"></i>

                                </div>
                                <div class="card-text">
                                    <h3>Expense</h3>
                                    <p class="mb-0">
                                        For any additional expenses, managing legal claims or keeping track on payment
                                        history can be easily done in few clicks. You can also Keep an updated routine for
                                        any additional disbursement.
                                    </p>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="col-lg-4 col-md-6">
                        <div class=" text-center">
                            <div class="card-body ">
                                <div class="card-icon">
                                    <i class="fas fa-map-marker-alt"></i>

                                </div>
                                <div class="card-text">
                                    <h3>Visit</h3>
                                    <p class="mb-0">
                                        For outdoor visits or participating in crucial meetings, employees can input their
                                        check in/out timings too. Also such visits can be monitored by the officials anytime
                                        of the day via live location.
                                    </p>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="col-lg-4 col-md-6">
                        <div class="text-center ">
                            <div class="card-body ">
                                <div class="card-icon">
                                    <i class="fas fa-exclamation-triangle"></i>

                                </div>
                                <div class="card-text">
                                    <h3>Notice</h3>
                                    <p class="mb-0">
                                        Let everyone aware of any upcoming events, disciplinary, holidays at once. You can
                                        also update any notice/warning for individuals, departmental wise or even for all
                                        without any physical effort.
                                    </p>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="col-lg-4 col-md-6">
                        <div class=" text-center">
                            <div class="card-body ">
                                <div class="card-icon">
                                    <i class="fas fa-clipboard-list"></i>

                                </div>
                                <div class="card-text">
                                    <h3>Report</h3>
                                    <p class="mb-0">
                                        Collects data of individuals' -Working days, On time, Late Comings, All types of
                                        Leave, Overtime, and helps to create daily/monthly/half-yearly/annual report based
                                        on their regular performance.
                                    </p>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>

        {{-- end --}}

        {{-- start --}}

        <div class="bg-lightish ">
            <div class="container">
                <div class="row py-5 align-items-center ">
                    <div class="col-lg-12">
                        <div class="side-content">
                            <h2 class="text-center">Take your game to the next level</h2>
                            <p class="text-center">24hourworx can introduce scale and growth to your business.</p>
                            <div class="row">
                                <div class="col-lg-3 pr-5">
                                    <ul class="nav nav-tabs business-tabs d-block " id="myTab" role="tablist">
                                        <li class="nav-item" role="presentation">
                                            <button class="nav-link active" id="hrcalendar-tab" data-bs-toggle="tab"
                                                data-bs-target="#hrcalendar" type="button" role="tab"
                                                aria-controls="hrcalendar" aria-selected="true">platform overview</button>
                                        </li>
                                        <li class="nav-item" role="presentation">
                                            <button class="nav-link" id="banking-tab" data-bs-toggle="tab"
                                                data-bs-target="#banking" type="button" role="tab"
                                                aria-controls="banking" aria-selected="false">HR</button>
                                        </li>
                                        <li class="nav-item" role="presentation">
                                            <button class="nav-link" id="designdevice-tab" data-bs-toggle="tab"
                                                data-bs-target="#designdevice" type="button" role="tab"
                                                aria-controls="designdevice" aria-selected="false">payroll_items
                                                administration</button>
                                        </li>
                                        <li class="nav-item" role="presentation">
                                            <button class="nav-link" id="visit-tab" data-bs-toggle="tab"
                                                data-bs-target="#visit" type="button" role="tab"
                                                aria-controls="visit" aria-selected="false">Visit</button>
                                        </li>
                                        <li class="nav-item" role="presentation">
                                            <button class="nav-link" id="recruitment-tab" data-bs-toggle="tab"
                                                data-bs-target="#recruitment" type="button" role="tab"
                                                aria-controls="recruitment" aria-selected="false">Recruiting</button>
                                        </li>
                                        <li class="nav-item" role="presentation">
                                            <button class="nav-link" id="leave-tab" data-bs-toggle="tab"
                                                data-bs-target="#leave" type="button" role="tab"
                                                aria-controls="leave" aria-selected="false">Leave & Attendance</button>
                                        </li>
                                        <li class="nav-item" role="presentation">
                                            <button class="nav-link" id="expense-tab" data-bs-toggle="tab"
                                                data-bs-target="#expense" type="button" role="tab"
                                                aria-controls="expense" aria-selected="false">Expense</button>
                                        </li>
                                    </ul>
                                </div>
                                <div class="col-lg-9">
                                    <div class="tab-content" id="myTabContent">
                                        <div class="tab-pane fade show active" id="hrcalendar" role="tabpanel"
                                            aria-labelledby="hrcalendar-tab">
                                            <div class="pt-4">
                                                <div class="row">
                                                    <div class="col-lg-7 ">
                                                        <div class="side-img">
                                                            <img src="{{ url('images/nav_pic1.png') }}"
                                                                alt="">
                                                        </div>

                                                    </div>
                                                    <div class="col-lg-5 p-5">
                                                        <div class="title-nav-content">
                                                            <h6>platform overview</h6>
                                                            <p>
                                                                24hourworx is a cloud based attendance management system. It
                                                                allows you to keep in track your employees attendance. It
                                                                also allows you to generate reports.
                                                            </p>
                                                            <a class="learn-link" href="">
                                                                <p>Learn More</p>
                                                            </a>
                                                        </div>


                                                    </div>
                                                </div>

                                            </div>



                                        </div>
                                        <div class="tab-pane fade" id="banking" role="tabpanel"
                                            aria-labelledby="banking-tab">
                                            <div class="pt-4">
                                                <div class="row">
                                                    <div class="col-lg-7 ">
                                                        <div class="side-img">
                                                            <img src="{{ url('images/nav_pic2.png') }}"
                                                                alt="">
                                                        </div>

                                                    </div>
                                                    <div class="col-lg-5 p-5">
                                                        <div class="title-nav-content">
                                                            <h6>HR</h6>
                                                            <p>
                                                                24hourworx is a cloud based attendance management system. It
                                                                allows you to keep in track your employees attendance. It
                                                                also allows you to generate reports.
                                                            </p>
                                                            <a class="learn-link" href="">
                                                                <p>Learn More</p>
                                                            </a>
                                                        </div>


                                                    </div>
                                                </div>


                                            </div>
                                        </div>
                                        <div class="tab-pane fade" id="designdevice" role="tabpanel"
                                            aria-labelledby="designdevice-tab">
                                            <div class="pt-4">
                                                <div class="row">
                                                    <div class="col-lg-7 ">
                                                        <div class="side-img">
                                                            <img src="{{ url('images/nav_pic3.png') }}"
                                                                alt="">
                                                        </div>

                                                    </div>
                                                    <div class="col-lg-5 p-5">
                                                        <div class="title-nav-content">
                                                            <h6>payroll_items administration</h6>
                                                            <p>
                                                                24hourworx is a cloud based attendance management system. It
                                                                allows you to keep in track your employees attendance. It
                                                                also allows you to generate reports.
                                                            </p>
                                                            <a class="learn-link" href="">
                                                                <p>Learn More</p>
                                                            </a>
                                                        </div>


                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="tab-pane fade" id="recruitment" role="tabpanel"
                                            aria-labelledby="recruitment-tab">
                                            <div class="pt-4">
                                                <div class="row">
                                                    <div class="col-lg-7 ">
                                                        <div class="side-img">
                                                            <img src="{{ url('images/nav_pic3.png') }}"
                                                                alt="">
                                                        </div>

                                                    </div>
                                                    <div class="col-lg-5 p-5">
                                                        <div class="title-nav-content">
                                                            <h6>Recruiting </h6>
                                                            <p>
                                                                24hourworx is a cloud based attendance management system. It
                                                                allows you to keep in track your employees attendance. It
                                                                also allows you to generate reports.
                                                            </p>
                                                            <a class="learn-link" href="">
                                                                <p>Learn More</p>
                                                            </a>
                                                        </div>


                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="tab-pane fade" id="visit" role="tabpanel"
                                            aria-labelledby="visit-tab">
                                            <div class="pt-4">
                                                <div class="row">
                                                    <div class="col-lg-7 ">
                                                        <div class="side-img">
                                                            <img src="{{ url('images/nav_pic4.png') }}"
                                                                alt="">
                                                        </div>

                                                    </div>
                                                    <div class="col-lg-5 p-5">
                                                        <div class="title-nav-content">
                                                            <h6>Visit</h6>
                                                            <p>
                                                                24hourworx is a cloud based attendance management system. It
                                                                allows you to keep in track your employees attendance. It
                                                                also allows you to generate reports.
                                                            </p>
                                                            <a class="learn-link" href="">
                                                                <p>Learn More</p>
                                                            </a>
                                                        </div>


                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="tab-pane fade" id="leave" role="tabpanel"
                                            aria-labelledby="leave-tab">
                                            <div class="pt-4">
                                                <div class="row">
                                                    <div class="col-lg-7 ">
                                                        <div class="side-img">
                                                            <img src="{{ url('images/nav_pic5.png') }}"
                                                                alt="">
                                                        </div>

                                                    </div>
                                                    <div class="col-lg-5 p-5">
                                                        <div class="title-nav-content">
                                                            <h6>Leave & Attendance </h6>
                                                            <p>
                                                                24hourworx is a cloud based attendance management system. It
                                                                allows you to keep in track your employees attendance. It
                                                                also allows you to generate reports.
                                                            </p>
                                                            <a class="learn-link" href="">
                                                                <p>Learn More</p>
                                                            </a>
                                                        </div>


                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="tab-pane fade" id="expense" role="tabpanel"
                                            aria-labelledby="expense-tab">
                                            <div class="pt-4">
                                                <div class="row">
                                                    <div class="col-lg-7 ">
                                                        <div class="side-img">
                                                            <img src="{{ url('images/nav_pic6.png') }}"
                                                                alt="">
                                                        </div>

                                                    </div>
                                                    <div class="col-lg-5 p-5">
                                                        <div class="title-nav-content">
                                                            <h6>Expense </h6>
                                                            <p>
                                                                24hourworx is a cloud based attendance management system. It
                                                                allows you to keep in track your employees attendance. It
                                                                also allows you to generate reports.
                                                            </p>
                                                            <a class="learn-link" href="">
                                                                <p>Learn More</p>
                                                            </a>
                                                        </div>


                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>



                        </div>
                    </div>


                </div>
            </div>
        </div>

        {{-- end --}}

        {{-- start --}}

        <div class="container">
            <div class="card-section pt-5 pb-4">
                <div class="row">
                    <div class="col-md-12">
                        <h2 class="text-center">More Awesome Features</h2>
                        <p class="text-center">Here are several causes that makes 24hourworx worth paying attention to</p>
                    </div>
                    <div class="col-lg-4 col-md-6 mb-2">
                        <div
                            class="feature-feature-list p-5 white-bg text-center border rounded my-md-3 my-lg-3 my-sm-0  text-center">
                            <div class="">
                                <div class="card-icon">
                                    <img src="{{ url('images/customize.png') }}" alt="">

                                </div>
                                <div class="card-text">
                                    <h3>Employee Data
                                    </h3>
                                    <p class="mb-0">
                                        Records everything that indicates all necessary information for any of the
                                        employees.
                                    </p>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="col-lg-4 col-md-6 mb-2">
                        <div
                            class="feature-feature-list p-5 white-bg text-center border rounded my-md-3 my-lg-3 my-sm-0  text-center  text-center">
                            <div class="">
                                <div class="card-icon">
                                    <img src="{{ url('images/management.png') }}" alt="">

                                </div>
                                <div class="card-text">
                                    <h3>Custom Permission
                                    </h3>
                                    <p class="mb-0">
                                        Provide accessibility to the designated personnel for further analysis of any
                                        individual.
                                    </p>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="col-lg-4 col-md-6 mb-2">
                        <div
                            class="feature-feature-list p-5 white-bg text-center border rounded my-md-3 my-lg-3 my-sm-0  text-center  text-center">
                            <div class="">
                                <div class="card-icon">
                                    <img src="{{ url('images/task.png') }}" alt="">

                                </div>
                                <div class="card-text">
                                    <h3>Employee Onboarding
                                    </h3>
                                    <p class="mb-0">
                                        Onboard employees online and make a remarkable first impression during the process.
                                    </p>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="col-lg-4 col-md-6 mb-2">
                        <div
                            class="feature-feature-list p-5 white-bg text-center border rounded my-md-3 my-lg-3 my-sm-0  text-center  text-center">
                            <div class="">
                                <div class="card-icon">
                                    <img src="{{ url('images/payroll.png') }}" alt="">

                                </div>
                                <div class="card-text">
                                    <h3>Announcement</h3>
                                    <p class="mb-0">
                                        Celebrate special moments with everyone in the company with a few words.
                                    </p>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="col-lg-4 col-md-6 mb-2">
                        <div
                            class="feature-feature-list p-5 white-bg text-center border rounded my-md-3 my-lg-3 my-sm-0  text-center  text-center">
                            <div class="">
                                <div class="card-icon">
                                    <img src="{{ url('images/goals.png') }}" alt="">

                                </div>
                                <div class="card-text">
                                    <h3>Custom Profile
                                    </h3>
                                    <p class="mb-0">
                                        You can also get to customize your own profile as you may seem right for the
                                        company.
                                    </p>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="col-lg-4 col-md-6 mb-2">
                        <div
                            class=" feature-feature-list p-5 white-bg text-center border rounded my-md-3 my-lg-3 my-sm-0  text-center text-center">
                            <div class="">
                                <div class="card-icon">

                                    <img src="{{ url('images/support.png') }}" alt="">
                                </div>
                                <div class="card-text">
                                    <h3>Project & Tasks
                                    </h3>
                                    <p class="mb-0">
                                        Allows transparent access to overview employee’s assigned tasks for daily reports.
                                    </p>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>


        {{-- end --}}

        {{-- start --}}
        <div class="container pt-5 pb-5">
            <div class="row">
                <div class="col-lg-12 text-center mb-2">
                    <h2>
                        one place to keep your team happy and productive
                    </h2>
                    <p>
                        24hourworx is your ultimate HR platform to stabilize your company’s motive <br> and make propulsion
                        towards a successful relationship between the management & employees.
                    </p>
                </div>

                <div class="col-lg-2 text-center">
                    <div class="new-feature-img">
                        <img src="{{ url('images/management1.png') }}" alt="">
                    </div>
                    <p class="mt-2">talent management</p>
                </div>
                <div class="col-lg-2 text-center">
                    <div class="new-feature-img">
                        <img src="{{ url('images/report1.png') }}" alt="">
                    </div>
                    <p class="mt-2">insights and reporting</p>
                </div>
                <div class="col-lg-2 text-center">
                    <div class="new-feature-img">
                        <img src="{{ url('images/hiring1.png') }}" alt="">
                    </div>
                    <p class="mt-2">hiring & onboarding</p>
                </div>
                <div class="col-lg-2 text-center">
                    <div class="new-feature-img">
                        <img src="{{ url('images/attendance1.png') }}" alt="">
                    </div>
                    <p class="mt-2">time and attendance</p>
                </div>
                <div class="col-lg-2 text-center">
                    <div class="new-feature-img">
                        <img src="{{ url('images/employee-payroll_items1.png') }}" alt="">
                    </div>
                    <p class="mt-2">employee payroll_items</p>
                </div>
                <div class="col-lg-2 text-center">
                    <div class="new-feature-img">
                        <img src="{{ url('images/payroll2.png') }}" alt="">
                    </div>
                    <p class="mt-2">Full-service payroll</p>
                </div>
            </div>
        </div>

        {{-- end --}}




    </div>


@endsection
