File: /var/www/quadcode.com/src/components/blocks/white-label-binary-options/ItsEasyAs123.svelte
<script lang="ts">
import Button from '../../button/Button.svelte';
import { t, locale } from '$lib/translations';
import HowMuchCanYouEarn from './HowMuchCanYouEarn.svelte';
import { popupForm } from '../../../store';
</script>
<section class="itsEasyAs123 {$locale}">
<div class="itsEasyAs123__content">
<div class="container">
<h2 class="itsEasyAs123__title">{@html $t('white-label-binary-options.It’s as easy as 1–2–3')}</h2>
<div class="itsEasyAs123__stepsContainer">
<div class="itsEasyAs123__steps">
<svg width="93" height="4" viewBox="0 0 93 4" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M90.9766 1.71289L1.99981 1.71288" stroke="url(#paint0_linear_4478_47560)" stroke-width="3" stroke-linecap="round" stroke-dasharray="6 6"/>
<defs>
<linearGradient id="paint0_linear_4478_47560" x1="89.4556" y1="1.71289" x2="88.7256" y2="9.73908" gradientUnits="userSpaceOnUse">
<stop stop-color="#FF3737"/>
<stop offset="1" stop-color="#FFA4A5" stop-opacity="0.42"/>
</linearGradient>
</defs>
</svg>
<div class="itsEasyAs123__step">1</div>
<svg width="146" height="4" viewBox="0 0 146 4" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M143.852 1.71289L2.40134 1.71289" stroke="url(#paint0_linear_4478_47562)" stroke-width="3" stroke-linecap="round" stroke-dasharray="6 6"/>
<defs>
<linearGradient id="paint0_linear_4478_47562" x1="141.434" y1="1.71289" x2="140.972" y2="-6.35329" gradientUnits="userSpaceOnUse">
<stop stop-color="#FF3737"/>
<stop offset="1" stop-color="#FFA4A5" stop-opacity="0.42"/>
</linearGradient>
</defs>
</svg>
<div class="itsEasyAs123__step">2</div>
<svg width="146" height="4" viewBox="0 0 146 4" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M143.73 1.71289L2.28025 1.71289" stroke="url(#paint0_linear_4478_47556)" stroke-width="3" stroke-linecap="round" stroke-dasharray="6 6"/>
<defs>
<linearGradient id="paint0_linear_4478_47556" x1="141.313" y1="1.71289" x2="140.851" y2="-6.35329" gradientUnits="userSpaceOnUse">
<stop stop-color="#FF3737"/>
<stop offset="1" stop-color="#FFA4A5" stop-opacity="0.42"/>
</linearGradient>
</defs>
</svg>
<div class="itsEasyAs123__step">3</div>
<svg width="146" height="4" viewBox="0 0 146 4" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M143.605 1.71289L2.15525 1.71289" stroke="url(#paint0_linear_4478_47557)" stroke-width="3" stroke-linecap="round" stroke-dasharray="6 6"/>
<defs>
<linearGradient id="paint0_linear_4478_47557" x1="141.188" y1="1.71289" x2="140.726" y2="-6.35329" gradientUnits="userSpaceOnUse">
<stop stop-color="#FF3737"/>
<stop offset="1" stop-color="#FFA4A5" stop-opacity="0.42"/>
</linearGradient>
</defs>
</svg>
<div class="itsEasyAs123__step">4</div>
<svg width="145" height="4" viewBox="0 0 145 4" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M143.48 1.71289L2.03025 1.71289" stroke="url(#paint0_linear_4478_47558)" stroke-width="3" stroke-linecap="round" stroke-dasharray="6 6"/>
<defs>
<linearGradient id="paint0_linear_4478_47558" x1="141.063" y1="1.71289" x2="140.601" y2="-6.35329" gradientUnits="userSpaceOnUse">
<stop stop-color="#FF3737"/>
<stop offset="1" stop-color="#FFA4A5" stop-opacity="0.42"/>
</linearGradient>
</defs>
</svg>
<div class="itsEasyAs123__step">5</div>
<svg width="145" height="4" viewBox="0 0 145 4" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M143.48 1.71289L2.03025 1.71289" stroke="url(#paint0_linear_4478_47558)" stroke-width="3" stroke-linecap="round" stroke-dasharray="6 6"/>
<defs>
<linearGradient id="paint0_linear_4478_47558" x1="141.063" y1="1.71289" x2="140.601" y2="-6.35329" gradientUnits="userSpaceOnUse">
<stop stop-color="#FF3737"/>
<stop offset="1" stop-color="#FFA4A5" stop-opacity="0.42"/>
</linearGradient>
</defs>
</svg>
<div class="itsEasyAs123__step">
<svg width="45" height="43" viewBox="0 0 45 43" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.18714 3.22028L1.95173 2.92423C2.83989 2.62774 3.80222 3.0723 4.0981 3.93597C17.6422 -5.59175 24.303 10.5019 36.0221 3.51634C37.0085 2.97356 37.4029 3.56567 37.5757 4.08396L43.9162 21.9551C44.2366 22.8433 44.0646 23.5838 43.4474 23.9541C31.7782 31.0138 25.093 14.8709 11.5484 24.3742L17.2473 40.0726C17.568 40.9363 17.1237 41.8987 16.2606 42.1947L15.4711 42.4916C14.6078 42.812 13.6455 42.3677 13.3247 41.5039L0.175483 5.36769C-0.145236 4.50402 0.323897 3.54126 1.18714 3.22028Z" fill="white"/>
</svg>
</div>
<svg width="93" height="4" viewBox="0 0 93 4" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M90.9766 1.71289L1.99981 1.71288" stroke="url(#paint0_linear_4478_47560)" stroke-width="3" stroke-linecap="round" stroke-dasharray="6 6"/>
<defs>
<linearGradient id="paint0_linear_4478_47560" x1="89.4556" y1="1.71289" x2="88.7256" y2="9.73908" gradientUnits="userSpaceOnUse">
<stop stop-color="#FF3737"/>
<stop offset="1" stop-color="#FFA4A5" stop-opacity="0.42"/>
</linearGradient>
</defs>
</svg>
</div>
<div class="itsEasyAs123__stepsText">
<div class="itsEasyAs123__stepsTextItem">
<h3 class="itsEasyAs123__stepsTextTitle">{@html $t('white-label-binary-options.Leave request')}</h3>
<p class="itsEasyAs123__stepsTextDescription">{$t('white-label-binary-options.It only takes a minute')}</p>
</div>
<div class="itsEasyAs123__stepsTextItem">
<h3 class="itsEasyAs123__stepsTextTitle">{@html $t('white-label-binary-options.Check out the demo')}</h3>
<p class="itsEasyAs123__stepsTextDescription">{$t('white-label-binary-options.See our product in action')}</p>
</div>
<div class="itsEasyAs123__stepsTextItem">
<h3 class="itsEasyAs123__stepsTextTitle">{@html $t('white-label-binary-options.Customize your platform')}</h3>
<p class="itsEasyAs123__stepsTextDescription">{$t('white-label-binary-options.Go ahead and make it your own')}</p>
</div>
<div class="itsEasyAs123__stepsTextItem">
<h3 class="itsEasyAs123__stepsTextTitle">{@html $t('white-label-binary-options.Sign the contract')}</h3>
<p class="itsEasyAs123__stepsTextDescription">{$t("white-label-binary-options.You're almost at the finish line")}</p>
</div>
<div class="itsEasyAs123__stepsTextItem">
<h3 class="itsEasyAs123__stepsTextTitle">{@html $t('white-label-binary-options.Proceed with prepayment')}</h3>
<p class="itsEasyAs123__stepsTextDescription">{$t('white-label-binary-options.Choose from a variety of payment methods')}</p>
</div>
<div class="itsEasyAs123__stepsTextItem">
<h3 class="itsEasyAs123__stepsTextTitle">{@html $t('white-label-binary-options.Get brokerage solution')}</h3>
<p class="itsEasyAs123__stepsTextDescription">{$t("white-label-binary-options.We'll be there for you every step of the way")}</p>
</div>
</div>
</div>
<Button onClick={() => {popupForm.set(true)}}>{$t('white-label-binary-options.Leave Request')}</Button>
<HowMuchCanYouEarn />
</div>
</div>
</section>
<style lang="scss">
@import "src/scss/media";
@import "src/scss/mixins";
@import "src/scss/variables";
.itsEasyAs123 {
@include breakpoint-down('deskL') {
margin-top: -79px;
}
@include breakpoint-down('deskS') {
margin-top: -5px;
}
&__content {
background: rgba(245, 245, 245, 1);
border-top: 1px solid rgba(207, 218, 225, 1);
border-top-left-radius: 40px;
border-top-right-radius: 40px;
padding: 87px 0 90px 0;
@include breakpoint-down('deskL') {
padding: 60px 0 61px 0;
}
@include breakpoint-down('tabL') {
padding: 50px 0;
}
@include breakpoint-down('tabM') {
border-top-left-radius: 16px;
border-top-right-radius: 16px;
}
}
.container {
display: flex;
flex-direction: column;
align-items: center;
}
&__title {
@include H1;
margin-bottom: 66px;
@include breakpoint-down('deskL') {
margin-bottom: 48px;
}
@include breakpoint-down('tabL') {
margin-bottom: 35px;
}
@include breakpoint-down('tabM') {
margin-bottom: 40px;
}
:global(span) {
color: $redPrimary;
}
}
&__stepsContainer {
display: flex;
flex-direction: column;
@include breakpoint-down('tabM') {
flex-direction: row;
gap: 7px;
width: 321px;
margin-left: 9px;
}
}
&__steps {
display: flex;
align-items: center;
margin-bottom: 24px;
width: 1505px;
margin-left: 10px;
@include breakpoint-down('deskL') {
width: 1117.82px;
}
@include breakpoint-down('deskS') {
width: 703px;
margin-bottom: 15px;
margin-left: -5px;
}
@include breakpoint-down('tabM') {
flex-direction: column;
width: 48.31px;
margin-left: 0;
}
&> svg {
@include breakpoint-down('deskS') {
width: 70px;
}
@include breakpoint-down('tabM') {
width: 100%;
height: 40px;
transform: rotate(90deg);
}
&:first-child, &:last-child {
@include breakpoint-down('deskS') {
width: 32px
}
@include breakpoint-down('tabM') {
display: none;
}
}
}
}
&__step {
width: 103.43px;
height: 103.43px;
border: 3px solid transparent;
border-radius: 100%;
background: linear-gradient(#FFFFFF, #FFFFFF 0) padding-box, linear-gradient(125.13deg, #F96C6E 22.41%, rgba(255, 164, 165, 0.42) 80.51%) border-box;
display: flex;
justify-content: center;
align-items: center;
font-weight: 700;
font-size: 42px;
line-height: 46.2px;
letter-spacing: -7%;
text-align: center;
color: $redPrimary;
z-index: 1;
@include breakpoint-down('deskL') {
width: 76.82px;
min-width: 76.82px;
height: 76.82px;
min-height: 76.82px;
font-weight: 700;
font-size: 32px;
line-height: 35.2px;
letter-spacing: -7%;
text-align: center;
}
@include breakpoint-down('deskS') {
width: 48.31px;
min-width: 48.31px;
height: 48.31px;
min-height: 48.31px;
border-width: 1px;
font-weight: 700;
font-size: 22px;
line-height: 24.2px;
letter-spacing: -7%;
text-align: center;
}
&:nth-last-child(2) {
background: $redPrimary;
@include breakpoint-down('deskS') {
width: 65px;
min-width: 65px;
height: 65px;
min-height: 65px;
}
@include breakpoint-down('tabM') {
width: 48.31px;
min-width: 48.31px;
height: 48.31px;
min-height: 48.31px;
}
}
svg {
@include breakpoint-down('deskL') {
width: 32px;
height: 30.3749942779541px;
}
@include breakpoint-down('deskS') {
width: 19px;
height: 19px;
}
}
}
&__stepsText {
display: flex;
width: 1431px;
margin-bottom: 58px;
margin-left: 34px;
@include breakpoint-down('deskL') {
width: fit-content;
margin-bottom: 48px;
margin-left: 53px;
}
@include breakpoint-down('deskS') {
margin-left: 12px;
margin-bottom: 57px;
}
@include breakpoint-down('tabM') {
flex-direction: column;
margin-top: -2px;
margin-left: 6px;
margin-bottom: 33px;
}
}
&__stepsTextItem {
display: flex;
flex-direction: column;
align-items: center;
@include breakpoint-down('tabM') {
padding: 6.15px 0;
margin-bottom: 39px;
}
&:nth-child(1) {
width: 224px;
margin-right: 49px;
@include breakpoint-down('deskL') {
width: 119px;
margin-right: 42px;
}
@include breakpoint-down('deskS') {
width: 75px;
margin-right: 34px;
}
@include breakpoint-down('tabM') {
width: 100%;
}
.itsEasyAs123__stepsTextDescription {
width: 134px;
@include breakpoint-down('deskL') {
width: 100%;
}
@include breakpoint-down('deskS') {
width: 60px;
}
@include breakpoint-down('tabM') {
width: 100%;
}
}
}
&:nth-child(2) {
width: 173px;
margin-right: 69px;
@include breakpoint-down('deskL') {
width: 154px;
margin-right: 46px;
}
@include breakpoint-down('deskS') {
width: 83px;
margin-right: 15px;
}
@include breakpoint-down('tabM') {
width: 100%;
}
.itsEasyAs123__stepsTextDescription {
@include breakpoint-down('deskS') {
width: 78px;
}
@include breakpoint-down('tabM') {
width: 100%;
}
}
}
&:nth-child(3) {
width: 178px;
margin-right: 65px;
@include breakpoint-down('deskL') {
width: 127px;
margin-right: 61px;
}
@include breakpoint-down('deskS') {
width: 120px;
margin-right: 3px;
}
@include breakpoint-down('tabM') {
width: 100%;
}
.itsEasyAs123__stepsTextTitle {
@include breakpoint-down('deskL') {
width: 114px;
}
@include breakpoint-down('deskS') {
width: 100%;
}
}
.itsEasyAs123__stepsTextDescription {
width: 154px;
@include breakpoint-down('deskL') {
width: 134px;
}
@include breakpoint-down('deskS') {
width: 96px;
}
@include breakpoint-down('tabM') {
width: 100%;
}
}
}
&:nth-child(4) {
width: 169px;
margin-right: 39px;
@include breakpoint-down('deskL') {
width: 115px;
margin-right: 45px;
}
@include breakpoint-down('deskS') {
width: 108px;
margin-right: -2px;
}
@include breakpoint-down('tabM') {
width: 100%;
}
.itsEasyAs123__stepsTextDescription {
width: 110px;
@include breakpoint-down('deskL') {
width: 97px;
}
@include breakpoint-down('deskS') {
width: 86px;
}
@include breakpoint-down('tabM') {
width: 100%;
}
}
}
&:nth-child(5) {
width: 241px;
margin-right: 39px;
@include breakpoint-down('deskL') {
width: 164px;
margin-right: 19px;
}
@include breakpoint-down('deskS') {
width: 118px;
margin-right: 6px;
}
@include breakpoint-down('tabM') {
width: 100%;
}
.itsEasyAs123__stepsTextDescription {
width: 160px;
@include breakpoint-down('deskL') {
width: 149px;
}
@include breakpoint-down('deskS') {
width: 107px;
}
@include breakpoint-down('tabM') {
width: 100%;
}
}
}
&:nth-child(6) {
width: 185px;
@include breakpoint-down('deskL') {
width: 164px;
}
@include breakpoint-down('deskS') {
width: 131px;
}
@include breakpoint-down('tabM') {
width: 100%;
margin-bottom: 0;
}
}
}
&__stepsTextTitle {
@include H3;
width: 100%;
margin-bottom: 8px;
text-align: center;
letter-spacing: -0.9px;
@include breakpoint-down('deskS') {
line-height: 18px;
margin-bottom: 3px;
letter-spacing: -0.4px;
}
@include breakpoint-down('tabM') {
text-align: start;
font-size: 16px;
line-height: 18px;
margin-bottom: 5px;
letter-spacing: 0.1px;
}
:global(br) {
@include breakpoint-down('tabM') {
display: none;
}
}
}
&__stepsTextDescription {
@include subtext;
text-align: center;
@include breakpoint-down('tabM') {
@include body;
text-align: start;
}
}
:global(.button) {
width: 588px;
height: 73px;
font-weight: 700;
font-size: 30px;
line-height: 33px;
letter-spacing: 0;
text-align: center;
margin-bottom: 86px;
@include breakpoint-down('deskL') {
@include accent;
font-weight: 700;
width: fit-content;
height: 52px;
margin-bottom: 44px;
}
@include breakpoint-down('tabL') {
@include table;
font-weight: 700;
height: 38px;
border-radius: 60px;
padding: 12px 31px;
margin-bottom: 44px;
}
@include breakpoint-down('tabM') {
display: none;
}
}
&.pt {
.itsEasyAs123__stepsTextItem:nth-child(5) {
@include breakpoint-down('tabM') {
margin-bottom: 22px;
}
}
}
&.vi {
.itsEasyAs123__stepsTextItem:nth-child(5) {
@include breakpoint-down('tabM') {
margin-bottom: 28px;
}
}
}
&.th {
.itsEasyAs123__stepsText {
@include breakpoint-down('tabL') {
margin-bottom: 33px;
}
}
:global(.button) {
font-size: 14px;
}
}
}
</style>