Clients
Component #1
Who partners with Blueberry?
View More
Thousands of companies, including platforms, and plugin builders work with Blueberry.
<!-- Clients Section -->
<div class="container space-2">
<div class="row">
<div class="col-lg-4 pt-7 pt-lg-0">
<!-- Card -->
<div class="card bg-primary shadow-primary-lg mt-lg-n11 p-4 p-lg-7">
<div class="text-white mb-7">
<span class="d-block small text-warning font-weight-bold text-cap mb-2">Who partners with Blueberry?</span>
<h2 class="font-size-2 text-white">Thousands of companies, including platforms, and plugin builders work with Blueberry.</h2>
</div>
<a class="btn btn-block btn-light transition-3d-hover" href="#">View More</a>
</div>
<!-- End Card -->
</div>
<div class="col-lg-8 pt-7">
<!-- Logos -->
<div class="row text-center">
<div class="col-4 py-4">
<img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/alphabet.svg" alt="Image Description">
</div>
<div class="col-4 py-4">
<img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/kaplan.svg" alt="Image Description">
</div>
<div class="col-4 py-4">
<img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/slack.svg" alt="Image Description">
</div>
<div class="col-4 py-4">
<img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/google.svg" alt="Image Description">
</div>
<div class="col-4 py-4">
<img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/fitbit.svg" alt="Image Description">
</div>
<div class="col-4 py-4">
<img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/weebly.svg" alt="Image Description">
</div>
<div class="col-4 py-4">
<img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/mapbox.svg" alt="Image Description">
</div>
<div class="col-4 py-4">
<img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/uber.svg" alt="Image Description">
</div>
<div class="col-4 py-4">
<img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/airbnb.svg" alt="Image Description">
</div>
</div>
<!-- End Logos -->
</div>
</div>
</div>
<!-- End Clients Section -->
Component #2
Trusted by Open Source, enterprise, and more than 33,000 of you
<!-- Clients Section -->
<div class="container space-2">
<!-- Title -->
<div class="w-md-80 w-lg-60 text-center mx-md-auto mb-6">
<h2>Trusted by Open Source, enterprise, and more than 33,000 of you</h2>
</div>
<!-- End Title -->
<!-- Clients -->
<div class="row justify-content-sm-center text-center">
<div class="col-4 col-sm-2 mb-7">
<img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/slack.svg" alt="Image Description">
</div>
<div class="col-4 col-sm-2 mb-7">
<img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/stripe.svg" alt="Image Description">
</div>
<div class="col-4 col-sm-2 mb-7">
<img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/airbnb.svg" alt="Image Description">
</div>
<div class="col-4 col-sm-2 mb-7">
<img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/weebly.svg" alt="Image Description">
</div>
<div class="col-4 col-sm-2 mb-7">
<img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/spotify.svg" alt="Image Description">
</div>
<div class="col-4 col-sm-2 mb-7">
<img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/uber.svg" alt="Image Description">
</div>
<div class="d-none d-sm-block w-100"></div>
<div class="col-4 col-sm-2 mb-7 mb-sm-0">
<img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/shopify.svg" alt="Image Description">
</div>
<div class="col-4 col-sm-2 mb-7 mb-sm-0">
<img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/fitbit.svg" alt="Image Description">
</div>
<div class="col-4 col-sm-2 mb-7 mb-sm-0">
<img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/hubspot.svg" alt="Image Description">
</div>
<div class="col-4 col-sm-2">
<img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/kaplan.svg" alt="Image Description">
</div>
<div class="col-4 col-sm-2">
<img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/paypal.svg" alt="Image Description">
</div>
</div>
<!-- End Clients -->
</div>
<!-- End Clients Section -->
Component #3
The complete theme for internet business
Millions of the world's most innovative technology companies are scaling faster and more efficiently by building their businesses on Blueberry.
Discover how businesses use Blueberry
<!-- Works Section -->
<div class="dzsparallaxer auto-init height-is-based-on-content use-loading mode-scroll bg-white" data-options='{direction: "reverse"}'>
<div class="dzsparallaxer--target">
<div class="container-fluid px-lg-6">
<div class="row justify-content-center">
<div class="col-3 my-4" data-parallaxanimation='[{property: "transform", value:" translate3d(0,{{val}}rem,0)", initial:"15", mid:"0", final:"-15"}]'>
<!-- Logo -->
<div class="d-none d-md-block bg-white avatar avatar-xl shadow-sm rounded-circle p-4 mx-auto">
<img class="avatar-img" src="../../assets/img/160x160/img17.png" alt="Image Description">
</div>
<!-- End Logo -->
</div>
<div class="col-3 mb-4" data-parallaxanimation='[{property: "transform", value:" translate3d(0,{{val}}rem,0)", initial:"5", mid:"0", final:"-5"}]'>
<!-- Logo -->
<div class="d-block bg-white avatar avatar-xl shadow-sm rounded-circle p-4 mx-auto">
<img class="avatar-img" src="../../assets/img/160x160/img12.png" alt="Image Description">
</div>
<!-- End Logo -->
</div>
<div class="col-3 my-4" data-parallaxanimation='[{property: "transform", value:" translate3d(0,{{val}}rem,0)", initial:"11", mid:"0", final:"-11"}]'>
<!-- Logo -->
<div class="d-none d-md-block bg-white avatar avatar-xl shadow-sm rounded-circle p-4 mx-auto">
<img class="avatar-img" src="../../assets/img/160x160/img13.png" alt="Image Description">
</div>
<!-- End Logo -->
</div>
</div>
<div class="row justify-content-between">
<div class="col-3 mb-4" data-parallaxanimation='[{property: "transform", value:" translate3d(0,{{val}}rem,0)", initial:"7", mid:"0", final:"-7"}]'>
<!-- Logo -->
<div class="d-block bg-white avatar avatar-xl shadow-sm rounded-circle p-4">
<img class="avatar-img" src="../../assets/img/160x160/img14.png" alt="Image Description">
</div>
<!-- End Logo -->
</div>
<div class="col-3 my-4" data-parallaxanimation='[{property: "transform", value:" translate3d(0,{{val}}rem,0)", initial:"7", mid:"0", final:"-7"}]'>
<!-- Logo -->
<div class="d-block bg-white avatar avatar-xl shadow-sm rounded-circle p-4 ml-auto">
<img class="avatar-img" src="../../assets/img/160x160/img15.png" alt="Image Description">
</div>
<!-- End Logo -->
</div>
</div>
<div class="row">
<div class="col-3 offset-1 my-4" data-parallaxanimation='[{property: "transform", value:" translate3d(0,{{val}}rem,0)", initial:"15", mid:"0", final:"-15"}]'>
<!-- Logo -->
<div class="d-none d-md-block bg-white avatar avatar-xl shadow-sm rounded-circle p-4 ml-auto">
<img class="avatar-img" src="../../assets/img/160x160/img8.jpg" alt="Image Description">
</div>
<!-- End Logo -->
</div>
<div class="col-3 offset-2 my-4" data-parallaxanimation='[{property: "transform", value:" translate3d(0,{{val}}rem,0)", initial:"11", mid:"0", final:"-11"}]'>
<!-- Logo -->
<div class="d-none d-md-block bg-white avatar avatar-xl shadow-sm rounded-circle p-4 ml-auto">
<img class="avatar-img" src="../../assets/img/160x160/img6.jpg" alt="Image Description">
</div>
<!-- End Logo -->
</div>
</div>
<div class="row justify-content-between">
<div class="col-4" data-parallaxanimation='[{property: "transform", value:" translate3d(0,{{val}}rem,0)", initial:"11", mid:"0", final:"-11"}]'>
<!-- Logo -->
<div class="d-block bg-white avatar avatar-xl shadow-sm rounded-circle p-4 mx-auto">
<img class="avatar-img" src="../../assets/img/160x160/img16.png" alt="Image Description">
</div>
<!-- End Logo -->
</div>
<div class="col-4 mt-6" data-parallaxanimation='[{property: "transform", value:" translate3d(0,{{val}}rem,0)", initial:"5", mid:"0", final:"-5"}]'>
<!-- Logo -->
<div class="d-none d-sm-block bg-white avatar avatar-xl shadow-sm rounded-circle p-4 mx-auto">
<img class="avatar-img" src="../../assets/img/160x160/img10.jpg" alt="Image Description">
</div>
<!-- End Logo -->
</div>
<div class="col-4 mt-6" data-parallaxanimation='[{property: "transform", value:" translate3d(0,{{val}}rem,0)", initial:"15", mid:"0", final:"-15"}]'>
<!-- Logo -->
<div class="d-block bg-white avatar avatar-xl shadow-sm rounded-circle p-4 mx-auto">
<img class="avatar-img" src="../../assets/img/160x160/img11.jpg" alt="Image Description">
</div>
<!-- End Logo -->
</div>
</div>
</div>
</div>
<div class="container space-3 space-sm-4 position-relative z-index-2">
<!-- Title -->
<div class="w-md-80 w-lg-50 text-center mx-md-auto">
<h2 class="h1">The complete theme for internet business</h2>
<p>Millions of the world's most innovative technology companies are scaling faster and more efficiently by building their businesses on Blueberry.</p>
<a class="font-weight-bold" href="#">Discover how businesses use Blueberry <i class="fas fa-angle-right fa-sm ml-1"></i></a>
</div>
<!-- End Title -->
</div>
<div class="position-absolute top-0 left-0 w-100 h-100 gradient-y-lg-white"></div>
</div>
<!-- End Works Section -->
<link rel="stylesheet" href="../../assets/vendor/dzsparallaxer/dzsparallaxer.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/dzsparallaxer/dzsparallaxer.js"></script>
Component #4 (with slider)
<!-- Clients Section -->
<div class="container space-2">
<div class="js-slick-carousel slick"
data-hs-slick-carousel-options='{
"slidesToShow": 5,
"autoplay": true,
"autoplaySpeed": 5000,
"infinite": true,
"responsive": [{
"breakpoint": 1200,
"settings": {
"slidesToShow": 4
}
}, {
"breakpoint": 992,
"settings": {
"slidesToShow": 4
}
}, {
"breakpoint": 768,
"settings": {
"slidesToShow": 3
}
}, {
"breakpoint": 576,
"settings": {
"slidesToShow": 3
}
}]
}'>
<div class="js-slide">
<img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/kaplan.svg" alt="Image Description">
</div>
<div class="js-slide">
<img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/hubspot.svg" alt="Image Description">
</div>
<div class="js-slide">
<img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/stripe.svg" alt="Image Description">
</div>
<div class="js-slide">
<img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/slack.svg" alt="Image Description">
</div>
<div class="js-slide">
<img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/airbnb.svg" alt="Image Description">
</div>
<div class="js-slide">
<img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/spotify.svg" alt="Image Description">
</div>
<div class="js-slide">
<img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/weebly.svg" alt="Image Description">
</div>
</div>
</div>
<!-- End Clients Section -->
<link rel="stylesheet" href="../../assets/vendor/slick-carousel/slick/slick.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>
<!-- JS Blueberry -->
<script src="../../assets/js/hs.slick-carousel.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of slick carousel
$('.js-slick-carousel').each(function() {
var slickCarousel = $.HSCore.components.HSSlickCarousel.init($(this));
});
});
</script>
Component #5 (with .col-* classes)
Join 40,000+ agencies and businesses using Blueberry today!
<!-- Clients Section -->
<div class="container space-2">
<!-- Title -->
<div class="w-md-80 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
<h2>Join 40,000+ agencies and businesses using Blueberry today!</h2>
</div>
<!-- End Title -->
<!-- Clients -->
<div class="row justify-content-between text-center">
<div class="col-4 col-lg-2 mb-5 mb-lg-0">
<div class="mx-3">
<img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/boring-company.svg" alt="Image Description">
</div>
</div>
<div class="col-4 col-lg-2 mb-5 mb-lg-0">
<div class="mx-3">
<img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/netflix.svg" alt="Image Description">
</div>
</div>
<div class="col-4 col-lg-2 mb-5 mb-lg-0">
<div class="mx-3">
<img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/embark.svg" alt="Image Description">
</div>
</div>
<div class="col-4 col-lg-2">
<div class="mx-3">
<img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/slack.svg" alt="Image Description">
</div>
</div>
<div class="col-4 col-lg-2">
<div class="mx-3">
<img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/uber.svg" alt="Image Description">
</div>
</div>
<div class="col-4 col-lg-2">
<div class="mx-3">
<img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/stripe.svg" alt="Image Description">
</div>
</div>
</div>
<!-- End Clients -->
</div>
<!-- End Clients Section -->
Component #6
99.9%
Believe basic computer skills are all you need to plan projects with Blueberry Pay.
<!-- Clients Section -->
<div class="container">
<div class="row align-items-lg-center">
<div class="col-md-7 col-lg-8 mb-5 mb-md-0">
<!-- Clients -->
<div class="row justify-content-center border-top space-top-2">
<div class="col-4 col-lg-2 mb-4 mb-lg-0">
<div class="mx-2">
<img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/slack.svg" alt="Image Description">
</div>
</div>
<div class="col-4 col-lg-2 mb-4 mb-lg-0">
<div class="mx-2">
<img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/google.svg" alt="Image Description">
</div>
</div>
<div class="col-4 col-lg-2 mb-4 mb-lg-0">
<div class="mx-2">
<img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/spotify.svg" alt="Image Description">
</div>
</div>
<div class="col-4 col-lg-2 mb-4 mb-lg-0">
<div class="mx-2">
<img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/airbnb.svg" alt="Image Description">
</div>
</div>
<div class="col-4 col-lg-2 mb-4 mb-lg-0">
<div class="mx-2">
<img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/shopify.svg" alt="Image Description">
</div>
</div>
<div class="col-4 col-lg-2 mb-4 mb-lg-0">
<div class="mx-2">
<img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/netflix.svg" alt="Image Description">
</div>
</div>
</div>
<!-- End Clients -->
</div>
<div class="col-md-5 col-lg-4">
<div class="pl-md-4">
<span class="d-block display-3 text-primary text-lh-sm">99.9%</span>
<p>Believe basic computer skills are all you need to plan projects with Blueberry Pay.</p>
</div>
</div>
</div>
</div>
<!-- End Clients Section -->
Component #7
Trusted by the world's best
<!-- Clients Section -->
<div class="container space-1">
<div class="w-lg-75 mx-lg-auto">
<div class="text-center mb-4">
<h2 class="divider divider-text">Trusted by the world's best</h2>
</div>
<div class="row justify-content-between text-center">
<div class="col-4 col-lg-2 mb-5 mb-lg-0">
<div class="mx-3">
<img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/amazon.svg" alt="Image Description">
</div>
</div>
<div class="col-4 col-lg-2 mb-5 mb-lg-0">
<div class="mx-3">
<img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/netflix.svg" alt="Image Description">
</div>
</div>
<div class="col-4 col-lg-2 mb-5 mb-lg-0">
<div class="mx-3">
<img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/paypal.svg" alt="Image Description">
</div>
</div>
<div class="col-4 col-lg-2">
<div class="mx-3">
<img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/slack.svg" alt="Image Description">
</div>
</div>
<div class="col-4 col-lg-2">
<div class="mx-3">
<img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/samsung.svg" alt="Image Description">
</div>
</div>
<div class="col-4 col-lg-2">
<div class="mx-3">
<img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/stripe.svg" alt="Image Description">
</div>
</div>
</div>
</div>
</div>
<!-- End Clients Section -->
Component #8
Trusted by the world's best
<!-- Clients Section -->
<div class="container space-2">
<!-- Title -->
<div class="w-md-75 w-lg-50 text-center mx-md-auto mb-7">
<h4 class="text-body h6 text-cap">Trusted by the world's best</h4>
</div>
<!-- End Title -->
<div class="js-slick-carousel slick"
data-hs-slick-carousel-options='{
"slidesToShow": 5,
"autoplay": true,
"autoplaySpeed": 5000,
"infinite": true,
"responsive": [{
"breakpoint": 1200,
"settings": {
"slidesToShow": 4
}
}, {
"breakpoint": 992,
"settings": {
"slidesToShow": 4
}
}, {
"breakpoint": 768,
"settings": {
"slidesToShow": 3
}
}, {
"breakpoint": 576,
"settings": {
"slidesToShow": 3
}
}]
}'>
<div class="js-slide">
<img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/weebly-dark.svg" alt="Image Description">
</div>
<div class="js-slide">
<img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/uber-original.svg" alt="Image Description">
</div>
<div class="js-slide">
<img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/slack-dark.svg" alt="Image Description">
</div>
<div class="js-slide">
<img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/airbnb-dark.svg" alt="Image Description">
</div>
<div class="js-slide">
<img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/spotify-dark.svg" alt="Image Description">
</div>
</div>
</div>
<!-- End Clients Section -->