File: /var/www/quadcode.com/src/components/blocks/turnkey-solution/Launch.svelte
<script lang="ts">
import Button from '../../button/Button.svelte';
import { popupForm } from '../../../store.js';
import { t } from '$lib/translations';
</script>
<div class="block-launch">
<div class="container">
<div class="block-launch__wrapper">
<p class="block-launch__title">
{@html $t('turnkey-solution.Launch your broker in')}<br> {@html $t('turnkey-solution.as less as 2 weeks')}
</p>
<div class="block-launch__list">
<div class="block-launch__item">
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="14" cy="14.0098" r="14" fill="#F8FBFD" />
<circle cx="13.9995" cy="14.0093" r="6.74074" fill="#CFDAE1" />
<circle cx="14" cy="14.0098" r="3" fill="#445667" />
</svg>
<p class="block-launch__itemNumber">{$t('turnkey-solution.1')}.</p>
<p class="block-launch__itemTitle">{$t('turnkey-solution.Define target market')}</p>
<p class="block-launch__itemText">{$t('turnkey-solution.Select the operational regions for your white label brokerage firm.')}</p>
</div>
<div class="block-launch__item">
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="14" cy="14.0098" r="14" fill="#F8FBFD" />
<circle cx="13.9995" cy="14.0093" r="6.74074" fill="#CFDAE1" />
<circle cx="14" cy="14.0098" r="3" fill="#445667" />
</svg>
<p class="block-launch__itemNumber">{$t('turnkey-solution.2')}.</p>
<p class="block-launch__itemTitle">{$t('turnkey-solution.Choose software specifications')}</p>
<p class="block-launch__itemText">
{$t('turnkey-solution.Our easy-to-use backoffice will give you the tools to be the broker you want.')}
</p>
</div>
<div class="block-launch__item">
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="14" cy="14.0098" r="14" fill="#F8FBFD" />
<circle cx="13.9995" cy="14.0093" r="6.74074" fill="#CFDAE1" />
<circle cx="14" cy="14.0098" r="3" fill="#445667" />
</svg>
<p class="block-launch__itemNumber">{$t('turnkey-solution.3')}.</p>
<p class="block-launch__itemTitle">{$t('turnkey-solution.Setup & deployment')}</p>
<p class="block-launch__itemText">
{$t('turnkey-solution.Set up a cutting-edge brokerage platform in just 2 weeks with minimal effort.')}
</p>
</div>
<div class="block-launch__item">
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="14" cy="14.0098" r="14" fill="#F8FBFD" />
<circle cx="13.9995" cy="14.0093" r="6.74074" fill="#CFDAE1" />
<circle cx="14" cy="14.0098" r="3" fill="#445667" />
</svg>
<p class="block-launch__itemNumber">{$t('turnkey-solution.4')}.</p>
<p class="block-launch__itemTitle">{$t('turnkey-solution.Start attracting traders')}</p>
<p class="block-launch__itemText">
{$t('turnkey-solution.Drive traffic to your website, attract new traders, and boost your earnings.')}
</p>
</div>
</div>
<Button text={$t('turnkey-solution.Start now')} className="block-launch__button" onClick={() => popupForm.set(true)} />
</div>
</div>
</div>
<style lang="scss">
@import 'src/scss/media';
@import 'src/scss/mixins';
@import 'src/scss/variables';
.block-launch {
padding-top: 112px;
padding-bottom: 104px;
background: $techBlue1;
@include breakpoint-down('deskL') {
padding-top: 96px;
padding-bottom: 113px;
}
@include breakpoint-down('deskS') {
padding-top: 87px;
padding-bottom: 48px;
}
@include breakpoint-down('tabM') {
padding-top: 78px;
padding-bottom: 57px;
}
&__title {
@include titleL;
margin-bottom: 40px;
text-align: center;
width: 100%;
max-width: 680px;
margin-inline: auto;
@include breakpoint-down('deskL') {
margin-bottom: 56px;
}
@include breakpoint-down('deskS') {
margin-bottom: 40px;
}
@include breakpoint-down('tabM') {
margin-bottom: 60px;
}
> span {
color: $redPrimary;
}
}
&__list {
display: flex;
align-items: flex-start;
gap: 40px;
margin-bottom: 80px;
position: relative;
@include breakpoint-down('deskL') {
gap: 32px;
}
@include breakpoint-down('deskS') {
gap: 21px;
margin-bottom: 40px;
}
@include breakpoint-down('tabM') {
flex-direction: column;
gap: 57px;
margin-bottom: 64px;
}
&:after {
content: '';
position: absolute;
top: 15px;
left: 0;
right: 0;
width: 100%;
height: 2px;
background: linear-gradient(269.99deg, #889aa8 1.8%, rgba(255, 255, 255, 0) 100%);
@include breakpoint-down('deskS') {
top: 6px;
}
@include breakpoint-down('tabM') {
width: 2px;
height: 100%;
right: auto;
bottom: 0;
top: 0;
left: 47px;
background: linear-gradient(0deg, #dbdfe8 1.8%, rgba(219, 223, 232, 0) 100%);
}
}
}
&__item {
width: calc((100% - 40px * 3) / 4);
padding-top: 45px;
position: relative;
z-index: 2;
@include breakpoint-down('deskL') {
width: calc((100% - 32px * 3) / 4);
}
@include breakpoint-down('deskS') {
width: calc((100% - 21px * 3) / 4);
padding-top: 21px;
}
@include breakpoint-down('tabM') {
width: 100%;
padding-top: 0;
padding-left: 98px;
}
> svg {
position: absolute;
top: 2px;
left: -12px;
@include breakpoint-down('deskS') {
width: 14px;
height: 14px;
top: -1px;
left: -8px;
}
@include breakpoint-down('tabM') {
width: 27px;
height: 27px;
left: 34px;
top: 0;
}
}
}
&__itemNumber {
@include baseCTA;
color: $redPrimary;
margin-bottom: 6px;
@include breakpoint-down('deskS') {
margin-bottom: 4px;
}
@include breakpoint-down('tabM') {
font-size: 25px;
font-weight: 700;
line-height: 28px;
margin-bottom: 7px;
}
}
&__itemTitle {
@include baseTitle;
margin-bottom: 8px;
@include breakpoint-down('deskS') {
margin-bottom: 4px;
}
@include breakpoint-down('tabM') {
font-size: 18px;
font-weight: 700;
line-height: 20px;
}
}
&__itemText {
@include smallDefault;
color: $darkGrey;
@include breakpoint-down('tabM') {
font-size: 13px;
font-weight: 400;
line-height: 18px;
}
}
& :global(.block-launch__button) {
@include baseCTA;
width: 260px;
margin-inline: auto;
@include breakpoint-down('deskS') {
width: max-content;
}
}
& :global(.block-launch__title span) {
color: $redPrimary;
}
}
</style>