@extends('frontend.layouts.app')

@section('content')
<style>
header .navbar {
    background: #1a1a1a !important;
    padding-top: 10px;
}

.about {
    padding: 200px 0;
}

.about::after {
    width: 70%;
    height: 88%;
    top: 8%;
}
.get-dis {
    margin-bottom: 65px;
}
</style>
<main>

    <section class="banner bannercon">
        <div class="main-slide">
            <div class="dawn">
                <div class="h-100 position-relative">
                    <img src="{{ $about_page->banner_image ? asset($about_page->banner_image) : asset('assets/front/images/mrab.png') }}"  class="img-fluid banner-img" alt="">
                    <div class="container h-100">
                        <div class="row h-100">
                            <div class="banner-slider">
                                <div class="content" data-aos="fade-right" data-aos-duration="1500">
                                    <h3>{{ $about_page->banner_title }}</h3>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="about">
        <div class="container">
            <div class="row justify-content-end">
                <div class="col-12 col-lg-6">
                    <img src="{{asset('assets/front/images/about1.png')}}"  class="img-fluid imp" alt="">
                </div>
                <div class="col-12 col-lg-5">
                    <div class="ab-con-div" data-aos="fade-left" data-aos-duration="1500">
                        <h3 class="h3 mt-5">{{ $about_page->section_1_title }}</h3>
                        <p>{!! $about_page->section_1_content !!}</p>
                        <div class="btn-div">
                            <a class="btn banner_btn bckclr" href="{{ route('memberShip') }}">Get Started</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="get-dis">
        <div class="bck aos-init aos-animate" data-aos="fade-right" data-aos-offset="300" data-aos-duration="1500" data-aos-easing="ease-in-sine">
            <h3>{{ $about_page->section_2_heading }}</h3>
        </div>
        <div class="container">
            <div class="row justify-content-start">
                <div class="col-12 col-lg-6">
                    <div class="ab-con-div aos-init aos-animate" data-aos="fade-up" data-aos-anchor-placement="center-bottom">
                        <div class="content contentmrn">
                            <h4>{{ $about_page->section_2_title }}</h4>
                            <p>{!! $about_page->section_2_content !!}</p>
                        </div>
                        <div class="btn-div">
                            <a class="btn banner_btn drkclr" href="{{ route('memberShip') }}">Become a Member</a>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-lg-6">
                    <img src="{{ $about_page->section_2_image ? asset($about_page->section_2_image) : asset('assets/front/images/getdis.png')}}"  class="img-fluid imp" alt="">
                </div>
            </div>
        </div>
    </section>

    <!-- <section class="testimonials">
        <div class="container">
            <div class="row">
            <div class="gtco-testimonials">
            <h2>What Our Client's Say</h2>
            <div class="owl-carousel owl-carousel1 owl-theme">
                <div>
                    <div class="card text-center"><img class="card-img-top"
                            src="https://images.unsplash.com/photo-1572561300743-2dd367ed0c9a?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=300&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=50&w=300"
                            alt="">
                        <div class="card-body">
                            <h5>Ronne Galle <br />
                            </h5>
                            <p class="card-text">“ Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil
                                impedit quo minus id quod maxime placeat ” </p>
                        </div>
                    </div>
                </div>
                <div>
                    <div class="card text-center"><img class="card-img-top"
                            src="https://images.unsplash.com/photo-1588361035994-295e21daa761?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=301&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=50&w=301"
                            alt="">
                        <div class="card-body">
                            <h5>Missy Limana<br />
                            </h5>
                            <p class="card-text">“ Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil
                                impedit quo minus id quod maxime placeat ” </p>
                        </div>
                    </div>
                </div>
                <div>
                    <div class="card text-center"><img class="card-img-top"
                            src="https://images.unsplash.com/photo-1575377222312-dd1a63a51638?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=302&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=50&w=302"
                            alt="">
                        <div class="card-body">
                            <h5>Martha Brown<br />
                            </h5>
                            <p class="card-text">“ Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil
                                impedit quo minus id quod maxime placeat ” </p>
                        </div>
                    </div>
                </div>
                <div>
                    <div class="card text-center"><img class="card-img-top"
                            src="https://images.unsplash.com/photo-1549836938-d278c5d46d20?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=303&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=50&w=303"
                            alt="">
                        <div class="card-body">
                            <h5>Hanna Lisem<br />
                            </h5>
                            <p class="card-text">“ Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil
                                impedit quo minus id quod maxime placeat ” </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
            </div>
        </div>
    </section> -->


</main>

@endsection