@extends('web.layouts.layout')
<title>@yield('meta_title', 'About Online Course')</title>
<meta name="description" content="@yield('')">
<meta name="keywords" content="@yield('')">
@section('content')
<main>
  <!-- breadcrumb area start -->
  <section class="bd-breadcrumb-area p-relative fix z-index-11">
    <div class="bd-breadcrumb-bg-two" data-background="assets/images/breadcrumb/breadcrumb-bg-2.webp"></div>
    <div class="bd-breadcrumb-wrapper p-relative">
      <div class="container">
        <div class="row">
          <div class="col-xl-12">
            <div class="bd-breadcrumb style-two d-flex-center">
              <div class="bd-breadcrumb-content">
                <h1 class="bd-breadcrumb-title">{{$about->label??''}}</h1>
                <div class="bd-breadcrumb-list"> <span><a href="/">Home</a></span> <span class="divider"><i class="fa-regular fa-angle-right"></i></span> <span class="active">{{$about->label??''}}</span> </div>
              </div>
            </div>
          </div>
        </div>
        
      </div>
    </div>
  </section>
  <!-- breadcrumb area end -->
  <!-- why choose us start -->
  <section class="bd-why-choose-area section-space p-relative fix">
    <div class="container">
      <div class="row gy-30 align-items-center justify-content-between">
        <div class="col-xxl-5 col-xl-6 col-lg-6">
          <div class="bd-section-title-wrapper">                         <p class="bd-section-paragraph"> {{$about->subtitle??''}}</p> 
          </div>
        </div>
        <div class="col-xxl-6 col-xl-6 col-lg-6">
          <div class="p-relative">
            <div class="bd-why-choose-thumb-wrap">
              <div class="thumb-column">
                <div class="thumb-one"><img src="{{asset('/admin_upload/'.$about->about_us_details_image??'')}}" alt="image"> </div>
                <div class="thumb-two"><img src="{{asset('/admin_upload/'.$about->about_us_details_image2??'')}}" alt="image"> </div>
              </div>
              <div class="main-thumb"><img src="{{asset('/admin_upload/'.$about->about_us_details_image3??'')}}" alt="image"> </div>
            </div>
            <div class="bd-why-shape-group d-none d-xl-block">
              <div class="shape-1"><img src="assets/images/shape/half-circle.webp" alt="shape"></div>
              <div class="shape-2"><img src="assets/images/shape/secondary-polygon-big.webp" alt="shape"></div>
              <div class="shape-3"><img src="assets/images/shape/line-circle.webp" alt="shape"></div>
              <div class="shape-4"><img src="assets/images/shape/primary-polygon.webp" alt="shape"> </div>
              <div class="shape-5"><img src="assets/images/shape/dot-shape.webp" alt="shape"></div>
              <div class="shape-6"><img src="assets/images/shape/primary-star.webp" alt="shape"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- why choose us end -->
  <!-- 1600s history area start -->
  <section class="bd-history-centuries section-space-bottom" style="background: #eee; overflow: hidden;">
    <div class="container">
      <div class="row">
      
                
       
     
    <div class="timeline">
        @foreach($timelines as $key => $timeline)
            <div class="timeline-entry {{ $key % 2 == 0 ? 'left' : 'right' }}" 
                 data-aos="{{ $key % 2 == 0 ? 'fade-right' : 'fade-left' }}">
                <div class="timeline-box">
                    <h4>{{ $timeline->year }}</h4>
                    <div class="bd-post-details-list">
                        @foreach(explode("\n", $timeline->subtitle) as $point)
                            @if(trim($point) != '')
                                {!! trim($point) !!}
                            @endif
                        @endforeach
                    </div>
                </div>
            </div>
        @endforeach
    </div>
    
    

        
        
        
      </div>
    </div>
  </section>
  <!-- 1600s history area end -->
  <!-- cta area start -->
  <section class="bd-cta-area theme-bg p-relative fix">
    <div class="container">
      <div class="row gy-30 align-items-center justify-content-center">
        <div class="col-lg-6">
          <div class="bd-cta-wrapper style-five">
            <div class="bd-cta-content">
              <div class="bd-section-title-wrapper section-title-space">
                <h2 class="bd-section-title white-text mb-30"> {{$about_Footer->title??''}} </h2>
                <div class="bd-course-details-list">
                  <p>{!!$about_Footer->subtitle??''!!} </p>
                </div>
              </div>
             </div>
          </div>
        </div>
        <div class="col-lg-6">
          <div class="bd-cta-wrapper style-five">
            <div class="bd-cta-thumb-wrapper">
              <div class="bd-cta-thumb"> <img src="{{asset('/admin_upload/'.$about_Footer->image??'')}}" alt="campus life"> </div>
              <div class="bd-cta-thumb-shape"> <img src="assets/images/cta/shape_circle_uni.png" alt="decorative shape"> </div>
            </div>
          </div>
        </div>
      </div>
      <div class="bd-cta-five-shape">
        <div class="shape-1"><img src="assets/images/shape/half-circle-wave-1.webp" alt="pattern"></div>
        <div class="shape-2"><img src="assets/images/shape/half-circle-wave-2.webp" alt="pattern"></div>
      </div>
    </div>
  </section>
  <!-- cta area end -->
  

