@extends('layouts.app')

@section('title','Home - Dusty helmets')

@section('content')
    <style type="text/css">
        .services:hover {
            opacity: 0.8 !important;
            /* transition: transform .5s ease; */
            -webkit-transition: all 2s ease-in-out;
            -moz-transition: all 2s ease-in-out;
            -ms-transition: all 2s ease-in-out;
            transition: all 2s ease-in-out;
            transform: scale(1.5);
        }

        .profile-card-5 {
            margin-top: 20px;
            border-radius: 10px;
        }

        .profile-card-5:hover .card-img-top {
            border-bottom: 1px solid #fbaf32;
            -webkit-animation: movex 2s infinite alternate;
            animation: movex 2s infinite alternate;
        }

        @-webkit-keyframes movex {
            0% {
                transform: translateY(0);
            }
            100% {
                transform: translateY(-17px);
            }
        }

        @keyframes movex {
            0% {
                transform: translateY(0);
            }
            100% {
                transform: translateY(-17px);
            }

        }

        .profile-card-5 .btn {
            border-radius: 2px;
            text-transform: uppercase;
            font-size: 12px;
            padding: 7px 20px;
        }

        .profile-card-5 .card-img-block {
            width: 91%;
            margin: 0 auto;
            position: relative;
            top: -20px;

        }

        .profile-card-5 .card-img-block img {
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.63);
        }

        .profile-card-5 h5 {
            color: #4E5E30;
            font-weight: 600;
            margin-bottom: 0 !important;
        }

        .profile-card-5 .btn-primary {
            background-color: #719a0a;
            border-color: #719a0a;
        }

        #bbt {
            font-weight: 100 !important;
            text-transform: none !important;
            letter-spacing: 1px !important;
            padding: 10px 20px 10px !important;
        }

        #bbt:hover {
            color: #1e2714 !important;
        }

        .services__item__icon::after {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            border: 2px solid #fbaf32;
            content: "";
            -webkit-transition: all, 0.5s;
            -o-transition: all, 0.5s;
            transition: all, 0.5s;
        }

        .services__item:hover .services__item__icon::after {
            -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg);
        }

        .services__item__icon {
            position: relative;
            height: 70px;
            width: 70px;
            line-height: 70px;
            text-align: center;
        }

        .hh:hover {
            -webkit-transition: all 1s ease-in-out;
            -moz-transition: all 1s ease-in-out;
            -ms-transition: all 1s ease-in-out;
            transition: all 1s ease-in-out;
            box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important;
            border-radius: .25rem;
            border-bottom: 1px solid #fbaf32;
            transform: translateY(-10px);
            -webkit-transform: translateY(-10px);

        {
        /*padding: 10px;*/
            -moz-transform: translateY(-10px)
        ;
        }
        .fa {
            color: #757575 !important;
        }
    </style>
    @include('includes.slider')

    <!--<div id="preloader"></div>-->
    <!--<a href="#" class="back-to-top"><i class="icofont-simple-up"></i></a>-->

    <div class="feature" id="vvv">
        <div class="container">
            <div class="row">
                <div class="col-lg-5">
                    <div class="section-header">
                        <p>Welcome to</p>
                        <h2>Dusty Helmets</h2>
                    </div>
                    <div class="feature-text">
                        <div class="mt-4 col-sm-12">
                            <div class="shadow card profile-card-5">
                                <div class="card-img-block">
                                    <img class="card-img-top img-responsive" src="public/assets/P8/pic2.jpg"
                                         alt="motorbike offroad racing">
                                </div>
                                <div class="pt-0 card-body">
                                    <!-- <h5 class="card-title">Who we are</h5> -->
                                    {{--                                <h4 style="color:#4E5E30;">Who we are</h4>--}}
                                    <h4 style="color:#4E5E30;">{{$page->title1}}</h4>
                                    <p class="card-text">{{strip_tags(substr(($page->content1),0,152))}}</p>
                                    {{--                                <p class="card-text">Dusty Helmets is a collaboration of a group of Kenyans with a wealth of experience in both the tourism--}}
                                    {{--                                industry and off-road riding on 'Piki Piki's'.</p>--}}
                                    <center><a class="primary-btn ty" style="color:#757575" href="#" id="bbt"
                                               onclick="$('.ty').hide(); $('#moreDoc').slideDown();">View More</a>
                                    </center>
                                    <div id="moreDoc" style="display:none;">
                                        <p>
                                            {{strip_tags(substr(($page->content1),152))}}
                                            {{--                                  With our carefully thought-out itineraries designed to cater for people of all ages and varying levels of--}}
                                            {{--                                 experience on two wheels, we will offer you the adventure of a lifetime.--}}
                                        </p>
                                        <center><a class="primary-btn" href="#" id="bbt"
                                                   onclick="$('#moreDoc').slideUp(); $('.ty').show();"
                                                   style="color:#757575">View Less</a></center>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-7">
                    <div class="mt-5 row">
                        <div class="col-sm-6">
                            <div class="mb-3 shadow card hh" style="border:none !important">
                                <div class="card-body services__item">
                                    <div class="mb-2 services__item__icon">
                                        <i class="mt-3 fa fa-motorcycle" style="font-size: 40px;"></i>
                                    </div>
                                    <h4 style="color: #4E5E30">{{$page->title2}}</h4>
                                    <p class="card-text">{{strip_tags(substr(($page->content2),0,109))}}
                                        {{--                                <p class="card-text">This is the local vernacular for motorbikes. It is a noun in Swahili that describes a two-wheeled vehicle&nbsp;--}}
                                        <small><a style="color:#006FCD" href="#" id="ty1"
                                                  onclick="$('#ty1').hide(); $('#moreDoc1').slideDown();">View More</a></small>
                                        <span id="moreDoc1" style="display:none;">
                                        {{strip_tags(substr(($page->content2),109))}}
                                    <small><a href="#" onclick="$('#moreDoc1').slideUp(); $('#ty1').show();"
                                              style="color:#006FCD">View Less</a></small>
                                    </span></p>
                                </div>
                            </div>

                        </div>

                        <div class="col-sm-6">

                            <div class="mb-3 shadow card hh" style="border:none !important">
                                <div class="card-body services__item">
                                    <div class="mb-2 services__item__icon">
                                        <i class="mt-3 fa fa-motorcycle" style="font-size: 40px;"></i>
                                    </div>
                                    <h4 style="color: #4E5E30">{{$page->title3}}</h4>
                                    <p class="card-text">
                                        {{strip_tags(substr(($page->content3),0,117))}}
                                        <small><a style="color:#006FCD" href="#" id="ty2"
                                                  onclick="$('#ty2').hide(); $('#moreDoc2').slideDown();">View More</a></small>
                                        <span id="moreDoc2" style="display:none;">
                                        {{strip_tags(substr(($page->content3),117))}}
                                    <small><a href="#" onclick="$('#moreDoc2').slideUp(); $('#ty2').show();"
                                              style="color:#006FCD">View Less</a></small>
                                    </span></p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="mb-3 col-sm-6">
                            <div class="shadow card hh" style="border:none !important">
                                <div class="card-body services__item">
                                    <div class="mb-2 services__item__icon">
                                        <i class="mt-3 flaticon-medal" style="font-size: 40px;"></i>
                                    </div>
                                    <h4 style="color: #4E5E30">{{$page->title4}}</h4>
                                    <p class="card-text">
                                        {{strip_tags(substr(($page->content4),0,128))}}
                                        <small><a style="color:#006FCD" href="#" id="ty3"
                                                  onclick="$('#ty3').hide(); $('#moreDoc3').slideDown();">View More</a></small>
                                        <span id="moreDoc3" style="display:none;">
                                            {{strip_tags(substr(($page->content4),128))}}
                                    <small><a href="#" onclick="$('#moreDoc3').slideUp(); $('#ty3').show();"
                                              style="color:#006FCD">View Less</a></small>
                                    </span></p>
                                </div>
                            </div>

                        </div>

                        <div class="mb-3 col-sm-6">
                            <div class="shadow card hh" style="border:none !important">
                                <div class="card-body services__item">
                                    <div class="mb-2 services__item__icon">
                                        <i class="mt-3 flaticon-courier" style="font-size: 40px;"></i>
                                    </div>
                                    <h4 style="color: #4E5E30">{{$page->title5}}</h4>
                                    <p class="card-text">{{strip_tags(substr(($page->content5),0,123))}}
                                        <small><a style="color:#006FCD" href="#" id="ty4"
                                                  onclick="$('#ty4').hide(); $('#moreDoc4').slideDown();">View More</a></small>
                                        <span id="moreDoc4" style="display:none;">
                                            {{strip_tags(substr(($page->content5),123))}}
                                    <small><a href="#" onclick="$('#moreDoc4').slideUp(); $('#ty4').show();"
                                              style="color:#006FCD">View Less</a></small>
                                    </span></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        function scrl() {
            event.preventDefault();
            $('html, body').animate({
                scrollTop: $("#vvv").offset().top
            }, 1000);
        }
    </script>
@endsection