@extends('layout.app')

@section('title', __('about us'))

@section('content')

<section class="position-relative pt-5 mb-5">

    <!-- Background -->
    <div class="position-absolute top-0 start-0 w-100 bg-position-bottom-center bg-size-cover bg-repeat-0" style="background-image: url(assets/img/about/hero-bg.svg);">
      <div class="d-lg-none" style="height: 960px;"></div>
      <div class="d-none d-lg-block" style="height: 1000px;"></div>
    </div>

    <!-- Content -->
    <div class="container position-relative zindex-5 pt-5">
      <div class="row">
        <div class="col-lg-6">
          
          <!-- Breadcrumb -->
          <nav class="pt-md-2 pt-lg-3 pb-4 pb-md-5 mb-xl-4" aria-label="breadcrumb">
            <ol class="breadcrumb mb-0">
              <li class="breadcrumb-item">
                <a href="{{ route('home') }}"><i class="bx bx-home-alt fs-lg me-1"></i>home</a>
              </li>
              <li class="breadcrumb-item active" aria-current="page">{{ __('home.about') }}</li>
            </ol>
          </nav>

          <!-- Text -->
          <h1 class="pb-2 pb-md-3">about {{$settings->website_name }}</h1>
          <p class="fs-xl pb-4 mb-1 mb-md-2 mb-lg-3" style="max-width: 600px;">{!! $settings->aboutUsContent !!}</p>

          
          
          
        </div>

        <!-- Images -->
        <div class="col-lg-6 mt-xl-3 pt-5 pt-lg-4">
          <div class="row row-cols-2 gx-3 gx-lg-4">
            <div class="col pt-lg-5 mt-lg-1">
              <img src="{{ asset('public/storage/' . $settings->aboutUsImage1) }}" class="d-block rounded-3 mb-3 mb-lg-4" alt="Image">
              <img src="{{ asset('public/storage/' . $settings->aboutUsImage2) }}" class="d-block rounded-3" alt="Image">
            </div>
            <div class="col">
              <img src="{{ asset('public/storage/' . $settings->aboutUsImage3) }}" class="d-block rounded-3 mb-3 mb-lg-4" alt="Image">
              <img src="{{ asset('public/storage/' . $settings->aboutUsImage4) }}" class="d-block rounded-3" alt="Image">
            </div>
          </div>
        </div>
      </div>
    </div>
  </section> 
  @endsection