<?php
$pageTitle = 'Crop Monitor';
$siteName  = 'Crop Monitor';
$siteUrl   = '/';
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title><?= htmlspecialchars($pageTitle . ' | ' . $siteName, ENT_QUOTES, 'UTF-8') ?></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="crop monitor, soil analysis, plant analysis, water analysis, irrigation, agriculture" />
    <meta name="description" content="Centralise records for irrigation, weather and soil moisture. Real-time crop monitoring for Australian conditions." />

    <!-- css files -->
    <link rel="stylesheet" href="client-assets/FredTemplate/css/bootstrap.css">
    <link rel="stylesheet" href="client-assets/FredTemplate/css/style.css" type="text/css" media="all" />
    <link rel="stylesheet" href="client-assets/FredTemplate/css/font-awesome.css">
    <link href="client-assets/FredTemplate/css/popuo-box.css" rel="stylesheet" type="text/css" media="all" />
    <link rel="stylesheet" href="client-assets/FredTemplate/css/lightbox.css" type="text/css" media="all">
    <link rel="stylesheet" href="client-assets/FredTemplate/css/flexslider.css" type="text/css" media="screen" />
    <!-- web-fonts -->
    <link href="//fonts.googleapis.com/css?family=Economica:400,400i,700,700i&amp;subset=latin-ext" rel="stylesheet">
    <link href="//fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i" rel="stylesheet">
    <link href="//fonts.googleapis.com/css?family=Rasa:300,400,500,600,700" rel="stylesheet">
</head>

<body>

<div class="main-agile">
    <!-- banner -->
    <div class="trans-header"></div>
    <div class="agile-top">
        <div class="col-xs-4 logo">
            <a href="<?= $siteUrl ?>" class="logo">
                <img class="img-res" src="client-assets/images/crop-monitor-logo.png" alt="Cropmonitor" width="50%">
            </a>
            <h1>Monitor your crops health in real-time</h1>
        </div>
        <div class="col-xs-6 header-w3l">
            <ul>
                <li>
                    <a href="/login/login.php">
                        <span class="fa fa-unlock-alt" aria-hidden="true"></span> Sign In
                    </a>
                </li>
                <li>
                    <a href="/login/register.php">
                        <span class="fa fa-pencil-square-o" aria-hidden="true"></span> Sign Up
                    </a>
                </li>
            </ul>
        </div>
        <!-- navigation -->
        <div class="col-xs-2 menu">
            <a href="" id="menuToggle">
                <span class="navClosed"></span>
            </a>
            <ul>
                <li><a href="#about">About</a></li>
                <li><a href="#services">Services</a></li>
                <li><a href="#team">Team</a></li>
                <li><a href="#contact">Contact</a></li>
                <li><a href="/login/login.php">Login</a></li>
            </ul>
        </div>
        <!-- //navigation -->
    </div>
</div>

