<!--  -->
<?= view("template/head") ?>
<?= view("template/employerheader") ?>
<?php
$router = service('router');
$routerName_arr = explode("\\", $router->controllerName());
$class = strtolower(end($routerName_arr));
//echo $class;
?>

<style>



</style>

<head>
    <link rel="stylesheet" href="assets/web/assets/mobirise-icons2/mobirise2.css">
    <link rel="stylesheet" href="assets/dropdown/css/style.css">
    <link rel="stylesheet" href="assets/socicon/css/styles.css">
    <link rel="stylesheet" href="assets/css/sliderstyle.css">
    <link rel="stylesheet" href="assets/theme/css/style.css">
    <link rel="stylesheet" href="assets/css/newcss.css">
    <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css
">
    <link rel="stylesheet" href=" https://www.google.com/jsapi
"> -->

    <link rel="preload" href="https://fonts.googleapis.com/css?family=Kantumruy+Pro:100,200,300,400,500,600,700,100i,200i,300i,400i,500i,600i,700i&amp;display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
    <noscript>
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kantumruy+Pro:100,200,300,400,500,600,700,100i,200i,300i,400i,500i,600i,700i&amp;display=swap">
    </noscript>
    <link rel="preload" as="style" href="assets/mobirise/css/mbr-additional.css">
    <link rel="stylesheet" href="assets/mobirise/css/mbr-additional.css" type="text/css">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" />


