@extends('layouts.main')
@section('container')

<!-- css resources -->
<link href="css/about.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/bottom-bar.css" rel="stylesheet" type="text/css" media="all" />

<!-- this div is for the laptop picture -->
<div class="img">
</div>

<!-- details container -->
<div class="container about">

  <!-- page title -->
  <div class="title">
    <h1>About</h1>
    <h1>ASEAN Entrepreneurship</h1>
    <h1>Profiling</h1>
  </div>

  {{-- accordion --}}
  <div class="accordion mt-5 mb-5" id="accordion">

    {{-- AEP definition --}}
    <div class="accordion-item">
      <h2 class="accordion-header" id="item1">
        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          <strong>
            {{ __('messages.heading1') }}
          </strong>
        </button>
      </h2>
      <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="item1" data-bs-parent="#accordion">
        <div class="accordion-body">
          <strong>ASEAN Entrepreneurship Profiling</strong>
           {{ __('messages.content1') }}
        </div>
      </div>
    </div>

    {{-- rules --}}
    <div class="accordion-item">
      <h2 class="accordion-header" id="item2">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          <strong>
            {{ __('messages.heading2') }}
          </strong>
        </button>
      </h2>
      <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="item2" data-bs-parent="#accordion">
        <div class="accordion-body">
          {{ __('messages.content2') }} <strong>ASEAN Entrepreneurship Profiling</strong> :
          <p>1. </p>
          <p>2. </p>
          <p>3. </p>
        </div>
      </div>
    </div>

    {{-- more about aep --}}
    <div class="accordion-item">
      <h2 class="accordion-header" id="item3">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          <strong>
            {{ __('messages.heading3') }}
          </strong>
        </button>
      </h2>
      <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="item3" data-bs-parent="#accordion">
        <div class="accordion-body">
          {{ __('messages.content3') }}
        </div>
      </div>
    </div>

  </div>
</div>

@include('part.bottom')
@endsection