@extends('layouts.app')

@section('content')

  <!-- hero section start -->
  <section class="hero_wrapper hero-3 bg-center bg-cover" style="background-image: url({{ $settings->hero_practice_areas_image ? asset('storage/'.$settings->hero_practice_areas_image) : asset('assets/img/home_01/images/1.png') }})">
    <div class="container">
      <div class="row">
        <div class="col-12 col-md-8">
          <div class="hero-contents">
            <h1 class="text-white wow fadeInLeft" data-wow-duration="1.3s">{{ __('nav.practice_areas') }}</h1>
            <span class="wow fadeInLeft" data-wow-duration="1.3s">
              <a href="{{ route('home', app()->getLocale()) }}">{{ __('nav.home') }}</a> <i class="far fa-level-up-alt"></i>
              <a href="{{ route('practice-areas.index', app()->getLocale()) }}">{{ __('nav.practice_areas') }}</a>
            </span>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- hero section end -->

  <!-- service section start -->
  <section class="service_wrapper service-2 section-padding">
    <div class="container">
      <div class="row">
        <div class="col-12 col-md-6 offset-md-3">
          <div class="section-title text-center mb-30 wow fadeInUp" data-wow-duration="1s">
            <h6><img src="{{ asset('assets/img/home_01/bage_head.svg') }}" alt />{{ __('site.our_practice') }}</h6>
            <h2>{{ __('site.our_practice_areas') }}</h2>
          </div>
        </div>
      </div>
      <div class="row">
        @foreach ($practiceAreas as $practiceArea)
          <div class="col-lg-3 col-md-4 col-sm-6 mt-30">
            <div class="single_service_card wow fadeInUp" data-wow-duration="1s">
              <h4>{{ $practiceArea->title() }}</h4>
              <p>{{ $practiceArea->teaser() }}</p>
              <a href="{{ route('practice-areas.show', ['locale' => app()->getLocale(), 'practiceArea' => $practiceArea->slug]) }}" class="btnd">
                {{ __('site.service_details') }} <i class="far fa-level-up-alt"></i>
              </a>
              <div class="single_img">
                <img src="{{ $practiceArea->image ? asset('storage/'.$practiceArea->image) : asset('assets/img/card_420x260.jpg') }}" alt="" />
              </div>
              <div class="jus_element">
                <img src="{{ asset('assets/img/home_01/icons/justice.svg') }}" alt="" />
              </div>
            </div>
          </div>
        @endforeach
      </div>
    </div>
  </section>
  <!-- service section end -->

@endsection