</head>
<style>
    /* ====================== */
    .bg {
        position: relative;
        background-image: url(assets/images/value5.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        height: 100vh;
    }




    .btn {
        background-color: #202124;
        color: white;
        padding: 15px 30px;
        border: none;
        cursor: pointer;
        opacity: 0.9;
        border-radius: 40px;
        margin-bottom: 10px;

    }

    .btn:hover {
        color: #202124;
        background-color: white;
        transition: cubic-bezier(0.075, 0.82, 0.165, 1);


    }

    .newbg {
        background-color: #f5f2ea;
        margin-top: 70px;
    }

    .grid-container {
        padding: 40px;
        border: none;
        padding: 30px;
        border-radius: 10px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .box {
        border: none;
        padding: 0 30px;
        border-radius: 10px;
        width: 100%;
        box-sizing: border-box;
        border: 1px solid #ccc;
        /* Optional: Add a border for better visibility */
    }

    .box button {
        margin-top: 60px;
    }

    .one {
        width: 100%;
        height: auto;
        background-color: #696969;
        text-align: center;
        padding-top: 30px;
        font-size: 18px;
        line-height: 1.5;
        color: #fff;
        height: 200px;
        /* background-image: url(assets/images/3.png); */
        background-color: #0d8fff;
        background-position: center top;
        /* background-repeat: no-repeat;
    background-attachment: fixed; */
    }

    .two {
        width: 100%;
        height: auto;
        text-align: center;
        height: 200px;
        padding-top: 30px;
        font-size: 18px;
        line-height: 1.5;
        color: #fff;
        /* background-image: url(assets/images/design.png); */
        background-color: #ff4b4a;
        background-position: center top;
        /* background-repeat: no-repeat; */
        /* background-attachment: fixed; */
        /* background-color: #696969; */
    }


    .bg-text {
        margin-top: 300px;
    }

    .bg-text {
        position: relative;
    }

    .bgh1 {
        color: #fff !important;
    }

    .bg-text::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /* background-color: rgba(0, 0, 0, 0.3); */
        /* Adjust the alpha value for transparency */
        z-index: -1;
        /* Ensure the overlay is behind the text */
    }

    .tabcontent {
        display: none;
    }

    .tablinks {
        /* color: #ffffff; */
        background-color: #7d9bb5;
        color: #ffffff;
        border-radius: 3px;
        padding: 7px 19px;
    }

    .tablinks.active {
        background-color: #0d8fff;
        padding: 7px 19px;
        color: #ffffff;
        border-radius: 2px;
    }

    /* .chart {
        width: 100%;
        min-height: 450px;
    }

    .row {
        margin: 0 !important;
    } */
</style>

<body>
    <!-- <div class="overlay" id="overlay"></div> -->
    <section class="bg" data-bs-version="5.1" class="header2 cid-tjQDC0fgGE" id="header02-0">
        <div class="search container">
            <div class="row  justify-content-center">

                <div class="col-12  bg-text  col-lg col-md-12">
                    <br>
                    <br>
                    <div class="text-wrapper align-center">
                        <h1 class="mbr-section-title bgh1 text-light align-left mbr-fonts-style mb-3 display-2">Purpose driven <br>talents with skill
                            <br> purpose profiling
                        </h1>
                        <!-- <h1 class="mbr-section-title align-center mbr-fonts-style mb-3 display-2">Your Gateway to Achieving <br> Work-Life Balance!</h1> -->
                        <!-- <p class="mbr-text align-center mbr-fonts-style ">
                            Search your career opportunity through 12,800 jobs</p> -->
                        <div class="mbr-section-btn mt-3 align-left">
                            <a style="background-color: #0d8fff; color: #f5f5f5; width:200px; z-index:100;" class="btn  " href="<?= base_url() ?>/request-demo">Get Started Now</a>

                        </div>
                    </div>
                    <br>
                </div>
            </div>
    </section>


    <?= view("template/clientslider") ?>
    <br>
    <br>

    <!-- ================= featured jobs -->
    <div style="background-image:url(<?= base_url() ?>/assets2/images/bg-slider1.jpg);" class="section">
        <div class="">
            <div class="row align-items-center">
                <div class="col-md-6">
                    <br>
                    <br>
                    <br>

                    <div class="sub-section-title">
                        <h3>What we discovered
                        </h3>
                        <br>
                        <p style="font-size: 16.7px; color:#696969; line-height:26px; letter-spacing: 0.2px; ">
                            <span style="font-size: 16.7px; color:#0d8fff; "> 79%</span> of CEO’s believe that PURPOSE is integral to success (pwc).
                        </p>
                        <p style=" font-size: 16.7px; color:#696969; line-height:26px; letter-spacing: 0.2px; ">
                            A separate study reveals that <span style="font-size: 16.7px; color:#0d8fff; "> 95%</span>of global consumers say it is important for them to engage with companies that have a strong purpose, but unfortunately, only <span style="font-size: 16.7px; color:#0d8fff; "> 37%</span> of consumers believe that businesses have a purpose.
                        </p>
                        <p style=" font-size: 16.7px; color:#696969; line-height:26px; letter-spacing: 0.2px; ">
                            Study also shows that <span style="font-size: 16.7px; color:#0d8fff; "> 83%</span> of millennials want to engage with brands that know what they stand for, have a true passion, support and give back to their communities.
                        </p>
                        <p style=" font-size: 16.7px; color:#696969; line-height:26px; letter-spacing: 0.2px; ">
                            purpose-driven business model is the new edge, businesses that have understood this are making more profit & impact than profit-driven companies.
                        </p>

                    </div>
                </div>

                <div class=" col-md-1">
                </div>

                <div class="col-md-5">
                    <div class="image-holder mb-sm-5" id="slider">
                        <img src="<?= base_url() ?>/assets/images/purpose3.jpg" alt="">
                    </div>
                </div>

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


    <!-- <div style=" background-image:url(assets2/images/bg-slider1.jpg);" class="section"> -->
    <div style="background-color: #ffffff;" class="section"> <br>
        <br>
        <br>
        <div class="container">
            <div class="section-title section-title-center mb-2">
                <h2>Show your team you value them</h2>
            </div>
            <div class="text-center col-md-10 section-title-center font-size-h5">
                <p style="font-size: 16.7px; color:#696969; line-height:26px; letter-spacing: 0.3px; ">
                    Elevate Your Workplace: <br>Do you want high productivity and employee morale lifted daily? Let's Turn Ambition into Achievement!
                </p>
                <div class="text-wrapper align-center">
                    <a style="background-color: #0d8fff; color: #f5f5f5; width:190px; " class="btn  " href="<?= base_url() ?>/employer">Request Demo</a>
                </div>
            </div>
        </div>
    </div>

    <!-- <div class="row  justify-content-center"> -->


    <!-- Add this line inside the <head> tag of your HTML file -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ljquery/2.1.3/jquery.min.js
"></script>


    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>

    <script src="assets/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="assets/smoothscroll/smooth-scroll.js"></script>
    <script src="assets/ytplayer/index.js"></script>
    <script src="assets/dropdown/js/navbar-dropdown.js"></script>
    <script src="assets/mbr-switch-arrow/mbr-switch-arrow.js"></script>
    <script src="assets/theme/js/script.js"></script>
    <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
    <script>
        // Function to switch between employees and employers
    </script>
    <!-- Add the Slick Carousel CSS -->
    <!-- 
        <script>
            google.load("visualization", "1", {
                packages: ["corechart"]
            });
            google.setOnLoadCallback(drawChart1);

            function drawChart1() {
                var data = google.visualization.arrayToDataTable([
                    ['Year', 'Sales', 'Expenses'],
                    ['2004', 1000, 400],
                    ['2005', 1170, 460],
                    ['2006', 660, 1120],
                    ['2007', 1030, 540]
                ]);

                var options = {
                    title: 'Company Performance',
                    hAxis: {
                        title: 'Year',
                        titleTextStyle: {
                            color: 'red'
                        }
                    }
                };

                var chart = new google.visualization.ColumnChart(document.getElementById('chart_div1'));
                chart.draw(data, options);
            }

            google.load("visualization", "1", {
                packages: ["corechart"]
            });
            google.setOnLoadCallback(drawChart2);

            function drawChart2() {
                var data = google.visualization.arrayToDataTable([
                    ['Year', 'Sales', 'Expenses'],
                    ['2013', 1000, 400],
                    ['2014', 1170, 460],
                    ['2015', 660, 1120],
                    ['2016', 1030, 540]
                ]);

                var options = {
                    title: 'Company Performance',
                    hAxis: {
                        title: 'Year',
                        titleTextStyle: {
                            color: '#333'
                        }
                    },
                    vAxis: {
                        minValue: 0
                    }
                };

                var chart = new google.visualization.AreaChart(document.getElementById('chart_div2'));
                chart.draw(data, options);
            }

            $(window).resize(function() {
                drawChart1();
                drawChart2();
            });

            // Reminder: you need to put https://www.google.com/jsapi in the head of your document or as an external resource on codepen //
        </script> -->

    <script>
        // Define an array of image URLs
        var images = [
            "<?= base_url() ?>/assets/images/jobs.jpg",
            "<?= base_url() ?>/assets/images/happy.jpg",
            "<?= base_url() ?>/assets/images/smile.jpg"
        ];

        // Initialize index for the current image
        var currentIndex = 0;

        // Function to change the image source
        function changeImage() {
            document.getElementById("slider").getElementsByTagName("img")[0].src = images[currentIndex];
            currentIndex = (currentIndex + 1) % images.length; // Move to the next image, loop back to the first if necessary
        }

        function changeImage() {
            document.getElementById("slider2").getElementsByTagName("img")[0].src = images[currentIndex];
            currentIndex = (currentIndex + 1) % images.length; // Move to the next image, loop back to the first if necessary
        }


        // Call the changeImage function every 3 seconds
        setInterval(changeImage, 5000);

        // function openCity(evt, cityName) {
        //     var i, tabcontent, tablinks;
        //     tabcontent = document.getElementsByClassName("tabcontent");
        //     for (i = 0; i < tabcontent.length; i++) {
        //         tabcontent[i].style.display = "none";
        //     }
        //     tablinks = document.getElementsByClassName("tablinks");
        //     for (i = 0; i < tablinks.length; i++) {
        //         tablinks[i].classList.remove("active");
        //     }
        //     document.getElementById(cityName).style.display = "block";
        //     evt.currentTarget.classList.add("active");
        // }
        function openCity(evt, cityName, imageUrl) {
            var i, tabcontent, tablinks;
            tabcontent = document.getElementsByClassName("tabcontent");
            for (i = 0; i < tabcontent.length; i++) {
                tabcontent[i].style.display = "none";
            }
            tablinks = document.getElementsByClassName("tablinks");
            for (i = 0; i < tablinks.length; i++) {
                tablinks[i].classList.remove("active");
            }
            document.getElementById(cityName).style.display = "block";
            evt.currentTarget.classList.add("active");

            // Change image source
            document.getElementById("slider2").getElementsByTagName("img")[0].src = imageUrl;
        }
        // Default tab to display
        document.querySelector('.tablinks').click();
    </script>
</body>


<!-- Mirrored from mobirise.com/extensions/workflowm5/chat-app/ by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 06 Dec 2023 15:14:58 GMT -->

</html>


<?= view('template/footer') ?>