@extends('front.layout.app')

@section('css')
    <style>
        .banner-home {
            background-image: url({{$home->hero_background_image}}) !important;
        }
    </style>
@endsection

@section('content')



    <section class="banner banner-home banner-full">
        <div class="container">
            <div class="row">
                <div class="col-md-5 banner-home-text text-md-left text-center">
                    <h1 class="f700">{{$home->hero_heading}}.</h1>
                    <p>{{$home->hero_sub_heading}}</p>
                    <a class="btn btn-fill btn-white btn-shadow btn-arrow" href="{{$home->hero_button_link}}">{{$home->hero_button_text}}</a>
                </div>
                <div class="col-md-7">
                    <div class="banner-home-img">
                        <picture>
                            <source media="(min-width:768px)" srcset="{{Storage::url($home->banner_image)}}">
                            <img src="assets/frontend/images/dynamic/bnr-imgM.jpg" alt="bammer Image" style="width:auto;">
                        </picture>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="template template-slide">
        <div class="section-intro text-center">

        </div>
        <div class="template-slide-innr d-flex justify-content-center">

            @foreach($templates as $template)
                <a href="#" class="template-slide-item">
                    <span class="template-slide-img">
                        <img src="{{$template->getFirstMediaUrl('main_image')}}" loading="lazy" alt="{{$template->name}}">
                    </span>
                    <span class="template-slide-item-name h3 f400">{{$template->name}}</span>
                </a>
            @endforeach


{{--            <a href="template/noelle/details.html" class="template-slide-item">--}}
{{--            <span class="template-slide-img">--}}
{{--                <img src="storage/local/admin/media/images/rWmiW4wtcb8KHeFJgcbpjEF7ZEi8W5e6uEqktyDF.jpg" loading="lazy" alt="noelle-v1">--}}
{{--            </span>--}}
{{--                <span class="template-slide-item-name h3 f400">Noelle</span>--}}
{{--            </a>--}}
{{--            <a href="template/jess/details.html" class="template-slide-item">--}}
{{--            <span class="template-slide-img">--}}
{{--                <img src="storage/local/admin/media/images/LPnLB5lyRyGaNNYRCfMKPxjBs8N20HrrhweN8x6c.png" loading="lazy" alt="Jass Performer Cover Image">--}}
{{--            </span>--}}
{{--                <span class="template-slide-item-name h3 f400">Jess</span>--}}
{{--            </a>--}}
{{--            <a href="template/eliza/details.html" class="template-slide-item">--}}
{{--            <span class="template-slide-img">--}}
{{--                <img src="storage/local/admin/media/images/GmioR344MFe3vwD7ZpDJ5GcL4SQ4j4gGME3frDVl.jpg" loading="lazy" alt="eliza-home">--}}
{{--            </span>--}}
{{--                <span class="template-slide-item-name h3 f400">Eliza</span>--}}
{{--            </a>--}}
{{--            <a href="template/danielle/details.html" class="template-slide-item">--}}
{{--            <span class="template-slide-img">--}}
{{--                <img src="storage/local/admin/media/images/RWuFxMmpObBOLzCJK0xOGLOAsonVgaonoxtwLLEq.jpg" loading="lazy" alt="danielle-home">--}}
{{--            </span>--}}
{{--                <span class="template-slide-item-name h3 f400">Danielle</span>--}}
{{--            </a>--}}

        </div>
    </section>

    <section class="features features-home">
        <div class="section-intro text-center">
            <h2>{{$home->amazing_feature_main_heading}}</h2>
        </div>
        <div class="container">
            <div class="row features-home-row">
                <div class="features-home-img col-md-6">
                    <img src="{{Storage::url($home->amazing_feature_one_image)}}" alt="">
                </div>
                <div class="features-home-text col-md-6 text-md-left text-center">
                    <h3>{{$home->amazing_feature_one_heading}}</h3>
                    <p>{!! $home->amazing_feature_one_textarea !!}</p>
                    <a class="btn btn-fill btn-white btn-shadow btn-arrow" href="{{$home->amazing_feature_one_button_link}}">{{$home->amazing_feature_one_button_text}}</a>
                </div>
            </div>

            <div class="row features-home-row">
                <div class="features-home-img col-md-6">
                    <img src="{{Storage::url($home->amazing_feature_two_image)}}" alt="">
                </div>
                <div class="features-home-text col-md-6 text-md-left text-center">
                    <h3>{{$home->amazing_feature_two_heading}}</h3>
                    <p>{!! $home->amazing_feature_two_textarea !!}</p>
                    <a class="btn btn-fill btn-white btn-shadow btn-arrow" href="{{$home->amazing_feature_two_button_link}}">{{$home->amazing_feature_two_button_text}}</a>
                </div>
            </div>
        </div>
    </section>

    <section class="acceptpaymet acceptpaymet-home">
        <div class="container">
            <div class="row">
                <div class="col-md-6 acceptpaymet-home-text text-md-left text-center">
                    <h3>{{$home->payment_heading}}</h3>
                    <p>{!! $home->payment_description !!}</p>
{{--                    <ul class="acceptpaymet-home-list">--}}
{{--                        <li><i class="fab fa-codepen"></i></li>--}}
{{--                        <li><i class="fab fa-codepen"></i></li>--}}
{{--                        <li><i class="fab fa-codepen"></i></li>--}}
{{--                    </ul>--}}
                </div>
                <div class="col-md-6 acceptpaymet-home-img">
                    <img src="{{Storage::url($home->feature_image)}}" alt="">
                </div>
            </div>
        </div>
    </section>

    <section class="howMakeWebSite howMakeWebSite-home text-md-left text-center">
        <div class="howMakeWebSite-text">
            <h3>{{$home->website_heading}}</h3>
            <ol>
                <li>{{$home->website_step_1}}</li>
                <li>{{$home->website_step_2}}</li>
                <li>{{$home->website_step_3}}</li>
                <li>{{$home->website_step_4}}</li>
                <li>{{$home->website_step_5}}</li>
                <li>{{$home->website_step_6}}</li>
            </ol>
            <a style="max-width:200px;" class="btn btn-fill btn-white btn-shadow btn-arrow" href="template.html">Create Now</a>
        </div>
        <div class="howMakeWebSite-img">
            <img src="{{Storage::url($home->website_feature_image)}}" alt="">
        </div>
    </section>



@endsection

@section('script')


@endsection