File: /var/www/quadcode.com/src/components/blocks/white-label-broker/Begin.svelte
<script lang="ts">
import stick from '../../../assets/images/white-label-broker/begin/stick.svg';
import close from '../../../assets/images/white-label-broker/begin/close.svg';
import Button from '../../button/Button.svelte';
import { onMount } from 'svelte';
import Swiper from 'swiper';
import 'swiper/css';
import 'swiper/css/grid';
import 'swiper/css/pagination';
import { Pagination } from 'swiper/modules';
import PaginationEl from '../../pagination/Pagination.svelte';
import { popupForm } from '../../../store';
import { t } from '$lib/translations';
onMount(() => {
const container: HTMLElement | null = document.querySelector('.block-begin__swiper');
const pagination: HTMLElement | null = document.querySelector('.block-begin__pagination');
if (!container || !pagination) return;
new Swiper(container, {
modules: [Pagination],
spaceBetween: 40,
pagination: {
el: pagination,
clickable: true,
},
breakpoints: {
320: {
slidesPerView: 1,
spaceBetween: 15,
centeredSlides: true,
},
480: {
slidesPerView: 2,
spaceBetween: 15,
},
768: {
slidesPerView: 2,
spaceBetween: 20,
},
1366: {
slidesPerView: 2,
spaceBetween: 32,
},
1800: {
slidesPerView: 2,
},
},
});
});
</script>
<div class="block-begin">
<div class="container">
<p class="block-begin__title">
{$t('white-label-broker.You don’t have to begin')}<br />
{$t('white-label-broker.from scratch')}
</p>
<p class="block-begin__text">
{$t('white-label-broker.Launch your own CFD brokerage using an all-inclusive, out-of-the-box solution.')}
</p>
<div class="block-begin__list">
<div class="block-begin__listItem">
<p class="block-begin__listItemTitle">{$t('white-label-broker.Competitive Advantage')}</p>
<p class="block-begin__listItemText">
{$t(
'white-label-broker.Utilize the know-how and skills of your white label provider to keep your competetive edge in the market'
)}
</p>
</div>
<div class="block-begin__listItem">
<p class="block-begin__listItemTitle">{$t('white-label-broker.Scalability & technical support')}</p>
<p class="block-begin__listItemText">
{$t(
'white-label-broker.Expand your business seamlessly with the scalability features offered by the white label CFD brokerage platform'
)}
</p>
</div>
<div class="block-begin__listItem">
<p class="block-begin__listItemTitle">{$t('white-label-broker.Comprehensive Analytics')}</p>
<p class="block-begin__listItemText">
{$t(
'white-label-broker.Empower your business with data-driven decision-making, get a 360° view with web and mobile traffic tracking'
)}
</p>
</div>
<div class="block-begin__listItem">
<p class="block-begin__listItemTitle">
{@html $t('white-label-broker.Cross platform')}<br />
{@html $t('white-label-broker.& Best-in-class UI')}
</p>
<p class="block-begin__listItemText">
{$t(
'white-label-broker.Benefit from the ability to offer services on any device, including the web, desktop, iOs, and Android'
)}
</p>
</div>
</div>
<div class="block-begin__wrapper">
<div class="swiper block-begin__swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="block-begin__card">
<p class="block-begin__cardTitle">{$t('white-label-broker.Quadcode solution')}</p>
<div class="block-begin__cardHeader">
<p class="block-begin__cardHeaderSubtitle">{$t('white-label-broker.Setup costs')}</p>
<p class="block-begin__cardHeaderPrice">$17,500</p>
<p class="block-begin__cardHeaderSubtitle">{$t('white-label-broker.Time to market')}</p>
<p class="block-begin__cardHeaderTime">
<!-- {@html $t('white-label-broker.from 2 weeks')} -->
<span>{$t('white-label-broker.from')}</span>
{$t('white-label-broker.2 weeks')}
</p>
</div>
<div class="block-begin__cardOptions">
<div class="block-begin__cardOption">
<div class="block-begin__cardOptionText">{$t('white-label-broker.Liquidity providers')}</div>
<img src={stick} alt="" class="block-begin__cardOptionActive" />
</div>
<div class="block-begin__cardOption">
<div class="block-begin__cardOptionText">
{$t('white-label-broker.Cross-platform trading solution')}
</div>
<img src={stick} alt="" class="block-begin__cardOptionActive" />
</div>
<div class="block-begin__cardOption">
<div class="block-begin__cardOptionText">{$t('white-label-broker.CRM system')}</div>
<img src={stick} alt="" class="block-begin__cardOptionActive" />
</div>
<div class="block-begin__cardOption">
<div class="block-begin__cardOptionText">
{$t('white-label-broker.Retention tools and affiliate module')}
</div>
<img src={stick} alt="" class="block-begin__cardOptionActive" />
</div>
<div class="block-begin__cardOption">
<div class="block-begin__cardOptionText">{$t('white-label-broker.PSPs')}</div>
<img src={stick} alt="" class="block-begin__cardOptionActive" />
</div>
<div class="block-begin__cardOption">
<div class="block-begin__cardOptionText">{$t('white-label-broker.KYC providers')}</div>
<img src={stick} alt="" class="block-begin__cardOptionActive" />
</div>
<div class="block-begin__cardOption">
<div class="block-begin__cardOptionText">{$t('white-label-broker.Risk management')}</div>
<img src={stick} alt="" class="block-begin__cardOptionActive" />
</div>
<div class="block-begin__cardOption">
<div class="block-begin__cardOptionText">{$t('white-label-broker.Legal support')}</div>
<img src={stick} alt="" class="block-begin__cardOptionActive" />
</div>
<div class="block-begin__cardOption">
<div class="block-begin__cardOptionText">{$t('white-label-broker.Talent costs')}</div>
<img src={stick} alt="" class="block-begin__cardOptionActive" />
</div>
<div class="block-begin__cardOption">
<div class="block-begin__cardOptionText">{$t('white-label-broker.Talent trading (optional)')}</div>
<img src={stick} alt="" class="block-begin__cardOptionActive" />
</div>
</div>
<Button
text={$t('white-label-broker.Get started')}
className="block-begin__cardButton"
onClick={() => popupForm.set(true)}
/>
</div>
</div>
<div class="swiper-slide">
<div class="block-begin__card disabled">
<p class="block-begin__cardTitle">{$t('white-label-broker.Solution from scratch')}</p>
<div class="block-begin__cardHeader">
<p class="block-begin__cardHeaderSubtitle">{$t('white-label-broker.Setup costs')}</p>
<p class="block-begin__cardHeaderPrice">$150,000</p>
<p class="block-begin__cardHeaderSubtitle">{$t('white-label-broker.Time to market')}</p>
<p class="block-begin__cardHeaderTime">
<span>{$t('white-label-broker.from')}</span>
{$t('white-label-broker.6 months')}
</p>
</div>
<div class="block-begin__cardOptions">
<div class="block-begin__cardOption">
<div class="block-begin__cardOptionText">{$t('white-label-broker.Liquidity providers')}</div>
<img src={close} alt="" class="block-begin__cardOptionActive" />
</div>
<div class="block-begin__cardOption">
<div class="block-begin__cardOptionText">
{$t('white-label-broker.Cross-platform trading solution')}
</div>
<img src={close} alt="" class="block-begin__cardOptionActive" />
</div>
<div class="block-begin__cardOption">
<div class="block-begin__cardOptionText">{$t('white-label-broker.CRM system')}</div>
<img src={close} alt="" class="block-begin__cardOptionActive" />
</div>
<div class="block-begin__cardOption">
<div class="block-begin__cardOptionText">
{$t('white-label-broker.Retention tools and affiliate module')}
</div>
<img src={close} alt="" class="block-begin__cardOptionActive" />
</div>
<div class="block-begin__cardOption">
<div class="block-begin__cardOptionText">{$t('white-label-broker.PSPs')}</div>
<img src={close} alt="" class="block-begin__cardOptionActive" />
</div>
<div class="block-begin__cardOption">
<div class="block-begin__cardOptionText">{$t('white-label-broker.KYC providers')}</div>
<img src={close} alt="" class="block-begin__cardOptionActive" />
</div>
<div class="block-begin__cardOption">
<div class="block-begin__cardOptionText">{$t('white-label-broker.Risk management')}</div>
<img src={close} alt="" class="block-begin__cardOptionActive" />
</div>
<div class="block-begin__cardOption">
<div class="block-begin__cardOptionText">{$t('white-label-broker.Legal support')}</div>
<img src={close} alt="" class="block-begin__cardOptionActive" />
</div>
<div class="block-begin__cardOption">
<div class="block-begin__cardOptionText">{$t('white-label-broker.Talent costs')}</div>
<img src={close} alt="" class="block-begin__cardOptionActive" />
</div>
<div class="block-begin__cardOption">
<div class="block-begin__cardOptionText">{$t('white-label-broker.Talent trading (optional)')}</div>
<img src={close} alt="" class="block-begin__cardOptionActive" />
</div>
</div>
</div>
</div>
</div>
</div>
<PaginationEl className="block-begin__pagination" />
</div>
</div>
</div>
<style lang="scss">
@import 'src/scss/variables';
@import 'src/scss/media';
@import 'src/scss/mixins';
.block-begin {
padding: 102px 0 89px;
@include breakpoint-down('deskL') {
padding-bottom: 68px;
}
@include breakpoint-down('deskS') {
padding: 64px 0 24px;
}
@include breakpoint-down('tabM') {
padding-top: 83px;
padding-bottom: 43px;
}
&__title {
@include titleXL;
text-align: center;
width: 100%;
max-width: 920px;
margin-inline: auto;
margin-bottom: 24px;
@include breakpoint-down('deskS') {
margin-bottom: 8px;
}
br {
@include breakpoint-down('tabM') {
display: none;
}
}
}
&__text {
text-align: center;
width: 100%;
max-width: 920px;
margin-inline: auto;
margin-bottom: 80px;
@include breakpoint-down('deskL') {
margin-bottom: 94px;
}
@include breakpoint-down('deskS') {
max-width: 400px;
margin-bottom: 40px;
}
@include breakpoint-down('tabM') {
margin-bottom: 64px;
}
}
&__list {
display: flex;
gap: 40px;
margin-bottom: 163px;
@include breakpoint-down('deskL') {
gap: 32px;
margin-bottom: 178px;
}
@include breakpoint-down('deskS') {
column-gap: 40px;
row-gap: 24px;
flex-wrap: wrap;
width: 100%;
max-width: 530px;
margin-inline: auto;
margin-bottom: 80px;
}
@include breakpoint-down('tabM') {
flex-wrap: wrap;
gap: 40px;
margin-bottom: 83px;
}
}
&__listItem {
width: calc((100% - 40px * 3) / 4);
@include breakpoint-down('deskL') {
width: calc((100% - 32px * 3) / 4);
}
@include breakpoint-down('deskS') {
width: calc((100% - 40px) / 2);
}
@include breakpoint-down('tabM') {
width: 100%;
}
}
&__listItemTitle {
@include baseTitle;
margin-bottom: 16px;
@include breakpoint-down('deskL') {
margin-bottom: 8px;
}
@include breakpoint-down('tabM') {
text-align: center;
}
}
&__listItemText {
@include smallDefault;
color: $techBluePrimary;
@include breakpoint-down('tabM') {
text-align: center;
}
}
&__wrapper {
width: 100%;
max-width: 920px;
margin-inline: auto;
@include breakpoint-down('deskL') {
max-width: 736px;
}
}
&__swiper {
overflow: initial;
.swiper-slide {
height: auto !important;
}
}
&__card {
height: 100%;
width: 100%;
padding: 40px 40px;
border-radius: 16px;
border: 1px solid $techBlue2;
background: $techBlue1;
filter: drop-shadow(0px 4px 10px #ebf0f4);
@include breakpoint-down('deskL') {
padding: 40px 32px;
}
&.disabled {
border: 1px solid $techBlue2;
background: transparent;
filter: none;
.block-begin__cardTitle,
.block-begin__cardHeaderPrice,
.block-begin__cardHeaderSubtitle,
.block-begin__cardHeaderTime,
.block-begin__cardOptionText {
color: $techBlueSecondary;
}
.block-begin__cardHeader {
padding: 32.5px 0;
@include breakpoint-down('deskS') {
padding: 2px 0 0;
}
}
.block-begin__cardHeaderPrice {
font-size: 24px;
font-weight: 700;
line-height: 26px;
@include breakpoint-down('deskS') {
font-size: 18px;
line-height: 20px;
}
span {
color: $techBlueSecondary;
}
}
.block-begin__cardHeaderTime {
font-size: 24px;
font-weight: 700;
line-height: 26px;
@include breakpoint-down('deskS') {
font-size: 18px;
line-height: 20px;
margin-bottom: 26px;
}
}
}
}
&__cardTitle {
@include titleM;
text-align: center;
margin-bottom: 18px;
}
&__cardHeader {
padding: 24px;
border-bottom: 1px solid $techBlue2;
@include breakpoint-down('deskS') {
padding: 0;
}
}
&__cardHeaderSubtitle {
text-align: center;
font-size: 10px;
font-weight: 400;
line-height: 14px;
margin-bottom: 2px;
}
&__cardHeaderPrice {
font-family: $Inter;
font-size: 32px;
font-weight: 700;
line-height: 35px;
text-align: center;
color: $ecoGreen;
display: flex;
align-items: baseline;
justify-content: center;
gap: 5px;
margin-bottom: 16px;
@include breakpoint-down('deskS') {
font-size: 24px;
line-height: 26px;
}
span {
@include smallDefault;
display: flex;
color: $fontPrimary;
}
}
&__cardHeaderTime {
font-family: $Inter;
font-size: 32px;
font-weight: 700;
line-height: 35px;
text-align: center;
display: flex;
align-items: flex-end;
justify-content: center;
gap: 5px;
@include breakpoint-down('deskS') {
font-size: 24px;
line-height: 26px;
margin-bottom: 16px;
}
span {
@include smallDefault;
display: flex;
}
}
&__cardOptions {
padding: 24px 0;
margin-bottom: 16px;
}
&__cardOption {
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid $techBlue2;
padding: 1px 0;
@include breakpoint-down('deskL') {
padding: 0.5px 0;
}
}
&__cardOptionText {
@include smallCTA;
}
&__cardOptionActive {
width: 30px;
min-width: 30px;
height: 30px;
@include breakpoint-down('deskS') {
width: 28px;
min-width: 28px;
height: 28px;
}
}
& :global(.block-begin__cardButton) {
@include baseCTA;
padding: 12px 50px;
margin-inline: auto;
}
& :global(.block-begin__pagination) {
padding-top: 43px;
}
& :global(.block-begin__cardHeaderTime span) {
@include smallDefault;
display: flex;
}
}
</style>