<!-- banner slider -->
<div class="slider">
    <div class="callbacks_container">
        <ul class="rslides callbacks callbacks1" id="slider4">
            <li>
                <div class="w3layouts-banner-top banner">
                    <div class="container">
                        <div class="agileits-banner-info">
                            <div>
                                <h3>Comprehensive Soil Analysis</h3>
                                <p>Plant nutrient levels are valuable to identify nutrient deficiency or toxicity and to monitor the fertiliser programme</p>
                            </div>
                            <div class="video-pop-wthree">
                                <a href="#small-dialog1" class="view play-icon popup-with-zoom-anim">
                                    <i class="fa fa-play-circle" aria-hidden="true"></i>Watch Our Video</a>
                                <div id="small-dialog1" class="mfp-hide w3ls_small_dialog wthree_pop">
                                    <iframe src="https://player.vimeo.com/video/19251347"></iframe>
                                </div>
                            </div>
                            <div class="thim-click-to-bottom">
                                <a href="#about" class="scroll">
                                    <i class="fa fa-chevron-down"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </li>

            <li>
                <div class="w3layouts-banner-top banner-2">
                    <div class="container">
                        <div class="agileits-banner-info">
                            <div>
                                <h3>Comprehensive Plant Analysis</h3>
                                <p>Plant nutrient levels are valuable to identify nutrient deficiency or toxicity and to monitor the fertiliser programme</p>
                            </div>
                            <div class="video-pop-wthree">
                                <a href="#small-dialog2" class="view play-icon popup-with-zoom-anim">
                                    <i class="fa fa-play-circle" aria-hidden="true"></i>Watch Our Video</a>
                                <div id="small-dialog2" class="mfp-hide w3ls_small_dialog wthree_pop">
                                    <iframe src="https://player.vimeo.com/video/19251347"></iframe>
                                </div>
                            </div>
                            <div class="thim-click-to-bottom">
                                <a href="#about" class="scroll">
                                    <i class="fa fa-chevron-down"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </li>

            <li>
                <div class="w3layouts-banner-top banner-3">
                    <div class="container">
                        <div class="agileits-banner-info">
                            <div>
                                <h3>Comprehensive Water Analysis</h3>
                                <p>Monitor water quality in real-time to protect your crops and optimise irrigation.</p>
                            </div>
                            <div class="video-pop-wthree">
                                <a href="#small-dialog3" class="view play-icon popup-with-zoom-anim">
                                    <i class="fa fa-play-circle" aria-hidden="true"></i>Watch Our Video</a>
                                <div id="small-dialog3" class="mfp-hide w3ls_small_dialog wthree_pop">
                                    <iframe src="https://player.vimeo.com/video/19251347"></iframe>
                                </div>
                            </div>
                            <div class="thim-click-to-bottom">
                                <a href="#about" class="scroll">
                                    <i class="fa fa-chevron-down"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <div class="clearfix"></div>
</div>
<!-- //banner -->

<!-- about -->
<div class="banner-bottom-w3l" id="about">
    <div class="container">
        <div class="title-div">
            <h3 class="tittle">Crop Management Platform</h3>
            <div class="tittle-style"></div>
            <div><p>Nutrient, Moisture, Temperature and Irrigation Alerts all on one platform — save time, improve sustainability and performance.</p></div>
        </div>
        <div class="welcome-sub-wthree">
            <div class="col-md-5 banner_bottom_left">
                <h4>About <span>Crop Monitor</span></h4>
                <p>The Animal Dietary Mineral Balance report assists Veterinarians and Consultants in their assessment of the mineral content of herbage and how well it supplies the animal's daily requirements. Our platform considers both plant and animal requirements to provide comprehensive recommendations.</p>
                <h6 class="w3l-style">Farm Management</h6>
            </div>
            <!-- Stats -->
            <div class="col-md-7 stats-info-agile">
                <div class="w3l-right-stats">
                    <div class="stats-grid stat-border">
                        <div class="numscroller numscroller-big-bottom" data-slno="1" data-min="0" data-max="768" data-delay=".5" data-increment="1">768</div>
                        <p>Trees planted</p>
                    </div>
                    <div class="stats-grid">
                        <div class="numscroller numscroller-big-bottom" data-slno="1" data-min="0" data-max="678" data-delay=".5" data-increment="1">678</div>
                        <p>Likes</p>
                    </div>
                    <div class="stats-grid stat-border border-st2">
                        <div class="numscroller numscroller-big-bottom" data-slno="1" data-min="0" data-max="800" data-delay=".5" data-increment="1">800</div>
                        <p>Volunteers</p>
                    </div>
                </div>
            </div>
            <!-- //Stats -->
            <div class="clearfix"></div>
        </div>
    </div>
</div>
<!-- //about -->

