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

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

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

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

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

@push('css')
    <style>
        .card-body h5{
            font-weight: bold;
            text-align: center;
        }
    </style>
@endpush
@section('content')


<div class="tm-section about-us-area bg-white pt-2 pb-5">
        <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: 20px">
                    <div class="tm-section-title-container">
                        <h2>Main Feature</h2>
                    </div>
                    <div class="tm-section-description-container" style="margin-top: 20px">
                        {{\App\setting::find(1)->desc}}
                    </div>
                </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>
    </div>

@endsection
@push('js')
@endpush