@extends('layouts.main')

@section('content')


<section class="page-about header">
    <div class="hero-section d-flex">
            <div class="text-desc ">
                <h1 class="fw-bold">Venha conhecer a nossa história</h1>
                <p class="small my-4 text-muted">A força da empresa reside na sua diversidade. Cada área é conduzida por profissionais especializados, que trabalham de forma integrada para oferecer soluções completas e confiáveis. Mais do que um grupo empresarial, a empresa é um ecossistema de inovação, desenvolvimento e transformação preparado para acompanhar o futuro e contribuir para um crescimento sustentável no presente.</p>
            </div>

           <div class="hero-img ">
                <img src="{{ asset('assets/img/background16.jpg') }}" alt="image-2" width="200">
           </div>
    </div>
</section>

<section class="history">
    <div class= "history-item w-100 mt-5"></div>
    <div class="history-item guide  ">
        <p class="guide-number fw-bold m-0">1</p>
        <p class="line m-0"></p>
    </div>
    <div class="history-item w-100 py-5">
        <h4 class="fw-bold">Fundação</h4>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Modi corporis nisi assumenda omnis non, nostrum dolorum ex ipsa pariatur quia facilis et esse eum commodi molestiae. Dignissimos voluptas temporibus impedit!</p>
        <div class="card-history-item d-flex justify-content-between flex-wrap">
            <div class="card-item shadow-sm p-4">
                <i class="bx bx-briefcase-alt"></i>
                <div>
                    <p class="fw-bold m-0">Valores</p>
                    <span class="text-muted small">Integridade, Sustentabilidade, Excelência, Inovação com propósito, Desenvolvimento humano, Compromisso social</span>
                </div>
            </div>
            <div class="card-item shadow-sm p-4">
                <i class="bx bx-trending-up"></i>
                <div>
                    <p class="fw-bold m-0">Visão</p>
                    <span class="text-muted small">Ser referência multissetorial em África Lusófona unindo eficiência, inovação e responsabilidade social.</span>
                </div>
            </div>
            <div class="card-item shadow-sm p-4">
                <i class="bx bx-donate-heart"></i>
                <div>
                    <p class="fw-bold m-0">Missão</p>
                    <span class="text-muted small">Integrar soluções em infraestrutura, serviços, tecnologia e produção para impulsionar o desenvolvimento sustentável e o bem-estar das comunidades onde atuamos.</span>
                </div>
            </div>
        </div>
    </div>
</section>


<section class="indicators d-flex justify-content-between">
    <div class="indicators-item w-100  py-5">
         <div class="card-testimony d-flex flex-wrap justify-content-between">
            <div class="card-testimony-item shadow-sm">
                <p class="text-muted small">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsam nesciunt odit commodi ex repellendus</p>
                <div class="card-testimony-item-profile d-flex align-items-center">
                    <img src="{{ asset('assets/img/profile_pic.jpg') }}" alt="profile" width="40">
                    <span> Gelson Daniel</span>
                </div>
            </div>
            <div class="card-testimony-item shadow-sm">
                <p class="text-muted small">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsam nesciunt odit commodi ex repellendus labore eveniet autem voluptatum tempora laboriosam perspiciatis sit maxime, inventore enim mollitia vitae accusantium iusto repudiandae?</p>
                <div class="card-testimony-item-profile d-flex align-items-center">
                    <img src="{{ asset('assets/img/profile_pic.jpg') }}" alt="profile" width="40">
                    <span> Gelson Daniel</span>
                </div>
            </div>
            <div class="card-testimony-item shadow-sm">
                <p class="text-muted small">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsam nesciunt odit commodi ex repellendus labore eveniet autem voluptatum tempora laboriosam perspiciatis sit maxime, inventore enim mollitia vitae accusantium iusto repudiandae?</p>
                <div class="card-testimony-item-profile d-flex align-items-center">
                    <img src="{{ asset('assets/img/profile_pic.jpg') }}" alt="profile" width="40">
                    <span> Gelson Daniel</span>
                </div>
            </div>
            <div class="card-testimony-item shadow-sm">
                <p class="text-muted small">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsam nesciunt odit commodi ex repellendus labore eveniet autem voluptatum </p>
                <div class="card-testimony-item-profile d-flex align-items-center">
                    <img src="{{ asset('assets/img/profile_pic.jpg') }}" alt="profile" width="40">
                    <span> Gelson Daniel</span>
                </div>
            </div>
         </div>
    </div>

    <div class="indicators-item guide  ">
        <p class="guide-number fw-bold m-0">2</p>
        <p class="line m-0"></p>
    </div>

    <div class="indicators-item w-100 py-5">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate quo unde deserunt fugit pariatur minus tempore consectetur, iure molestiae molestias.</p>
        <div class="card-indicators d-flex justify-content-between">
            <div class="card-indicators-item text-center">
                <p class="fw-bold fs-2">+500</p>
                <span>Projectos</span>
            </div>
            <div class="card-indicators-item text-center">
                <p class="fw-bold fs-2">+70</p>
                <span>Profissionais</span>
            </div>
            <div class="card-indicators-item text-center">
                <p class="fw-bold fs-2">5</p>
                <span>Províncias</span>
            </div>
        </div>
    </div>
</section>

<section class="map d-flex justify-content-between mb-4">
    <div class="locate w-100 py-5">
        <h4 class="fw-bold">Encontre-nos agora</h4>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis iure nam placeat suscipit? Blanditiis quaerat iusto dolorum ipsa consequatur, minima corrupti numquam ullam accusantium earum molestiae quam quisquam recusandae rem.</p>
        <ul class="list-unstyled">
            <li>
                <i class="bx bx-envelope"></i>
                <span class="text-muted small">vanthan@gmail.com</span>
            </li>
            <li>
                <i class="bx bx-phone"></i>
                <span class="text-muted small">942765273</span>
            </li>
            <li>
                <i class="bx bx-map"></i>
                <span class="text-muted small">Distrito Urbano do Benfica, Bairro do Kifica, rua nº 31, casa nº 02</span>
            </li>
        </ul>
    </div>

    <div class="item guide">
        <p class="guide-number fw-bold m-0">3</p>
        <p class="line m-0"></p>
    </div>
    <div class="map-container w-100 mt-5">
        <iframe
            src="https://www.google.com/maps?q=Praça%20do%20Kifica%20Luanda&t=&z=16&ie=UTF8&iwloc=&output=embed"
            width="100%"
            height="100%"
            allowfullscreen
            loading="lazy">
        </iframe>
    </div>
</section>


@include('components.footer')

@endsection