<!-- services -->
<div class="agileits-services" id="services">
    <div class="container">
        <div class="title-div">
            <h3 class="tittle"><span>S</span>ervices</h3>
            <div class="tittle-style"></div>
        </div>
        <div class="agileits-services-row">
            <div class="col-md-4 col-xs-6 agileits-services-grids">
                <div class="col-xs-3 wthree-ser">
                    <i class="fa fa-envira" aria-hidden="true"></i>
                </div>
                <div class="col-xs-9 wthree-heading"><h4>Soil Analysis</h4></div>
                <div class="clearfix"></div>
                <div>Comprehensive soil nutrient analysis with fertiliser programme recommendations.</div>
                <a href="/login/login.php" class="w3-buttons">Get Started</a>
            </div>

            <div class="col-md-4 col-xs-6 agileits-services-grids">
                <div class="col-xs-3 wthree-ser">
                    <i class="fa fa-globe" aria-hidden="true"></i>
                </div>
                <div class="col-xs-9 wthree-heading"><h4>Plant Analysis</h4></div>
                <div class="clearfix"></div>
                <div>Plant tissue analysis to identify nutrient deficiency or toxicity in real-time.</div>
                <a href="/login/login.php" class="w3-buttons">Get Started</a>
            </div>

            <div class="col-md-4 col-xs-6 agileits-services-grids">
                <div class="col-xs-3 wthree-ser">
                    <i class="fa fa-tint" aria-hidden="true"></i>
                </div>
                <div class="col-xs-9 wthree-heading"><h4>Water Analysis</h4></div>
                <div class="clearfix"></div>
                <div>Water quality monitoring to protect crops and optimise irrigation schedules.</div>
                <a href="/login/login.php" class="w3-buttons">Get Started</a>
            </div>
        </div>
        <div class="agileits-services-row-2">
            <div class="clearfix"></div>
        </div>
    </div>
</div>
<!-- //services -->

<!-- team -->
<div class="team" id="team">
    <div class="container">
        <div class="title-div">
            <h3 class="tittle"><span>M</span>eet Our Team</h3>
            <div class="tittle-style"></div>
        </div>
        <div class="agileits-team-grids">
            <div class="col-sm-3 col-xs-6 agileits-team-grid">
                <div class="team-info">
                    <img src="client-assets/FredTemplate/images/t1.jpg" alt="">
                    <div class="team-caption">
                        <h4>Mark Duncan</h4>
                        <ul>
                            <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                            <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                            <li><a href="#"><i class="fa fa-rss"></i></a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6 agileits-team-grid">
                <div class="team-info">
                    <img src="client-assets/FredTemplate/images/t2.jpg" alt="">
                    <div class="team-caption">
                        <h4>Cynthia Baker</h4>
                        <ul>
                            <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                            <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                            <li><a href="#"><i class="fa fa-rss"></i></a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6 agileits-team-grid">
                <div class="team-info">
                    <img src="client-assets/FredTemplate/images/t3.jpg" alt="">
                    <div class="team-caption">
                        <h4>Peter Wright</h4>
                        <ul>
                            <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                            <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                            <li><a href="#"><i class="fa fa-rss"></i></a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6 agileits-team-grid">
                <div class="team-info">
                    <img src="client-assets/FredTemplate/images/t4.jpg" alt="">
                    <div class="team-caption">
                        <h4>Steven Wilson</h4>
                        <ul>
                            <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                            <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                            <li><a href="#"><i class="fa fa-rss"></i></a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
</div>
<!-- //team -->

<!-- experts section -->
<div class="what-w3ls">
    <div class="container">
        <div class="title-div">
            <h3 class="tittle"><span>W</span>e are expert in</h3>
            <div class="tittle-style"></div>
        </div>
        <div class="what-grids">
            <div class="col-md-6 what-grid">
                <img src="client-assets/FredTemplate/images/work.png" class="img-responsive" alt="">
            </div>
            <div class="col-md-6 what-grid1">
                <div class="what-top">
                    <div class="what-left"><i class="fa fa-check" aria-hidden="true"></i></div>
                    <div class="what-right">
                        <h4>Real-time Monitoring</h4>
                        <p>Monitor soil moisture, temperature and nutrient levels in real-time across all your farm blocks.</p>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div class="what-top1">
                    <div class="what-left"><i class="fa fa-thumbs-up" aria-hidden="true"></i></div>
                    <div class="what-right">
                        <h4>Actionable Recommendations</h4>
                        <p>Get fertiliser programme recommendations based on comprehensive soil, plant and water analysis.</p>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div class="what-top1">
                    <div class="what-left"><i class="fa fa-leaf" aria-hidden="true"></i></div>
                    <div class="what-right">
                        <h4>Australian Conditions</h4>
                        <p>Built specifically for Australian broadacre, viticulture, horticulture and dairy operations.</p>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
