File: /var/www/quadcode.com/src/components/blocks/white-label-binary-options/Why.svelte
<script lang="ts">
import image from '../../../assets/images/white-label-binary-options/why/why.webp';
import image2x from '../../../assets/images/white-label-binary-options/why/why@2x.webp';
import imageDeskL from '../../../assets/images/white-label-binary-options/why/whyDeskL.webp';
import imageDeskL2x from '../../../assets/images/white-label-binary-options/why/whyDeskL@2x.webp';
import imageTab from '../../../assets/images/white-label-binary-options/why/whyTab.webp';
import imageTab2x from '../../../assets/images/white-label-binary-options/why/whyTab@2x.webp';
import imageMob from '../../../assets/images/white-label-binary-options/why/whyMob.webp';
import imageMob2x from '../../../assets/images/white-label-binary-options/why/whyMob@2x.webp';
import decor from '../../../assets/images/white-label-binary-options/why/whyDecor.svg';
import decorDeskL from '../../../assets/images/white-label-binary-options/why/whyDecorDeskL.svg';
import decorTab from '../../../assets/images/white-label-binary-options/why/whyDecorTab.svg';
import { t, locale } from '$lib/translations';
</script>
<section class="why {$locale !== 'en' ? 'locale' : ''} {$locale}">
<div class="why__content">
<div class="container">
<div class="why__text">
<h2 class="why__title">{$t('white-label-binary-options.Why Quadcode?')}</h2>
<p class="why__description">{$t('white-label-binary-options.Because starting your brokerage business has never been easier!')}</p>
</div>
<div class="why__card">
<div class="why__cardText">
<p class="why__cardTitle">{$t('white-label-binary-options.Zero Extra Fees')}</p>
<p class="why__cardDescription">{$t('white-label-binary-options.Pay once for a comprehensive turnkey brokerage.')}</p>
</div>
<div class="why__cardText">
<p class="why__cardTitle">{$t('white-label-binary-options.Top software solutions')}</p>
<p class="why__cardDescription">{@html $t('white-label-binary-options.Your clients will enjoy exceptionally high uptime & our golden standards of fintech.')}</p>
</div>
<div class="why__cardText">
<p class="why__cardTitle">
{$t('white-label-binary-options.Save up to')}
<span>$150 000</span>
</p>
<p class="why__cardDescription">{$t('white-label-binary-options.On development costs and even more on fraud protection')}</p>
</div>
<picture>
<source srcset="{imageMob} 1x, {imageMob2x} 2x" media="(max-width: 767px)">
<source srcset="{imageTab} 1x, {imageTab2x} 2x" media="(max-width: 1365px)">
<source srcset="{imageDeskL} 1x, {imageDeskL2x} 2x" media="(max-width: 1799px)">
<img src={image} srcset="{image} 1x, {image2x} 2x" alt="bg">
</picture>
</div>
</div>
<picture>
<source srcset="{decorTab}" media="(max-width: 1365px)">
<source srcset="{decorDeskL}" media="(max-width: 1799px)">
<img class="why__decor" src={decor} alt="decor">
</picture>
</div>
</section>
<style lang="scss">
@import "src/scss/variables";
@import "src/scss/media";
@import "src/scss/mixins";
.why {
background: $techBlue2;
&__content {
border-radius: 40px;
border: 1px solid rgba(207, 218, 225, 1);
padding: 45px 0 45px 64px;
position: relative;
overflow: hidden;
background: linear-gradient(53.99deg, #F8FBFD 8.34%, #CCEBFF 97.82%);
&::before {
content: '';
display: flex;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("../../../assets/images/white-label-binary-options/why/pattern.svg");
background-position: 50%;
@include breakpoint-down('tabL') {
background-image: url("../../../assets/images/white-label-binary-options/why/patternTab.svg");
background-position: 50% 28%;
}
}
@include breakpoint-down('deskL') {
border-radius: 30px;
padding: 29px 0 33px 37px;
}
@include breakpoint-down('tabL') {
padding: 43px 0 42px 38px;
}
@include breakpoint-down('tabM') {
padding: 50px 0 45px 0;
border-radius: 12px;
}
}
.container {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
z-index: 1;
@include breakpoint-down('deskL') {
gap: 122px;
}
@include breakpoint-down('deskS') {
gap: 10px;
}
@include breakpoint-down('tabL') {
gap: 0;
}
@include breakpoint-down('tabM') {
flex-direction: column;
gap: 5px;
}
}
&__text {
display: flex;
flex-direction: column;
width: 541px;
margin-top: -5px;
@include breakpoint-down('deskL') {
width: 320px;
margin-top: -66px;
}
@include breakpoint-down('tabL') {
width: 252px;
margin-top: -95px;
}
@include breakpoint-down('tabM') {
margin-top: 0;
justify-content: center;
}
}
&__title {
@include H1;
color: $redPrimary;
margin-bottom: 24px;
letter-spacing: -0.2px;
@include breakpoint-down('deskL') {
margin-bottom: 12px;
}
@include breakpoint-down('tabM') {
text-align: center;
}
}
&__description {
@include H3;
width: 437px;
letter-spacing: -0.2px;
@include breakpoint-down('deskL') {
width: 320px;
}
@include breakpoint-down('tabL') {
width: 252px;
line-height: 18px;
}
}
&__decor {
position: absolute;
top: 155px;
left: 0;
width: 100%;
height: fit-content;
z-index: 0;
display: none;
@media (max-width: 2000px) {
display: flex;
}
@include breakpoint-down('deskL') {
top: 178px;
}
@include breakpoint-down('tabL') {
top: 187px;
}
@include breakpoint-down('tabM') {
display: none;
}
}
&__card {
width: 880px;
height: 894px;
position: relative;
padding: 126px 0 0 240px;
@include breakpoint-down('deskL') {
width: 679px;
min-width: 679px;
height: 706px;
padding: 92px 0 0 191px;
}
@include breakpoint-down('tabL') {
width: 393px;
min-width: 393px;
height: 446px;
padding: 55px 0 0 90px;
}
@include breakpoint-down('tabM') {
width: 335px;
min-width: 335px;
height: 356px;
padding: 53px 0 0 73px;
}
img {
width: 102%;
height: fit-content;
position: absolute;
top: 0;
left: 13px;
right: 0;
bottom: 0;
@include breakpoint-down('deskL') {
left: 0;
}
@include breakpoint-down('tabL') {
width: 111%;
left: -20px;
}
@include breakpoint-down('tabM') {
width: 112%;
}
}
}
&__cardText {
z-index: 1;
position: relative;
height: 200px;
@include breakpoint-down('deskL') {
height: 131px;
}
@include breakpoint-down('tabL') {
height: 89px;
}
@include breakpoint-down('tabM') {
height: 81px;
}
&:nth-child(1) {
width: 265px;
margin-bottom: 80px;
@include breakpoint-down('deskL') {
width: 194px;
margin-bottom: 86px;
}
@include breakpoint-down('tabL') {
width: 126px;
margin-bottom: 46px;
}
@include breakpoint-down('tabM') {
margin-bottom: 31px;
}
.why__cardDescription {
@include breakpoint-down('tabM') {
width: 100px;
}
}
}
&:nth-child(2) {
width: 246px;
margin-bottom: 67px;
@include breakpoint-down('deskL') {
width: 214px;
margin-bottom: 90px;
}
@include breakpoint-down('tabL') {
width: 147px;
margin-bottom: 51px;
}
@include breakpoint-down('tabM') {
width: 141px;
margin-bottom: 27px;
}
:global(br) {
display: none;
@include breakpoint-down('tabM') {
display: inline;
}
}
}
&:nth-child(3) {
width: 255px;
@include breakpoint-down('deskL') {
width: 198px;
}
@include breakpoint-down('tabL') {
width: 139px;
}
.why__cardTitle {
@include breakpoint-down('tabL') {
margin-bottom: 8px;
}
}
}
}
&__cardTitle {
@include H3;
margin-bottom: 8px;
letter-spacing: -0.2px;
@include breakpoint-down('deskL') {
@include H2;
}
@include breakpoint-down('tabL') {
margin-bottom: 4px;
}
@include breakpoint-down('tabM') {
@include H3;
}
span {
display: flex;
position: relative;
color: $techWhite;
&::before {
content: "";
background: rgba(254, 0, 0, 1);
width: 137px;
height: 36px;
border-radius: 12px;
position: absolute;
top: 0;
left: -10px;
z-index: -1;
@include breakpoint-down('deskL') {
width: 123px;
height: 31px;
top: -2px;
}
@include breakpoint-down('tabL') {
width: 85px;
height: 23px;
top: -1px;
left: -2px;
border-radius: 8px;
}
@include breakpoint-down('tabM') {
width: 80px;
height: 18px;
top: 0;
left: -4px;
border-radius: 4px;
}
}
}
}
&__cardDescription {
@include subtext;
}
&.locale {
.why__cardText:nth-child(1) {
.why__cardDescription {
background: rgb(240 249 255 / 64%);
@include breakpoint-down('tabM') {
width: 190px;
}
}
}
.why__cardText:nth-child(2) {
width: 304px;
@include breakpoint-down('deskL') {
width: 328px;
}
@include breakpoint-down('tabL') {
width: 216px;
}
@include breakpoint-down('tabM') {
width: 188px;
}
.why__cardDescription {
background: rgb(207 221 232 / 67%);
}
}
}
&.es {
.why__cardText:nth-child(2) {
.why__cardTitle {
@include breakpoint-down('deskL') {
width: 259px;
}
@include breakpoint-down('tabL') {
width: 182px;
}
@include breakpoint-down('tabM') {
width: fit-content;
}
}
}
}
&.ru {
.why__cardText:nth-child(1) {
@include breakpoint-down('deskL') {
width: 235px;
}
@include breakpoint-down('tabL') {
width: 175px;
}
}
.why__cardText:nth-child(2) {
@include breakpoint-down('deskL') {
width: 231px;
}
@include breakpoint-down('tabL') {
width: 148px;
}
}
.why__card {
@include breakpoint-down('tabL') {
padding: 55px 0 0 80px;
}
@include breakpoint-down('tabM') {
padding: 53px 0 0 73px;
}
}
}
&.th {
.why__cardText:nth-child(2) {
@include breakpoint-down('deskL') {
width: 231px;
}
@include breakpoint-down('tabL') {
width: 148px;
}
@include breakpoint-down('tabM') {
width: 178px;
}
}
}
&.vi {
.why__cardText:nth-child(2) {
@include breakpoint-down('deskL') {
width: 326px;
}
@include breakpoint-down('tabL') {
width: 216px;
}
@include breakpoint-down('tabM') {
width: 188px;
}
}
}
}
</style>