@extends('layout.front.main')
@section('title')
    @lang('about.title')
@endsection
@section('content')
    {{-- <section class="d2c_entro_launch_bg">
        <div class="px-4 py-5 my-5 text-center">
            <img class="" src="{{ asset('') }}template/assets/img/logo.png" alt="" style="width: 5%">
            <h1 class="display-5 fw-bold">Merjay</h1>
            <div class="col-lg-6 mx-auto">
            </div>
        </div>
    </section> --}}
    <section class="py-3">
        <div class="container d-flex align-items-center">
            <div class="row">
                <div class="col-12 col-lg-6 d-flex flex-column justify-content-center text-center">
                    <h2 class="text-merjay" style="color: #133e87">@lang('about.partner_heading')</h2>
                    <br>
                    <p style="color: black">@lang('about.partner_subheading')</p>
                </div>
                <div class="col-12 col-lg-6 d-flex justify-content-center align-items-center">
                    <img src="{{ asset('images/Logo/LOGO MERJAY.png') }}" class="img-fluid" alt="">
                </div>
            </div>
        </div>
    </section>

    <section class="d2c_counter_wrapper">
        <div class="container">
            <h2 class="text-white text-center">@lang('about.about_merjay_heading')</h2>
            <div class="row">
                <div class="col-12 col-lg-6 d-flex justify-content-center align-items-center">
                    <p class="text-white" style="text-align: justify">@lang('about.about_merjay_paragraph')</p>
                </div>
                <div class="col-12 col-lg-6 d-flex justify-content-center align-items-center">
                    <img src="{{ asset('images/Tentang Merjay/Phooto - Jeep - Tentang Merjay.webp') }}"
                        class="img-fluid w-75" alt="">
                </div>
                <div class="col-12 col-lg-6 d-flex justify-content-center align-items-center">
                    <img src="{{ asset('images/Tentang Merjay/Photo - Logo Jeep Willys .webp') }}" class="img-fluid w-75"
                        alt="">
                </div>
                <div class="col-12 col-lg-6 d-flex justify-content-center align-items-center">
                    <p class="text-white" style="text-align: justify">
                        @lang('about.about_merjay_paragraph2')
                    </p>
                </div>
            </div>
        </div>
    </section>

    <section>
        <div class="container">
            <h2 class="text-merjay text-center">@lang('about.merjay_value_heading')</h2>
            <div class="row">
                <div class="col-12 col-lg-4">
                    <div class="card d-flex h-100">
                        <div class="card-body text-center d-flex flex-column justify-content-between">
                            <h2>@lang('about.merjay_value_integrity')</h2>
                            <p class="mt-auto">@lang('about.merjay_value_integrity_desc')</p>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-lg-4">
                    <div class="card d-flex h-100">
                        <div class="card-body text-center d-flex flex-column justify-content-between">
                            <h2>@lang('about.merjay_value_excellence')</h2>
                            <p class="mt-auto">@lang('about.merjay_value_excellence_desc')</p>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-lg-4">
                    <div class="card d-flex h-100">
                        <div class="card-body text-center d-flex flex-column justify-content-between">
                            <h2>@lang('about.merjay_value_relevance')</h2>
                            <p class="mt-auto">@lang('about.merjay_value_relevance_desc')</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section>
        <div class="container">
            <div class="text-center">
                <h2 class="text-merjay">@lang('about.merjay_advantage_heading')</h2>
                <p>@lang('about.merjay_advantage_subheading')</p>
            </div>
            <div class="row">
                <div class="col-12 col-lg-6 mb-3">
                    <div class="row">
                        <div class="col-2 d-flex justify-content-center align-items-center">
                            <div class="border rounded shadow" style="width: 70px; height: 70px; padding: 5px;">
                                <img src="{{ asset('images/Tentang Merjay/Icon - Mudah.webp') }}" class="img-fluid"
                                    alt="">
                            </div>
                        </div>
                        <div class="col-10">
                            <h4>@lang('about.merjay_advantage_easy')</h4>
                            <p style="text-align: justify">@lang('about.merjay_advantage_easy_desc')</p>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-lg-6 mb-3">
                    <div class="row">
                        <div class="col-2 d-flex justify-content-center align-items-center">
                            <div class="border rounded shadow" style="width: 70px; height: 70px; padding: 5px;">
                                <img src="{{ asset('images/Tentang Merjay/Icon - Cepat.webp') }}" class="img-fluid"
                                    alt="">
                            </div>
                        </div>
                        <div class="col-10">
                            <h4>@lang('about.merjay_advantage_fast')</h4>
                            <p style="text-align: justify">@lang('about.merjay_advantage_fast_desc')</p>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-lg-6 mb-3">
                    <div class="row">
                        <div class="col-2 d-flex justify-content-center align-items-center">
                            <div class="border rounded shadow" style="width: 70px; height: 70px; padding: 5px;">
                                <img src="{{ asset('images/Tentang Merjay/Icon - Aman dan Terpercaya.webp') }}"
                                    class="img-fluid" alt="">
                            </div>
                        </div>
                        <div class="col-10">
                            <h4>@lang('about.merjay_advantage_safe')</h4>
                            <p style="text-align: justify">@lang('about.merjay_advantage_safe_desc')</p>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-lg-6 mb-3">
                    <div class="row">
                        <div class="col-2 d-flex justify-content-center align-items-center">
                            <div class="border rounded shadow" style="width: 70px; height: 70px; padding: 5px;">
                                <img src="{{ asset('images/Tentang Merjay/Icon - Banyak Promonya.webp') }}"
                                    class="img-fluid" alt="">
                            </div>
                        </div>
                        <div class="col-10">
                            <h4>@lang('about.merjay_advantage_promotion')</h4>
                            <p style="text-align: justify">@lang('about.merjay_advantage_promotion_desc')</p>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-lg-6 mb-3">
                    <div class="row">
                        <div class="col-2 d-flex justify-content-center align-items-center">
                            <div class="border rounded shadow" style="width: 70px; height: 70px; padding: 5px;">
                                <img src="{{ asset('images/Tentang Merjay/Icon - Jaminan uang kembali.webp') }}"
                                    class="img-fluid" alt="">
                            </div>
                        </div>
                        <div class="col-10">
                            <h4>@lang('about.merjay_advantage_moneyback')</h4>
                            <p style="text-align: justify">@lang('about.merjay_advantage_moneyback_desc')</p>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-lg-6 mb-3">
                    <div class="row">
                        <div class="col-2 d-flex justify-content-center align-items-center">
                            <div class="border rounded shadow" style="width: 70px; height: 70px; padding: 5px;">
                                <img src="{{ asset('images/Tentang Merjay/Icon - Layanan 24 jam.webp') }}"
                                    class="img-fluid" alt="">
                            </div>
                        </div>
                        <div class="col-10">
                            <h4>@lang('about.merjay_advantage_24_7')</h4>
                            <p style="text-align: justify">@lang('about.merjay_advantage_24_7_desc')</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>


    {{-- <section class="d2c_about_me_wrapper">
        <div class="container">
            <div class="row">
                <div class="col-md-10 col-lg-8 offset-md-1 offset-lg-2 text-center">
                    <h4>@lang('about.h4about')</h4>
                    <h2>@lang('about.h2about')</h2>
                    <p>@lang('about.pabout')</p>
                </div>
                <div class="d2c_img_wrapper">
                    <img src="{{ asset('') }}template/assets/images/about_me_img.jpg" class="w-100 h-100"
                        alt="About Me Image">
                </div>
                <div class="col-lg-10 offset-lg-1 text-center">
                    <p class="mb-0">@lang('about.p2about')</p>
                </div>
            </div>
        </div>
    </section>

    <section class="d2c_mission_wrapper d2c_props_bg position-relative">
        <div class="container">
            <div class="row">
                <div class="col-12 col-lg-6 mb-4 mb-lg-0">
                    <div class="d2c_content_container pe-4">
                        <h2>Merjay Jeep Merapi</h2>
                        <p style="text-align: justify">@lang('about.p3about')</p>
                        <ul>
                            @lang('about.listabout')
                        </ul>
                    </div>
                </div>
                <div class="col-12 col-lg-6">
                    <img src="{{ asset('') }}template/assets/images/about_me_img.jpg" class="w-100 h-100"
                        alt="About Me Image">
                    <a href="https://www.youtube.com/@designtocodes" target="_blank" class="d2c_video_wrapper">
                        <i class="far fa-play-circle"></i>
                        <h6 class="mb-0">@lang('about.babout')</h6>
                    </a>
                </div>
            </div>
        </div>
    </section> --}}

    <section class="d2c_vission_wrapper position-relative">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 offset-lg-2 text-center">
                    <h4 class="d2c_sub_title">@lang('index.h4testi')</h4>
                    <h2 class="d2c_title mb-3">@lang('index.h2testi')</h2>
                </div>
            </div>
            <div class="row d2c_testimonial_slider">
                <div class="col">
                    <div class="row align-items-center">
                        <div class="col-md-5 text-center mb-4 mb-md-0">
                            <img src="{{ asset('') }}template/assets/images/testimonial_img.jpg" class="img-fluid"
                                alt="Testimonial Image">
                        </div>
                        <div class="col-md-7">
                            <h3>I'm a very particular person who likes to order a site done. I just told him an idea
                                without any clear plan he did his research and made the website with quite a lot of
                                details. Also, he always responded to me quickly.</h3>
                            <h4>Peter Jackson</h4>
                            <span>Businessman</span>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="row align-items-center">
                        <div class="col-md-5 text-center mb-4 mb-md-0">
                            <img src="{{ asset('') }}template/assets/images/testimonial_img.jpg" class="img-fluid"
                                alt="Testimonial Image">
                        </div>
                        <div class="col-md-7">
                            <h3>I'm a very particular person who likes to order a site done. I just told him an idea
                                without any clear plan he did his research and made the website with quite a lot of
                                details. Also, he always responded to me quickly.</h3>
                            <h4>Kevin Peterson</h4>
                            <span>Manager</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection