@extends('layouts.site')

@section('title', 'O DoDia')

@section('o-dodia-active', 'active')

@section('head')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.min.js" integrity="sha512-Y2IiVZeaBwXG1wSV7f13plqlmFOx8MdjuHyYFVoYzhyRr3nH/NMDjTBSswijzADdNzMyWNetbLMfOpIPl6Cv9g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.css" integrity="sha512-Velp0ebMKjcd9RiCoaHhLXkR1sFoCCWXNp6w4zj1hfMifYB5441C+sKeBl/T/Ka6NjBiRfBBQRaQq65ekYz3UQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.js" integrity="sha512-YibiFIKqwi6sZFfPm5HNHQYemJwFbyyYHjrr3UT+VobMt/YBo1kBxgui5RWc4C3B4RJMYCdCAJkbXHt+irKfSA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>


<!-- <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto&family=Roboto:wght@900&display=swap" rel="stylesheet"> -->
<style>
@font-face {
  font-family: 'teste';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmYUtfCRc4EsA.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
</style>
@endsection

@section('content')

<div class="card-img-overlay box" style="padding: 0;">
    <img class="card-img-top" src="{{ asset('images/a-loja.png') }}" alt="Card image" style="width:100%; opacity: 0.4; max-height:400px;">
    <h4 class="card-title text"  style="font-family: 'teste', sans-serif;"><b>O DODIA</b></h4>
</div>
<div class="bg-dark">
    <center>
        <div class="" style=" border: 6px #F37314 solid; background-color: #F37314;"></div>
    </center>
</div>
<div class="background-bg" style="padding-top: 5%; padding-bottom: 5%;">
    <div class="container-xl">
        <div class="row">
            <div class="col-sm-6">
                <h1 style="color: #F37314"><b>SOBRE A LOJA</b></h1>
                <p>
                <h5>
                    O Mais DoDia Supermercados foi inaugurado em João Pessoa no dia 23 de
                    dezembro de 2019. Com o compromisso de fazer sempre o melhor, o
                    supermercado conquistou o público pessoense, e se tornou referência pela
                    qualidade e promoções imbatíveis.
                </h5>
                <br />
                <h5>
                    Situado no Bessa, com um ambiente moderno e aconchegante, o Mais
                    DoDia oferece os melhores produtos, atendimento e muita praticidade.
                    Nossos produtos são escolhidos pensando em oferecer uma experiência
                    única e positiva para nossos clientes, acompanhando todas as tendências
                    nacionais e internacionais.
                </h5>
                <br />
                <h5>
                    Para garantir que você leve o melhor para sua família com preço baixo,
                    implantamos o Clube DoDia, um aplicativo de descontos e vantagens
                    exclusivas.
                </h5>
                </p>
            </div>
            <div class="col-sm-6">
                <a href="{{ asset('images/o-dodia5.jpg') }}" data-toggle="lightbox" data-gallery="example-gallery" data-type="image">
                    <img src="{{ asset('images/o-dodia5.jpg') }}" class="img-fluid">
                </a>
            </div>
        </div>
        <br />
        <div class="row">
            <div class="col">
                <a href="{{ asset('images/o-dodia2.jpg') }}" data-toggle="lightbox" data-gallery="example-gallery" data-type="image">
                    <img src="{{ asset('images/o-dodia2.jpg') }}" class="img-fluid">
                </a>
            </div>
            <div class="col">
                <a href="{{ asset('images/o-dodia3.jpg') }}" data-toggle="lightbox" data-gallery="example-gallery" data-type="image">
                    <img src="{{ asset('images/o-dodia3.jpg') }}" class="img-fluid">
                </a>
            </div>
            <div class="col">
                <a href="{{ asset('images/o-dodia4.jpg') }}" data-toggle="lightbox" data-gallery="example-gallery" data-type="image">
                    <img src="{{ asset('images/o-dodia4.jpg') }}" class="img-fluid">
                </a>
            </div>
            <div class="col">
                <a href="{{ asset('images/o-dodia1.jpg') }}" data-toggle="lightbox" data-gallery="example-gallery" data-type="image">
                    <img src="{{ asset('images/o-dodia1.jpg') }}" class="img-fluid">
                </a>
            </div>
            <div class="col">
                <a href="{{ asset('images/o-dodia6.jpg') }}" data-toggle="lightbox" data-gallery="example-gallery" data-type="image">
                    <img src="{{ asset('images/o-dodia6.jpg') }}" class="img-fluid">
                </a>
            </div>
        </div>
    </div>
</div>
<div class="bg-top" style="padding-bottom: 3%;">
    <div class="" style="border: 9px #F37314 solid; background-color: #F37314;"></div>
    <div class="" style="border: 3px #FFF solid; background-color: #FFF"></div>
    <center><span class="seta-baixo"></span></center>
    <br />
    <div class="container-sm">
        <div class="row">
            <div class="col">
                <center>
                    <div class="card text-center card-dodia">
                        <div class="card-body">
                            <h3 class="card-title"><b>MISSÃO</b></h3>

                            <p class="card-text"><b>Nossa missão é atender nossos
                                    clientes com excelência
                                    proporcionando bem-estar em um
                                    ambiente agradável, oferecendo
                                    produtos e serviços de alta
                                    qualidade, variedade e preço justo.</b></p>
                        </div>
                    </div>
                </center>
            </div>
            <div class="col">
                <center>
                    <div class="card text-center card-dodia">
                        <div class="card-body">
                            <h3 class="card-title"><b>VISÃO</b></h3>

                            <p class="card-text"><b>Expandir o negócio, ser referência
                                    no segmento supermercadista,
                                    priorizando sempre a qualidade
                                    dos produtos e da prestação de
                                    serviços, com excelência no
                                    atendimento ao cliente,
                                    conquistando a liderança.</b></p>
                        </div>
                    </div>
                </center>
            </div>
            <div class="col">
                <center>
                    <div class="card text-center card-dodia">
                        <div class="card-body">
                            <h3 class="card-title"><b>VALORES</b></h3>

                            <p class="card-text"><b>Acreditamos em Deus
                                    Acreditamos nas pessoas
                                    Acreditamos no valor do trabalho
                                    Acreditamos que o cliente é
                                    a razão do nosso negócio. <br /> <br /> <br /></b></p>
                        </div>
                    </div>
                </center>
            </div>

        </div>
    </div>
</div>
@stop

@section('javascript')
<script type="text/javascript">
    jQuery(document).ready(function($) {
        $(document).on('click', '[data-toggle="lightbox"]', function(event) {
            event.preventDefault();
            $(this).ekkoLightbox();
        });
    });
</script>
@stop