</div>
<!-- //experts section -->

<!-- contact -->
<div class="contact" id="contact">
    <div class="title-div">
        <h3 class="tittle"><span>C</span>ontact Us</h3>
        <div class="tittle-style"></div>
    </div>
    <div class="col-md-6 map">
        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3023.948805392833!2d-73.99619098458929!3d40.71914347933105!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c25a27e2f24131%3A0x64ffc98d24069f02!2sCANADA!5e0!3m2!1sen!2sin!4v1479793484055" title="Map"></iframe>
    </div>
    <div class="col-md-6 contact_grids_info">
        <h5 class="small-title">Visit Us</h5>
        <div class="col-xs-4 contact_grid">
            <div class="contact_grid_right">
                <h4>OFFICE 1</h4>
                <p>435 City hall,</p>
                <p>NewYork City SD092.</p>
            </div>
            <div class="address-row">
                <h5>Mail Us</h5>
                <p><a href="mailto:info@example.com">mail@example.com</a></p>
            </div>
            <div class="address-row">
                <h5>Call Us</h5>
                <p>+01 222 333 4444</p>
            </div>
        </div>
        <div class="col-xs-4 contact_grid">
            <div class="contact_grid_right">
                <h4>OFFICE 2</h4>
                <p>088 Jasmine hall,</p>
                <p>NewYork City SD092.</p>
            </div>
            <div class="address-row">
                <h5>Mail Us</h5>
                <p><a href="mailto:info@example.com">mail@example.com</a></p>
            </div>
            <div class="address-row">
                <h5>Call Us</h5>
                <p>+01 222 333 4444</p>
            </div>
        </div>
        <div class="col-xs-4 contact_grid">
            <div class="contact_grid_right">
                <h4>OFFICE 3</h4>
                <p>436 Honey hall,</p>
                <p>NewYork City SD092.</p>
            </div>
            <div class="address-row">
                <h5>Mail Us</h5>
                <p><a href="mailto:info@example.com">mail@example.com</a></p>
            </div>
            <div class="address-row">
                <h5>Call Us</h5>
                <p>+01 222 333 4444</p>
            </div>
        </div>
    </div>
    <div class="clearfix"></div>
</div>
<div class="second-contact-agile">
    <div class="col-md-6 form-bg">
        <form action="#" method="post">
            <div class="contact-fields">
                <input type="text" name="Name" placeholder="Name" required>
            </div>
            <div class="contact-fields">
                <input type="email" name="Email" placeholder="Email" required>
            </div>
            <div class="contact-fields">
                <input type="text" name="Subject" placeholder="Subject" required>
            </div>
            <div class="contact-fields">
                <textarea name="Message" placeholder="Message" required></textarea>
            </div>
            <input type="submit" value="Submit">
        </form>
    </div>
    <div class="col-md-6 address-left-second">
        <div class="address-grid">
            <h5 class="small-title">Contact Info</h5>
            <div class="address-grids">
                <span class="fa fa-volume-control-phone" aria-hidden="true"></span>
                <div class="contact-right">
                    <p>Telephone</p>
                    <span>+012-345-6789</span>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="address-grids">
                <span class="fa fa-envelope-o" aria-hidden="true"></span>
                <div class="contact-right">
                    <p>Mail</p>
                    <a href="mailto:info@example.com">info@example.com</a>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="address-grids">
                <span class="fa fa-map-marker" aria-hidden="true"></span>
                <div class="contact-right">
                    <p>Location</p>
                    <span>3136 NE 130th St, Seattle, WA 98125, USA.</span>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="address-grids">
                <span class="fa fa-calendar" aria-hidden="true"></span>
                <div class="contact-right">
                    <p>Working Hours</p>
                    <span>Mon - Sat : 8:00 am to 10:30 pm</span>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>
    <div class="clearfix"></div>
