@extends('layouts.base')

@section('icone-modulo',"fa fa-building")

@section('icone','fa fa-houzz')



@section('content')

            <div class="owl-carousel owl-carousel-light owl-carousel-light-init-fadeIn owl-theme manual dots-inside dots-horizontal-center show-dots-hover show-dots-xs nav-style-1 nav-inside nav-inside-plus nav-dark nav-lg nav-font-size-lg show-nav-hover mb-0"
                data-plugin-options="{'autoplayTimeout': 7000}"
                data-dynamic-height="['700px','700px','700px','550px','500px']" style="height: 700px;">
                <div class="owl-stage-outer">
                    <div class="owl-stage">

                        <!-- Carousel Slide 1 -->
                        <div class="owl-item position-relative overflow-hidden"
                            style="background-image: url({{ asset('frontend/img/slides/slide-corporate-9-1.jpg') }}); background-size: cover; background-position: center;">
                            <div class="container position-relative z-index-3 h-100">
                                <div class="row justify-content-center align-items-center h-100">
                                    <div class="col-lg-7">
                                        <div class="d-flex flex-column align-items-center">
                                            <h2 style="color: #3b6286;" class="position-relative text-color-dark text-5 line-height-5 font-weight-semibold ls-0 px-4 mb-2 appear-animation" data-appear-animation="fadeInDownShorterPlus" data-plugin-options="{'minWindowWidth': 0}">
                                                <span style="color: #3b6286;">Famelo Investimento</span>
                                            </h2>
                                            <h1 style="color: #3b6286;" class="font-weight-extra-bold text-10 text-md-12-13 line-height-1 text-center mb-2 appear-animation" data-appear-animation="blurIn" data-appear-animation-delay="500" data-plugin-options="{'minWindowWidth': 0}">
                                                Famelo Investimento, LDA
                                            </h1>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Carousel Slide 2 -->
                        <div class="owl-item position-relative"
                            style="background-image: url({{ asset('frontend/img/slides/slide-corporate-9-2.jpg') }}); background-size: cover; background-position: center;">
                            <div class="container position-relative z-index-1 h-100">
                                <div class="row justify-content-center align-items-center h-100">
                                    <div class="col-lg-7">
                                        <div class="d-flex flex-column align-items-center">
                                            <h2 style="color: #000;" class="position-relative text-color-dark text-5 line-height-5 font-weight-semibold ls-0 px-4 mb-2 appear-animation"
                                                data-appear-animation="fadeInDownShorterPlus"
                                                data-plugin-options="{'minWindowWidth': 0}">

                                                <span style="color: #000;">Famelo Investimento</span>
                                            </h2>
                                            <h1 style="color: #000;" class="font-weight-extra-bold text-10 text-md-12-13 line-height-1 text-center mb-2 appear-animation"
                                                data-appear-animation="blurIn" data-appear-animation-delay="500"
                                                data-plugin-options="{'minWindowWidth': 0}">Famelo Investimento, LDA</h1>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="owl-nav">
                    <button type="button" role="presentation" class="owl-prev" aria-label="Previous"></button>
                    <button type="button" role="presentation" class="owl-next" aria-label="Next"></button>
                </div>
                <div class="owl-dots mb-5">
                    <button role="button" class="owl-dot active"><span></span></button>
                    <button role="button" class="owl-dot"><span></span></button>
                </div>
            </div>




            <section class="section section-height-3 bg-color-grey m-0 border-0">
                <div class="container">
                    <div class="row align-items-center justify-content-center">
                        <div class="col-lg-6 pb-sm-4 pb-lg-0 pe-lg-5 mb-sm-5 mb-lg-0">
                            <h2 class="text-color-dark font-weight-normal text-6 mb-2">Conheça o <strong class="font-weight-extra-bold">Famelo</strong></h2>
                            <p class="lead text-color-dark" align="justify">A Famelo Investimento Lda, é um empresa comprometida, possui uma vasta gama de clientes nacionais e internacionais. </p>
                            <p class="lead text-color-dark" align="justify">Transportamos desde materiais petrolíferos, caminhões à mercadoria a granel...
                            </p>
                        </div>
                        <div class="col-sm-8 col-md-6 col-lg-4 offset-sm-4 offset-md-4 offset-lg-2 position-relative mt-sm-5"
                            style="top: 1.7rem;">
                            <img src="{{ asset('frontend/img/generic/generic-corporate-3-1.jpg') }}" class="img-fluid position-absolute d-none d-sm-block appear-animation" data-appear-animation="expandIn" data-appear-animation-delay="300" style="top: 10%; left: -50%;" alt="" />
                            <img src="{{ asset('frontend/img/generic/generic-corporate-3-2.jpg') }}" class="img-fluid position-absolute d-none d-sm-block appear-animation" data-appear-animation="expandIn" style="top: -33%; left: -29%;" alt="" />
                            <img src="{{ asset('frontend/img/generic/generic-corporate-3-3.jpg') }}" class="img-fluid position-relative appear-animation mb-2" data-appear-animation="expandIn" data-appear-animation-delay="600" alt="" />
                        </div>
                    </div>
                </div>
                <div class="container py-4 my-5">

                    <div class="row mt-3 mb-5">
                        <div class="col-md-4 appear-animation" data-appear-animation="fadeInLeftShorter"
                            data-appear-animation-delay="800">
                            <div class="text-center ">
                                <img src="frontend/img/missao.png" alt="">
                                <h3 class="font-weight-bold text-4 mb-2">Missão</h3>
                            </div>
                            <p class="text-color-dark" align="justify">Criamos rotas seguras.
                                Temos um tarifário compatível com o seu bolso.
                                Temos experiências na área e transportamos com comodidade a sua mercadoria.</p>
                        </div>
                        <div class="col-md-4 appear-animation" data-appear-animation="fadeIn"
                            data-appear-animation-delay="600">
                            <div class="text-center ">
                                <img src="frontend/img/visao.png" alt="" align="justify">
                                <h3 class="font-weight-bold text-4 mb-2">Visão</h3>
                            </div>
                            <p class="text-color-dark" align="justify">Criamos rotas seguras.
                                Temos um tarifário compatível com o seu bolso.
                                Temos experiências na área e transportamos com comodidade a sua mercadoria.</p>
                        </div>
                        <div class="col-md-4 appear-animation" data-appear-animation="fadeInRightShorter"
                            data-appear-animation-delay="800">
                            <div class="text-center ">
                                <img src="frontend/img/valores.png" alt="">
                                <h3 class="font-weight-bold text-4 mb-2">Valor</h3>
                            </div>
                            <p class="text-color-dark" align="justify"> Criamos rotas seguras.
                                Temos um tarifário compatível com o seu bolso.
                                Temos experiências na área e transportamos com comodidade a sua mercadoria.</p>
                        </div>
                    </div>

                </div>
            </section>

            <section class="parallax section section-height-3 section-parallax m-0" data-plugin-parallax data-plugin-options="{'speed': 1.5}" data-image-src="frontend/img/parallax/parallax-corporate-14-1.png">
                <div class="container">
                    <div class="row align-items-center">
                        <div class="col-lg-7 mb-5 mb-lg-0 appear-animation"
                            data-appear-animation="fadeInRightShorter">
                            <p class="text-color-primary text-2 line-height-1 mb-2">Famelo</p>
                            <h4 class="text-color-dark font-weight-normal line-height-3 text-6">Famelo <strong class="font-weight-extra-bold">Investimento</strong></h4>
                            <p class="text-color-dark" align="justify" class="lead pb-2 mb-4">A Famelo Investimento, LDA é a aposta segura para o transporte de materiais de construção e diversos pelo litoral do país.
                                Temos rotas seguras, polílicas que vão de acordo ao seu bolso e uma equipa competente, disponível para dar respostas aos seus problemas, enquanto você se concentra no seu core business.
                            </p>
                            <a href="#"
                                class="btn btn-outline btn-primary font-weight-bold text-1 px-4 btn-py-2">Conheça-nos melhor</a>
                        </div>
                        <div class="col-lg-5">
                            <div class="row">
                                <div class="col appear-animation" data-appear-animation="fadeInRightShorter"
                                    data-appear-animation-delay="200">
                                    <div class="row counters counters-lg counters-text-dark">
                                        <div class="col-md-6 mb-5">
                                            <div class="counter">
                                                <strong class="font-weight-extra-bold text-12" data-to="30"
                                                    data-append="+">0</strong>
                                                <label class="opacity-8 font-weight-normal text-4">Colaboradores</label>
                                            </div>
                                        </div>
                                        <div class="col-md-6 mb-5">
                                            <div class="counter">
                                                <strong class="font-weight-extra-bold text-12" data-to="300"
                                                    data-append="+">0</strong>
                                                <label class="opacity-8 font-weight-normal text-4">Agentes
                                                    de navegação</label>
                                            </div>
                                        </div>
                                        <div class="col-md-6 mb-5 mb-md-0">
                                            <div class="counter">
                                                <strong class="font-weight-extra-bold text-12" data-to="10"
                                                    data-append="+">0</strong>
                                                <label
                                                    class="opacity-8 font-weight-normal text-4">Navios</label>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="counter">
                                                <strong class="font-weight-extra-bold text-12" data-to="20"
                                                    data-append="+">0</strong>
                                                <label class="opacity-8 font-weight-normal text-4">Parceiros</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>


            <div class="row text-center pt-4 mt-5">
                <div class="col">
                    <h2 class="word-rotator slide font-weight-bold text-8 mb-2">
                        <span>Mensagem do CEO </span>
                        <span class="word-rotator-words bg-primary">

                        </span>

                    </h2>
                </div>
            </div>
            <div class="container py-4">
            <div class="row">
                <div class="col-md-7 order-2">
                    <div class="overflow-hidden">
                        <h2 class="text-color-dark font-weight-bold text-8 mb-0 pt-0 mt-0 appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="300">Fábio Melo</h2>
                    </div>
                    <div class="overflow-hidden mb-3">
                        <p class="font-weight-bold text-primary text-uppercase mb-0 appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="500">Sócio Gerente</p>
                    </div>
                    <p class="lead appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="700">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam <a href="#">vehicula</a> sit amet enim ac sagittis. Curabitur eget leo varius, elementum mauris eget, egestas quam. Donec ante risus, dapibus sed lectus non, lacinia vestibulum nisi. Morbi vitae augue quam. Nullam ac laoreet libero.</p>
                    <p class="pb-3 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="800">Consectetur adipiscing elit. Aliquam iaculis sit amet enim ac sagittis. Curabitur eget leo varius, elementum mauris eget, egestas quam.</p>
                    <hr class="solid my-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="900">
                    <div class="row align-items-center appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="1000">
                        <div class="col-lg-6">
                            <!--  <a href="#" class="btn btn-modern btn-dark mt-3">Get In Touch</a> -->
                            <a href="{{ route ('mensagemPresidente') }}" class="btn btn-modern btn-primary mt-3">Ver mais</a>
                        </div>
                        <!--<div class="col-sm-6 text-lg-end my-4 my-lg-0">
                            <strong class="text-uppercase text-1 me-3 text-dark">follow me</strong>
                            <ul class="social-icons float-lg-end">
                                <li class="social-icons-facebook"><a href="http://www.facebook.com/" target="_blank" title="Facebook"><i class="fab fa-facebook-f"></i></a></li>
                                <li class="social-icons-twitter"><a href="http://www.twitter.com/" target="_blank" title="Twitter"><i class="fab fa-x-twitter"></i></a></li>
                                <li class="social-icons-linkedin"><a href="http://www.linkedin.com/" target="_blank" title="Linkedin"><i class="fab fa-linkedin-in"></i></a></li>
                            </ul>
                        </div>-->
                    </div>
                </div>
                <div class="col-md-5 order-md-2 mb-4 mb-lg-0 appear-animation" data-appear-animation="fadeInRightShorter">
                    <img src="frontend/img/team/team-1.jpg" class="img-fluid" alt="">
                </div>
            </div>

            <div class="row">
                <div class="col">
                    <hr class="solid my-5">
                </div>
            </div>

        </div>
            <div class="container">

                <div class="row text-center pt-4 mt-5">
                    <div class="col">
                        <h2 class="word-rotator slide font-weight-bold text-8 mb-2">
                            <span>Parceiros </span>
                            <span class="word-rotator-words bg-primary">

                            </span>

                        </h2>
                    </div>
                </div>


                <div class="row py-4 my-5">
                    <div class="col py-3">
                        <div class="owl-carousel owl-theme mb-0"
                            data-plugin-options="{'responsive': {'0': {'items': 1}, '476': {'items': 1}, '768': {'items': 5}, '992': {'items': 7}, '1200': {'items': 7}}, 'autoplay': true, 'autoplayTimeout': 3000, 'dots': false}">
                            <div>
                                <img class="img-fluid opacity-2" src="{{ asset('frontend/img/logos/logo-1.png') }}"
                                    alt="">
                            </div>
                            <div>
                                <img class="img-fluid opacity-2" src="{{ asset('frontend/img/logos/logo-2.png') }}"
                                    alt="">
                            </div>
                            <div>
                                <img class="img-fluid opacity-2" src="{{ asset('frontend/img/logos/logo-1.png') }}"
                                    alt="">
                            </div>
                            <div>
                                <img class="img-fluid opacity-2" src="{{ asset('frontend/img/logos/logo-2.png') }}"
                                    alt="">
                            </div>

                        </div>

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

            <div class="row">
                <div class="col py-3">
                    <hr class="solid mt-5 mb-2">
                </div>
            </div>


            <div class="container pb-1">

                <div class="row pt-4 text-center">
                    <div class="col">
                        <div class="overflow-hidden mb-3">
                            <h2 class="font-weight-bold text-8 mb-0 appear-animation" data-appear-animation="maskUp">
                                Nossos Serviços
                            </h2>
                        </div>
                    </div>
                </div>



                <div class="row">
                    <div class="featured-boxes featured-boxes-style-2">
                        <div class="row">
                            <div class="col-md-6 col-lg-4 appear-animation" data-appear-animation="fadeInRightShorter"
                                data-appear-animation-delay="700">
                                <div class="featured-box featured-box-effect-4">
                                    <div class="box-content">
                                        <i
                                            class="icon-featured icon-screen-tablet icons text-color-primary bg-color-grey"></i>
                                        <h4 class="font-weight-bold">Transporte Marítimo de Mercadoria a Granel
                                        </h4>
                                        <p align="justify" class="px-3">Transporte Marítimo de Maquinas e outros. </p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-lg-4 appear-animation" data-appear-animation="fadeInRightShorter"
                                data-appear-animation-delay="900">
                                <div class="featured-box featured-box-effect-4">
                                    <div class="box-content">
                                        <i
                                            class="icon-featured icon-layers icons text-color-light bg-color-primary"></i>
                                        <h4 class="font-weight-bold">Transporte Marítimo de Caminhões</h4>
                                        <p class="px-3" align="justify">Transporte Marítimo de Maquinas e outros.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-lg-4 appear-animation" data-appear-animation="fadeInRightShorter"
                                data-appear-animation-delay="1100">
                                <div class="featured-box featured-box-effect-4">
                                    <div class="box-content">
                                        <i
                                            class="icon-featured icon-magnifier icons text-color-primary bg-color-grey"></i>
                                        <h4 class="font-weight-bold">Transporte Marítimo de Carros</h4>
                                        <p class="px-3" align="justify">Transporte Marítimo de Maquinas e outros.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-lg-4 appear-animation" data-appear-animation="fadeInLeftShorter"
                                data-appear-animation-delay="1500">
                                <div class="featured-box featured-box-effect-4">
                                    <div class="box-content">
                                        <i
                                            class="icon-featured icon-screen-desktop icons text-color-light bg-color-primary"></i>
                                        <h4 class="font-weight-bold">Transporte Marítimo de Gruas                                        </h4>
                                        <p class="px-3" align="justify">Transporte Marítimo de Maquinas e outros.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-lg-4 appear-animation" data-appear-animation="fadeInLeftShorter"
                                data-appear-animation-delay="1300">
                                <div class="featured-box featured-box-effect-4">
                                    <div class="box-content">
                                        <i class="icon-featured icon-doc icons text-color-primary bg-color-grey"></i>
                                        <h4 class="font-weight-bold">Transporte Marítimo de Contetores</h4>
                                        <p class="px-3" align="justify">Transporte Marítimo de Maquinas e outros.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-lg-4 appear-animation" data-appear-animation="fadeInLeftShorter"
                                data-appear-animation-delay="1100">
                                <div class="featured-box featured-box-effect-4">
                                    <div class="box-content">
                                        <i class="icon-featured icon-menu icons text-color-light bg-color-primary"></i>
                                        <h4 class="font-weight-bold">Transporte Marítimo de Materiais Petroliferos</h4>
                                        <p class="px-3" align="justify">Transporte Marítimo de Maquinas e outros.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <section class="section section-primary border-0 mb-0 appear-animation" data-appear-animation="fadeIn"
                data-plugin-options="{'accY': -150}">
                <div class="container">
                    <div class="row counters counters-sm pb-4 pt-3">
                        <div class="col-sm-6 col-lg-3 mb-5 mb-lg-0">
                            <div class="counter">
                                <i class="icons icon-user text-color-light"></i>
                                <strong class="text-color-light font-weight-extra-bold" data-to="45000"
                                    data-append="+">0</strong>
                                <label class="text-4 mt-1 text-color-light">Transportes</label>
                            </div>
                        </div>
                        <div class="col-sm-6 col-lg-3 mb-5 mb-lg-0">
                            <div class="counter">
                                <i class="icons icon-badge text-color-light"></i>
                                <strong class="text-color-light font-weight-extra-bold" data-to="15">0</strong>
                                <label class="text-4 mt-1 text-color-light">Parceiros</label>
                            </div>
                        </div>
                        <div class="col-sm-6 col-lg-3 mb-5 mb-sm-0">
                            <div class="counter">
                                <i class="icons icon-graph text-color-light"></i>
                                <strong class="text-color-light font-weight-extra-bold" data-to="20">0</strong>
                                <label class="text-4 mt-1 text-color-light">Serviços</label>
                            </div>
                        </div>
                        <div class="col-sm-6 col-lg-3">
                            <div class="counter">
                                <i class="icons icon-cup text-color-light"></i>
                                <strong class="text-color-light font-weight-extra-bold" data-to="352">0</strong>
                                <label class="text-4 mt-1 text-color-light">Beneficios</label>
                            </div>
                        </div>
                    </div>
                </div>
            </section>




        </div>



@endsection


@section('javascript')

@endsection