@php

    /*

    $layout_page = home

    */

@endphp


@extends($sc_templatePath.'.layout')

@php

    $productsNew = $modelProduct->start()->getProductLatest()->setlimit(4)->getData();

    $news = $modelNews->start()->setlimit(sc_config('item_top'))->getData();

@endphp



@section('block_main')

    <!-- New Products-->
    <!-- <link rel="stylesheet" href="https://www.fabweddings.in/css/all.css" type="text/css">-->
    <style>


        h3.serv {
            padding-bottom: 30px;
        }


        .how-work .box {
            margin: 20px auto 0;
            padding: 0 20px;
            /*  min-height: 220px;*/
            background: black;
            border-radius: 5px;
            margin-bottom: 50px;
        }

        .how-work .box .icon {
            margin: 0 auto;
            display: block;
            padding: 24px 0;
            color: #ff4f74;
            font-size: 30px;
        }

        .title2 {
            font-size: 18px;
            padding-bottom: 30px;
        }


        .how-work {
            background: #ffd7d7;
            margin-top: 40px;
            /*margin-bottom: 40px;*/
        }

        .testo {
            margin-bottom: 30px;
            background: #f9f9f9;
        }

        .oc {
            padding-bottom: 40px;
        }

        .section-xxl {
            padding: 30px 0;
        }


        .service_blk {
            margin: 12px 0;
            padding: 0;
            width: auto;
            height: 200px;
            position: relative;
            border-radius: 10px;
            overflow: hidden;
        }

        .service_blk a {
            display: block;
            width: 100%;
            height: 100%;
        }

        .service_blk a:hover .text_blk {
            background: rgba(0, 0, 0, .8);
        }

        .service_blk .thumb {
            width: 100%;
            height: 100%;
            display: block;
            position: absolute;
            left: 0;
            top: 0;
        }

        .service_blk .thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .service_blk .text_blk {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            background: rgba(0, 0, 0, .3);
            position: relative;
            z-index: 1;
            -webkit-transition: all 1s;
            -moz-transition: all 1s;
        }

        .service_blk .text_blk p {
            width: 100%;
            text-align: center;
            color: #fff;
            font-size: 20px;
        }


        .srch i {
            font-size: 40px;
            color: #fff;
        }


        .bodyHeading.text-center.gray-col {
            font-size: 20px;
            color: #000;
        }

        .slick-arrow {

            color: #000 !important;
            border: 1px solid #000 !important;
            background: white !important;;
            padding: 0px 7px !important;;

        }

        .slick-arrow::after {
            display: block;
            content: '';
            height: 0;
            width: 100%;
            border-top: none !important;

        }


        .testimonialsBlk {
            padding: 50px 0 60px 0;
            background: #06c url(https://www.fabweddings.in/images/testmonial-bottom.jpg) repeat center center fixed;
            position: relative;
            text-align: center;
            -ms-overflow-x: hidden;
            overflow-x: hidden;
            animation: animatedBackground 120s linear infinite;
            -webkit-animation: animatedBackground 120s linear infinite;
            clear: both;
        }

        .testimonialsBlk {
            padding: 50px 0 60px 0;
            background: #06c url(https://www.fabweddings.in/images/testmonial-bottom.jpg) repeat center center fixed;
            position: relative;
            text-align: center;
            -ms-overflow-x: hidden;
            overflow-x: hidden;
            animation: animatedBackground 120s linear infinite;
            -webkit-animation: animatedBackground 120s linear infinite;
            clear: both
        }

        @-webkit-keyframes animatedBackground {
            from {
                background-position: 0 0
            }
            to {
                background-position: -2000px 0
            }
        }

        @-o-keyframes animatedBackground {
            from {
                background-position: 0 0
            }
            to {
                background-position: -2000px 0
            }
        }

        @-moz-keyframes animatedBackground {
            from {
                background-position: 0 0
            }
            to {
                background-position: -2000px 0
            }
        }

        @keyframes animatedBackground {
            from {
                background-position: 0 0
            }
            to {
                background-position: -2000px 0
            }
        }

        .testimonialCont {
            padding: 0 20px 20px;
            position: relative;
            z-index: 1;
            background: #fff;
            margin: 0 10px
        }

        .testimonialCont:before {
            content: '';
            display: block;
            background: #fff;
            height: 100%;
            width: 100%;
            position: absolute;
            top: -40%;
            left: 0;
            z-index: -1
        }

        .testimonialContBlk img {
            position: relative;
            z-index: 2;
            padding-left: 40px
        }

        .testimonialCont::after, .whiteBox::after {
            content: '';
            clear: both;
            display: block
        }

        .testimonialHeading {
            font-weight: 600;
            font-size: 16px;
            color: #caa934
        }

        .testimonialHeading span {
            color: #000;
            font-weight: 400;
            font-size: 14px
        }

        .testionialSlider button.slick-next.slick-arrow, .testionialSlider button.slick-prev.slick-arrow {
            top: 50px;
            right: 60px;
            left: auto
        }

        .testionialSlider button.slick-next.slick-arrow {
            right: 10px
        }

        .bookVendors {
            background: #ca4f39 no-repeat center center/cover
        }

        .innerBannerBlk.bookVendors .innerBannerImg::after {
            background: 0 0 !important
        }

        .slick-next:focus:before, .slick-next:hover:before, .slick-prev:focus:before, .slick-prev:hover:before {
            opacity: 1;
        }

        .slick-next:before {
            content: '';
            display: block;
            height: 100%;
            width: 100%;
            background: url(https://www.fabweddings.in/images/arrow-right.svg) no-repeat center center/32%;
        }

        .slick-next:before, .slick-prev:before {
            font-family: slick;
            font-size: 20px;
            line-height: 1;
            opacity: .75;
            color: #fff;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        .slick-next:focus:before, .slick-next:hover:before, .slick-prev:focus:before, .slick-prev:hover:before {
            opacity: 1;
        }

        .slick-next:before {
            content: '';
            display: block;
            height: 100%;
            width: 100%;
            background: url(https://www.fabweddings.in/images/arrow-right.svg) no-repeat center center/32%;
        }

        .slick-next:before, .slick-prev:before {
            font-family: slick;
            font-size: 20px;
            line-height: 1;
            opacity: .75;
            color: #fff;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
    </style>

    <section class="section section-xxl bg-default">


        <div class="container">
            <div class="row">

                <div class="col-md-12">
                    <h3 class="serv">Our Services</h3>
                </div>

                @foreach($categories as $category)
                    <div class=" col-md-4 col-6 ">
                        <div class="service_blk">
                            <a href="{{url('category/'.$category->alias.'.html')}}">
                                <div class="thumb">
                                    <img src="{{url($category->image)}}"></div>
                                <div class="text_blk">
                                    <p>{{$category->title}}</p>
                                </div>
                            </a>
                        </div>
                    </div>
                @endforeach


            </div>

        </div>


        <div class="how-work">
            <img src="images/how-it-work.jpeg" / class="img-responsive">

            <!--<div class="container">

                <div class="row" style=" padding-bottom:40px;">
                    <div class="col-md-12">
                        <br/>
                        <h3 class="serv">How It Works</h3>
                    </div>

                    <div class="col-md-4 col-sm-6">
                        <div class="box">
                            <div class="icon fa fa fa-users"></div>
                            <div class="title2">Find a best vendor near you</div>

                        </div>
                    </div>
                    <div class="col-md-4 col-sm-6">
                        <div class="box">
                            <div class="icon fa fa-handshake-o"></div>
                            <div class="title2">Get Consultaion & Final Quote</div>

                        </div>
                    </div>
                    <div class="col-md-4 col-sm-6">
                        <div class="box">
                            <div class="icon fa fa-calendar-check-o"></div>
                            <div class="title2">Pay Advance & Book vendor</div>

                        </div>
                    </div>

                </div>

            </div>-->

        </div>


        <style>

            nav > .nav.nav-tabs {
                flex-wrap: nowrap;
                white-space: nowrap;
                max-width: 99.9%;
                overflow-y: hidden;
                border: none;
                color: #fff;
                background: #272e38;
                border-radius: 0;

            }

            nav > div a.nav-item.nav-link,
            nav > div a.nav-item.nav-link.active {
                border: none;
                padding: 18px 25px;
                border-right: 1px solid #d0a2b1;
                color: #fff;
                background: #a25871;
                border-radius: 0;
            }

            /*nav > div a.nav-item.nav-link.active:after
             {
              content: "";
              position: relative;
              bottom: -56px;
              left: -10%;
              border: 15px solid transparent;
              border-top-color: #c8a838 ;
            }*/
            .tab-content {
                background: #fdfdfd;
                line-height: 25px;
                border: 1px solid #ddd;
                border-top: 5px solid #c8a838;
                border-bottom: 5px solid #c8a838;
                padding: 30px 25px;
            }

            nav > div a.nav-item.nav-link:hover,
            nav > div a.nav-item.nav-link:focus {
                border: none;
                background: #c8a838;
                color: #fff;
                border-radius: 0;
                transition: background 0.20s linear;
            }


            .carousel {
                margin: 0 auto;
                padding: 0 68px;
            }

            .carousel .carousel-item {
                text-align: center;
                overflow: hidden;

            }

            .carousel .carousel-item .img-box {
                background: #fff;
                padding: 9px;
                box-shadow: 0 6px 20px -6px rgba(0, 0, 0, 0.4);
            }

            .carousel .carousel-item img {
                margin: 0 auto;
            }

            .carousel-control-prev, .carousel-control-next {
                width: 68px;
                background: none;
            }

            .carousel-control-prev i, .carousel-control-next i {
                font-size: 28px;
                position: absolute;
                top: 50%;
                display: inline-block;
                margin-top: -15px;
                z-index: 5;
                left: 0;
                right: 0;
                color: rgba(0, 0, 0, 0.8);
                text-shadow: 0 3px 3px #e6e6e6, 0 0 0 #000;
            }

            .carousel-indicators {
                bottom: -40px;
            }

            .carousel-indicators li, .carousel-indicators li.active {
                width: 10px;
                height: 10px;
                border: none;
                border-radius: 50%;
                margin: 1px 4px;
                box-shadow: inset 0 2px 1px rgba(0, 0, 0, 0.2);
            }

            .carousel-indicators li {
                background: #999;
                border-color: transparent;
            }

            .carousel-indicators li.active {
                background: #555;
            }


            a.comparisonBtn {
                cursor: pointer;
                display: block;
                text-align: center;
                border: 1.3px solid #c8a838;
                font-size: 14px;
                padding: 6px 10px;
                margin-top: 10px;
                color: #c8a838;
                font-weight: 600;
            }

            h4.fname {
                padding-top: 20px;
                font-size: 22px;
            }


            p.marke {
                color: #e72e77;
                font-size: 20px;
            }
        </style>


        <style>

        </style>


        <div class="fearured">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-xs-12 ">
                        <h3 style="padding-bottom: 30px; padding-top:30px;">Featured Vendors</h3>
                        <div class="nav-vendor">
                            <nav>
                                <div class="nav nav-tabs nav-fill" id="nav-tab" role="tablist">

                                    @foreach($categories as $item)
                                        @if(count($item->featuredProducts)>0)

                                            <a class="nav-item nav-link {{$loop->first ? 'active':''}}"
                                               id="nav-{{$loop->iteration}}-tab" data-toggle="tab"
                                               href="#nav-{{$loop->iteration}}" role="tab" aria-controls="nav-home"
                                               aria-selected="true">
                                                {{$item->title}}
                                            </a>
                                        @endif
                                    @endforeach

                                </div>
                            </nav>
                        </div>
                        <div class="tab-content py-3 px-3 px-sm-0" id="nav-tabContent">

                            @foreach($categories as $item)
                                @if(count($item->featuredProducts)>0)
                                    <div class="tab-pane fade {{$loop->first ? 'active show':''}}" id="nav-{{$loop->iteration}}" role="tabpanel"
                                         aria-labelledby="nav-{{$loop->iteration}}-tab">
                                        <div class="container-fluid">
                                            <div class="row">
                                                <div class="col-md-12  mx-auto">

                                                    <div id="myCarousel{{$loop->iteration}}" class="carousel slide" data-ride="carousel"
                                                         data-interval="0">
                                                        <div class="carousel-inner">
                                                            <div class="carousel-item active">
                                                                <div class="row">

                                                                    @foreach($item->featuredProducts as $product)
                                                                        <div class="col-sm-3">
                                                                            <div class="img-box">
                                                                                <img src="{{ asset($product->getThumb()) }}"
                                                                                     class="img-fluid" alt="">
                                                                                <h4 class="fname">{{ $product->getName() }}</h4>
                                                                                <h6> {{$product->subtitle}}</h6>


                                                                                <h5> {!! $product->showPrice() !!}</h5>
                                                                                <p class="marke">
                                                                                    <i class="fa fa-map-marker"> </i>
                                                                                    &nbsp; {{$product->user->city}} </p>


                                                                                <a class="comparisonBtn"
                                                                                   href="{{ $product->getUrl() }}">Book
                                                                                    Now</a>
                                                                            </div>
                                                                        </div>
                                                                    @endforeach

                                                                </div>
                                                            </div>
                                                        </div>
                                                        <!-- Carousel controls -->
                                                        <a class="carousel-control-prev" href="#myCarouse{{$loop->iteration}}"
                                                           data-slide="prev">
                                                            <i class="fa fa-chevron-left"></i>
                                                        </a>
                                                        <a class="carousel-control-next" href="#myCarousel{{$loop->iteration}}"
                                                           data-slide="next">
                                                            <i class="fa fa-chevron-right"></i>
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endif
                            @endforeach


                        </div>

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


        <div class="testo">
            <div class="testimonialsBlk lazy" data-src="https://www.fabweddings.in/images/testmonial-bottom.jpg">
                <div class="container">
                    <div class="row">
                        <div class="col-12">
                            <div class="bodyHeading text-center gray-col">TESTIMONIAL

                                <!-- <span class="text-center light-gray-col">One Stop Destination for all your wedding planning</span>-->
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <div class="testionialSlider">
                                <div class="item">
                                    <div class="row">
                                        <div class="col-12">
                                            <div class="testimonialContBlk">
                                                <img src="https://www.fabweddings.in/images/preloader.svg"
                                                     data-src="https://www.fabweddings.in/images/testimonial_monika-_bajaj.png"
                                                     class="lazy" alt=""/>
                                                <div class="testimonialCont">
                                                    <div class="testimonialHeading">Reena</div>
                                                    <p>A big thanks to beautiful story. I think i looked at my best
                                                        where everything was just as i thought it would be. Non of this
                                                        would have been possible if it weren't for BS team efforts. My
                                                        lehenga is just awestruck</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="row">
                                        <div class="col-12">
                                            <div class="testimonialContBlk">
                                                <img src="https://www.fabweddings.in/images/preloader.svg"
                                                     data-src="https://www.fabweddings.in/images/testimonial_salma_sajjid.png"
                                                     alt=""/>
                                                <div class="testimonialCont">
                                                    <div class="testimonialHeading">Somya</div>
                                                    <p>Everyone has been raving about the wedding and i keep telling
                                                        them it was because i chose Beautiful story for my wedding day.
                                                        I am taking full credit for finding you guys. Thank you BStory
                                                        for making me look like a dream.</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="row">
                                        <div class="col-12">
                                            <div class="testimonialContBlk">
                                                <img src="https://www.fabweddings.in/images/preloader.svg"
                                                     data-src="https://www.fabweddings.in/images/testimonial_kartik_patani.png"
                                                     alt=""/>
                                                <div class="testimonialCont">
                                                    <div class="testimonialHeading">Kartik Patani / <span>Rolls and Dhols</span>
                                                    </div>
                                                    <p> I was pleasently surprised at the amount of hard work and
                                                        creative input the team at beautiful story Put in my wedding. I
                                                        hired their help in arranging my entire look including lehenga,
                                                        jewellery, makeup artist. Their help with fixing last minute
                                                        needs such as arranging photography for my wedding was
                                                        invaluable.</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="item">

                                    <div class="row">
                                        <div class="col-12">
                                            <div class="testimonialContBlk">
                                                <img src="https://www.fabweddings.in/images/preloader.svg"
                                                     data-src="https://www.fabweddings.in/images/testimonial_anuj_arora.png"
                                                     alt=""/>
                                                <div class="testimonialCont">
                                                    <div class="testimonialHeading">Anuj Arora /
                                                        <span>Makeup Artist</span></div>
                                                    <p> I am so grateful for your expert makeup & designer lehenga for
                                                        my wedding day. I consider myself blessed to have had the
                                                        privilege of working with someone who translated my vision with
                                                        such style, grace and professionalism. Thank you Beautiful
                                                        Story</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="row">
                                        <div class="col-12">
                                            <div class="testimonialContBlk">
                                                <img src="https://www.fabweddings.in/images/preloader.svg"
                                                     data-src="https://www.fabweddings.in/images/testimonial_monisha.png"
                                                     alt=""/>
                                                <div class="testimonialCont">
                                                    <div class="testimonialHeading">Monisha / <span>Bride</span></div>
                                                    <p>The most fabulous & effortless work i have ever seen. All in all
                                                        , who can arrange wedding customised dresses just in three
                                                        weeks. Trust me, their cooperation and generous attitude is sure
                                                        to remember</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="row">
                                        <div class="col-12">
                                            <div class="testimonialContBlk">
                                                <img src="https://www.fabweddings.in/images/preloader.svg"
                                                     data-src="https://www.fabweddings.in/images/testimonial_pallavi_trehan.png"
                                                     alt=""/>
                                                <div class="testimonialCont">
                                                    <div class="testimonialHeading">Pallavi Trehan /
                                                        <span>Makeup Artist</span></div>
                                                    <p>I would have been really lost and the wedding would not have come
                                                        together as beautifully as it did. Hats off to their amazing
                                                        team. They made me look more beautiful than i ever imagined.
                                                        They were a great help</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

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

        </div>


        <style>


            .search-slt {
                display: block;
                width: 100%;
                font-size: 16px;
                margin-bottom: 5px;
                font-weight: 600;
                letter-spacing: 1px;
                line-height: 1.5;
                color: #55595c;
                background-color: #fff;
                background-image: none;
                border: 1px solid #ccc;
                height: calc(3rem + 2px) !important;
                border-radius: 0;
            }

            .wrn-btn {
                width: 100%;
                font-size: 16px;
                font-weight: 400;
                text-transform: capitalize;
                height: calc(3rem + 2px) !important;
                border-radius: 0;
            }

            @media (min-width: 992px) {
                .search-sec {
                    position: relative;
                    top: 0;
                    /*  background: rgba(26, 70, 104, 0.51);*/
                }
            }

            @media (max-width: 992px) {
                /* .search-sec{
                     background: #1A4668;
                 }*/
            }

            .bookVendors {
                background: #a25871 no-repeat center center/cover;
            }

            .innerBannerImg {
                padding: 30px 0;
                text-align: center;
                position: relative;
            }

            .bg-cover {
                background-position: 50% 0;
                background-size: cover;
            }

            .innerBannerImg h2 {
                padding: 0;
                margin: 0 0 20px;
                color: #fff;
                font-size: 28px;
                text-align: center;
            }

            .innerBannerImg h2 span {
                font-weight: 400;
                font-size: 14px;
                text-align: center;
                display: block;
                padding-top: 4px;
            }

            .bookVendorContImg {
                overflow: hidden;
                padding-top: 20px;
                padding-bottom: 20px;
                text-align: center;
            }

            section.innerBannerBlk.bookVendors.weddingWithFab .bookVendorContImg .vendorIcon {
                float: none;
                padding-right: 20px;
                display: inline-block;
            }

            section.innerBannerBlk.bookVendors.weddingWithFab .bookVendorContImg .vendorText {
                float: none;
                width: auto;
                color: #fff;
                display: inline-block;
                display: inline-block;
                vertical-align: top;
            }

            .bookVendorContImg .vendorText .h3 {
                font-size: 16px;

            }

            .pt-10 {
                padding-top: 10px !important;
            }

            .commonimage {
                margin-right: 20px;
                width: 56px !important;
                height: 50px;
                background: url(https://www.fabweddings.in/images/css_sprites.png);
            }

            .formmm {
                padding: 20px;
            }
        </style>


        <style>
            section#testimonial {
                padding-top: 40px;
                padding-bottom: 40px;
            }


        </style>


    <!--<div class="container">


            <h2 class="wow fadeScale">{{ trans('Featured Vendors') }}</h2>


            <div class="row row-30 row-lg-50">

                @foreach ($productsNew as $key => $productNew)

        <div class="col-sm-6 col-md-3 col-lg-3 col-6">



            <article class="product wow fadeInRight">

                <div class="product-body">


{{-- Product image --}}

                <div class="product-figure">

                    <a href="{{ $productNew->getUrl() }}">

                                        <img src="{{ asset($productNew->getThumb()) }}" alt="{{ $productNew->name }}"/>

                                    </a>

                                </div>

                                {{--// Product image --}}



        {{-- Product name --}}

                <h5 class="product-title"><a
                            href="{{ $productNew->getUrl() }}">{{ $productNew->name }}</a></h5>

                                {{--// Product name --}}



        {{-- Display store - if use MultiStorePro --}}

        @if (sc_config_global('MultiStorePro') && config('app.storeId') == 1)

            <div class="store-url"><a href="{{ $productNew->goToStore() }}"><i
                                                    class="fa fa-shopping-bag"
                                                    aria-hidden="true"></i> {{ trans('front.store').' '. $productNew->store_id  }}
                    </a>

                </div>

@endif

        {{-- //Display store - if use MultiStorePro --}}

        {{$productNew->subtitle}}

        {{-- Add to cart --}}

        {{--                                @if ($productNew->allowSale())--}}

        {{--                                    <a onClick="addToCartAjax('{{ $productNew->id }}','default','{{ $productNew->store_id }}')"--}}
        {{--                                       class="button button-lg button-secondary button-zakaria add-to-cart-list"><i--}}
        {{--                                                class="fa fa-cart-plus"></i> {{trans('front.add_to_cart')}}</a>--}}

        {{--                                @endif--}}

        {{-- //Add to cart --}}



        {!! $productNew->showPrice() !!}

                </div>


{{-- Product type --}}

        @if ($productNew->price != $productNew->getFinalPrice() && $productNew->kind !=SC_PRODUCT_GROUP)

            <span><img class="product-badge new"
                       src="{{ asset($sc_templateFile.'/images/home/sale.png') }}" class="new"
                                           alt=""/></span>

                            @elseif($productNew->kind == SC_PRODUCT_BUILD)

            <span><img class="product-badge new"
                       src="{{ asset($sc_templateFile.'/images/home/bundle.png') }}" class="new"
                                           alt=""/></span>

                            @elseif($productNew->kind == SC_PRODUCT_GROUP)

            <span><img class="product-badge new"
                       src="{{ asset($sc_templateFile.'/images/home/group.png') }}" class="new"
                                           alt=""/></span>

                            @endif

        {{-- //Product type --}}



        {{-- wishlist, compare --}}

                <div class="product-button-wrap">

                    <div class="product-button">

                        <a class="button button-secondary button-zakaria"
                           onClick="addToCartAjax('{{ $productNew->id }}','wishlist','{{ $productNew->store_id }}')">

                                        <i class="fas fa-heart"></i>

                                    </a>

                                </div>

                                <div class="product-button">

                                    <a class="button button-primary button-zakaria"
                                       onClick="addToCartAjax('{{ $productNew->id }}','compare','{{ $productNew->store_id }}')">

                                        <i class="fa fa-exchange"></i>

                                    </a>

                                </div>

                                {{-- //wishlist, compare --}}


                </div>

            </article>

        </div>

@endforeach

            </div>

        </div>-->

    </section>

@endsection



@section('news')

    @if ($news)

        <!-- Our Blog-->

        <section class="section section-xxl section-last bg-gray-21">

            <div class="container">

                <h2 class="wow fadeScale">{{ trans('front.blog') }}</h2>

            </div>

            <!-- Owl Carousel-->

            <div class="owl-carousel owl-style-7" data-items="1" data-sm-items="2" data-xl-items="3" data-xxl-items="4"
                 data-nav="true" data-dots="true" data-margin="30" data-autoplay="true">

            @foreach ($news as $blog)

                <!-- Post Creative-->

                    <article class="post post-creative"><a class="post-creative-figure"
                                                           href="{{ $blog->getUrl() }}"><img
                                    src="{{ asset($blog->getThumb()) }}" alt="" width="420" height="368"/></a>

                        <div class="post-creative-content">

                            <h5 class="post-creative-title"><a href="{{ $blog->getUrl() }}">{{ $blog->title }}</a></h5>

                            <div class="post-creative-time">

                                <time datetime="{{ $blog->created_at }}">{{ $blog->created_at }}</time>

                            </div>

                        </div>

                    </article>

                @endforeach

            </div>

        </section>



        <section class="innerBannerBlk bookVendors weddingWithFab">
            <div class="bg-cover innerBannerImg">
                <div class="container">
                    <h2>Plan your wedding with Beautiful Story
                        <!--<span>One Stop Destination for all your wedding planning</span>--></h2>
                    <div class="row">
                        <div class="col-4">
                            <div class="bookVendorContImg">
                                <!--         <div class="vendorIcon commonimage vendorIconheart"></div>-->
                                <div class="srch"><i class="fa fa-search" aria-hidden="true"></i></div>
                                <div class="vendorText">
                                    <div class="h3 pt-10">FIND &amp; BOOK VENDORS</div>
                                </div>
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="bookVendorContImg">
                                <!--    <div class="vendorIcon commonimage vendorIconpack"></div>-->
                                <div class="srch"><i class="fa fa-suitcase" aria-hidden="true"></i></div>
                                <div class="vendorText">
                                    <div class="h3 pt-10">GET THE BEST DEAL</div>
                                </div>
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="bookVendorContImg">
                                <div class="srch"><i class="fa fa-shopping-bag" aria-hidden="true"></i></div>
                                <!--    <div class="vendorIcon commonimage vendorIconsearch"></div>-->
                                <div class="vendorText">
                                    <div class="h3 pt-10">SHOP FOR YOUR WEDDDING</div>
                                </div>
                            </div>
                        </div>

                        <div class="col-12 formmm">
                            <form action="{{url('vendor-contact')}}" method="post">
                                @csrf
                                <div class="row">


                                    <div class="col-lg-3 col-md-4 col-sm-12 p-0">
                                        <input type="text" class="form-control search-slt" placeholder="Full Name"
                                               required name="name">
                                    </div>
                                    <div class="col-lg-3 col-md-4 col-sm-12 p-0">
                                        <!--<input type="email" class="form-control search-slt" placeholder="Email" required name="email">-->
                                        <input type="text" class="form-control search-slt" placeholder="City" required
                                               name="city">
                                    </div>
                                    <div class="col-lg-3 col-md-4 col-sm-12 p-0">
                                        <input type="tel" class="form-control search-slt" placeholder="Mobile No."
                                               required name="phone">
                                    </div>
                                    <div class="col-lg-3 col-md-4 col-sm-12 p-0">
                                        <button type="submit" class="btn btn-success wrn-btn" value="find"
                                                name="submit">SEND ME A QUOTE
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>

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






    @endif




@endsection



@push('styles')

    {{-- Your css style --}}

@endpush



@push('scripts')

    {{--    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>--}}
    {{--    <link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.2/owl.carousel.css" rel="stylesheet" />--}}
    {{--    <script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.2/owl.carousel.js"></script>--}}

    <script defer="" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.full.min.js"></script>

    <script defer="" src="https://www.fabweddings.in/js/all.js"></script>
@endpush

