@props([
    'contents' => [
        'image_1' => 'images/home/about_1.jpg',
        'title_1' => 'Fundação de Apoio ao',
        'title_2' => 'Corpo de Bombeiros de São Paulo',
        'description' => 'Somos uma organização sem fins lucrativos criada em 2013 com o objetivo de aproximar as ações do Corpo de Bombeiros com a sociedade. Nós atuamos no planejamento e execução de programas e projetos relacionados aos serviços de bombeiros, prestando apoio educacional, técnico e científico, com foco na capacitação de bombeiros e profissionais, como engenheiros, técnicos, professores, brigadistas, profissionais de saúde e segurança, entre outros, para a excelência da atividade de Proteção Contra Incêndios e Emergências.',
        'call_action_title_1' => 'Ajude-nos a realizar este trabalho',
        'call_action_title_2' => 'Faça uma doação',
        'button_1' => [
            'enable' => true,
            'text' => 'Doar',
            'url' => url('#')
        ],
        'image_2' => 'images/home/about_2.jpg',
        'text_image_2' => '"Quer ouvir histórias e conhecer mais das atuações do Corpo de Bombeiros? Acesse e assista o canal do Youtube @193bombacast."',
        'text_url_image_2' => 'Acessar',
        'url_image_2' => 'https://www.youtube.com/@193bombacast',
        'ass_1_image_2' => 'Coronel PM Valdir Pavão',
        'ass_2_image_2' => 'Presidente da Fundabom',
    ],
])

<section class="py-5 bg-white ab-about-section position-relative z-1 overflow-hidden">
    <div class="container">
        <div class="row g-5 g-xl-4 align-items-center">
            <div class="col-xl-6">
                <div class="ab-about-right">
                    <div class="subtitle d-flex align-items-center gap-3 flex-wrap">
                        <span class="gshop-subtitle">{{$contents['title_1']}}</span>
                        <span>
                            <svg width="78" height="16" viewBox="0 0 78 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <line x1="0.0138875" y1="7.0001" x2="72.0139" y2="8.0001" stroke="#FF7C08" stroke-width="2"/>
                                <path d="M78 8L66 14.9282L66 1.0718L78 8Z" fill="#FF7C08"/>
                            </svg>    
                        </span>
                    </div>
                    <h2 class="mb-4">{{$contents['title_2']}}</h2>
                    <p class="mb-8 text-justify">{{$contents['description']}} <a href="#" class="text-danger">Saiba mais</a></p>
                    <div class="row g-4">
                        <div class="banner-4 py-3 px-5 rounded-3" data-background="{{asset($contents['image_1'])}}">
                            <div class="col-7 rounded-lg p-4">
                                <div class="d-flex align-items-center gap-2 mb-1">
                                    <h6 class="mb-0 gshop-subtitle text-danger fw-normal">{{$contents['call_action_title_1']}}</h6>
                                </div>
                                <h3 class="mb-3">{{$contents['call_action_title_2']}}</h3>
                                <a href="{{$contents['button_1']['url']}}" class="btn btn-neutral btn-md border-dark rounded-1 mt-3">{{$contents['button_1']['text']}}<span class="ms-2"><i class="fas fa-arrow-right"></i></span></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-6">
                <div class="ab-left position-relative">
                    <img src="{{asset($contents['image_2'])}}" alt="image" class="img-fluid">
                    <div class="text-end">
                        <div class="ab-quote p-4 text-start">
                            <h4 class="mb-0 fw-normal text-white">{{$contents['text_image_2']}}<h4>
                            <h4 class="mb-0 fw-normal text-white"><a href="{{$contents['url_image_2']}}" target="_blank" class="fs-md fw-medium">{{$contents['text_url_image_2']}}</a></h4>
                            <h4 class="mb-0 fw-normal text-white"><span class="fs-md fw-medium">{{$contents['ass_1_image_2']}}</span></h4>
                            <h4 class="mb-0 fw-normal text-white"><span class="fs-md fw-medium">{{$contents['ass_2_image_2']}}</span></h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>