feat: Cria a area de banners principais

meta/pages/home.js

@@ -1,19 +1,7 @@
 module.exports = {
 	contentPlaceHolders: [
 		{
-			// Registra  o contentPlaceholder
+			id: "banners-principal-desktop",
-			id: "htmlSeo",
-			objects: [
-				//  Registra os objetos vtex
-				{
-					type: "html",
-					name: "Html SEO",
-					contents: [],
-				},
-			],
-		},
-		{
-			id: "slide-principal",
 			objects: [
 				{
 					type: "banner",
@@ -23,33 +11,59 @@ module.exports = {
 							name: "banner principal content",
 							active: true,
 							type: "image",
-							file: "slide-principal.png",
+							file: "banner-desktop.png",
-							width: 1920,
+							width: 1440,
-							height: 500,
+							height: 532,
-							//   "category": "*",
-							//   "brand": "*"
-							//   "period": ""
 						},
 					],
 				},
 				{
 					type: "banner",
-					name: "banner principal-2",
+					name: "banner principal",
 					contents: [
 						{
 							name: "banner principal content",
 							active: true,
 							type: "image",
-							file: "slide-principal.png",
+							file: "banner-desktop.png",
-							width: 1920,
+							width: 1440,
-							height: 500,
+							height: 532,
 						},
 					],
 				},
+				{
+					type: "banner",
+					name: "banner principal",
+					contents: [
+						{
+							name: "banner principal content",
+							active: true,
+							type: "image",
+							file: "banner-desktop.png",
+							width: 1440,
+							height: 532,
+						},
+					],
+				},
+				{
+					type: "banner",
+					name: "banner principal",
+					contents: [
+						{
+							name: "banner principal content",
+							active: true,
+							type: "image",
+							file: "banner-desktop.png",
+							width: 1440,
+							height: 532,
+						},
+					],
+				},
+
 			],
 		},
 		{
-			id: "slide-principal-mobile",
+			id: "banners-principal-mobile",
 			objects: [
 				{
 					type: "banner",
@@ -59,23 +73,49 @@ module.exports = {
 							name: "banner principal mobile content",
 							active: true,
 							type: "image",
-							file: "slide-principal-mobile.png",
+							file: "banner-mobile.png",
-							width: 500,
+							width: 375,
-							height: 500,
+							height: 342,
 						},
 					],
 				},
 				{
 					type: "banner",
-					name: "banner principal mobile 2",
+					name: "banner principal mobile",
 					contents: [
 						{
-							name: "banner principal mobile 2 content",
+							name: "banner principal mobile content",
 							active: true,
 							type: "image",
-							file: "slide-principal-mobile.png",
+							file: "banner-mobile.png",
-							width: 500,
+							width: 375,
-							height: 500,
+							height: 342,
+						},
+					],
+				},{
+					type: "banner",
+					name: "banner principal mobile",
+					contents: [
+						{
+							name: "banner principal mobile content",
+							active: true,
+							type: "image",
+							file: "banner-mobile.png",
+							width: 375,
+							height: 342,
+						},
+					],
+				},{
+					type: "banner",
+					name: "banner principal mobile",
+					contents: [
+						{
+							name: "banner principal mobile content",
+							active: true,
+							type: "image",
+							file: "banner-mobile.png",
+							width: 375,
+							height: 342,
 						},
 					],
 				},

src/arquivos/js/app/pages/Home.js

@@ -1,38 +1,21 @@
-import {
+import slickConfig from 'Config/slick';
-	bannerHome,
-	barraDeVantagens,
-	naveguePorCategorias,
-} from "App/functions/slide";
-
-import InstagramGallery from "../components/InstagramGallery";
 
 export default class Home {
 	constructor() {
-		bannerHome(".main-gallery");
+		this.selectors();
-		barraDeVantagens(".tipbar ul");
+		this.createSliders();
-		naveguePorCategorias(".categorias-home .categorias");
-
-		new InstagramGallery({
-			gallery: ".instagramGallery__photos",
-			account: "agenciam3",
-			limit: 6,
-		});
 	}
 
-	naveguePorCategorias() {
+	selectors() {
-		// preencher titulos
+		this.desktopMainBanners = $(".main-banners__desktop");
-		var $container = $(".home-categories .categorias");
+		this.mobileMainBanners = $(".main-banners__mobile");
-		$container.find(".box-banner").each(function (i, el) {
-			const $banner = $(el);
-			let name;
-
-			name = $banner.find("img").prop("alt");
-			let $titulo = $("<span />", {
-				text: name,
-				class: "nome-categoria",
-			});
-			$banner.find("img").after($titulo);
-		});
-		slide.naveguePorCategorias($container);
 	}
+
+	createSliders() {
+		this.desktopMainBanners.slick(slickConfig.home.bannerDesktop);
+		this.mobileMainBanners.slick(slickConfig.home.bannerMobile);
+	}
+
+
+
 }

src/arquivos/js/config/slick.js

@@ -2,14 +2,14 @@ export default {
 	home: {
 		bannerDesktop: {
 			dots: true,
-			arrows: false,
+			arrows: true,
-			pauseOnHover: false,
+			pauseOnHover: true,
 			autoplay: true,
 			autoplaySpeed: 6000,
 		},
 		bannerMobile: {
 			dots: true,
-			arrows: false,
+			arrows: true,
 			pauseOnHover: false,
 			autoplay: true,
 			autoplaySpeed: 6000,

src/arquivos/sass/pages/_home.scss

@@ -1,177 +1,99 @@
-/***************************************************************/
-/**-- Home ---------------------------------********************/
-/*-------------------------------------------------------------*/
-
 .home {
-	.main-gallery {
+	.main-banners {
-		> div {
-			&:not(.slick-initialized) {
-				.box-banner {
-					&:not(:first-child) {
-						display: none;
-					}
-				}
-			}
-
-			&.desktop {
-				@include mq(md, max) {
-					display: none;
-				}
-			}
-
-			&.mobile {
-				@include mq(md, min) {
-					display: none;
-				}
-			}
-		}
 
 		img {
-			width: 100%;
+			 width: 100%;
 		}
 		
-		.slick-next,
+		&__desktop {
-		.slick-prev {
+			@include mq(md, max) {
-			@extend .sprite;
+				display: none;
-			background-color: transparent;
+			}
-			border: none;
+		}
-			cursor: pointer;
+
-			font-size: 0;
+		&__mobile {
-			outline: none;
+			@include mq(md, min) {
-			padding: 0;
+				display: none;
+			}
+		}
+
+		.slick-arrow {
 			position: absolute;
-			top: 40%;
+			top: 50%;
-			transform: scale(0.7);
+			transform: translateY(-50%);
-			z-index: 1;
+			z-index: 5;
+			padding: 0;
+			border: 0;
+			font-size: 0;
+			background-color: transparent;
+			outline: 0;
+			cursor: pointer;
+			@extend .sprite;
+
+			@include mq(md, max) {
+				transform: translateY(-50%) scale(0.7);
+
+			}
+
+		}
+
+		.slick-prev {
+			left: 24px;
+
+			@extend .sprite-arrow-left-slide;
+
+			@include mq(md, max) {
+				left: 16px;
+				transform-origin: left;
+			}
 		}
 
 		.slick-next {
-			@extend .sprite;
+			right: 24px;
-			@extend .sprite-circled-arrow-right;
+			@extend .sprite-arrow-right-slide;
-			left: auto;
-			right: 8px;
-		}
 
-		.slick-prev {
+			@include mq(md, max) {
-			@extend .sprite;
+				right: 16px;
-			@extend .sprite-circled-arrow-left;
+				transform-origin: right;
-			right: auto;
+			}
-			left: 8px;
 		}
 
 		.slick-dots {
-			bottom: 20px;
+			display: flex !important;
+			align-items: center;
+			justify-content: center;
 			position: absolute;
-			pointer-events: none;
+			z-index: 5;
-			text-align: center;
-			width: 100%;
 
-			&,
+			margin: 0;
-			li {
+			width: 100%;
-				align-items: center;
+			bottom: 14px;
-				display: flex !important;
+			left: 0;
-				justify-content: center;
+
+			@include mq(md, max ) {
+				bottom: 9px;
 			}
 
 			li {
-				display: inline-block;
+				display: flex;
 				margin: 0 4px;
+
+				.slick-active {
+					width: 16px;
+					height: 16px;
+					border: 11ps solid $white-500;
+					background: transparent;
+				}
 			}
 
 			button {
-				background-color: $color-black2;
-				border: none;
-				cursor: pointer;
-				height: 10px;
-				outline: none;
 				padding: 0;
-				pointer-events: all;
+				border: 0;
-				transition: all 0.15s ease-in-out;
+				outline: 0;
+				background: $white-500;
+
 				width: 10px;
-			}
+				height: 10px;
-
-			.slick-active {
-				button {
-					background-color: $color-pink;
-					height: 16px;
-					width: 16px;
-				}
-			}
-		}
-	}
-
-	.banner {
-		&.desktop {
-			@include mq(md, max) {
-				display: none;
-			}
-		}
-
-		&.mobile {
-			@include mq(md, min) {
-				display: none;
-			}
-		}
-
-		img {
-			width: 100%;
-		}
-	}
-
-	.mosaico-home,
-	.mosaico-home-footer {
-		@include mq(md, max) {
-			padding: 0;
-		}
-
-		@include mq_range(md, xl) {
-			max-width: 100%;
-		}
-
-		.row {
-			@include mq(md, max) {
-				margin: 0;
-			}
-		}
-	}
-
-	.mosaico-home {
-		> .row {
-			@include mq(md, min) {
-				margin-left: 0;
-			}
-		}
-
-		.banner {
-			padding: 0 0 40px;
-
-			@include mq(md, min) {
-				padding: 0 10px;
-			}
-
-			img {
-				width: 100%;
-			}
-		}
-
-		.banners-left {
-			@include mq(md, min) {
-				padding-left: 0px;
-				padding-right: 12px;
-			}
-		}
-
-		.banners-right {
-			padding: 0;
-
-			.banner {
-				padding-right: 0;
-
-				&:nth-child(2) {
-					@include mq(md, min) {
-						padding-left: 8px;
-					}
-				}
 			}
 		}
 	}

src/template-pagina/template-home.html

@@ -11,7 +11,6 @@
 		<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>Nicolly</title>
 
 		<vtex:template id="template-loads-header" />
@@ -20,7 +19,16 @@
 	<body>
 		<vtex:template id="template-header" />
 
-		<main class="home" style="height: 300px;"></main>
+		<main class="home">
+			<section class="main-banners">
+				<div class="main-banners__desktop">
+					<vtex:contentPlaceHolder id="banners-principal-desktop" />
+				</div>
+				<div class="main-banners__mobile">
+					<vtex:contentPlaceHolder id="banners-principal-mobile" />
+				</div>
+			</section>
+		</main>
 
 		<footer>
 			<vtex:template id="template-footer-newsletter" />