@extends('layout.app')

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

@section('content')

<section class="dark-mode position-relative pt-5" style="background-color: #151922;">

    <!-- Content -->
    <div class="container position-relative zindex-2 pt-5 pb-2 pb-md-0">

      <!-- Breadcrumb -->
      <nav class="pt-lg-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">contacts</li>
        </ol>
      </nav>
      
      <div class="row justify-content-center pt-3 mt-3">
        <div class="col-xl-6 col-lg-7 col-md-8 col-sm-10 text-center">
          <h1 class="mb-4">get in touch</h1>
          <p class="fs-lg pb-3 mb-3">social links</p>
          <div class="d-flex justify-content-center">
            <a href="{{$settings->instagram}}" target="_blank" class="btn btn-icon btn-secondary btn-instagram rounded-circle me-2">
                <i class="bx bxl-instagram"></i>
              </a>
              <a href="{{$settings->facebook}}" target="_blank" class="btn btn-icon btn-secondary btn-facebook rounded-circle me-2">
                <i class="bx bxl-facebook"></i>
              </a>
              <a href="{{$settings->twitter}}" target="_blank" class="btn btn-icon btn-secondary btn-twitter rounded-circle me-2">
                <i class="bx bxl-twitter"></i>
              </a>
              <a href="{{$settings->youtube}}" target="_blank" class="btn btn-icon btn-secondary btn-youtube rounded-circle me-2">
                <i class="bx bxl-youtube"></i>
              </a>
          </div>
        </div>
      </div>
    </div>

    <!-- Bottom shape -->
    <div class="d-flex position-absolute top-100 start-0 w-100 overflow-hidden mt-n5" style="color: #151922;">
      <div class="position-relative start-50 translate-middle-x flex-shrink-0 mt-n5 mt-md-n3 mt-lg-n1" style="width: 3788px;">
        <svg xmlns="http://www.w3.org/2000/svg" width="3788" height="144" viewBox="0 0 3788 144"><path fill="currentColor" d="M0,0h3788.7c-525,90.2-1181.7,143.9-1894.3,143.9S525,90.2,0,0z"/></svg>
      </div>
    </div>
  </section>
  <section class="container py-5 my-md-2 my-lg-4 my-xl-5">
    <div class="row justify-content-center pt-5 pb-1 pb-sm-2 pb-md-3">
      <div class="col-xxl-8 col-xl-9 col-lg-10 pt-sm-2 pt-md-5">
        <div class="d-sm-flex">
          <div class="d-flex flex-column w-sm-50 border-0 bg-transparent text-center px-sm-1 px-md-5 pb-3 pb-sm-0 mb-4 mb-sm-0">
            <div class="card-body p-0">
              <div class="d-inline-block bg-secondary text-primary rounded-circle fs-3 lh-1 p-3 mb-3">
                <i class="bx bx-envelope"></i>
              </div>
              <p class="pb-2 pb-sm-3 mb-3">Email</p>
              <p class="pb-2 pb-sm-3 mb-3">{{$settings->number_email}}</p>
            <p class="pb-2 pb-sm-3 mb-3">support@riser-store.com</p>


            </div>
            <div class="card-footer border-0 p-0">
              <a href="mailto:{{$settings->number_email}}" class="btn btn-lg btn-primary">{{ __('home.send_email') }}</a>

            </div>
          </div>
          <div class="vr text-border d-none d-sm-inline-block m-4"></div>
          <div class="card w-sm-50 border-0 bg-transparent text-center px-sm-1 px-md-5">
            <div class="card-body p-0">
              <div class="d-inline-block bg-secondary text-primary rounded-circle fs-3 lh-1 p-3 mb-3">
                <i class="bx bx-phone-call"></i>
              </div>
              <p class="pb-2 pb-sm-3 mb-1">Phone</p>

            </div>
            <p class="pb-2 pb-sm-3 mb-3">call: {{$settings->number_phone}}</p>
            <p class="pb-2 pb-sm-3 mb-3">whatsapp: {{$settings->number_whatsapp}}</p>

            
          </div>
        </div>
      </div>
    </div>
</section>
  @endsection