Home delivery simply doesn’t work for every customer, all of the time.
HubBox enables customers to pick up their package at a time and place that suits them, which prevents them abandoning their basket online or risking not being home for their delivery.
The HubBox solution is proven to drive conversions by giving customers a dependable alternative to home delivery.
@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
@import "../../resources/scss/vendor/bootstrap/vendor/rfs";
.block-card-stack {
overflow: hidden;
.container-fluid {
max-width: 100%;
padding: 0;
@media screen and (max-width: 639px) {
@include padding(rem-calc(0 15));
}
}
h2 {
text-align: center;
color: $secondary;
span {
color: $primary;
}
}
.heading {
text-align: center;
color: $secondary;
@include fluid-type(28, 50, 375, $max-container-size);
line-height: 100%;
font-weight: 700;
@include margin-bottom(rem-calc(16));
span {
color: $primary;
}
}
h5 {
text-align: center;
color: $secondary;
@include margin-bottom(rem-calc(40));
margin-left: auto;
margin-right: auto;
}
.col-lg-4 {
@include margin-bottom(rem-calc(30));
}
&__slider {
position: relative;
.slick-track {
display: flex;
cursor: grab;
}
.slick-slide {
@include margin-right(rem-calc(15));
@include margin-left(rem-calc(15));
}
.slick-slide > div {
height: 100%;
}
}
&__box-wrapper {
background-color: $white;
@include padding(rem-calc(3.625rem 0));
height: auto;
img {
@include margin-bottom(rem-calc(25));
max-width: 59px;
}
p {
margin-bottom: 0;
font-weight: 400;
}
}
&__box-wrapper-space {
@include padding(rem-calc(0 50));
}
&__wrapper {
max-width: 75%;
margin-left: auto;
margin-right: auto;
text-align: center;
@include bp($md, true) {
max-width: 100%;
}
}
.swiper {
width: 100%;
height: 100%;
position: relative;
&::before {
width: 14%;
height: 100%;
content: "";
position: absolute;
top: 0;
left: 0;
background: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0)), to(#f2f9fc));
background: linear-gradient(to left, rgba(0, 0, 0, 0), #f2f9fc);
pointer-events: none;
z-index: 2;
@media screen and (max-width: 639px) {
display: none;
}
}
&::after {
width: 14%;
height: 100%;
content: "";
position: absolute;
top: 0;
right: 0;
background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), to(#f2f9fc));
background: linear-gradient(to right, rgba(0, 0, 0, 0), #f2f9fc);
pointer-events: none;
z-index: 2;
@media screen and (max-width: 639px) {
display: none;
}
}
}
.swiper-wrapper {
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
// @media screen and (max-width: 768px) {
// -webkit-transition-timing-function: ease-in-out;
// transition-timing-function: ease-in-out;
// }
}
}
"use strict";
var StatisticsCarousel = class {
constructor() {
(this.blocks = document.querySelectorAll(".block-card-stack")), this.init();
}
init() {
this.blocks.forEach((e) => {
var swiper = new Swiper(".block-card-stack .swiper", {
direction: "horizontal",
slidesPerView: 1,
spaceBetween: 10,
effect: "slide",
parallax: false,
loop: true,
centeredSlides: true,
loopedSlides: 3,
grabCursor: true,
watchSlidesVisibility: true,
speed: 3000,
autoplay: {
delay: 0,
disableOnInteraction: true,
},
breakpoints: {
768: {
slidesPerView: 2,
spaceBetween: 10,
loop: true,
centeredSlides: true,
},
1199: {
slidesPerView: 4,
spaceBetween: 30,
loop: true,
centeredSlides: true,
},
},
on: {
sliderMove: function () {
swiper.params.speed = 100;
},
},
});
});
}
};
new StatisticsCarousel();