Card Stack
Delivering immediate benefits
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.
Increased Revenue
Shoppers who select pickup points repeat buy 3x more often than those who select shipping to a home address.
Reduced shipping rates
Access reduced shipping costs via your carrier through aggregated delivery to pickup points, instead of individual delivery to homes.
Reduced customer complaints
Help customers get guaranteed access to their package at a time and place that suits them, reducing the volume of WISO enquiries.
Increased Revenue
Shoppers who select pickup points repeat buy 3x more often than those who select shipping to a home address.
Reduced shipping rates
Access reduced shipping costs via your carrier through aggregated delivery to pickup points, instead of individual delivery to homes.
Reduced customer complaints
Help customers get guaranteed access to their package at a time and place that suits them, reducing the volume of WISO enquiries.
@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();