@extends('frontend.layout.app')
@section('title', 'Feature')

@section('description', 'Feature page meta description')
@section('keywords', 'Feature page meta keywordes')

@section('robots', 'Feature page robots')

@section('ogTitle', 'Feature page og title')
@section('ogDescription', 'Feature page og description')
@section('ogImage', 'Feature page og image')
@section('ogUrl', 'Feature page og url')

@section('twitterCard', 'Feature page twitter card')
@section('twitterTitle', 'Feature page twitter title')
@section('twitterDescription', 'Feature twitter description')

@push('css')
@endpush
@section('content')

    <div class="tm-section about-us-area bg-white pt-2 ">
        <div class="row justify-content-center">
            <div class="col-lg-8 col-md-10 col-12">
                <div class="tm-section-title text-center" style="margin-bottom: 60px">
                    <h2>Main Feature</h2>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row">
                @foreach ($feature as $key => $data)
                    @break($key == 12)
                    <div class="col-sm-6 col-xs-6 col-lg-2 text-center" style="padding-top: 30px">
                        <div class="card text-center" style="padding: 20px; max-height: 160px; min-height: 160px;">
                            <p style="margin-bottom: 0px">
                                <img src="{{ asset('public/storage/feature/' . $data->image) }}" height="70px"
                                    style="padding: 10px" width="auto">
                                <br>
                                <b>{{ $data->name }}</b>
                            </p>
                        </div>
                    </div>
                @endforeach

            </div>
            <div class="row">
                <div class="col-lg-12">
                    <div class="tm-portfolio-loadmore text-center mb-3 mt-3">
                        <a href="{{ route('feature') }}" class="tm-button tm-button-dark mb-2">View All<b></b></a>
                    </div>
                </div>
            </div>
        </div>
    </div>




@endsection
@push('js')
@endpush