Página inicial - Modelo 01

# HTML
{% set slogan = store.getSlogan() %}
{% set bannerTopo = store.publicityBanner({tipo:'21', limit:'1'}) %}
{% set bannerMainMedium = store.publicityBanner({tipo:'25', limit:'2'}) %}
{% 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>
	
			{% if vitrines|length >= 1 %}
				{% for vitrine in vitrines %}
					<component data-modulo="vitrine" data-id="{{ vitrine.id }}" loading="false" data-shimmer="4"></component>
				{% endfor %}
			{% else %}
				<component data-modulo="lancamentos" 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>
		
		{{ 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
.owl-carousel .owl-stage{
	display: flex !important;
	align-items: center !important;
}
#slider{
	width: 100%;
	float: left;
	text-align: center;
	
	.item{
		width: 100%;
		float: left;
		
		img{
			width: auto;
			max-width: 100%;
			max-height: 800px;
			display: inline-block;
		}
	}
	
	.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,
	&:hover .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: 30px 0 40px 0;
	padding: 10px;
	text-align: center;
	font-size: 30px;
	line-height: 30px;
	font-weight: 100;
	position: relative;
	
	&::after{
		content: "";
		position: absolute;
		left: 50%;
		top: 100%;
		width: 80px;
		height: 5px;
		background-color: #000;
		margin-left: -40px;
	}
}
#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) {
	
}