File: /var/www/quadcode.com/src/components/blocks/prop-firm/KickstartYourBroker.svelte
<script lang="ts">
import Button from '../../button/Button.svelte';
import { t, locale, defaultLocale } from '$lib/translations';
import { popupForm } from '../../../store';
</script>
<section class="kickstart {$locale !== defaultLocale ? 'lang' : ''}">
<div class="container">
<h2 class="kickstart__title">{@html $t('prop-firm.Kickstart your broker within 14 days')}</h2>
<div class="kickstart__steps">
<div class="kickstart__line">
<svg width="120" height="4" viewBox="0 0 120 4" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.5 2L118.5 1.99999" stroke="url(#paint0_linear_394_5938)" stroke-width="3" stroke-linecap="round" stroke-dasharray="6 6"/>
<defs>
<linearGradient id="paint0_linear_394_5938" x1="3.5" y1="2" x2="4.05708" y2="10.054" gradientUnits="userSpaceOnUse">
<stop stop-color="#FF3737"/>
<stop offset="1" stop-color="#FFA4A5" stop-opacity="0.42"/>
</linearGradient>
</defs>
</svg>
</div>
<div class="kickstart__step">
<div class="kickstart__stepСircle">01</div>
</div>
<div class="kickstart__line">
<svg width="120" height="4" viewBox="0 0 120 4" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.5 2L118.5 1.99999" stroke="url(#paint0_linear_394_5938)" stroke-width="3" stroke-linecap="round" stroke-dasharray="6 6"/>
<defs>
<linearGradient id="paint0_linear_394_5938" x1="3.5" y1="2" x2="4.05708" y2="10.054" gradientUnits="userSpaceOnUse">
<stop stop-color="#FF3737"/>
<stop offset="1" stop-color="#FFA4A5" stop-opacity="0.42"/>
</linearGradient>
</defs>
</svg>
</div>
<div class="kickstart__step">
<div class="kickstart__stepСircle">02</div>
</div>
<div class="kickstart__line">
<svg width="120" height="4" viewBox="0 0 120 4" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.5 2L118.5 1.99999" stroke="url(#paint0_linear_394_5938)" stroke-width="3" stroke-linecap="round" stroke-dasharray="6 6"/>
<defs>
<linearGradient id="paint0_linear_394_5938" x1="3.5" y1="2" x2="4.05708" y2="10.054" gradientUnits="userSpaceOnUse">
<stop stop-color="#FF3737"/>
<stop offset="1" stop-color="#FFA4A5" stop-opacity="0.42"/>
</linearGradient>
</defs>
</svg>
</div>
<div class="kickstart__step">
<div class="kickstart__stepСircle">03</div>
</div>
<div class="kickstart__line">
<svg width="120" height="4" viewBox="0 0 120 4" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.5 2L118.5 1.99999" stroke="url(#paint0_linear_394_5938)" stroke-width="3" stroke-linecap="round" stroke-dasharray="6 6"/>
<defs>
<linearGradient id="paint0_linear_394_5938" x1="3.5" y1="2" x2="4.05708" y2="10.054" gradientUnits="userSpaceOnUse">
<stop stop-color="#FF3737"/>
<stop offset="1" stop-color="#FFA4A5" stop-opacity="0.42"/>
</linearGradient>
</defs>
</svg>
</div>
<div class="kickstart__step">
<div class="kickstart__stepСircle">04</div>
</div>
<div class="kickstart__line">
<svg width="120" height="4" viewBox="0 0 120 4" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.5 2L118.5 1.99999" stroke="url(#paint0_linear_394_5938)" stroke-width="3" stroke-linecap="round" stroke-dasharray="6 6"/>
<defs>
<linearGradient id="paint0_linear_394_5938" x1="3.5" y1="2" x2="4.05708" y2="10.054" gradientUnits="userSpaceOnUse">
<stop stop-color="#FF3737"/>
<stop offset="1" stop-color="#FFA4A5" stop-opacity="0.42"/>
</linearGradient>
</defs>
</svg>
</div>
<div class="kickstart__step">
<div class="kickstart__stepСircle final">05</div>
</div>
<div class="kickstart__line">
<svg width="120" height="24" viewBox="0 0 120 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.5 10.5C0.671573 10.5 -7.24234e-08 11.1716 0 12C7.24234e-08 12.8284 0.671573 13.5 1.5 13.5L1.5 10.5ZM119.561 13.0606C120.146 12.4749 120.146 11.5251 119.561 10.9393L110.015 1.39339C109.429 0.807602 108.479 0.807602 107.893 1.39339C107.308 1.97918 107.308 2.92892 107.893 3.51471L116.379 12L107.893 20.4853C107.308 21.0711 107.308 22.0208 107.893 22.6066C108.479 23.1924 109.429 23.1924 110.015 22.6066L119.561 13.0606ZM1.5 13.5L4.425 13.5L4.425 10.5L1.5 10.5L1.5 13.5ZM10.275 13.5L16.125 13.5L16.125 10.5L10.275 10.5L10.275 13.5ZM21.975 13.5L27.825 13.5L27.825 10.5L21.975 10.5L21.975 13.5ZM33.675 13.5L39.525 13.5L39.525 10.5L33.675 10.5L33.675 13.5ZM45.375 13.5L51.225 13.5L51.225 10.5L45.375 10.5L45.375 13.5ZM57.075 13.5L62.925 13.5L62.925 10.5L57.075 10.5L57.075 13.5ZM68.775 13.5L74.625 13.5L74.625 10.5L68.775 10.5L68.775 13.5ZM80.475 13.5L86.325 13.5L86.325 10.5L80.475 10.5L80.475 13.5ZM92.175 13.5L98.025 13.5L98.025 10.5L92.175 10.5L92.175 13.5ZM103.875 13.5L109.725 13.5L109.725 10.5L103.875 10.5L103.875 13.5ZM115.575 13.5L118.5 13.5L118.5 10.5L115.575 10.5L115.575 13.5Z" fill="url(#paint0_linear_394_5939)"/>
<defs>
<linearGradient id="paint0_linear_394_5939" x1="3.5" y1="12" x2="4.05708" y2="20.054" gradientUnits="userSpaceOnUse">
<stop stop-color="#FF3737"/>
<stop offset="1" stop-color="#FFA4A5" stop-opacity="0.42"/>
</linearGradient>
</defs>
</svg>
</div>
</div>
<div class="kickstart__stepsText">
<div class="kickstart__stepTitle">{$t('prop-firm.Leave your request')}</div>
<div class="kickstart__stepTitle">{$t('prop-firm.Check out the demo')}</div>
<div class="kickstart__stepTitle">{$t('prop-firm.Customise the platform')}</div>
<div class="kickstart__stepTitle">{$t('prop-firm.Sign the contract')}</div>
<div class="kickstart__stepTitle">{$t('prop-firm.Get brokerage solution')}</div>
</div>
<Button onClick={() => {popupForm.set(true)}}>{$t('prop-firm.Make request')}</Button>
</div>
</section>
<style lang="scss">
@import "src/scss/variables";
@import "src/scss/media";
@import "src/scss/mixins";
.kickstart {
padding: 85px 0 95px 0;
@include breakpoint-down('deskL') {
padding: 60px 0 80px 0;
}
@include breakpoint-down('tabL') {
padding: 50px;
}
@include breakpoint-down('tabM') {
padding: 40px 0 45px 0;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
&__title {
@include H1;
margin-bottom: 40px;
text-align: center;
@include breakpoint-down('tabL') {
margin-bottom: 30px;
}
@include breakpoint-down('tabM') {
text-align: center;
width: 260px;
margin-bottom: 23px;
}
:global(span) {
color: $redPrimary;
}
}
&__steps {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
position: relative;
margin-bottom: 9px;
@include breakpoint-down('tabL') {
margin-bottom: 3px;
width: 684px;
}
@include breakpoint-down('tabM') {
flex-direction: column;
margin-bottom: 23px;
width: 100%;
}
}
&__step {
display: flex;
flex-direction: column;
gap: 25px;
position: relative;
}
&__stepСircle {
font-weight: 600;
font-size: 36px;
line-height: 39.6px;
letter-spacing: -4%;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
color: $redPrimary;
border: 1px solid transparent;
border-radius: 60px;
width: 82px;
height: 82px;
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;
position: relative;
@include breakpoint-down('tabL') {
font-size: 24px;
line-height: 26.4px;
letter-spacing: -4;
text-align: center;
width: 64px;
height: 64px;
}
&::before {
content: "";
width: 6px;
height: 6px;
position: absolute;
border-radius: 100%;
left: -4px;
top: 0;
bottom: 0;
margin: auto;
border-width: 1px;
background: rgba(230, 35, 52, 1);
box-shadow: 0px 4px 4px 0px rgba(231, 44, 57, 0.6);
box-shadow: 1px 1px 1px 0px rgba(255, 135, 135, 0.6) inset;
@include breakpoint-down('tabM') {
top: -4px;
bottom: auto;
left: 0;
right: 0;
}
}
&.final {
width: 114px;
height: 114px;
font-weight: 600;
font-size: 49px;
line-height: 53.9px;
letter-spacing: -4%;
text-align: center;
@include breakpoint-down('tabL') {
font-size: 38px;
line-height: 41.8px;
letter-spacing: -4%;
text-align: center;
width: 82px;
height: 82px;
}
}
}
&__stepsText {
display: flex;
justify-content: center;
align-items: start;
margin-bottom: 40px;
@include breakpoint-down('tabL') {
margin-bottom: 31px;
}
@include breakpoint-down('tabM') {
flex-direction: column;
align-items: center;
justify-content: center;
gap: 84px;
position: absolute;
left: 0;
right: 0;
top: 246px;
margin: auto;
}
}
&__stepTitle {
width: 160px;
@include accent;
font-weight: 700;
text-align: center;
@include breakpoint-down('deskL') {
@include H3;
}
@include breakpoint-down('tabL') {
@include body;
}
@include breakpoint-down('tabM') {
@include H3;
padding: 6px 10px;
background: #FFFFFF;
text-align: center;
width: fit-content;
}
&:nth-child(1) {
width: 141px;
margin-right: 18px;
@include breakpoint-down('tabL') {
width: 111px;
margin-right: 0.5px;
}
@include breakpoint-down('tabM') {
width: fit-content;
margin: 0;
}
}
&:nth-child(2) {
width: 148px;
margin-right: 2px;
@include breakpoint-down('tabL') {
width: 116px;
margin-right: -2px;
}
@include breakpoint-down('tabM') {
width: fit-content;
margin: 0;
}
}
&:nth-child(3) {
width: 172px;
margin-right: 13px;
@include breakpoint-down('tabL') {
width: 135px;
margin-right: -2px;
}
@include breakpoint-down('tabM') {
width: fit-content;
margin: 3px 0 0 0;
}
}
&:nth-child(4) {
width: 126px;
margin-right: 34px;
@include breakpoint-down('tabL') {
width: 99px;
margin-right: 11px;
}
@include breakpoint-down('tabM') {
width: fit-content;
margin: 0;
}
}
&:nth-child(5) {
width: 148px;
margin-right: 2px;
margin-top: 6px;
@include breakpoint-down('tabL') {
width: 132px;
margin-top: 0;
margin-right: 28px;
}
@include breakpoint-down('tabM') {
width: fit-content;
margin: 30px 0 0 0;
}
}
}
&__line {
display: flex;
width: 80px;
height: fit-content;
@include breakpoint-down('tabL') {
width: 100%;
svg {
width: 51px;
}
}
@include breakpoint-down('tabM') {
height: 51px;
display: flex;
justify-content: center;
align-items: center;
svg {
width: 51px;
transform: rotate(90deg);
}
}
&:last-child {
@include breakpoint-down('tabL') {
svg {
width: 83px;
}
}
@include breakpoint-down('tabM') {
height: 81px;
svg {
width: 81px;
}
}
}
&:first-child {
@include breakpoint-down('tabM') {
height: 61px;
svg {
width: 61px;
}
}
}
}
:global(.button) {
font-weight: 700;
font-size: 30px;
line-height: 33px;
letter-spacing: 0;
text-align: center;
padding: 20px 42px;
@include breakpoint-down('deskL') {
@include accent;
padding: 14px 36px;
}
@include breakpoint-down('tabL') {
@include table;
padding: 12px 24px;
}
@include breakpoint-down('tabM') {
width: 100%;
}
}
&.lang {
.kickstart__title {
@include breakpoint-down('tabM') {
width: 320px;
}
}
}
}
</style>