diff --git a/meta/pages/home.js b/meta/pages/home.js
index fa8d3b6..3b881aa 100644
--- a/meta/pages/home.js
+++ b/meta/pages/home.js
@@ -1,31 +1,20 @@
module.exports = {
contentPlaceHolders: [
{
- // Registra o contentPlaceholder
- id: "htmlSeo",
- objects: [
- // Registra os objetos vtex
- {
- type: "html",
- name: "Html SEO",
- contents: [],
- },
- ],
- },
- {
- id: "slide-principal",
+ id: "banners-principais-desktop",
objects: [
+ // cada objeto dento do array será um banner
{
type: "banner",
- name: "banner principal",
+ name: "Banner Principal Desktop 01",
contents: [
{
- name: "banner principal content",
+ name: "Banner Principal Desktop 01",
active: true,
type: "image",
- file: "slide-principal.png",
- width: 1920,
- height: 500,
+ file: "banner-principal.png",
+ width: 1440,
+ height: 532,
// "category": "*",
// "brand": "*"
// "period": ""
@@ -34,48 +23,125 @@ module.exports = {
},
{
type: "banner",
- name: "banner principal-2",
+ name: "Banner Principal Desktop 02",
contents: [
{
- name: "banner principal content",
+ name: "Banner Principal Desktop 02",
active: true,
type: "image",
file: "slide-principal.png",
- width: 1920,
- height: 500,
+ width: 1440,
+ height: 532,
+ // "category": "*",
+ // "brand": "*"
+ // "period": ""
+ },
+ ],
+ },
+ {
+ type: "banner",
+ name: "Banner Principal Desktop 03",
+ contents: [
+ {
+ name: "Banner Principal Desktop 03",
+ active: true,
+ type: "image",
+ file: "banner-principal.png",
+ width: 1440,
+ height: 532,
+ // "category": "*",
+ // "brand": "*"
+ // "period": ""
+ },
+ ],
+ },
+ {
+ type: "banner",
+ name: "Banner Principal Desktop 04",
+ contents: [
+ {
+ name: "Banner Principal Desktop 04",
+ active: true,
+ type: "image",
+ file: "slide-principal.png",
+ width: 1440,
+ height: 532,
+ // "category": "*",
+ // "brand": "*"
+ // "period": ""
},
],
},
],
},
{
- id: "slide-principal-mobile",
+ id: "banners-principais-mobile",
objects: [
{
type: "banner",
- name: "banner principal mobile",
+ name: "Banner Principal Mobile 01",
contents: [
{
- name: "banner principal mobile content",
+ name: "Banner Principal Mobile 01",
active: true,
type: "image",
- file: "slide-principal-mobile.png",
- width: 500,
- height: 500,
+ file: "banner-principal-mobile.png",
+ width: 375,
+ height: 342,
+ // "category": "*",
+ // "brand": "*"
+ // "period": ""
},
],
},
{
type: "banner",
- name: "banner principal mobile 2",
+ name: "Banner Principal Mobile 02",
contents: [
{
- name: "banner principal mobile 2 content",
+ name: "Banner Principal Mobile 02",
active: true,
type: "image",
file: "slide-principal-mobile.png",
- width: 500,
- height: 500,
+ width: 375,
+ height: 342,
+ // "category": "*",
+ // "brand": "*"
+ // "period": ""
+ },
+ ],
+ },
+ {
+ type: "banner",
+ name: "Banner Principal Mobile 03",
+ contents: [
+ {
+ name: "Banner Principal Mobile 03",
+ active: true,
+ type: "image",
+ file: "banner-principal-mobile.png",
+ width: 375,
+ height: 342,
+ // "category": "*",
+ // "brand": "*"
+ // "period": ""
+ },
+ ],
+ },
+ {
+ type: "banner",
+ name: "Banner Principal Mobile 04",
+ contents: [
+ {
+ name: "Banner Principal Mobile 04",
+ active: true,
+ type: "image",
+ file: "slide-principal-mobile.png",
+ width: 375,
+ height: 342,
+ // "category": "*",
+ // "brand": "*"
+ // "period": ""
},
],
},
diff --git a/src/arquivos/img/banner-principal-mobile.png b/src/arquivos/img/banner-principal-mobile.png
new file mode 100644
index 0000000..fbc0380
Binary files /dev/null and b/src/arquivos/img/banner-principal-mobile.png differ
diff --git a/src/arquivos/img/banner-principal.png b/src/arquivos/img/banner-principal.png
new file mode 100644
index 0000000..757fe38
Binary files /dev/null and b/src/arquivos/img/banner-principal.png differ
diff --git a/src/arquivos/js/app/pages/Home.js b/src/arquivos/js/app/pages/Home.js
index 022f405..d637c7d 100644
--- a/src/arquivos/js/app/pages/Home.js
+++ b/src/arquivos/js/app/pages/Home.js
@@ -1,38 +1,17 @@
-import {
- bannerHome,
- barraDeVantagens,
- naveguePorCategorias,
-} from "App/functions/slide";
-
-import InstagramGallery from "../components/InstagramGallery";
-
+import slickConfig from "Config/slick";
export default class Home {
constructor() {
- bannerHome(".main-gallery");
- barraDeVantagens(".tipbar ul");
- naveguePorCategorias(".categorias-home .categorias");
-
- new InstagramGallery({
- gallery: ".instagramGallery__photos",
- account: "agenciam3",
- limit: 6,
- });
+ this.selectors();
+ this.createSliders();
}
- naveguePorCategorias() {
- // preencher titulos
- var $container = $(".home-categories .categorias");
- $container.find(".box-banner").each(function (i, el) {
- const $banner = $(el);
- let name;
+ selectors() {
+ this.desktopMainBaners = $(".main-banners__desktop");
+ this.mobileMainBaners = $(".main-banners__mobile");
+ }
- name = $banner.find("img").prop("alt");
- let $titulo = $("", {
- text: name,
- class: "nome-categoria",
- });
- $banner.find("img").after($titulo);
- });
- slide.naveguePorCategorias($container);
+ createSliders() {
+ this.desktopMainBaners.slick(slickConfig.home.desktopMainBanners);
+ this.mobileMainBaners.slick(slickConfig.home.mobileMainBanners);
}
}
diff --git a/src/arquivos/js/config/slick.js b/src/arquivos/js/config/slick.js
index d5835df..de5ee06 100644
--- a/src/arquivos/js/config/slick.js
+++ b/src/arquivos/js/config/slick.js
@@ -1,18 +1,18 @@
export default {
home: {
- bannerDesktop: {
+ desktopMainBanners: {
dots: true,
- arrows: false,
- pauseOnHover: false,
+ arrows: true,
+ pauseOnHover: true,
autoplay: true,
- autoplaySpeed: 6000,
+ autoplaySpeed: 5000,
},
- bannerMobile: {
+ mobileMainBanners: {
dots: true,
- arrows: false,
+ arrows: true,
pauseOnHover: false,
autoplay: true,
- autoplaySpeed: 6000,
+ autoplaySpeed: 5000,
},
},
general: {
diff --git a/src/arquivos/sass/pages/_home.scss b/src/arquivos/sass/pages/_home.scss
index 9192b50..1656845 100644
--- a/src/arquivos/sass/pages/_home.scss
+++ b/src/arquivos/sass/pages/_home.scss
@@ -1,178 +1,104 @@
-/***************************************************************/
-/**-- Home ---------------------------------********************/
-/*-------------------------------------------------------------*/
-
.home {
- .main-gallery {
- > 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;
- }
- }
- }
+ .main-banners {
img {
width: 100%;
}
- .slick-next,
- .slick-prev {
- @extend .sprite;
- background-color: transparent;
- border: none;
- cursor: pointer;
- font-size: 0;
- outline: none;
- padding: 0;
+ &__desktop {
+ @include mq(md, max) {
+ display: none;
+ }
+ }
+
+ &__mobile {
+ @include mq(md, min) {
+ display: none;
+ }
+ }
+
+ .slick-arrow {
position: absolute;
- top: 40%;
- transform: scale(0.7);
- z-index: 1;
+ top: 50%;
+ transform: translateY(-50%);
+ z-index: map-get($z-index, level-1);
+ padding: 0;
+ border: 0;
+ outline: 0;
+ font-size: 0;
+ background-color: transparent;
+ cursor: pointer;
+
+ @extend .sprite;
+
+ @include mq(md, max) {
+ transform: translatey(-50%) scale(0.7);
+ }
+ }
+
+ .slick-prev {
+ left: 24px;
+
+ @extend .sprite-arrow-white-prev-icon;
+
+ @include mq(md, max) {
+ left: 16px;
+ transform-origin: left;
+ }
}
.slick-next {
- @extend .sprite;
- @extend .sprite-circled-arrow-right;
- left: auto;
- right: 8px;
- }
+ right: 24px;
- .slick-prev {
- @extend .sprite;
- @extend .sprite-circled-arrow-left;
- right: auto;
- left: 8px;
+ @extend .sprite-arrow-white-next-icon;
+
+ @include mq(md, max) {
+ right: 16px;
+ transform-origin: right;
+ }
}
.slick-dots {
- bottom: 20px;
+ margin: 0;
position: absolute;
- pointer-events: none;
- text-align: center;
+ left: 0;
+ bottom: 14px;
+ z-index: map-get($z-index, level-1);
width: 100%;
+ display: flex !important;
+ align-items: center;
+ justify-content: center;
- &,
- li {
- align-items: center;
- display: flex !important;
- justify-content: center;
+ @include mq(md, max) {
+ bottom: 9px;
}
li {
- display: inline-block;
+ display: flex;
margin: 0 4px;
- }
- button {
- background-color: #142032;
- border: none;
- cursor: pointer;
- height: 10px;
- outline: none;
- padding: 0;
- pointer-events: all;
- transition: all 0.15s ease-in-out;
- width: 10px;
- }
+ &.slick-active {
+ button {
+ width: 16px;
+ height: 16px;
+ background: transparent;
+ border: 1px solid $white;
- .slick-active {
- button {
- background-color: #f71963;
- 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;
}
}
}
+
+ button {
+ width: 10px;
+ height: 10px;
+ padding: 0;
+ border: 0;
+ outline: 0;
+ background: $white;
+
+
+ }
}
+
}
}
diff --git a/src/arquivos/sass/partials/_footer.scss b/src/arquivos/sass/partials/_footer.scss
index 3a51f17..f9e0988 100644
--- a/src/arquivos/sass/partials/_footer.scss
+++ b/src/arquivos/sass/partials/_footer.scss
@@ -2,7 +2,7 @@
@include mq(md, min) {
padding: 29px 0 25px;
- border: 1px solid $gray-100;
+ border-bottom: 1px solid $gray-100;
}
&__wrapper {
diff --git a/src/arquivos/sprite/arrow-white-next-icon.png b/src/arquivos/sprite/arrow-white-next-icon.png
new file mode 100644
index 0000000..078148f
Binary files /dev/null and b/src/arquivos/sprite/arrow-white-next-icon.png differ
diff --git a/src/arquivos/sprite/arrow-white-prev-icon.png b/src/arquivos/sprite/arrow-white-prev-icon.png
new file mode 100644
index 0000000..78819b3
Binary files /dev/null and b/src/arquivos/sprite/arrow-white-prev-icon.png differ
diff --git a/src/template-pagina/bernardo-home.html b/src/template-pagina/bernardo-home.html
index 25cbad6..57867c6 100644
--- a/src/template-pagina/bernardo-home.html
+++ b/src/template-pagina/bernardo-home.html
@@ -20,7 +20,17 @@
-
+
+
+