<!-- <section class="bd-brand-area section-space">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-xl-6 col-lg-6">
        <div class="bd-history-timeline-thumb w-100">
            <div class="bd-brand-item"> <img src="assets/images/objectives.png" alt="brand"> </div>
        </div>
      </div>
      <div class="col-xl-6 col-lg-6">
        <div class="bd-brand-section-wrapper">
          <div class="bd-section-title-wrapper section-title-space"> 
            <h2 class="bd-section-title mb-20">Goals & Objectives of PIA </h2>
            <p class="bd-section-paragraph"> Become a market leader in the development sector who provides contextually relevant learning opportunities to a variety of stakeholders to equip them with the requisite skills and knowledge to continue to create positive change in an ever-changing world. </p>

              <div class="bd-post-details-list">
                <ul>
                  <li>  Enable greater usage of and access to online and offline learning opportunities within the development sector  </li>
                  <li> Promote greater usage of participatory research and training methods, within and beyond the development sector and especially among young people </li>
                  <li>  Provide topical, engaging and contemporary learning content across all learning avenues, aligning with the needs and demands of the market </li>
                  <li> Become an internationally recognised training and skilling brand within the development sector</li>
                </ul>
              </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
 -->

<link href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css" rel="stylesheet">
<style>
.timeline {position: relative;max-width: 100%;margin: auto;padding: 20px 20px;}
.timeline::after {content: '';position: absolute;width: 4px;background-color: #951c4b;top: 0;bottom: 0;left: 50%;
margin-left: -2px;}
.timeline-entry {position: relative;width: 50%;padding: 20px 40px;box-sizing: border-box;}
.timeline-entry.left {left: 0;}
.timeline-entry.right {left: 50%;}
.timeline-entry::before {content: '';position: absolute;top: 24px;width: 20px;height: 20px;background-color: #951c4b;border: 4px solid #951c4b;border-radius: 50%;z-index: 1;}
.timeline-entry.left::before {right: -10px;}
.timeline-entry.right::before {left: -10px;}
.timeline-box {background-color: #fff;padding: 20px;border-radius: 10px;position: relative;box-shadow: 0 2px 10px rgba(0,0,0,0.5);}
.timeline-box h4 {margin-top: 0;color: #951c4b;font-size: 28px;}
.bd-post-details-list {margin-top: 10px;color: #333;line-height: 1.6;}
@media screen and (max-width: 768px) {
.timeline::after {left: 20px;}
.timeline-entry {width: 100%;padding-left: 60px;padding-right: 25px;}
.timeline-entry.left, .timeline-entry.right {left: 0;}
.timeline-entry::before {left: 8px;}
}
 </style>
    <!-- AOS JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>
    <script>
        AOS.init({
            duration: 1800, // slower animation
            once: true
        });
    </script>
  
</main>
@endsection