@extends('layouts.app')

@section('content')
    <x-menu></x-menu>

    <!-- Start Section -->
    <section class="section pb-0 {{ $feature->image ? 'pt-40' : 'pt-200' }}">
        <div class="container">
            <div class="hero__standout text-center">
                @if($feature->image)
                    <img src="{{  asset($feature->image) }}" class="img-fluid" alt="{{  $feature->title }}"/>
                @endif
                <div class="row">
                    <div class="col-lg-6 text-left">
                        <div class="hero__standout--headline">
                            <h1 class="section__heading">{!! $feature->title  !!}</h1>
                        </div>
                    </div>
                    <div class="col-lg-6 text-left">
                        <p class="hero__standout--content">
                            {!! $feature->long_description !!}
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- End Section -->

    <!-- Start Section -->
    <section class="section pt-5">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <h2 class="section__heading section__heading-center">Otras Funcionalidades</h2>
                </div>
                @foreach($features as $feature)
                    <x-feature-normal :title="$feature->title"
                                      :shortDescription="$feature->short_description"
                                      :url="$feature->url"
                                      :icon="$feature->icon">
                    </x-feature-normal>
                @endforeach
            </div>
        </div>
    </section>
    <!-- End Section -->

    <!-- Start Section -->
    <section class="section section__gray">
        <div class="container">
            <idv class="row">
                <div class="col-12">
                    <div class="owl-active-nav">
                        <div class="owl-carousel js-owl-clients">
                            <x-client></x-client>
                        </div>
                    </div>
                </div>
            </idv>
        </div>
    </section>
    <!-- End Section -->

    <x-banner></x-banner>

@endsection