</div>
<!-- //contact -->

<!-- footer -->
<div class="footer-bot">
    <div class="container">
        <div class="col-xs-3 logo2">
            <h2>
                <a href="<?= $siteUrl ?>" class="logo">
                    <img class="img-res" src="client-assets/images/crop-monitor-logo.png" alt="Cropmonitor" width="100%">
                </a>
            </h2>
        </div>
        <ul class="footer-nav">
            <li><a href="#about">About</a></li>
            <li><a href="#services">Services</a></li>
            <li><a href="#team">Team</a></li>
            <li><a href="#contact">Contact</a></li>
            <li><a href="/login/login.php">Login</a></li>
            <li><a href="/login/register.php">Register</a></li>
        </ul>
        <div class="clearfix"></div>
        <div class="copy-right">
            <p>&copy; <?= date('Y') ?> <?= htmlspecialchars($siteName, ENT_QUOTES, 'UTF-8') ?>. All Rights Reserved.</p>
        </div>
    </div>
</div>
<!-- //footer -->

<!-- js-scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="client-assets/FredTemplate/js/bootstrap.js"></script>
<script src="client-assets/FredTemplate/js/lightbox-plus-jquery.min.js"></script>
<script src="client-assets/FredTemplate/js/numscroller-1.0.js"></script>
<script src="client-assets/FredTemplate/js/responsiveslides.min.js"></script>
<script>
    $(function () {
        $("#slider4").responsiveSlides({
            auto: true,
            pager: true,
            nav: false,
            speed: 200,
            namespace: "callbacks"
        });
    });
</script>
<script>
    (function ($) {
        $(document).ready(function () {
            $('#menuToggle').click(function (e) {
                var $parent = $(this).parent('.menu');
                $parent.toggleClass("open");
                var navState = $parent.hasClass('open') ? "hide" : "show";
                $(this).attr("title", navState + " navigation");
                setTimeout(function () {
                    $('#menuToggle > span').toggleClass("navClosed").toggleClass("navOpen");
                }, 200);
                e.preventDefault();
            });
        });
    })(jQuery);
</script>
<script src="client-assets/FredTemplate/js/jquery.magnific-popup.js"></script>
<script>
    $(document).ready(function () {
        $('.popup-with-zoom-anim').magnificPopup({
            type: 'inline',
            fixedContentPos: false,
            fixedBgPos: true,
            overflowY: 'auto',
            closeBtnInside: true,
            preloader: false,
            midClick: true,
            removalDelay: 300,
            mainClass: 'my-mfp-zoom-in'
        });
    });
</script>
<script src="client-assets/FredTemplate/js/jquery.vide.min.js"></script>
<script src="client-assets/FredTemplate/js/SmoothScroll.min.js"></script>
<script src="client-assets/FredTemplate/js/move-top.js"></script>
<script src="client-assets/FredTemplate/js/easing.js"></script>
<script>
    jQuery(document).ready(function ($) {
        $(".scroll").click(function (event) {
            event.preventDefault();
            $('html,body').animate({ scrollTop: $(this.hash).offset().top }, 1000);
        });
        $().UItoTop({ easingType: 'easeOutQuart' });
    });
</script>
<a href="#" id="toTop" style="display: block;"><span id="toTopHover" style="opacity: 1;"></span></a>
<script defer src="client-assets/FredTemplate/js/jquery.flexslider.js"></script>
<script>
    $(window).on('load', function () {
        $('.flexslider').flexslider({
            animation: "slide",
            start: function (slider) {
                $('body').removeClass('loading');
            }
        });
    });
</script>
<!-- //js-scripts -->

</body>
</html>
