diff --git a/meta/pages/home.js b/meta/pages/home.js
index fa8d3b6..b3ca2d6 100644
--- a/meta/pages/home.js
+++ b/meta/pages/home.js
@@ -1,81 +1,122 @@
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: [
{
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,
- // "category": "*",
- // "brand": "*"
- // "period": ""
+ file: "banner-principal-desktop.png",
+ width: 1440,
+ height: 532,
},
],
},
{
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,
+ file: "banner-principal-desktop.png",
+ width: 1440,
+ height: 532,
+ },
+ ],
+ },
+ {
+ type: "banner",
+ name: "Banner Principal Desktop 03",
+ contents: [
+ {
+ name: "Banner Principal Desktop 03",
+ active: true,
+ type: "image",
+ file: "banner-principal-desktop.png",
+ width: 1440,
+ height: 532,
+ },
+ ],
+ },
+ {
+ type: "banner",
+ name: "Banner Principal Desktop 04",
+ contents: [
+ {
+ name: "Banner Principal Desktop 04",
+ active: true,
+ type: "image",
+ file: "banner-principal-desktop.png",
+ width: 1440,
+ height: 532,
},
],
},
],
},
{
- 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,
},
],
},
{
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,
+ file: "banner-principal-mobile.png",
+ width: 375,
+ height: 342,
+ },
+ ],
+ },
+ {
+ 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,
+ },
+ ],
+ },
+ {
+ type: "banner",
+ name: "Banner Principal Mobile 04",
+ contents: [
+ {
+ name: "Banner Principal Mobile 04",
+ active: true,
+ type: "image",
+ file: "banner-principal-mobile.png",
+ width: 375,
+ height: 342,
},
],
},
diff --git a/src/arquivos/img/banner-principal-desktop.png b/src/arquivos/img/banner-principal-desktop.png
new file mode 100644
index 0000000..757fe38
Binary files /dev/null and b/src/arquivos/img/banner-principal-desktop.png differ
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/js/app/pages/Home.js b/src/arquivos/js/app/pages/Home.js
index 022f405..6d8bf99 100644
--- a/src/arquivos/js/app/pages/Home.js
+++ b/src/arquivos/js/app/pages/Home.js
@@ -1,38 +1,18 @@
-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.desktopMainBanners = $(".main-banners__desktop");
+ this.mobileMainBanners = $(".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.desktopMainBanners.slick(slickConfig.home.desktopMainBanners);
+ this.mobileMainBanners.slick(slickConfig.home.mobileMainBanners);
}
}
diff --git a/src/arquivos/js/config/slick.js b/src/arquivos/js/config/slick.js
index d5835df..af35dae 100644
--- a/src/arquivos/js/config/slick.js
+++ b/src/arquivos/js/config/slick.js
@@ -1,18 +1,17 @@
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,
- pauseOnHover: false,
+ arrows: true,
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..1afd8a6 100644
--- a/src/arquivos/sass/pages/_home.scss
+++ b/src/arquivos/sass/pages/_home.scss
@@ -1,177 +1,96 @@
-/***************************************************************/
-/**-- 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%;
}
+ &__desktop {
+ @include mq(md, max) {
+ display: none;
+ }
+ }
- .slick-next,
- .slick-prev {
- @extend .sprite;
- background-color: transparent;
- border: none;
- cursor: pointer;
- font-size: 0;
- outline: none;
- padding: 0;
+ &__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-left-white-arrow;
+
+ @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-right-white-arrow;
+
+ @include mq(md, max) {
+ right: 16px;
+ transform-origin: right;
+ }
}
.slick-dots {
- bottom: 20px;
+ display: flex !important;
+ align-items: center;
+ justify-content: center;
position: absolute;
- pointer-events: none;
- text-align: center;
+ left: 0;
+ bottom: 14;
+ margin: 0;
+ z-index: map-get($z-index, level-1);
width: 100%;
- &,
- li {
- align-items: center;
- display: flex !important;
- justify-content: center;
+ @include mq(md, max) {
}
li {
- display: inline-block;
+ display: flex;
margin: 0 4px;
+
+ &.slick-active {
+ button {
+ width: 16px;
+ height: 16px;
+ border: 1px solid $white-500;
+ background: transparent;
+ }
+ }
}
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 {
- 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;
- }
- }
+ height: 10px;
+ padding: 0;
+ border: 0;
+ outline: 0;
+ background: $white-500;
}
}
}
diff --git a/src/arquivos/sass/partials/_footer.scss b/src/arquivos/sass/partials/_footer.scss
index b2703e5..7f1dc05 100644
--- a/src/arquivos/sass/partials/_footer.scss
+++ b/src/arquivos/sass/partials/_footer.scss
@@ -1,7 +1,7 @@
.footer-links {
@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/left-white-arrow.png b/src/arquivos/sprite/left-white-arrow.png
new file mode 100644
index 0000000..6efbb94
Binary files /dev/null and b/src/arquivos/sprite/left-white-arrow.png differ
diff --git a/src/arquivos/sprite/right-white-arrow.png b/src/arquivos/sprite/right-white-arrow.png
new file mode 100644
index 0000000..d2d3523
Binary files /dev/null and b/src/arquivos/sprite/right-white-arrow.png differ
diff --git a/src/template-pagina/caina-home.html b/src/template-pagina/caina-home.html
index 8e8aaa8..7b1977a 100644
--- a/src/template-pagina/caina-home.html
+++ b/src/template-pagina/caina-home.html
@@ -22,7 +22,17 @@
-
+
+
+