@extends('web.layouts.layout')
@section('content')


    <main>

        <!-- ---------- breadcrumb ----------- -->
        @include('web.layouts.header')

        <!-- ---------- about banner ----------- -->
        <section class="pg_about_banner">
            <div class="img">
                <img src="{{asset($aboutus->image)}}" alt="" class="w-100">
            </div>
        </section>


        <!-- ---------- pillars ----------- -->
        <section class="pg_about_pillars section_padding">
            <div class="container">
                <div class="row justify-content-between align-items-center">
                    <div class="col-lg-5">
                        <div class="info">
                            <div class="section_head mb-4">
                                <h2> {{__('web.aboutus')}} </h2>
                            </div>
                            <div class="text mb-3"> {!! $aboutus->title !!} </div>
                            <div class="text">
                                {!! $aboutus->description !!}
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="pillars_cards">
                            <div class="pillar_card">
                                <div class="icon">
                                    <i class="fas fa-network-wired mb-2 me-2"></i>
                                </div>
                                <div class="info">
                                    <h5> {!! $cards[0]->title !!} </h5>
                                    <p> {!! $cards[0]->description !!} </p>
                                </div>
                            </div>
                            <div class="pillar_card">
                                <div class="icon">
                                    <i class="fas fa-user-graduate mb-2 me-2"></i>
                                </div>
                                <div class="info">
                                    <h5> {!! $cards[1]->title !!} </h5>
                                    <p> {!! $cards[1]->description !!} </p>
                                </div>
                            </div>
                            <div class="pillar_card">
                                <div class="icon">
                                    <i class="fas fa-lightbulb mb-2 me-2"></i>
                                </div>
                                <div class="info">
                                    <h5> {!! $cards[2]->title !!} </h5>
                                    <p> {!! $cards[2]->description !!} </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>


        <!-- ---------- vision ----------- -->
        <section class="pg_about_vision">
            <div class="container">
                <div class="row gx-lg-5">
                    @foreach($pages as $row)
                    <div class="col-lg-4 border-end">
                        <div class="item">
                            <div class="icon mb-3">
                                <img src="{{asset($row->image)}}" alt="">
                            </div>
                            <div class="info">
                                <h5 class="mb-4 fw-bold">{!! $row->title !!}</h5>
                                <p class="text">
                                    {!! $row->description !!}
                                </p>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </section>


        <!-- ---------- timeline ----------- -->
        <section class="pg_about_timeline">
            <div class="container">
                <h2> {{__('web.founder')}} </h2>
                <div class="slider_content">
                    <div class="timeline_slider">
                        <div class="swiper-wrapper">
                            @foreach($founders as $row)
                            <div class="swiper-slide">
                                <div class="time_card">
                                    <h5> {{$row->number}} </h5>
                                    <p> {!! $row->name !!} </p>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </div>
                    <div class="swiper-button-next"></div>
                    <div class="swiper-button-prev"></div>
                </div>
            </div>
        </section>


        <!-- ---------- approach ----------- -->
        <section class="pg_about_approach section_padding" id="OurApproach">
            <div class="container">
                <div class="title text-center">
                    <h1 class="fs-1 fw-bold mb-4">{{__('web.our_approach')}}</h1>
                    <p class="fs-5">{{__('web.our_approach_desc')}}</p>
                </div>
                <div class="approach_cards">
                    <div class="row gx-lg-5">
                        <div class="col-lg-4">
                            <div class="app_card">
                                <span class="icon">
                                    <!--<i class="fas fa-file-alt me-2 mb-1"></i>-->
                                    <img src="{{url('')}}/assets/web/images/app1.svg" alt="">
                                </span>
                                <h6> {!! $approaches[0]->title !!} </h6>
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="app_card">
                                <span class="icon">
                                    <!--<i class="fas fa-pen-square me-2 mb-1"></i>-->
                                    <img src="{{url('')}}/assets/web/images/app2.svg" alt="">
                                </span>
                                <h6> {!! $approaches[1]->title !!} </h6>
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="app_card">
                                <span class="icon">
                                    <!--<i class="fas fa-graduation-cap me-2 mb-1"></i>-->
                                    <img src="{{url('')}}/assets/web/images/app3.svg" alt="">
                                </span>
                                <h6> {!! $approaches[2]->title !!} </h6>
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="app_card">
                                <span class="icon">
                                    <!--<i class="fas fa-info-square me-2 mb-1"></i>-->
                                    <img src="{{url('')}}/assets/web/images/app4.svg" alt="">
                                </span>
                                <h6> {!! $approaches[3]->title !!} </h6>
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="app_card">
                                <span class="icon">
                                    <!--<i class="fas fa-pen-square me-2 mb-1"></i>-->
                                    <img src="{{url('')}}/assets/web/images/app5.svg" alt="">
                                </span>
                                <h6> {!! $approaches[4]->title !!} </h6>
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="app_card">
                                <span class="icon">
                                    <!--<i class="fas fa-graduation-cap me-2 mb-1"></i>-->
                                    <img src="{{url('')}}/assets/web/images/app3.svg" alt="">
                                </span>
                                <h6> {!! $approaches[5]->title !!}  </h6>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </section>

    </main>

@endsection
