Cria o header mobile

dev/controles-vtex/fullTextSearchBox.html

@@ -24,7 +24,8 @@
 		<option value="64">Bota Fora Dondocas</option>
 	</select>
 	<input type="hidden" id="ftIdxa28507c5599f4430a7cabd23249f99c3" value="" />
-	<input id="ftBoxa28507c5599f4430a7cabd23249f99c3" class="fulltext-search-box ui-autocomplete-input" type="text" size="20"
+	<input id="ftBoxa28507c5599f4430a7cabd23249f99c3" class="fulltext-search-box ui-autocomplete-input" type="text"
-	 accesskey="b" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true" value="Digite aqui" />
+		size="20" accesskey="b" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true"
+		value="OLÁ, O QUE DESEJA ENCONTRAR?" />
 	<input id="ftBtna28507c5599f4430a7cabd23249f99c3" type="button" value="Buscar" class="btn-buscar" />
 </fieldset>

meta/loja.js

@@ -7,7 +7,7 @@ const menuElements = require("./pages/elementos-menu");
 module.exports = {
 	accountName: "agenciamagma",
 	pages: [
-		{ data: home, template: "template-home.html" },
+		{ data: home, template: "savio-home.html" },
 		{ data: category, template: "template-categoria.html" },
 		{ data: product, template: "template-produto.html" },
 		{ data: institucional, template: "template-institucional.html" },

package.json

@@ -1,7 +1,7 @@
 {
 	"author": "Agência M3",
 	"name": "tema-template",
-	"shopName": "template",
+	"shopName": "savio",
 	"description": "Tema Vtex para loja Vtex",
 	"version": "1.0.0",
 	"main": "index.js",
@@ -12,8 +12,7 @@
 		"dev": "cross-env NODE_ENV=development gulp watch",
 		"dev:fast": "cross-env NODE_ENV=devfast gulp watch",
 		"prod": "cross-env NODE_ENV=production gulp build",
-		"format": "prettier --write \"src/arquivos/**/*.{js,jsx,scss}\"",
+		"format": "prettier --write \"src/arquivos/**/*.{js,jsx,scss}\""
-		"preinstall": "npx npm-force-resolutions"
 	},
 	"license": "ISC",
 	"devDependencies": {

src/arquivos/sass/checkout/_checkout-carrinho.scss

@@ -15,7 +15,7 @@
 
 	.cart-items thead tr {
 		border-bottom: 1px solid $color-gray6;
-		color: $color-black2;
+		color: #142032;
 		font-size: 11px;
 
 		th {
@@ -53,7 +53,7 @@
 			}
 
 			&.product-name {
-				color: $color-black2;
+				color: #142032;
 				font-size: 12px;
 
 				@media (max-width: 490px) {
@@ -96,7 +96,7 @@
 				}
 
 				.icon-question-sign {
-					color: $color-black2;
+					color: #142032;
 				}
 			}
 
@@ -108,7 +108,7 @@
 
 				input {
 					&[id^="item-quantity"] {
-						border: 1px solid $color-black2;
+						border: 1px solid #142032;
 						box-shadow: none;
 						border-radius: 0;
 						color: #000;
@@ -177,13 +177,13 @@
 
 	#shipping-preview-container {
 		.srp-main-title {
-			color: $color-black2;
+			color: #142032;
 			font-size: 24px;
 			font-weight: 700;
 		}
 
 		.srp-description {
-			color: $color-black2;
+			color: #142032;
 			font-size: 13px;
 		}
 
@@ -192,7 +192,7 @@
 			background-color: $color-gray;
 			border-radius: 0;
 			border: none;
-			color: $color-black2;
+			color: #142032;
 			font-size: 14px;
 			outline: none;
 			padding: 8px 10px;
@@ -235,7 +235,7 @@
 
 			> div {
 				background-color: $color-white2;
-				color: $color-black2;
+				color: #142032;
 				display: block !important;
 				padding: 24px 15%;
 
@@ -271,7 +271,7 @@
 
 			#cart-coupon-add {
 				background-image: none;
-				background-color: $color-black2;
+				background-color: #142032;
 				border-radius: 0;
 				border: none;
 				font-size: 0;
@@ -281,11 +281,11 @@
 				transition: all 0.15s ease-in-out;
 
 				&:hover {
-					background-color: lighten($color-black2, 5);
+					background-color: lighten(#142032, 5);
 				}
 
 				&:active {
-					background-color: darken($color-black2, 5);
+					background-color: darken(#142032, 5);
 				}
 
 				&::before {
@@ -359,7 +359,7 @@
 
 		#cart-choose-more-products {
 			bottom: -26px;
-			color: $color-black4;
+			color: #151728;
 			font-size: 12px;
 			left: 0;
 			position: absolute;

src/arquivos/sass/checkout/_checkout-pagamento.scss

@@ -83,7 +83,7 @@
 
 	.cart-fixed {
 		#orderform-minicart-to-cart {
-			color: $color-black4;
+			color: #151728;
 			display: block;
 			font-size: 12px;
 			text-decoration: underline;
@@ -95,7 +95,7 @@
 			}
 
 			tfoot td {
-				color: $color-black3;
+				color: #19273d;
 				text-transform: uppercase;
 			}
 		}

src/arquivos/sass/checkout/_checkout-vazio.scss

@@ -2,7 +2,7 @@
 	text-align: center;
 
 	.empty-cart-title {
-		color: $color-black2;
+		color: #142032;
 		font-size: 24px;
 		line-height: 29px;
 	}
@@ -14,7 +14,7 @@
 	}
 
 	#cart-choose-products {
-		background-color: $color-black2;
+		background-color: #142032;
 		border-radius: 0;
 		border: none;
 		background-image: none;
@@ -26,11 +26,11 @@
 		transition: all 0.15s ease-in-out;
 
 		&:hover {
-			background-color: lighten($color-black2, 5);
+			background-color: lighten(#142032, 5);
 		}
 
 		&:active {
-			background-color: darken($color-black2, 5);
+			background-color: darken(#142032, 5);
 		}
 
 		&::before {

src/arquivos/sass/components/_mini-cart.scss

@@ -52,7 +52,7 @@
 
 	.mini-cart-header {
 		border-bottom: 1px solid $color-gray;
-		color: $color-black2;
+		color: #142032;
 		font-size: 12px;
 		letter-spacing: 0.5px;
 		padding: 20px 15px 16px;
@@ -75,7 +75,7 @@
 
 			&::before,
 			&::after {
-				background-color: lighten($color-black2, 10);
+				background-color: lighten(#142032, 10);
 				content: "";
 				height: 2px;
 				left: 0.5px;
@@ -97,7 +97,7 @@
 			&:active {
 				&:before,
 				&:after {
-					background-color: $color-black2;
+					background-color: #142032;
 				}
 			}
 		}
@@ -215,7 +215,7 @@
 		}
 
 		.product-info {
-			color: $color-black2;
+			color: #142032;
 			font-size: 12px;
 			font-weight: 500;
 			padding-left: 8px;
@@ -228,7 +228,7 @@
 			}
 
 			.product-price {
-				color: $color-black;
+				color: #000;
 				font-size: 18px;
 				font-weight: 700;
 				margin-bottom: 8px;
@@ -270,7 +270,7 @@
 			}
 
 			.value {
-				border: 1px solid $color-black2;
+				border: 1px solid #142032;
 				box-shadow: none;
 				font-size: 14px;
 				margin: 0 -3px;
@@ -302,17 +302,17 @@
 
 				&:hover,
 				&:active {
-					border-color: darken($color-black2, 15);
+					border-color: darken(#142032, 15);
 
 					&:after,
 					&:before {
-						border-color: darken($color-black2, 15);
+						border-color: darken(#142032, 15);
 					}
 				}
 
 				&:after,
 				&:before {
-					border-bottom: 1.25px solid $color-black2;
+					border-bottom: 1.25px solid #142032;
 					content: "";
 					width: 16px;
 					position: absolute;
@@ -351,7 +351,7 @@
 			text-transform: uppercase;
 
 			strong {
-				color: $color-black2;
+				color: #142032;
 				display: inline-block;
 				font-weight: 700;
 				letter-spacing: 0;

src/arquivos/sass/components/_newsletter.scss

@@ -91,11 +91,11 @@
 		}
 
 		&::placeholder {
-			color: $color-black2;
+			color: #142032;
 		}
 
 		&#m3-cn-button-ok {
-			background-color: $color-black2;
+			background-color: #142032;
 			color: $color-white;
 			cursor: pointer;
 			font-weight: 700;
@@ -109,11 +109,11 @@
 			}
 
 			&:hover {
-				background-color: lighten($color-black2, 5);
+				background-color: lighten(#142032, 5);
 			}
 
 			&:active {
-				background-color: darken($color-black2, 5);
+				background-color: darken(#142032, 5);
 			}
 		}
 	}

src/arquivos/sass/pages/_categoria.scss

@@ -3,7 +3,7 @@
 /*-------------------------------------------------------------*/
 
 .categoria {
-	color: $color-black2;
+	color: #142032;
 
 	.bread-crumb {
 		margin-bottom: 54px;
@@ -88,7 +88,7 @@
 
 					&::before,
 					&::after {
-						border: 1px solid $color-black2;
+						border: 1px solid #142032;
 						content: "";
 						display: block;
 						left: 0;
@@ -109,7 +109,7 @@
 		}
 
 		a {
-			color: $color-black2;
+			color: #142032;
 		}
 
 		.navigation-tabs {
@@ -151,11 +151,11 @@
 
 				label {
 					a {
-						color: $color-black4;
+						color: #151728;
 						transition: ease-in 0.22s all;
 
 						&:hover {
-							text-shadow: 0px 0px 0.55px $color-black4;
+							text-shadow: 0px 0px 0.55px #151728;
 						}
 					}
 				}
@@ -184,7 +184,7 @@
 				}
 
 				label {
-					color: $color-black2;
+					color: #142032;
 					cursor: pointer;
 					display: block;
 					font-size: 14px;
@@ -208,7 +208,7 @@
 					}
 
 					& ~ .sr_box {
-						border: 1px solid $color-black2;
+						border: 1px solid #142032;
 						border-radius: 50%;
 						content: " ";
 						color: $color-gray3;
@@ -344,7 +344,7 @@
 			background-color: transparent;
 			border: none;
 			border-right: 1px solid $color-gray;
-			color: $color-black;
+			color: #000;
 			cursor: pointer;
 			display: none;
 			font-size: 16px;
@@ -442,7 +442,7 @@
 	}
 
 	.clear-filter-btn {
-		background-color: $color-black2;
+		background-color: #142032;
 		border: none;
 		border-radius: 5px;
 		color: $color-white;
@@ -458,11 +458,11 @@
 		width: 100%;
 
 		&:hover {
-			background-color: lighten($color-black, 2.5);
+			background-color: lighten(#000, 2.5);
 		}
 
 		&:active {
-			background-color: darken($color-black, 2.5);
+			background-color: darken(#000, 2.5);
 		}
 	}
 
@@ -538,7 +538,7 @@
 
 				&.current {
 					a {
-						background-color: $color-black;
+						background-color: #000;
 						color: $color-white;
 						pointer-events: none;
 					}
@@ -581,7 +581,7 @@
 			}
 			a {
 				background-color: $color-white;
-				color: $color-black;
+				color: #000;
 				padding: 4px 12px;
 				text-decoration: none;
 				display: block;
@@ -590,10 +590,10 @@
 				@include mq(md, min) {
 					&:hover {
 						background-color: $color-gray6;
-						color: darken($color-black, 15);
+						color: darken(#000, 15);
 
 						&:active {
-							color: darken($color-black, 10);
+							color: darken(#000, 10);
 						}
 					}
 				}
@@ -613,7 +613,7 @@
 		text-align: center;
 
 		button {
-			background-color: $color-black2;
+			background-color: #142032;
 			border: none;
 			color: $color-white;
 			cursor: pointer;
@@ -628,11 +628,11 @@
 			width: 100%;
 
 			&:hover {
-				background-color: lighten($color-black, 2.5);
+				background-color: lighten(#000, 2.5);
 			}
 
 			&:active {
-				background-color: darken($color-black, 2.5);
+				background-color: darken(#000, 2.5);
 			}
 		}
 	}

src/arquivos/sass/pages/_erro.scss

@@ -1,5 +1,5 @@
 .pagina-erro {
-	color: $color-black2;
+	color: #142032;
 	text-align: center;
 	display: block;
 	min-height: 40%;
@@ -43,7 +43,7 @@
 
 	a.voltar-para-home {
 		color: #fff;
-		background: $color-black2;
+		background: #142032;
 		display: inline-block;
 		font-size: 14px;
 		margin: 1em auto 3em;
@@ -52,11 +52,11 @@
 		transition: all 0.15s ease-in-out;
 
 		&:hover {
-			background-color: lighten($color-black2, 5);
+			background-color: lighten(#142032, 5);
 		}
 
 		&:active {
-			background-color: darken($color-black2, 5);
+			background-color: darken(#142032, 5);
 		}
 	}
 }

src/arquivos/sass/pages/_home.scss

@@ -79,7 +79,7 @@
 			}
 
 			button {
-				background-color: $color-black2;
+				background-color: #142032;
 				border: none;
 				cursor: pointer;
 				height: 10px;

src/arquivos/sass/pages/_institucional.scss

@@ -3,7 +3,7 @@
 /*-------------------------------------------------------------*/
 
 .institucional {
-	color: $color-black2;
+	color: #142032;
 
 	.breadcrumb {
 		font-size: 14px;
@@ -15,8 +15,8 @@
 			display: inline-block;
 
 			a {
-				border-right: 1px solid $color-black2;
+				border-right: 1px solid #142032;
-				color: $color-black2;
+				color: #142032;
 				margin-right: 7px;
 				padding: 0px 9px 0px 0;
 			}
@@ -48,7 +48,7 @@
 			padding: 4px 2px;
 
 			a {
-				border: 1px solid $color-black2;
+				border: 1px solid #142032;
 				border-radius: 31px;
 				color: $color-pink;
 				display: block;
@@ -57,17 +57,17 @@
 				transition: all 0.15s ease-in-out;
 
 				&.ativo {
-					background-color: $color-black2;
+					background-color: #142032;
 					color: $color-white;
 				}
 
 				&:hover {
-					background-color: lighten($color-black2, 5);
+					background-color: lighten(#142032, 5);
 					color: $color-white;
 				}
 
 				&:active {
-					background-color: darken($color-black2, 10);
+					background-color: darken(#142032, 10);
 					color: $color-white;
 				}
 			}

src/arquivos/sass/pages/_login.scss

@@ -72,7 +72,7 @@
 			h4 {
 				&::before {
 					content: "Entrar";
-					color: $color-black2;
+					color: #142032;
 					display: block;
 					font-size: 22px;
 					font-weight: 700;

src/arquivos/sass/pages/_produto.scss

@@ -158,7 +158,7 @@
 			}
 
 			button {
-				background-color: $color-black2;
+				background-color: #142032;
 				border: none;
 				cursor: pointer;
 				height: 10px;
@@ -204,7 +204,7 @@
 		}
 
 		.moduloPreco {
-			color: $color-black2;
+			color: #142032;
 			margin: 30px 0;
 
 			.valor-de {
@@ -223,7 +223,7 @@
 			}
 
 			.valor-por {
-				color: $color-black2;
+				color: #142032;
 				font-size: 32px;
 				font-weight: 700;
 
@@ -317,7 +317,7 @@
 					}
 
 					&#enviar-avise-me {
-						background-color: $color-black3;
+						background-color: #19273d;
 						border: none;
 						color: $color-white;
 						cursor: pointer;
@@ -331,11 +331,11 @@
 						max-width: 200px;
 
 						&:hover {
-							background-color: $color-black;
+							background-color: #000;
 						}
 
 						&:active {
-							background-color: $color-black2;
+							background-color: #142032;
 						}
 					}
 				}
@@ -469,7 +469,7 @@
 				background-color: $color-gray;
 				border-radius: 4px;
 				border: 1px solid transparent;
-				color: $color-black3;
+				color: #19273d;
 				cursor: pointer;
 				display: flex;
 				font-size: 14px;
@@ -547,8 +547,8 @@
 			}
 
 			.qtd-value {
-				border: 1px solid $color-black2;
+				border: 1px solid #142032;
-				color: $color-black3;
+				color: #19273d;
 				font-size: 14px;
 				position: relative;
 				width: 34px;
@@ -650,7 +650,7 @@
 		}
 
 		.compra-segura {
-			color: $color-black3;
+			color: #19273d;
 			font-size: 10px;
 			max-width: 270px;
 			text-align: center;
@@ -700,7 +700,7 @@
 			a {
 				background-color: transparent;
 				border: none;
-				color: $color-black2;
+				color: #142032;
 				cursor: pointer;
 				font-size: 14px;
 				outline: none;
@@ -729,7 +729,7 @@
 	}
 
 	#descricao-completa {
-		color: $color-black2;
+		color: #142032;
 
 		@include mq(md, max) {
 			padding: 0 15px;
@@ -791,7 +791,7 @@
 				width: 100%;
 
 				button {
-					background-color: $color-black3;
+					background-color: #19273d;
 					border: none;
 					color: $color-white;
 					cursor: pointer;
@@ -805,12 +805,12 @@
 
 					@include mq(lg) {
 						&:hover {
-							background-color: $color-black;
+							background-color: #000;
 						}
 					}
 
 					&:active {
-						background-color: $color-black2;
+						background-color: #142032;
 					}
 				}
 			}
@@ -820,7 +820,7 @@
 	.popup-add-cart,
 	.modal-add-cart {
 		align-items: center;
-		background-color: $color-black2;
+		background-color: #142032;
 		bottom: 5%;
 		box-shadow: 0px 4px 16px rgba(125, 87, 98, 0.12);
 		border-radius: 100px;

src/arquivos/sass/pages/_user-logado.scss

@@ -9,7 +9,7 @@ body.minhaConta {
 
 	h1 {
 		border-bottom: 1px solid $color-gray;
-		color: $color-black2;
+		color: #142032;
 		font-size: 30px;
 		margin-bottom: 28px;
 		padding: 24px 14px 16px;

src/arquivos/sass/partials/_breadcrumb.scss

@@ -20,7 +20,7 @@
 			a:after {
 				content: "Home";
 				font-size: 14px;
-				border-right: 1px solid $color-black2;
+				border-right: 1px solid #142032;
 				margin-right: -9px;
 				padding: 0px 9px 0px 0;
 			}
@@ -34,8 +34,8 @@
 		}
 
 		a {
-			border-right: 1px solid $color-black2;
+			border-right: 1px solid #142032;
-			color: $color-black2;
+			color: #142032;
 			margin-right: 7px;
 			padding: 0px 9px 0px 0;
 		}

src/arquivos/sass/partials/_flags.scss

@@ -19,7 +19,7 @@
 		text-indent: -9999px;
 
 		&.produto-off {
-			background: $color-black2;
+			background: #142032;
 			display: table;
 			float: left;
 			text-indent: 0;

src/arquivos/sass/partials/_footer.scss

@@ -3,7 +3,7 @@
 /*-------------------------------------------------------------*/
 
 .footer {
-	background-color: $color-black2;
+	background-color: #142032;
 
 	.institucional-info {
 		color: $color-white;
@@ -61,7 +61,7 @@
 		.contato-sac {
 			font-size: 12px;
 			@include mq(md, max) {
-				border-bottom: 1px solid $color-black3;
+				border-bottom: 1px solid #19273d;
 				padding: 10px 0 20px;
 			}
 
@@ -122,12 +122,12 @@
 	}
 
 	.selos {
-		border-top: 1px solid $color-black3;
+		border-top: 1px solid #19273d;
 		padding: 5px 0;
 		text-align: center;
 
 		@include mq(md, min) {
-			border-bottom: 1px solid $color-black3;
+			border-bottom: 1px solid #19273d;
 		}
 
 		.col-12 {
@@ -147,7 +147,7 @@
 				padding-bottom: 10px;
 
 				@include mq(md, max) {
-					border-bottom: 1px solid $color-black3;
+					border-bottom: 1px solid #19273d;
 					padding-bottom: 25px;
 				}
 
@@ -326,7 +326,7 @@
 			}
 
 			.amount-items {
-				background-color: $color-black2;
+				background-color: #142032;
 				border-radius: 50%;
 				bottom: 2px;
 				color: $color-white;

src/arquivos/sass/partials/_header.scss

@@ -1,411 +1,143 @@
-/***************************************************************/
+.page-header {
-/**-- Header  ------------------------------********************/
+	background: $black-500;
-/*-------------------------------------------------------------*/
+	padding: 28px 0;
-#ajaxBusy {
+	@include mq(lg, max) {
-	position: absolute;
+		padding: 18px 0 0;
-	top: 0;
-	left: 0;
-	background: #fff;
-	z-index: 15;
-	padding: 0px 16px;
-	line-height: 0.1;
-	opacity: 0.75;
-
-	&::after {
-		@include pseudo(inline-block);
-		border: solid 1px;
-		padding: 4px;
-		line-height: 0;
-		position: absolute;
-		right: 2px;
-		top: 35%;
-		border-color: $color-pink3 $color-gray4 $color-gray4 $color-gray4;
-		animation: spin 0.5s linear infinite;
-		border-radius: 50%;
 	}
-}
+	&__wrapper {
-header {
+		display: grid;
-	background: rgba(255, 255, 255, 0.95);
+		grid-template-columns: 2fr 1fr 2fr;
-	top: 0;
-	transition: all 0.2s ease-in-out;
-
-	&.fixed {
-		box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.25);
-		position: fixed;
-		top: -30px;
-		left: 0;
-		right: 0;
-		z-index: 10;
-
-		@include mq(md, max) {
-			position: absolute;
-		}
-
-		.pink-bar {
-			opacity: 0;
-			visibility: hidden;
-		}
-	}
-
-	&.fixed-hide:not(.menu-mobile-open):not(.mini-cart-open):not(:hover) {
-		top: -130px;
-		opacity: 0;
-		visibility: hidden;
-		pointer-events: none;
-	}
-
-	.pink-bar {
-		background-color: $color-pink;
-		opacity: 1;
-		overflow: hidden;
-		transition: all 0.2s ease-in-out;
-
-		ul {
-			margin: 6px 0;
-		}
-
-		li {
-			display: inline-block;
-
-			&:not(:last-child) {
-				margin-right: 8px;
-				padding-right: 8px;
-				position: relative;
-
-				&::after {
-					border-right: 1px solid $color-white;
-					content: "";
-					height: 9px;
-					position: absolute;
-					right: 0;
-					top: 23%;
-				}
-			}
-		}
-
-		a {
-			color: $color-white;
-			font-size: 12px;
-			text-transform: uppercase;
-
-			i {
-				vertical-align: sub;
-			}
-		}
-	}
-
-	.row {
 		align-items: center;
-	}
+		@include mq(lg, max) {
-
+			grid-template-columns: repeat(3, 1fr);
-	.principal {
-		border-bottom: 1px solid $color-gray;
-		padding: 20px 0;
-		position: relative;
-
-		@include mq(md, max) {
-			padding-bottom: 0;
-		}
-
-		> .container {
-			@include mq(md, max) {
-				max-width: 100%;
-			}
-
-			@include mq_range(md, xl) {
-				max-width: 98%;
-			}
-		}
-	}
-
-	.menu-mobile-abrir {
-		@include mq(lg, min) {
-			display: none;
-		}
-
-		button {
-			border: none;
-			background-color: transparent;
-			cursor: pointer;
-			outline: none;
 		}
 	}
 
-	.logo {
+	&__logo {
-		text-align: center;
+		display: block;
-		@include mq(md, max) {
+		margin: 0 auto;
-			padding: 0;
+		@include mq(lg, max) {
-		}
+			max-width: 66px;
-
-		img {
-			width: auto;
-			max-width: 100%;
-
-			@include mq(md, max) {
-				max-width: 100px;
 		}
 	}
-	}
-
-	.busca-desktop {
-		@include mq(md, max) {
-			display: none;
-		}
-	}
-
-	.busca-mobile {
-		margin-top: 20px;
-		padding: 0;
-
-		@include mq(md, min) {
-			display: none;
-		}
-
 	.busca {
-			border-top: 1px solid $color-gray4;
+		display: flex;
-			border-bottom-color: $color-gray4;
+		align-items: center;
-			padding: 5px 0;
+		margin: 0;
-		}
+		//padding: 8px 0;
-	}
+		//border-bottom: 1px solid $white-500;
-
-	.busca {
-		border-bottom: 1px solid $color-black2;
-		color: $color-black2;
-		font-size: 14px;
-		max-width: 330px;
-		margin: auto;
-		padding: 0;
-		text-align: center;
-
-		@include mq(md, max) {
-			max-width: 100%;
-		}
-
 		legend,
 		label,
 		select {
 			display: none;
 		}
-
+		.fulltext-search-box {
-		input {
+			flex: 1;
-			border: none;
+			height: 23px;
-			outline: none;
+			padding: 0;
-			padding: 8px 8px 8px 0;
+			border: 0;
-
+			outline: 0;
-			&.fulltext-search-box {
+			font-size: 10px;
-				background-color: transparent;
+			line-height: 12px;
-				max-width: 300px;
+			color: $white-500;
-				margin-right: -5px;
+			background: transparent;
-				width: 85%;
-
-				@include mq(md, max) {
-					max-width: 100%;
 		}
-
+		.btn-buscar {
-				@include mq_range(md, lg) {
+			width: 23px;
-					width: 80%;
+			height: 23px;
-				}
+			padding: 0;
-			}
+			border: 0;
-
+			outline: 0;
-			&.btn-buscar {
-				background-color: transparent;
-				cursor: pointer;
 			font-size: 0;
-				padding: 8px;
+			background-color: transparent;
-
 			@extend .sprite;
-				@extend .sprite-lupa;
+			@extend .sprite-search-icon;
 		}
 	}
-	}
+	.user-items {
-
-	.util-links {
-		align-items: center;
 		display: flex;
+		align-items: center;
 		justify-content: flex-end;
-		text-align: right;
 
-		@include mq(md, max) {
+		&__search-box {
-			padding-left: 0;
+			flex: 1;
+			max-width: 212px;
+			@include mq(lg, max) {
+				display: none;
+			}
+			.busca {
+				padding: 8px 0;
+				border-bottom: 1px solid $white-500;
 			}
 		}
 
-	.links-usuario {
+		&__account-link {
-		display: inline-block;
+			display: flex;
-		margin: 0 24px;
+			align-items: center;
-		padding: 0 24px;
-		position: relative;
-
-		@include mq(md, max) {
-			margin: 0 14px;
-			padding: 0 14px;
-		}
-
-		@include mq_range(md, lg) {
-			margin: 0 16px;
-			padding: 0 16px;
-		}
 
 			&::before,
 			&::after {
-			border-right: 1px solid $color-black;
 				content: "";
+				width: 1px;
 				height: 19px;
-			position: absolute;
+				margin: 0 24px;
-			top: 5px;
+				background: $white-500;
+				@include mq(lg, max) {
+					margin: 0 16px;
+				}
 			}
-
 			&::before {
-			left: 0;
+				@include mq(lg, max) {
-
-			@include mq(md, max) {
 					display: none;
 				}
 			}
-
-		&::after {
-			right: 0;
 		}
-	}
+		&__minicart-button {
-
-	.carrinho {
-		display: inline-block;
 			position: relative;
-
+			padding: 0;
-		a {
+			border: 0;
-			li:not(.amount-items),
+			outline: 0;
-			strong,
+			background: transparent;
-			.title {
-				display: none;
-			}
-		}
-
-		.AmountItemsInCart {
-			line-height: 0;
-		}
-
 			.portal-totalizers-ref {
-			display: inline-block;
+				.title,
-			vertical-align: top;
+				.amount-products,
-			position: relative;
+				.amount-items strong,
-
+				.amount-kits,
-			.cartInfoWrapper {
+				.total-cart {
-				@extend .sprite;
+					display: none;
-				@extend .sprite-sacola;
-
-				@include mq(md, max) {
-					margin-right: 5px;
 				}
 			}
-
+			.cart-info {
-			.amount-items {
+				margin: 0;
-				background-color: $color-black2;
+			}
-				border-radius: 50%;
+			.amount-items-em {
-				bottom: 2px;
+				display: flex;
-				color: $color-white;
+				align-items: center;
-				font-size: 10px;
+				justify-content: center;
-				line-height: 1.3;
-				min-width: 19px;
-				text-align: center;
-				padding: 3px 4px;
 				position: absolute;
-				right: -8px;
+				top: 4px;
-
+				right: -4px;
-				@include mq(md, max) {
+				width: 15px;
-					right: -3px;
+				height: 15px;
-				}
+				border-radius: 50%;
-
+				line-height: 11px;
-				em {
 				font-style: normal;
+				font-weight: bold;
+				font-style: normal;
+				color: $white-500;
+				background: $blue-500;
 			}
 		}
-		}
+	}
-	}
+	&__search-box {
-}
+		margin-top: 18px;
-
+		padding: 0 15px;
-.header-simples {
+		border-top: 1px solid $gray-500;
-	border-bottom: 1px solid $color-gray;
+		@include mq(lg, min) {
-	padding: 18px 0;
+			display: none;
-	a {
+		}
-		color: #333;
+		.busca {
-	}
+			padding: 13px 0;
-	.compra-segura {
-		font-weight: 600;
-		font-size: 17px;
-		text-align: right;
-	}
-
-	.header,
-	.compra-segura {
-		@include mq("sm", max) {
-			text-align: center;
-			padding: 4px 0;
-			font-size: 12px;
-		}
-	}
-}
-
-.ui-autocomplete {
-	&.autocompleteopen {
-		display: table !important;
-	}
-
-	background: white;
-	padding: 0;
-	z-index: 999 !important;
-	width: auto !important;
-	border: solid 1px #ccc;
-	box-shadow: 0px 1px 5px -4.5px rgba(0, 0, 0, 0.95);
-
-	li {
-		padding: 12px 32px 12px 16px;
-		overflow: hidden;
-		font-size: 0.9em !important;
-
-		&:nth-child(2n) {
-			background-color: $color-gray4;
-		}
-		a {
-			font-size: 14px;
-			cursor: pointer;
-		}
-		img {
-			margin-right: 10px;
-			width: auto;
-			vertical-align: middle;
-		}
-	}
-}
-
-.ui-autocomplete {
-	background: white;
-	border: solid 1px #ccc;
-	box-shadow: 0px 1px 5px -4.5px rgba(0, 0, 0, 0.95);
-	max-width: 260px;
-	padding: 0;
-	width: auto !important;
-	z-index: 999 !important;
-
-	&.autocompleteopen {
-		display: table !important;
-	}
-
-	li {
-		padding: 12px 32px 12px 16px;
-		overflow: hidden;
-		font-size: 0.9em !important;
-
-		&:nth-child(2n) {
-			background-color: $color-gray4;
-		}
-		a {
-			font-size: 14px;
-			cursor: pointer;
-		}
-		img {
-			margin-right: 10px;
-			width: auto;
-			vertical-align: middle;
 		}
 	}
 }

src/arquivos/sass/partials/_menu.scss

@@ -1,514 +1,15 @@
-/***************************************************************/
+.menu {
-/**-- Menu    ------------------------------********************/
+	&__button {
-/*-------------------------------------------------------------*/
-
-.menu-principal {
-	position: initial;
-
-	@include mq(lg, max) {
-		background-color: $color-white;
-		box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05);
-		bottom: 0;
-		left: 0;
-		margin-left: -100%;
-		max-width: 375px;
-		overflow: hidden;
-		opacity: 0;
 		padding: 0;
-		position: fixed;
+		border: 0;
-		top: 0;
+		outline: 0;
-		transition: all 0.45s ease-in-out;
-		visibility: hidden;
-		width: 100%;
-		z-index: map-get($z-index, menu);
-	}
-
-	@include mq_range(lg, xl) {
-		padding-right: 0;
-	}
-
-	&.mobile-open {
-		margin-left: 0;
-		opacity: 1;
-		visibility: visible;
-	}
-
-	.header-menu-mobile {
-		display: none;
-		border-bottom: 1px solid $color-gray4;
-		padding: 22px 15px 0;
-		margin: 0 -15px;
-
-		@include mq(lg, max) {
-			display: block;
-		}
-
-		p {
-			display: inline-block;
-			font-size: 12px;
-			letter-spacing: 0.5px;
-			margin: 0;
-			text-transform: uppercase;
-			padding: 0 16px;
-		}
-
-		#close-menu-button {
 		background: transparent;
-			border: none;
-			cursor: pointer;
-			display: inline-block;
-			right: 16px;
-			outline: none;
-			position: absolute;
-			top: 17px;
-
-			&::before {
-				border-left: 1px solid $color-gray4;
-				content: "";
-				display: block;
-				height: 36px;
-				position: absolute;
-				left: -20px;
-				top: -6px;
-			}
-
-			span {
-				display: block;
-				padding: 12px;
-				position: relative;
-
-				&::before,
-				&::after {
-					border: 1px solid $color-black2;
-					content: "";
-					display: block;
-					left: 0;
-					position: absolute;
-					top: 12px;
-					width: 24px;
-				}
-
-				&::before {
-					transform: rotate(45deg);
-				}
-
-				&::after {
-					transform: rotate(-45deg);
-				}
-			}
-		}
-
-		.busca {
-			background-color: $color-gray4;
-			border-top: 1px solid $color-gray6;
-			border-bottom: none;
-			max-width: 100%;
-			margin-top: 22px;
-			padding: 10px 0;
-		}
-	}
-
-	.itens {
-		font-size: 14px;
-		margin: 0;
-
-		@include mq(lg, max) {
-			bottom: 64px;
-			left: 0;
-			overflow-y: auto;
-			overflow-x: hidden;
-			position: absolute;
-			top: 117px;
-			width: 100%;
-		}
-
-		&::-webkit-scrollbar {
-			width: 6px;
-		}
-
-		&::-webkit-scrollbar-track {
-			background-color: $color-gray;
-		}
-
-		&::-webkit-scrollbar-thumb {
-			background-color: $color-gray3;
-		}
-
-		&::-webkit-scrollbar-thumb:hover {
-			background-color: darken($color-gray3, 10);
-		}
-
-		> li {
-			display: inline-block;
-			line-height: 18px;
-			text-align: left;
-			vertical-align: top;
-
-			@include mq(lg, max) {
-				align-items: center;
-				display: flex;
-				justify-content: space-between;
-				padding: 0 24px;
-				border-bottom: 1px solid $color-gray4;
-
-				a {
-					font-size: 16px;
-					padding: 17px 0px;
-					width: 100%;
-				}
-			}
-
-			&:hover {
-				> a::after {
-					@include mq(lg, min) {
-						border-bottom-color: $color-pink;
-						border-width: 4px;
-					}
-				}
-			}
-
-			&:not(:last-child) {
-				@include mq(lg, min) {
-					border-right: 1px solid $color-black;
-					margin-right: 24px;
-					padding-right: 24px;
-				}
-
-				@include mq_range(lg, xl) {
-					margin-right: 16px;
-					padding-right: 16px;
-				}
-			}
-
-			> a {
-				display: inline-block;
-				position: relative;
-
-				&:after {
-					@include mq(lg, min) {
-						bottom: 0;
-						border-bottom: 1px solid transparent;
-						content: "";
-						left: 0;
-						position: absolute;
-						right: 0;
-						transition: all 0.15s ease-in-out;
-						width: 100%;
-					}
-				}
-			}
-
-			.ver-departamento {
-				background-color: transparent;
-				border: none;
-				cursor: pointer;
-				display: inline-block;
-				text-indent: -9999px;
-				overflow: hidden;
-				font-size: 0;
-				outline: none;
-				opacity: 0.75;
-
-				&:before {
-					@include pseudo(block, relative);
-					@extend .sprite;
-					@extend .sprite-arrow-right-gray;
-				}
 
 		@include mq(lg, min) {
 			display: none;
 		}
 	}
-		}
+	.main-menu {
-
-		a {
-			color: $color-black2;
-			display: inline-block;
-		}
-
-		.highlight {
-			color: $color-pink;
-			font-weight: 700;
-
-			&::before {
-				content: "";
-				left: -20.5px;
-				position: absolute;
-				top: -2px;
-				@extend .sprite;
-				@extend .sprite-pinrinpinpin;
-
-				@include mq(lg, max) {
-					top: 13px;
-				}
-			}
-		}
-	}
-
-	.footer-menu-mobile {
-		background-color: $color-pink;
-		bottom: 0;
-		left: 0;
-		padding: 17.5px 15px;
-		position: absolute;
-		right: 0;
-		text-align: center;
-
-		@include mq(lg, min) {
 		display: none;
 	}
-
-		a {
-			color: $color-white;
-			font-size: 12px;
-			text-transform: uppercase;
-
-			i {
-				margin-right: 18px;
-			}
-		}
-	}
-
-	.m3-dropdown {
-		&:hover {
-			.m3-dropdown-menu {
-				@include mq(lg, min) {
-					max-height: 1000px;
-					opacity: 1;
-					top: 100%;
-					visibility: visible;
-				}
-
-				&::before {
-					visibility: visible;
-				}
-			}
-		}
-
-		.m3-dropdown-menu {
-			background-color: $color-white;
-			max-height: 0;
-			opacity: 0;
-			transition: all 0.4s ease-in-out;
-			visibility: hidden;
-			z-index: map-get($z-index, menu);
-			position: absolute;
-			left: 0;
-			right: 0;
-			width: 100%;
-
-			@include mq(lg, max) {
-				border-bottom: 1px solid $color-gray4;
-				bottom: 64px;
-				margin-left: 100%;
-				max-height: initial;
-				overflow-y: auto;
-				top: 0px;
-				transition: all 0.4s ease-in-out, top 0s ease-in-out;
-			}
-
-			@include mq(lg, min) {
-				background: rgba(255, 255, 255, 0.95);
-				border-top: 1px solid $color-gray;
-				box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.02);
-				padding: 45px 0px 37px;
-				top: 70%;
-				transition: all 0.2s ease-in-out;
-			}
-
-			&::before {
-				content: "";
-				position: absolute;
-				left: 0;
-				right: 0;
-				top: -44px;
-				padding: 22px;
-				visibility: hidden;
-
-				@include mq(lg, max) {
-					display: none;
-				}
-			}
-
-			&::-webkit-scrollbar {
-				width: 6px;
-			}
-
-			&::-webkit-scrollbar-track {
-				background-color: $color-gray;
-			}
-
-			&::-webkit-scrollbar-thumb {
-				background-color: $color-gray3;
-			}
-
-			&::-webkit-scrollbar-thumb:hover {
-				background-color: darken($color-gray3, 10);
-			}
-
-			.btn-voltar {
-				border-bottom: 1px solid $color-gray4;
-				padding: 7px 24px;
-
-				@include mq(lg, min) {
-					display: none;
-				}
-
-				button {
-					background-color: transparent;
-					border: none;
-					cursor: pointer;
-					font-size: 14px;
-					font-weight: 700;
-					outline: none;
-					padding: 0;
-					text-transform: uppercase;
-
-					i {
-						transform: scale(0.5);
-					}
-
-					span {
-						display: inline-block;
-						margin-left: 4px;
-						padding-top: 3px;
-					}
-				}
-			}
-
-			> div {
-				@include mq(lg, min) {
-					align-items: center;
-					display: flex;
-					justify-content: flex-start;
-				}
-
-				.links-menu {
-					min-width: 38%;
-
-					@include mq(lg, max) {
-						padding: 0px 9px 36px;
-					}
-
-					@include mq(lg, min) {
-						border-left: 1px solid $color-black;
-						padding-left: 16px;
-					}
-
-					.link-departamento {
-						@include mq(lg, max) {
-							padding-top: 36px;
-						}
-					}
-				}
-
-				.elementos-menu {
-					max-width: 438px;
-					width: 100%;
-
-					@include mq(lg, max) {
-						display: none;
-					}
-
-					img {
-						border-bottom: 5px solid $color-black4;
-					}
-				}
-			}
-
-			ul {
-				display: inline-block;
-
-				&:hover li {
-					opacity: 0.75;
-				}
-
-				li:hover {
-					opacity: 1;
-				}
-			}
-
-			li {
-				transition: all 0.1s ease-in-out;
-
-				&:not(:last-child) {
-					@include mq(lg, min) {
-						margin-bottom: 16px;
-					}
-				}
-
-				@include mq(lg, max) {
-					margin: 0;
-				}
-
-				&.link-departamento {
-					font-size: 24px;
-					font-weight: 700;
-					margin-bottom: 24px;
-
-					@include mq(lg, max) {
-						margin-bottom: 16px;
-						text-transform: lowercase;
-
-						a {
-							border-bottom: 4px solid $color-pink;
-							font-size: 18px;
-							padding: 0;
-						}
-					}
-				}
-
-				&.ver-todos {
-					a {
-						color: $color-pink;
-						font-weight: 700;
-
-						@include mq(lg, max) {
-							font-size: 16px;
-						}
-					}
-
-					i {
-						transform: scale(0.325);
-					}
-				}
-			}
-
-			@include mq(lg, max) {
-				a {
-					font-size: 14px;
-					padding: 8px 0;
-					width: auto;
-				}
-			}
-		}
-	}
-
-	.has-sub-menu-open {
-		@include mq(lg, max) {
-			position: initial;
-			transition: position 0.2s ease-in-out;
-		}
-
-		.m3-dropdown-menu {
-			@include mq(lg, max) {
-				top: 117px;
-			}
-		}
-	}
-
-	.sub-menu-open {
-		.m3-dropdown-menu {
-			@include mq(lg, max) {
-				margin-left: 0;
-				opacity: 1;
-				visibility: visible;
-			}
-		}
-
-		> a:before {
-			opacity: 1;
-			transform: rotate(90deg) scale(0.5);
-		}
-	}
 }

src/arquivos/sass/partials/_prateleira.scss

@@ -79,7 +79,7 @@
 		}
 
 		button {
-			background-color: $color-black2;
+			background-color: #142032;
 			border: none;
 			cursor: pointer;
 			height: 10px;

src/arquivos/sass/utils/_normalize.scss

@@ -23,7 +23,7 @@ html {
    */
 
 body {
-	color: $color-black2;
+	color: #142032;
 	margin: 0;
 }
 

src/arquivos/sass/utils/_variaveis.scss

@@ -1,17 +1,17 @@
 // fonts
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap");
 
-$font-family: "Roboto", sans-serif;
+$font-family: "Inter", sans-serif;
 $font-weight-light: 300;
 $font-weight-regular: 400;
 $font-weight-heavy: 700;
 $font-height: 1.5;
 
 // colors
-$color-black: #000;
+$black-500: #000;
-$color-black2: #142032;
+$white-500: #fff;
-$color-black3: #19273d;
+$blue-500: #00c8ff;
-$color-black4: #151728;
+$gray-500: #333333;
-
 $color-gray: hsla(0, 0%, 90%, 1);
 $color-gray2: hsla(220, 1%, 43%, 1);
 $color-gray3: hsl(0, 0%, 77%);

src/template-pagina/savio-home.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:vtex="http://www.vtex.com.br/2009/vtex-common"
+	xmlns:vtex.cmc="http://www.vtex.com.br/2009/vtex-commerce" lang="pt-br">
+
+<head>
+	<meta name="page" content="home" page-id="homepage" />
+	<meta charset="utf-8" />
+	<meta http-equiv="x-ua-compatible" content="ie=edge" />
+	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+	<vtex:metaTags />
+	<title>M3 - Savio</title>
+
+	<vtex:template id="savio-loads-header" />
+
+</head>
+
+<body>
+
+	<vtex:template id="savio-header" />
+
+	<main class="home">
+
+	</main>
+
+	<footer>
+		<vtex:template id="savio-footer-newsletter" />
+		<vtex:template id="savio-footer-links" />
+		<vtex:template id="savio-footer" />
+	</footer>
+	<vtex:template id="savio-loads-footer" />
+</body>
+
+</html>

src/template-pagina/sub-templates/savio-header.html

@@ -0,0 +1,34 @@
+<header class="page-header">
+	<div class="container">
+		<div class="page-header__wrapper">
+			<div class="menu">
+				<button class="menu__button">
+					<i class="sprite sprite-menu-icon"></i>
+				</button>
+				<nav class="main-menu"></nav>
+			</div>
+
+			<a href="/">
+				<img class="page-header__logo" src="/arquivos/m3-savio-logo.png" alt="Logo M3 Savio" />
+			</a>
+			<div class="user-items">
+				<div class="user-items__search-box">
+					<vtex.cmc:fullTextSearchBox />
+				</div>
+
+				<a class="user-items__account-link" href="/account">
+					<i class="sprite sprite-user-icon"></i>
+				</a>
+				<button class="user-items__minicart-button">
+					<i class="sprite sprite-bag-icon"></i>
+					<vtex.cmc:AmountItemsInCart />
+				</button>
+			</div>
+		</div>
+	</div>
+	<div class="page-header__search-box">
+		<div class="container">
+			<vtex.cmc:fullTextSearchBox />
+		</div>
+	</div>
+</header>

src/template-pagina/sub-templates/savio-loads-footer.html

@@ -2,4 +2,4 @@
 <script src="https://cdn.jsdelivr.net/npm/proxy-polyfill@0.3.1/proxy.min.js"
 	integrity="sha256-aRX3NIXjCxT51wF6s9KHLiFrf5E0n1YzvDLAMzeAVzA=" crossorigin="anonymous"></script>
 
-<script src="/arquivos/template--main-bundle.js" async="async"></script>
+<script src="/arquivos/savio--main-bundle.js" async="async"></script>

src/template-pagina/sub-templates/savio-loads-header.html

@@ -3,4 +3,4 @@
 <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
 <![endif]-->
 
-<link rel="stylesheet" href="/arquivos/template--main.css" />
+<link rel="stylesheet" href="/arquivos/savio--main.css" />

src/template-pagina/sub-templates/template-footer-simples.html

@@ -1,47 +0,0 @@
-<section class=" footer">
-	<div class="selos">
-		<div class="container-fluid">
-			<div class="row">
-				<div class="col-12">
-					<ul class="pagamento">
-						<li><i class="sprite sprite-master"></i></li>
-						<li><i class="sprite sprite-visa"></i></li>
-						<li><i class="sprite sprite-diners"></i></li>
-						<li><i class="sprite sprite-elo"></i></li>
-						<li><i class="sprite sprite-hiper"></i></li>
-						<li><i class="sprite sprite-pagseguro"></i></li>
-						<li><i class="sprite sprite-boleto"></i></li>
-					</ul>
-					<ul class="certificados">
-						<li><i class="sprite sprite-vtex-pci"></i></li>
-						<li><i class="sprite sprite-google-safe-browser"></i></li>
-					</ul>
-				</div>
-			</div>
-		</div>
-	</div>
-	<div class="container-fluid razao">
-		<div class="row">
-			<div class="col-12 col-md-6 cnpj">
-				<p>
-					Copyright &#9400; 2019 - Loja Sweeter Comércio Eletrônico | <span>CNPJ: 000.000.000/0001-00</span>
-				</p>
-				<p>
-					Rua 7 de Setembro, 3795 Centro - São Paulo/SP
-				</p>
-			</div>
-			<div class="col-12 col-md-6 desenvolvimento">
-				<a href="#" target="_blank">
-					<i class="sprite sprite-varejo-tech"></i>
-				</a>
-				<a href="#" target="_blank">
-					<i class="sprite sprite-vtex"></i>
-				</a>
-				<a href="https://digitalm3.com.br/" target="_blank">
-					<span>Developed by </span>
-					<i class="sprite sprite-m3"></i>
-				</a>
-			</div>
-		</div>
-	</div>
-</section>

src/template-pagina/sub-templates/template-header-simples.html

@@ -1,16 +0,0 @@
-<header class="header-simples">
-	<div class="container-fluid">
-		<div class="row  justify-content-between" >
-			<div class="col-12 col-sm-6">
-				<a href="/" class="logo">
-					<img src="/arquivos/template-logo.png" alt="VTEX"/>
-				</a>
-			</div>
-			<div class="col ">
-				<div class="compra-segura">
-					<span><i class="sprite sprite-cadeado"></i>Compra 100% segura</span>
-				</div>
-			</div>
-		</div>
-	</div>
-</header>

src/template-pagina/sub-templates/template-header.html

@@ -1,160 +0,0 @@
-<header class="header">
-	<div class="pink-bar">
-		<div class="container">
-			<div class="row">
-				<div class="col-12">
-					<ul>
-						<li>
-							<a href="#">
-								<i class="sprite sprite-map-pointer-white"></i>
-								Guide Shop
-							</a>
-						</li>
-						<li>
-							<a href="/account">
-								Meus pedidos
-							</a>
-						</li>
-					</ul>
-				</div>
-			</div>
-		</div>
-	</div>
-	<div class="principal">
-		<div class="container">
-			<div class="row">
-				<div class="col-4 menu-mobile-abrir">
-					<button aria-label="Abrir Menu" id="open-menu-button">
-						<i class="sprite sprite-menu"></i>
-					</button>
-				</div>
-				<div class="col-12 col-md-5 menu-principal">
-					<div class="header-menu-mobile">
-						<p>
-							<i class="sprite sprite-cadeado"></i>
-							<span>Compra 100% segura</span>
-						</p>
-						<button aria-label="Fechar Menu" id="close-menu-button">
-							<span></span>
-						</button>
-						<div class="fullTextSearchBox">
-							<vtex.cmc:fullTextSearchBox />
-						</div>
-					</div>
-					<nav role="navigation">
-						<ul class="itens nav navbar-nav" itemscope="itemscope"
-							itemtype="http://www.schema.org/SiteNavigationElement">
-							<li class="novidades" itemprop="name">
-								<a itemprop="url" class="titulo-departamento highlight"
-									href="/busca/?fq=H:143&#38;O=OrderByReleaseDateDESC" title="novidades">
-									novidades
-								</a>
-							</li>
-							<li class="calcados m3-dropdown" itemprop="name">
-								<a itemprop="url" class="titulo-departamento" href="/calcados" title="calçados">
-									calçados
-								</a>
-								<button class="ver-departamento">Abir departamento</button>
-								<div class="m3-dropdown-menu">
-									<div class="btn-voltar">
-										<button>
-											<i class="sprite sprite-arrow-left"></i>
-											<span>
-												Voltar
-											</span>
-										</button>
-									</div>
-									<div class="container">
-										<div class="links-menu">
-											<ul>
-												<li itemprop="name" class="link-departamento">
-													<a itemprop="url" href="/calcados" title="Calçados">
-														Calçados
-													</a>
-												</li>
-												<li itemprop="name">
-													<a itemprop="url" href="/calcados/sapatilha" title="Sapatilha">
-														Sapatilha
-													</a>
-												</li>
-												<li itemprop="name">
-													<a itemprop="url" href="/calcados/tenis" title="Tênis">
-														Tênis
-													</a>
-												</li>
-												<li itemprop="name">
-													<a itemprop="url" href="/calcados/scarpin" title="Scarpin">
-														Scarpin
-													</a>
-												</li>
-												<li itemprop="name">
-													<a itemprop="url" href="/calcados/bota" title="Bota">
-														Bota
-													</a>
-												</li>
-												<li itemprop="name" class="ver-todos">
-													<a itemprop="url" href="/calcados" title="ver todos">
-														ver todos
-														<i class="sprite sprite-arrow-right"></i>
-													</a>
-												</li>
-											</ul>
-										</div>
-									</div>
-								</div>
-							</li>
-							<li class="sapatilha" itemprop="name">
-								<a itemprop="url" class="titulo-departamento" href="/calcados/sapatilha" title="sapatilha">
-									sapatilha
-								</a>
-							</li>
-							<li class="tênis" itemprop="name">
-								<a itemprop="url" class="titulo-departamento" href="/calcados/tenis" title="tênis">
-									tênis
-								</a>
-							</li>
-						</ul>
-					</nav>
-					<div class="footer-menu-mobile">
-						<a href="">
-							<i class="sprite sprite-user-white"></i>
-							<span>Entrar/Meus pedidos</span>
-						</a>
-					</div>
-				</div>
-				<div class="col-4 col-md-2 logo">
-					<a href="/" title="VTEX"><img src="/arquivos/template-logo.png" alt="VTEX" /></a>
-				</div>
-				<div class="col-4 col-md-5 util-links">
-					<div class="busca-desktop">
-						<div class="fullTextSearchBox">
-							<vtex.cmc:fullTextSearchBox />
-						</div>
-					</div>
-					<div class="links-usuario">
-						<a href="/account" title="minha-conta">
-							<i class="sprite sprite-user"></i>
-						</a>
-					</div>
-					<div class="carrinho">
-						<a href="/checkout/#cart">
-							<div class="AmountItemsInCart">
-								<i class="sprite sprite-shopping-bag"></i>
-								<vtex.cmc:AmountItemsInCart />
-							</div>
-						</a>
-						<div class="mini-cart">
-						</div>
-					</div>
-				</div>
-			</div>
-			<div class="row">
-				<div class="col-12 busca-mobile">
-					<div class="fullTextSearchBox">
-						<vtex.cmc:fullTextSearchBox />
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
-</header>

src/template-pagina/template-home.html

@@ -1,127 +0,0 @@
-<!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml" xmlns:vtex="http://www.vtex.com.br/2009/vtex-common"
-	xmlns:vtex.cmc="http://www.vtex.com.br/2009/vtex-commerce" lang="pt-br">
-
-<head>
-	<meta name="page" content="home" page-id="homepage" />
-	<meta charset="utf-8" />
-	<meta http-equiv="x-ua-compatible" content="ie=edge" />
-	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-	<vtex:metaTags />
-	<vtex:contentPlaceHolder id="htmlSeo" />
-	<title>Template</title>
-
-	<vtex:template id="template-loads-header" />
-
-</head>
-
-<body>
-
-	<vtex:template id="template-header" />
-
-	<main class="home">
-
-		<section class="main-gallery">
-			<div class="desktop">
-				<vtex:contentPlaceHolder id="slide-principal" />
-			</div>
-			<div class="mobile">
-				<vtex:contentPlaceHolder id="slide-principal-mobile" />
-			</div>
-		</section>
-
-		<section class="container tipbar">
-			<div class="row">
-				<div class="col-12">
-					<ul>
-						<li>
-							<i class="sprite sprite-credit-card"></i>
-							<p>
-								parcelamento
-								<span>
-									até <strong>10x sem juros</strong>
-								</span>
-							</p>
-						</li>
-						<li>
-							<i class="sprite sprite-truck"></i>
-							<p>
-								frete grátis
-								<span>
-									acima de <strong>R$399,00</strong>
-								</span>
-							</p>
-						</li>
-						<li>
-							<i class="sprite sprite-discount-tag"></i>
-							<p>
-								desconto de
-								<span>
-									<strong>10%off</strong> no boleto
-								</span>
-							</p>
-						</li>
-					</ul>
-				</div>
-			</div>
-		</section>
-
-		<section class="container mosaico-home">
-			<div class="row">
-				<div class="banners-left banner col-12 col-md-4">
-					<vtex:contentPlaceHolder id="banner-01" />
-				</div>
-				<div class="banners-right col-12 col-md-8 row">
-					<div class="banner col-12 col-md-6">
-						<vtex:contentPlaceHolder id="banner-02" />
-					</div>
-					<div class="banner col-12 col-md-6">
-						<vtex:contentPlaceHolder id="banner-03" />
-					</div>
-					<div class="banner col-12">
-						<vtex:contentPlaceHolder id="banner-04" />
-					</div>
-				</div>
-			</div>
-		</section>
-
-		<section class="instagramGallery">
-			<div class="container">
-				<div class="instagramGallery__row">
-					<div class="instagramGallery__photos"></div>
-
-					<div class="instagramGallery__link">
-						<i class="sprite sprite-instagram-black"></i>
-
-						<p>
-							<i>#</i>osqueridinhos
-
-							<a href="#" target="_blank">
-								ver todos <i class="sprite sprite-arrow-right"></i>
-							</a>
-						</p>
-					</div>
-				</div>
-			</div>
-		</section>
-
-		<section class="container mosaico-home-footer">
-			<div class="banner desktop">
-				<vtex:contentPlaceHolder id="banner-05" />
-			</div>
-			<div class="banner mobile">
-				<vtex:contentPlaceHolder id="mobile-banner-05" />
-			</div>
-		</section>
-
-	</main>
-
-	<footer>
-		<vtex:template id="template-footer-newsletter" />
-		<vtex:template id="template-footer-links" />
-		<vtex:template id="template-footer" />
-	</footer>
-	<vtex:template id="template-loads-footer" />
-</body>
-
-</html>