# HTML
{% set slogan = store.getSlogan() %}
{% set bannerTopo = store.publicityBanner({tipo:'21', limit:'1'}) %}
{% set bannerMainMedium = store.publicityBanner({tipo:'25', limit:'2'}) %}
{% set categorias = store.categories() %}
{% set vitrines = store.showcaseActiveIds() %}
<section id="page_home" class="block">
{{ include('widgets/home-slides.html') }}
{% if slogan %}
<!-- SLOGAN -->
<div id="slogan" class="mb-4">
<div class="central">
<p>{{ slogan }}</p>
</div>
</div>
{% endif %}
{% if geral.hasPerformaAI %}
<performa></performa>
{% endif %}
{{ include('widgets/alertas-destaque.html') }}
{% if bannerMainMedium|length > 0 %}
<section class="banner-main-medium block mb-4 px-3 px-md-0">
<div class="central">
<div class="row justify-content-center">
{% for banner in bannerMainMedium %}
<div class="col text-center">
{{ banner.raw|raw }}
</div>
{% endfor %}
</div>
</div>
</section>
{% endif %}
{% if bannerTopo|length >= 1 %}
<!-- BANNER HEADER -->
<div class="central">
<div class="b_header mb-4{{ page == 'principal' ? ' i' : '' }}">
{{ bannerTopo[0].raw|raw }}
</div>
</div>
{% endif %}
<section class="block">
<div class="central">
<component data-modulo="kits" loading="false" data-shimmer="4"></component>
<div class="row mx-0">
<div class="col-md-3 d-none d-md-inline">
<div id="lmenu">
<nav>
<ul>
{% for categoria in categorias %}
<li class="t">
<a href="{{ categoria.url }}/">{{ categoria.nome }}</a>
{% if categoria.subs|length >= 1 %}
<ul class="list">
{% for level2 in categoria.subs|slice(0,6) %}
<li><a href="{{ level2.url }}/"><i class="fa fa-caret-right"></i> {{ level2.nome }}</a></li>
{% for level3 in level2.subs %}
<li class="indent"><a href="{{ level3.url }}/">{{ level3.nome }}</a></li>
{% endfor %}
{% endfor %}
{% if categoria.subs|length > 6 %}
<li><a href="{{ categoria.url }}/"><i class="fa fa-plus"></i> Ver tudo em {{ categoria.nome }}</a></li>
{% endif %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
</nav>
</div>
</div>
<div class="col-md-9">
<div id="lcont" class="block mb-4 sticky-top">
{% if vitrines|length >= 1 %}
{% if global.vitrine_visitados_posicao == '1' %}
<component data-modulo="produtos-visitados" loading="false" data-shimmer="4"></component>
{% endif %}
{% for vitrine in vitrines %}
<component data-modulo="vitrine" data-id="{{ vitrine.id }}" data-columnclass="col-md-4 col-sm-6" data-column="3" loading="false" data-shimmer="4"></component>
{% endfor %}
{% if global.vitrine_visitados_posicao == '2' %}
<component data-modulo="produtos-visitados" loading="false" data-shimmer="4"></component>
{% endif %}
{% else %}
<component data-modulo="lancamentos" data-columnclass="col-md-4 col-sm-6" data-column="3" loading="false" data-shimmer="4"></component>
{% if geral.hasSmartHint %}
<div id="smarthint-position-1"></div>
<div id="smarthint-position-2"></div>
<div id="smarthint-position-3"></div>
<div id="smarthint-position-4"></div>
<div id="smarthint-position-5"></div>
{% endif %}
{% endif %}
</div>
</div>
</div>
</div>
{{ include('widgets/avaliacoes.html') }}
{{ include('widgets/marcas.html') }}
{{ include('widgets/widget-instagram.html') }}
{{ include('widgets/widget-blog-posts.html') }}
</section>
{% if geral.hasSmartHint %}
<script>
$(function(){
SmartHint.Call('setPage',{type:'home', data: {} });
});
</script>
{% endif %}
{% if geral.hasPerformaAI %}
<performa></performa>
{% endif %}
</section>
// CSS
#geral{
overflow: inherit !important;
}
#kits{
margin-bottom: 30px;
}
#slider{
width: 100%;
float: left;
text-align: center;
.item{
width: 100%;
float: left;
img{
max-height: 800px;
}
}
.owl-dots{
position: absolute;
width: 100%;
margin: 0;
bottom: 0;
visibility: hidden;
opacity: 0;
}
.owl-nav{
visibility: hidden;
opacity: 0;
transition: all .25s ease;
margin-top: 0;
}
.owl-prev,
.owl-next{
position: absolute;
top: 0;
left: 0;
height: calc(100% - 10px);
width: 30px;
background-color: rgba(195,195,195,0.70);
color: #000;
display: flex;
flex-direction: column;
justify-content: center;
}
.owl-next{
left: auto;
right: 0;
}
.owl-pagination{
line-height: normal;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
}
&:hover{
.owl-nav,
.owl-dots{
visibility: visible;
opacity: 1;
}
}
}
#slogan{
width: 100%;
float: left;
background-color: #000;
color: #FFF;
padding: 5px 0;
text-align: center;
}
.titulo{
width: 100%;
float: left;
margin: 40px 0 50px 0;
text-align: center;
font-size: 30px;
font-weight: 100;
position: relative;
&::after{
content: "";
position: absolute;
left: 50%;
top: 100%;
width: 80px;
height: 5px;
background-color: #000;
margin-left: -40px;
}
}
.produtos{
.item{
.fotos{
.it{
height: 190px;
}
}
}
}
#lcont,
#lmenu{
width: 100%;
float: left;
margin-bottom: 30px;
position: sticky;
top: 110px;
z-index: 30;
}
#lmenu{
ul{
&:not(.list){
list-style: none;
> li{
width: 100%;
float: left;
border: solid 1px #000;
margin-top: 10px;
&:first-child{
margin-top: 0;
}
> a{
width: 100%;
float: left;
line-height: 20px;
padding: 10px;
color: #000;
transition: all .25s ease;
}
}
}
}
.list{
list-style: none;
li{
width: 100%;
float: left;
a{
width: 100%;
float: left;
line-height: 15px;
padding: 10px;
color: #666;
transition: all .25s ease;
i{
margin-right: 4px;
color: #666;
}
}
&.indent{
a{
text-indent: 10px;
}
}
}
}
}
#kit{
padding: 20px;
min-height: 350px;
.t{
font-size: 40px;
line-height: 50px;
margin-bottom: 20px;
}
.imagem{
width: auto;
height: auto;
max-width: 100%;
position: sticky;
top: 130px;
}
.items{
margin-bottom: 20px;
.item{
margin-top: 20px;
padding-top: 20px;
opacity: 0.5;
&.selected{
opacity: 1;
}
&:first-child{
margin-top: 0;
padding-top: 0;
}
.foto{
height: 120px;
overflow: hidden;
border-radius: 3px;
cursor: pointer;
margin-bottom: 10px;
&.oculto{
cursor: default;
}
}
.produto{
margin-bottom: 5px;
color: #666;
}
.cor{
margin-bottom: 10px;
}
.valor{
font-size: 18px;
line-height: 20px;
font-weight: bold;
span{
font-size: 14px;
line-height: 16px;
font-weight: 100;
}
}
.variacoes{
.it{
min-width: 50px;
height: 40px;
line-height: 30px;
text-align: center;
padding: 5px;
border: solid 1px #CCC;
color: #000;
font-size: 16px;
float: left;
margin: 2px;
border-radius: 3px;
cursor: pointer;
&.active{
border-color: #17CC37;
color: #17CC37;
}
}
}
.check{
text-align: center;
span{
width: 30px;
line-height: 25px;
margin: auto;
display: inline-block;
border-radius: 3px;
cursor: pointer;
&.on{
background-color: #17CC37;
color: #FFF;
}
&.off{
background-color: #666;
color: #FFF;
display: none;
}
}
}
}
}
}
#kits{
.item{
background: #FFF;
box-shadow: 0 0 5px rgba(0,0,0,0.3);
border-radius: 3px;
height: 100%;
max-width: 260px;
position: relative;
overflow: hidden;
display: block;
margin: auto;
float: none;
.foto{
height: 370px;
display: flex;
align-items: center;
justify-content: center;
background-color: #EEE;
img{
max-height: 100%;
}
}
&:hover{
.det{
bottom: 0;
}
}
.det{
width: 100%;
padding: 10px;
position: absolute;
bottom: -250px;
left: 0;
background-color: rgba(0,0,0,0.5);
transition: all .25s;
.t{
font-size: 18px;
line-height: 22px;
margin-bottom: 10px;
color: #FFF;
}
.bt-comprar{
display: inline-block;
padding: 10px 15px;
background-color: #53A412;
color: #FFF;
border-radius: 3px;
&:active{
opacity: 0.7;
}
}
}
}
}
#widget_avaliacoes{
.itens{
width: 100%;
float: left;
.item{
width: calc(100% - 6px);
float: left;
text-align: center;
margin: 3px;
box-shadow: 0 0 3px rgba(0,0,0,0.2);
background-color: #FFF;
padding: 10px;
border-radius: 4px;
height: 100%;
.votos{
font-size: 22px;
margin-bottom: 10px;
color: #DDD;
.fa-star{
color: #FFD700;
}
}
.produto{
font-size: 14px;
line-height: 16px;
margin-bottom: 10px;
a{
color: inherit;
text-decoration: underline !important;
}
}
.comentario{
margin-bottom: 10px;
}
}
}
}
#marcas{
.item{
width: 100%;
height: 100px;
overflow: hidden;
border: solid 1px #F5F5F5;
display: flex;
a{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
img{
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}
.marca{
display: flex;
justify-content: center;
align-items: center;
height: 100%;
color: #444;
font-size: 22px;
line-height: 24px;
padding: 10px;
}
}
}
#wid_instagram{
.titulo{
margin-bottom: 0;
}
}
.blog-posts{
background-color: #EEE;
padding: 20px;
.item{
height: 100%;
background-color: #FFF;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
overflow: hidden;
border-radius: 3px;
transition: all .25s;
.foto{
height: 195px;
overflow: hidden;
}
.t{
padding: 10px;
font-size: 20px;
line-height: 26px;
color: #000;
}
&:hover{
background-color: #EEE;
}
}
}
@media screen and (max-width: 1200px) {
}
@media screen and (max-width: 992px) {
}
@media screen and (max-width: 768px) {
}
@media screen and (max-width: 576px) {
}
@media screen and (max-width: 320px) {
}