@extends('layouts/app')
    @section('content')
        
        <!-- Topbar Start -->
        <div class="container-fluid bg-dark px-5 d-none d-lg-block">
            <div class="row gx-0">
                <div class="col-lg-8 text-center text-lg-start mb-2 mb-lg-0">
                    <div class="d-inline-flex align-items-center" style="height: 45px;">
                        <small class="me-3 text-light"><i class="fa fa-phone-alt me-2"></i>(13)99212-6972</small>
                        <small class="text-light"><i class="fa fa-envelope-open me-2"></i>contato@acessohost.com.br</small>
                    </div>
                </div>
                <div class="col-lg-4 text-center text-lg-end">
                    <div class="d-inline-flex align-items-center" style="height: 45px;">

                        @php
                            use App\Models\SocialMedia;
                            $socials = SocialMedia::get();
                        @endphp

                        @foreach($socials as $social)
                            <a class="btn btn-sm btn-outline-light btn-sm-square rounded-circle me-2" href="{{ $social->twitter }}" target="_blank"><i class="fab fa-twitter fw-normal"></i></a>
                            <a class="btn btn-sm btn-outline-light btn-sm-square rounded-circle me-2" href=" {{ $social->facebook }}" target="_blank"><i class="fab fa-facebook-f fw-normal"></i></a>
                            <a class="btn btn-sm btn-outline-light btn-sm-square rounded-circle me-2" href="{{ $social->linkedin }}" target="_blank"><i class="fab fa-linkedin-in fw-normal"></i></a>
                            <a class="btn btn-sm btn-outline-light btn-sm-square rounded-circle me-2" href="{{ $social->instagram }}" target="_blank"><i class="fab fa-instagram fw-normal"></i></a>
                            <a class="btn btn-sm btn-outline-light btn-sm-square rounded-circle" href="{{ $social->youtube }}" target="_blank"><i class="fab fa-youtube fw-normal"></i></a>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
        <!-- Topbar End -->


        <!-- Navbar & Carousel Start -->
        <div class="container-fluid position-relative p-0">
            
            @include('includes.menu')

            @php
                use App\Models\Banner;
                $banners = Banner::get();
            @endphp

            <div id="header-carousel" class="carousel slide carousel-fade" data-bs-ride="carousel">
                <div class="carousel-inner">

                    @foreach($banners as $key => $banner)
                        <div class="carousel-item{{ $key === 0 ? ' active' : '' }}">
                            <img class="w-100" src="{{ url("storage/{$banner->image}") }}" alt="{{ $banner->title }}">
                            <div class="carousel-caption d-flex flex-column align-items-center justify-content-center">
                                <div class="p-3" style="max-width: 900px;">
                                    <h5 class="text-white text-uppercase mb-3 animated slideInDown">{{ $banner->title }}</h5>
                                    <h1 class="display-1 text-white mb-md-4 animated zoomIn">{{ $banner->subtitle }}</h1>
                                    <a href="https://wa.me/+5513992126972?text=Olá, venho através do site da Acessohost, gostaria de fazer um orçamento!" target="_blank" class="btn btn-primary py-md-3 px-md-5 me-3 animated slideInLeft">Faça um orçamento</a>
                                    <a href="{{ route('fale-conosco') }}" class="btn btn-outline-light py-md-3 px-md-5 animated slideInRight">Entre em contato</a>
                                </div>
                            </div>
                        </div>
                    @endforeach
                    
                </div>
                
                <button class="carousel-control-prev" type="button" data-bs-target="#header-carousel" data-bs-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Previous</span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#header-carousel" data-bs-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Next</span>
                </button>
            </div>

        </div>
        <!-- Navbar & Carousel End -->


        <!-- Full Screen Search Start -->
        <div class="modal fade" id="searchModal" tabindex="-1">
            <div class="modal-dialog modal-fullscreen">
                <div class="modal-content" style="background: rgba(9, 30, 62, .7);">
                    <div class="modal-header border-0">
                        <button type="button" class="btn bg-white btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body d-flex align-items-center justify-content-center">
                        <div class="input-group" style="max-width: 600px;">
                            <input type="text" class="form-control bg-transparent border-primary p-3" placeholder="Type search keyword">
                            <button class="btn btn-primary px-4"><i class="bi bi-search"></i></button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Full Screen Search End -->


        <!-- Facts Start -->
        <div class="container-fluid facts py-5 pt-lg-0">
            <div class="container py-5 pt-lg-0">
                <div class="row gx-0">
                    <div class="col-lg-4 wow zoomIn" data-wow-delay="0.1s">
                        <div class="bg-primary shadow d-flex align-items-center justify-content-center p-4" style="height: 150px;">
                            <div class="bg-white d-flex align-items-center justify-content-center rounded mb-2" style="width: 60px; height: 60px;">
                                <i class="fa fa-users text-primary"></i>
                            </div>
                            <div class="ps-4">
                                <h5 class="text-white mb-0">Clientes Satisfeitos</h5>
                                <h1 class="text-white mb-0" data-toggle="counter-up">102</h1>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 wow zoomIn" data-wow-delay="0.3s">
                        <div class="bg-light shadow d-flex align-items-center justify-content-center p-4" style="height: 150px;">
                            <div class="bg-primary d-flex align-items-center justify-content-center rounded mb-2" style="width: 60px; height: 60px;">
                                <i class="fa fa-check text-white"></i>
                            </div>
                            <div class="ps-4">
                                <h5 class="text-primary mb-0">Projetos Realizados</h5>
                                <h1 class="mb-0" data-toggle="counter-up">456</h1>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 wow zoomIn" data-wow-delay="0.6s">
                        <div class="bg-primary shadow d-flex align-items-center justify-content-center p-4" style="height: 150px;">
                            <div class="bg-white d-flex align-items-center justify-content-center rounded mb-2" style="width: 60px; height: 60px;">
                                <i class="fa fa-award text-primary"></i>
                            </div>
                            <div class="ps-4">
                                <h5 class="text-white mb-0">A quanto anos no mercado</h5>
                                <h1 class="text-white mb-0" data-toggle="counter-up">15</h1>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Facts Start -->


        <!-- About Start -->
        <div class="container-fluid py-5 wow fadeInUp" data-wow-delay="0.1s">
            <div class="container py-5">
                <div class="row g-5">
                    <div class="col-lg-7">
                        <div class="section-title position-relative pb-3 mb-5">
                            <h5 class="fw-bold text-primary text-uppercase">Sobre a Acessohost</h5>
                            <h1 class="mb-0">Com 15 anos de experiência no mercado</h1>
                        </div>
                        <p class="mb-4">Na nossa empresa de desenvolvimento de sistemas personalizados, cada projeto é uma jornada única. Com uma equipe dedicada de especialistas em tecnologia, mergulhamos fundo nas necessidades e visões de cada cliente, criando soluções que não apenas atendem, mas excedem expectativas. Nossa abordagem centrada no cliente garante que cada software entregue seja não apenas funcional, mas também intuitivo e eficiente. Desde o primeiro contato até a entrega final, nossa missão é proporcionar uma experiência excepcional, onde a colaboração e a transparência são os pilares do nosso sucesso. Confie em nós para transformar suas ideias em realidade digital.</p>
                        <div class="row g-0 mb-3">
                            <div class="col-sm-6 wow zoomIn" data-wow-delay="0.2s">
                                <h5 class="mb-3"><i class="fa fa-check text-primary me-3"></i>Entrega pontual</h5>
                                <h5 class="mb-3"><i class="fa fa-check text-primary me-3"></i>Equipe Profissional</h5>
                            </div>
                            <div class="col-sm-6 wow zoomIn" data-wow-delay="0.4s">
                                <h5 class="mb-3"><i class="fa fa-check text-primary me-3"></i>Suporte eficiente</h5>
                                <h5 class="mb-3"><i class="fa fa-check text-primary me-3"></i>Preços justos</h5>
                            </div>
                        </div>
                        <div class="d-flex align-items-center mb-4 wow fadeIn" data-wow-delay="0.6s">
                            <div class="bg-primary d-flex align-items-center justify-content-center rounded" style="width: 60px; height: 60px;">
                                <i class="fa fa-phone-alt text-white"></i>
                            </div>
                            <div class="ps-4">
                                <h5 class="mb-2">WhatsApp para qualquer dúvida</h5>
                                <h4 class="text-primary mb-0">(13)99212-6972</h4>
                            </div>
                        </div>
                        <a href="https://wa.me/+5513992126972?text=Olá, venho através do site da Acessohost, gostaria de fazer um orçamento!" target="_blank" class="btn btn-primary py-3 px-5 mt-3 wow zoomIn" data-wow-delay="0.9s">Faça um orçamento</a>
                    </div>
                    <div class="col-lg-5" style="min-height: 500px;">
                        <div class="position-relative h-100">
                            <img class="position-absolute w-100 h-100 rounded wow zoomIn" data-wow-delay="0.9s" src="{{ asset('img/sobre-acessohost.jpg') }}" style="object-fit: cover;"> 
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- About End -->


        <!-- Features Start -->
        <div class="container-fluid py-5 wow fadeInUp" data-wow-delay="0.1s">
            <div class="container py-5">
                <div class="section-title text-center position-relative pb-3 mb-5 mx-auto" style="max-width: 600px;">
                    <h5 class="fw-bold text-primary text-uppercase">PORQUE ESCOLHER-NOS</h5>
                    <h1 class="mb-0">Estamos aqui para expandir seu negócio exponencialmente</h1>
                </div>
                <div class="row g-5">
                    <div class="col-lg-4">
                        <div class="row g-5">
                            <div class="col-12 wow zoomIn" data-wow-delay="0.2s">
                                <div class="bg-primary rounded d-flex align-items-center justify-content-center mb-3" style="width: 60px; height: 60px;">
                                    <i class="fa fa-cubes text-white"></i>
                                </div>
                                <h4>Expertise Especializada</h4>
                                <p class="mb-0">Equipe de profissionais experientes e qualificados em constante busca pela excelência</p>
                            </div>
                            <div class="col-12 wow zoomIn" data-wow-delay="0.6s">
                                <div class="bg-primary rounded d-flex align-items-center justify-content-center mb-3" style="width: 60px; height: 60px;">
                                    <i class="fa fa-award text-white"></i>
                                </div>
                                <h4>Inovação Constante</h4>
                                <p class="mb-0">Compromisso com a adoção das últimas tecnologias para oferecer soluções inovadoras</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4  wow zoomIn" data-wow-delay="0.9s" style="min-height: 350px;">
                        <div class="position-relative h-100">
                            <img class="position-absolute w-100 h-100 rounded wow zoomIn" data-wow-delay="0.1s" src="{{ asset('img/escolhendo-acessohost.jpg') }}" style="object-fit: cover;">
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="row g-5">
                            <div class="col-12 wow zoomIn" data-wow-delay="0.4s">
                                <div class="bg-primary rounded d-flex align-items-center justify-content-center mb-3" style="width: 60px; height: 60px;">
                                    <i class="fa fa-users-cog text-white"></i>
                                </div>
                                <h4> Entrega Pontual</h4>
                                <p class="mb-0">Cumprimos prazos rigorosos para garantir que seu projeto seja entregue no tempo certo</p>
                            </div>
                            <div class="col-12 wow zoomIn" data-wow-delay="0.8s">
                                <div class="bg-primary rounded d-flex align-items-center justify-content-center mb-3" style="width: 60px; height: 60px;">
                                    <i class="fa fa-phone-alt text-white"></i>
                                </div>
                                <h4>Suporte Contínuo</h4>
                                <p class="mb-0">Oferecemos suporte técnico dedicado mesmo após a conclusão do projeto, garantindo a sua satisfação contínua</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Features Start -->


        <!-- Service Start -->
        <div class="container-fluid py-5 wow fadeInUp" data-wow-delay="0.1s">
            <div class="container py-5">
                <div class="section-title text-center position-relative pb-3 mb-5 mx-auto" style="max-width: 600px;">
                    <h5 class="fw-bold text-primary text-uppercase">NOSSOS SERVIÇOS</h5>
                    <h1 class="mb-0">Sistemas Personalizados para o seu negócio de sucesso</h1>
                </div>
                <div class="row g-5">
                    <div class="col-lg-4 col-md-6 wow zoomIn" data-wow-delay="0.3s">
                        <div class="service-item bg-light rounded d-flex flex-column align-items-center justify-content-center text-center">
                            <div class="service-icon">
                                <i class="fa fa-shield-alt text-white"></i>
                            </div>
                            <h4 class="mb-3">Conectando-se ao Futuro</h4>
                            <p class="m-0">Transforme sua visão em um software intuitivo e impactante, alcançando seus clientes onde quer que estejam</p>
                            <a class="btn btn-lg btn-primary rounded" href="">
                                <i class="bi bi-arrow-right"></i>
                            </a> 
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6 wow zoomIn" data-wow-delay="0.6s">
                        <div class="service-item bg-light rounded d-flex flex-column align-items-center justify-content-center text-center">
                            <div class="service-icon">
                                <i class="fa fa-chart-pie text-white"></i>
                            </div>
                            <h4 class="mb-3">Organização Simplificada</h4>
                            <p class="m-0">Simplifique processos internos e otimize a gestão do seu negócio com um sistema web feito sob medida para suas necessidades específicas</p>
                            <a class="btn btn-lg btn-primary rounded" href="">
                                <i class="bi bi-arrow-right"></i>
                            </a>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6 wow zoomIn" data-wow-delay="0.9s">
                        <div class="service-item bg-light rounded d-flex flex-column align-items-center justify-content-center text-center">
                            <div class="service-icon">
                                <i class="fa fa-code text-white"></i>
                            </div>
                            <h4 class="mb-3">Navegando com Confiança</h4>
                            <p class="m-0">Desenvolvemos aplicações web robustas e seguras, proporcionando uma experiência de usuário excepcional e protegendo os dados do seu negócio</p>
                            <a class="btn btn-lg btn-primary rounded" href="">
                                <i class="bi bi-arrow-right"></i>
                            </a>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6 wow zoomIn" data-wow-delay="0.3s">
                        <div class="service-item bg-light rounded d-flex flex-column align-items-center justify-content-center text-center">
                            <div class="service-icon">
                                <i class="fab fa-android text-white"></i>
                            </div>
                            <h4 class="mb-3">Transformando Dados em Decisões</h4>
                            <p class="m-0">Capacite sua empresa com sistemas personalizados de análise de dados que oferecem insights acionáveis, impulsionando a inovação e o crescimento estratégico</p>
                            <a class="btn btn-lg btn-primary rounded" href="">
                                <i class="bi bi-arrow-right"></i>
                            </a>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6 wow zoomIn" data-wow-delay="0.6s">
                        <div class="service-item bg-light rounded d-flex flex-column align-items-center justify-content-center text-center">
                            <div class="service-icon">
                                <i class="fa fa-search text-white"></i>
                            </div>
                            <h4 class="mb-3">Potencializando Pessoas, Impulsionando Empresas</h4>
                            <p class="m-0">Modernize suas práticas com um sistema personalizado que simplifica a gestão de talentos, promove a colaboração e impulsiona o crescimento organizacional</p>
                            <a class="btn btn-lg btn-primary rounded" href="">
                                <i class="bi bi-arrow-right"></i>
                            </a>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6 wow zoomIn" data-wow-delay="0.9s">
                        <div class="position-relative bg-primary rounded h-100 d-flex flex-column align-items-center justify-content-center text-center p-5">
                            <h3 class="text-white mb-3">Peça um orçamento</h3>
                            <p class="text-white mb-3">Fale sobre suas necessidades e tenha certeza que temos o melhor para sua empresa</p>
                            <h2 class="text-white mb-0">(13)99212-6972</h2>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Service End -->

        <!-- Quote Start -->
        <div class="container-fluid py-5 wow fadeInUp" data-wow-delay="0.1s">
            <div class="container py-5">
                <div class="row g-5">
                    <div class="col-lg-7">
                        <div class="section-title position-relative pb-3 mb-5">
                            <h5 class="fw-bold text-primary text-uppercase">SOLICITE UM ORÇAMENTO</h5>
                            <h1 class="mb-0">Precisa de um orçamento grátis? Sinta-se à vontade para entrar em contato conosco</h1>
                        </div>
                        <div class="row gx-3">
                            <div class="col-sm-6 wow zoomIn" data-wow-delay="0.2s">
                                <h5 class="mb-4"><i class="fa fa-reply text-primary me-3"></i>Respondemos dentro de 24 horas</h5>
                            </div>
                            <div class="col-sm-6 wow zoomIn" data-wow-delay="0.4s">
                                <h5 class="mb-4"><i class="fa fa-phone-alt text-primary me-3"></i>Suporte 24 horas por e-mail</h5>
                            </div>
                        </div>
                        <p class="mb-4">Está pronto para transformar sua visão em realidade? Nosso processo de orçamento personalizado é o primeiro passo para alcançar seus objetivos. Preencha o formulário abaixo e deixe-nos cuidar do resto. Com uma equipe experiente e dedicada, estamos aqui para entender suas necessidades específicas e fornecer soluções sob medida que atendam exatamente ao que você procura.</p>
                        <div class="d-flex align-items-center mt-2 wow zoomIn" data-wow-delay="0.6s">
                            <div class="bg-primary d-flex align-items-center justify-content-center rounded" style="width: 60px; height: 60px;">
                                <i class="fa fa-phone-alt text-white"></i>
                            </div>
                            <div class="ps-4">
                                <h5 class="mb-2">WhatsApp para qualquer dúvida</h5>
                                <h4 class="text-primary mb-0">(13)99212-6972</h4>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-5">
                        <div class="bg-primary rounded h-100 d-flex align-items-center p-5 wow zoomIn" data-wow-delay="0.9s">
                            <form>
                         
                                <div class="row g-3">
                                    <div class="col-xl-12">
                                        <input type="text" class="form-control bg-light border-0" placeholder="Seu nome" style="height: 55px;">
                                    </div>
                                    <div class="col-12">
                                        <input type="email" class="form-control bg-light border-0" placeholder="Seu e-mail" style="height: 55px;">
                                    </div>
                                    <div class="col-12">
                                        <textarea class="form-control bg-light border-0" rows="3" placeholder="Mensagem"></textarea>
                                    </div>
                                    <div class="col-12">
                                        <button class="btn btn-dark w-100 py-3" type="submit">Solicite um orçamento</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Quote End -->
    @stop