@extends('layout.mainlayout')

@section('content')
  <main class="page-main">
    <!-- Start Breadcrubms Section -->
    <section class="new-sec breadcrumbs-sec">
      <div class="container">
        <h3 class="page-title">{{trans('web.careers')}}</h3>
        <i class="ri-arrow-down-s-line icon"></i>
      </div>
    </section>
    <!-- End Breadcrubms Section -->
    <!-- Start Choice Section -->
    <section class="new-sec choice-sec">
      <div class="row">
        <div class="col-lg-6 clm">
          <div class="sec-image">
            <img src="img/right-choice.jpg" alt="Image" width="100%">
          </div>
        </div>
        <div class="col-lg-6 clm">
          <div class="sec-content">
            <div class="sec-header">
              <h6 class="subtitle">{{trans('web.career_title1')}}</h6>
              <h2 class="title">{{trans('web.career_title2')}}</h2>
            </div>
            <p class="desc">{{trans('web.career_desc')}}</p>
          </div>
        </div>
      </div>
    </section>
    <!-- End Choice Section -->
    <!-- Start join our tem Section -->
    <section class="new-sec join-sec">
      <div class="container">
        <div class="sec-header text-center">
          <h6 class="subtitle mb-1">{{trans('web.ready_to_get_started')}}</h6>
          <h2 class="title">{{trans('web.join_our_team')}}</h2>
        </div>
        <div class="sec-content">
          <div class="row">
            <div class="col-lg-4 clm">
              <div class="req-box">
                <span class="num">01</span>
                <h4 class="req-title">{{trans('web.tell_us_about_your')}} <br> {{trans('web.hiring_needs')}}</h4>
                <p class="req-desc"></p>
              </div>
            </div>
            <div class="col-lg-4 clm">
              <div class="req-box">
                <span class="num">02</span>
                <h4 class="req-title">{!!trans('web.we_find_your_new_skills')!!}</h4>
                <p class="req-desc"></p>
              </div>
            </div>
            <div class="col-lg-4 clm">
              <div class="req-box">
                <span class="num">03</span>
                <h4 class="req-title">{!!trans('web.join_talented')!!}</h4>
                <p class="req-desc"></p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- End join our tem Section -->
    <!-- Start Positions Section -->
    <section class="new-sec positions-sec" id="job-section">
      <div class="container">
        <div class="sec-header text-center">
          <h6 class="subtitle">{{trans('web.make_right_choice')}}</h6>
          <h2 class="title">{{trans('web.open_positions')}}</h2>
        </div>
        <div class="sec-content">
          <div class="row">
            <div class="col-md-6">
            <a href="apply-position?position=Sales-Representative">
              <div class="single-position">
                <div class="top-info">
                  <p class="location">Jordan, Amman</p>
                  <p class="type">Full time</p>
                </div>
                <h4 class="title">Sales Representative</h4>
                <a href="apply-position?position=Sales-Representative" class="btn pos-link">
                  {{trans('web.apply')}}
                  <span class="icon">&#10230;</span>
                </a>
              </div>
              </a>
            </div>
            <div class="col-md-6">
            <a href="apply-position?position=Marketing-Manger">
              <div class="single-position">
                <div class="top-info">
                  <p class="location">Jordan, Amman</p>
                  <p class="type">Full time</p>
                </div>
                <h4 class="title">Marketing Manager</h4>
                <a href="apply-position?position=Marketing-Manager" class="btn pos-link">
                  {{trans('web.apply')}}
                  <span class="icon">&#10230;</span>
                </a>
              </div>
              </a>
            </div>
            <div class="col-md-6">
            <a href="apply-position?position=Full-stack-Developer">
              <div class="single-position">
                <div class="top-info">
                  <p class="location">Jordan, Amman</p>
                  <p class="type">Full time</p>
                </div>
                <h4 class="title">Full-stack Developer </h4>
                <a href="apply-position?position=Full-stack-Developer" class="btn pos-link">
                  {{trans('web.apply')}}
                  <span class="icon">&#10230;</span>
                </a>
              </div>
              </a>
            </div>
            <div class="col-md-6">
            <a href="apply-position?position=Product-Manager">
              <div class="single-position">
                <div class="top-info">
                  <p class="location">Jordan, Amman</p>
                  <p class="type">Full time</p>
                </div>
                <h4 class="title">Product Manager</h4>
                <a href="apply-position?position=Product-Manager" class="btn pos-link">
                  {{trans('web.apply')}}
                  <span class="icon">&#10230;</span>
                </a>
              </div>
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- End Positions Section -->
    @include('still-have-question')
  </main>
@endsection