File: /var/www/quadcode.com/src/components/blocks/prop-firm/BecomeADream.svelte
<script lang="ts">
import becomeADreamImage from '../../../assets/images/prop-firm/becomeADream.webp';
import becomeADreamMobileImage from '../../../assets/images/prop-firm/beconeADreamMobile.webp';
import decoration from '../../../assets/images/prop-firm/decoration.svg';
import { defaultLocale, t, locale } from '$lib/translations';
</script>
<section class="becomeADream {$locale !== defaultLocale ? 'lang' : ''}">
<div class="container">
<h2 class="becomeADream__title">{@html $t('prop-firm.Become a dream prop firm for your traders')}</h2>
<p class="becomeADream__description">{$t('prop-firm.Launch a proprietary trading platform with a smooth and seamless trading experience')}</p>
<picture >
<source srcset={becomeADreamMobileImage} media="(max-width: 767px)" >
<img src={becomeADreamImage} alt="" class="becomeADream__image" loading="lazy">
</picture>
<div class="becomeADream__rows">
<div class="becomeADream__row">
<div class="becomeADream__rowItem">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.551 23.8375L22.851 27.8375C23.6635 28.35 24.6635 27.5875 24.426 26.65L22.601 19.475C22.5516 19.2761 22.5595 19.0673 22.6236 18.8727C22.6877 18.6781 22.8056 18.5055 22.9635 18.375L28.6135 13.6625C29.351 13.05 28.976 11.8125 28.0135 11.75L20.6385 11.275C20.4372 11.2633 20.2438 11.1932 20.0817 11.0733C19.9197 10.9534 19.7961 10.789 19.726 10.6L16.976 3.67497C16.9032 3.47485 16.7706 3.30197 16.5961 3.17981C16.4217 3.05765 16.2139 2.99213 16.001 2.99213C15.788 2.99213 15.5802 3.05765 15.4058 3.17981C15.2314 3.30197 15.0988 3.47485 15.026 3.67497L12.276 10.6C12.2059 10.789 12.0823 10.9534 11.9202 11.0733C11.7582 11.1932 11.5647 11.2633 11.3635 11.275L3.98847 11.75C3.02597 11.8125 2.65097 13.05 3.38847 13.6625L9.03847 18.375C9.19639 18.5055 9.3142 18.6781 9.37834 18.8727C9.44247 19.0673 9.45032 19.2761 9.40097 19.475L7.71347 26.125C7.42597 27.25 8.62597 28.1625 9.58847 27.55L15.451 23.8375C15.6154 23.7329 15.8062 23.6774 16.001 23.6774C16.1958 23.6774 16.3866 23.7329 16.551 23.8375V23.8375Z" stroke="#E72C39" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
{$t('prop-firm.Watch List')}
</div>
<div class="becomeADream__rowItem">
<svg width="33" height="32" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M25.5 7L7.5 25" stroke="#E72C39" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10 13C11.933 13 13.5 11.433 13.5 9.5C13.5 7.567 11.933 6 10 6C8.067 6 6.5 7.567 6.5 9.5C6.5 11.433 8.067 13 10 13Z" stroke="#E72C39" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M23 26C24.933 26 26.5 24.433 26.5 22.5C26.5 20.567 24.933 19 23 19C21.067 19 19.5 20.567 19.5 22.5C19.5 24.433 21.067 26 23 26Z" stroke="#E72C39" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
{$t('prop-firm.Leveraged Trading')}
</div>
</div>
<div class="becomeADream__row">
<div class="becomeADream__rowItem">
<svg width="33" height="32" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15 25C20.799 25 25.5 20.299 25.5 14.5C25.5 8.70101 20.799 4 15 4C9.20101 4 4.5 8.70101 4.5 14.5C4.5 20.299 9.20101 25 15 25Z" stroke="#E72C39" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M22.4258 21.925L28.5008 28" stroke="#E72C39" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
{$t('prop-firm.Asset Selector')}
</div>
<div class="becomeADream__rowItem">
<svg width="33" height="32" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.5 28C23.1274 28 28.5 22.6274 28.5 16C28.5 9.37258 23.1274 4 16.5 4C9.87258 4 4.5 9.37258 4.5 16C4.5 22.6274 9.87258 28 16.5 28Z" stroke="#E72C39" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M14 19.5H20V13.5" stroke="#E72C39" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M13 12.5L20 19.5" stroke="#E72C39" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
{$t('prop-firm.Making Short Positions')}
</div>
</div>
<div class="becomeADream__row">
<div class="becomeADream__rowItem">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.77464 6.0625L12.0496 25.4625C12.1219 25.6534 12.2509 25.8176 12.4193 25.9331C12.5877 26.0485 12.7873 26.1097 12.9915 26.1083C13.1956 26.1069 13.3945 26.0431 13.5613 25.9255C13.7281 25.8078 13.8549 25.6419 13.9246 25.45L16.8371 17.4375C16.8878 17.3 16.9677 17.1752 17.0713 17.0716C17.1748 16.968 17.2997 16.8882 17.4371 16.8375L25.4496 13.925C25.6415 13.8553 25.8074 13.7285 25.9251 13.5616C26.0428 13.3948 26.1066 13.196 26.1079 12.9918C26.1093 12.7877 26.0482 12.588 25.9327 12.4197C25.8173 12.2513 25.6531 12.1223 25.4621 12.05L6.06214 4.775C5.88235 4.70757 5.68695 4.69332 5.49928 4.73396C5.31161 4.7746 5.13961 4.86842 5.00383 5.0042C4.86805 5.13998 4.77424 5.31197 4.73359 5.49964C4.69295 5.68731 4.7072 5.88272 4.77464 6.0625V6.0625Z" stroke="#E72C39" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M17.0742 17.075L25.9992 26" stroke="#E72C39" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
{$t('prop-firm.One-click Trading')}
</div>
<div class="becomeADream__rowItem">
<svg width="33" height="32" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.5 5H28.5V22C28.5 22.2652 28.3946 22.5196 28.2071 22.7071C28.0196 22.8946 27.7652 23 27.5 23H5.5C5.23478 23 4.98043 22.8946 4.79289 22.7071C4.60536 22.5196 4.5 22.2652 4.5 22V5Z" stroke="#E72C39" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M4.5 11H28.5" stroke="#E72C39" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M4.5 17H28.5" stroke="#E72C39" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12.5 27L20.5 27" stroke="#E72C39" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M16.5 23V27" stroke="#E72C39" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12.5 5L12.5 23" stroke="#E72C39" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M20.5 5L20.5 23" stroke="#E72C39" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
{$t('prop-firm.Up to 9 charts Display')}
</div>
</div>
</div>
<div class="becomeADream__cards">
<div class="becomeADream__card">
<div class="becomeADream__cardText">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16 28C22.6274 28 28 22.6274 28 16C28 9.37258 22.6274 4 16 4C9.37258 4 4 9.37258 4 16C4 22.6274 9.37258 28 16 28Z" stroke="#E72C39" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M4.6875 12H27.3125" stroke="#E72C39" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M4.6875 20H27.3125" stroke="#E72C39" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M16 27.675C18.7614 27.675 21 22.4479 21 16C21 9.55209 18.7614 4.32501 16 4.32501C13.2386 4.32501 11 9.55209 11 16C11 22.4479 13.2386 27.675 16 27.675Z" stroke="#E72C39" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Markets
</div>
<div class="becomeADream__cardValue">
6
</div>
</div>
<div class="becomeADream__card">
<div class="becomeADream__cardText">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.3125 23.5875C2.3125 23.5875 9 20.4875 9 10C9 8.14348 9.7375 6.36301 11.0503 5.05025C12.363 3.7375 14.1435 3 16 3C17.8565 3 19.637 3.7375 20.9497 5.05025C22.2625 6.36301 23 8.14348 23 10C23 20.4875 29.6875 23.5875 29.6875 23.5875C28.525 24.675 26.0625 24.0125 24.6625 24.775C23.2625 25.5375 22.5375 27.975 20.975 28.375C19.4125 28.775 17.625 27 16 27C14.375 27 12.5375 28.7625 11.025 28.375C9.5125 27.9875 8.7125 25.5375 7.3375 24.775C5.9625 24.0125 3.475 24.675 2.3125 23.5875Z" stroke="#E62334" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M23.6621 15.3375L26.9996 14" stroke="#E62334" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8.3375 15.3375L5 14" stroke="#E62334" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
{$t('prop-firm.Instruments')}
</div>
<div class="becomeADream__cardValue">
300+
</div>
</div>
<div class="becomeADream__card">
<div class="becomeADream__cardText">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 16C16 -12 16 44 29 16" stroke="#E72C39" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
{$t('prop-firm.Indicators')}
</div>
<div class="becomeADream__cardValue">
100+
</div>
</div>
<div class="becomeADream__card">
<div class="becomeADream__cardText">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16 28C22.6274 28 28 22.6274 28 16C28 9.37258 22.6274 4 16 4C9.37258 4 4 9.37258 4 16C4 22.6274 9.37258 28 16 28Z" stroke="#E62334" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M16 9V16H23" stroke="#E62334" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
{$t('prop-firm.Timeframes')}
</div>
<div class="becomeADream__cardValue">
7
</div>
</div>
</div>
</div>
<img class="becomeADream__imageDecorationLeft" src={decoration} loading="lazy" alt="decoration">
<img class="becomeADream__imageDecoration" src={decoration} loading="lazy" alt="decoration">
</section>
<style lang="scss">
@import 'src/scss/variables';
@import 'src/scss/mixins';
@import 'src/scss/media';
.becomeADream {
padding: 90px 0;
position: relative;
@include breakpoint-down('deskL') {
padding: 60px 0 93px 0;
}
@include breakpoint-down('tabL') {
padding: 50px 0;
}
@include breakpoint-down('tabM') {
padding: 40px 0;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
&__title {
@include H1;
margin-bottom: 18px;
width: 858px;
text-align: center;
@include breakpoint-down('deskL') {
margin-bottom: 12px;
width: 554px;
}
@include breakpoint-down('tabL') {
width: 452px;
}
@include breakpoint-down('tabM') {
width: 320px;
}
:global(span) {
color: $redPrimary;
}
}
&__description {
@include body;
text-align: center;
margin-bottom: 188px;
width: 580px;
@include breakpoint-down('deskL') {
margin-bottom: 130px;
width: 404px;
}
@include breakpoint-down('tabL') {
margin-bottom: 107px;
width: 364px;
}
@include breakpoint-down('tabM') {
margin-bottom: 22px;
width: 296px;
}
}
&__image {
position: absolute;
top: 246px;
left: 82px;
right: 0;
margin: auto;
z-index: -1;
width: 570px;
height: 539px;
@include breakpoint-down('deskL') {
width: 419px;
height: 378.4515075683594px;
top: 180px;
left: 70px;
}
@include breakpoint-down('tabL') {
width: 299px;
height: 259px;
top: 138px;
left: 46px;
}
@include breakpoint-down('tabM') {
position: static;
width: 362px;
height: 313px;
margin-left: 10px;
margin-bottom: 30px;
}
}
&__imageDecoration, &__imageDecorationLeft {
position: absolute;
width: 854.97px;
height: 489.52px;
right: 25px;
top: 360px;
z-index: -1;
@include breakpoint-down('deskL') {
width: 649.19px;
height: 294.71px;
right: -37px;
top: 240px;
}
}
&__imageDecorationLeft {
left: 25px;
transform: scaleX(-1);
@include breakpoint-down('deskL') {
left: -37px;
}
}
&__rows {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 166px;
@include breakpoint-down('deskL') {
margin-bottom: 108px;
}
@include breakpoint-down('tabL') {
margin-bottom: 43px;
gap: 7px;
}
@include breakpoint-down('tabM') {
margin-bottom: 10px;
gap: 6px;
}
}
svg {
@include breakpoint-down('deskL') {
width: 28px;
height: 29px;
}
@include breakpoint-down('tabL') {
min-width: 20px;
min-height: 20px;
max-width: 20px;
max-height: 20px;
}
}
&__row {
display: flex;
justify-content: center;
&:nth-child(1) {
gap: 590px;
@include breakpoint-down('deskL') {
gap: 503px;
}
@include breakpoint-down('tabL') {
gap: 258px;
}
@include breakpoint-down('tabM') {
gap: 6px;
}
}
&:nth-child(2) {
gap: 518px;
@include breakpoint-down('deskL') {
gap: 435px;
}
@include breakpoint-down('tabL') {
gap: 258px;
}
@include breakpoint-down('tabM') {
gap: 6px;
}
}
&:nth-child(3) {
gap: 423px;
@include breakpoint-down('deskL') {
gap: 347px;
}
@include breakpoint-down('tabL') {
gap: 258px;
}
@include breakpoint-down('tabM') {
gap: 6px;
}
}
}
&__rowItem {
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
padding: 20px;
width: 325px;
height: 72px;
border-radius: 20px;
border: 2px solid $techBlue3;
background: $fontWhite;
@include breakpoint-down('deskL') {
width: 268px;
height: 60px;
border-radius: 16px;
gap: 8px;
padding: 20px;
}
@include breakpoint-down('tabL') {
width: 216px;
height: 40px;
border-radius: 8px;
border-width: 1px;
gap: 8px;
padding: 20px;
text-wrap: nowrap;
}
@include breakpoint-down('tabM') {
width: 165px;
height: 40px;
border-radius: 8px;
border-width: 1px;
gap: 8px;
padding: 10px 12px;
@include body;
justify-content: start;
}
}
&__cards {
display: flex;
justify-content: center;
gap: 12px;
@include breakpoint-down('deskL') {
gap: 8px;
}
@include breakpoint-down('tabL') {
flex-wrap: wrap;
}
@include breakpoint-down('tabM') {
flex-direction: column;
width: 100%;
align-items: center;
}
}
&__card {
@include accent;
position: relative;
width: 301px;
height: 72px;
border-radius: 20px;
display: flex;
justify-content: space-between;
align-items: center;
backdrop-filter: blur(31.01175880432129px);
box-shadow: 0px 12px 20px 3px rgba(197, 219, 238, 0.3);
padding: 20px 40px;
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;
border: 2px solid transparent;
@include breakpoint-down('deskL') {
width: 274px;
height: 60px;
border-radius: 16px;
padding: 16px 30px;
}
@include breakpoint-down('tabL') {
flex-wrap: wrap;
width: 235px;
height: 46px;
border-radius: 8px;
border-width: 1px;
padding: 12px 20px;
font-size: 16px;
line-height: 22.4px;
}
@include breakpoint-down('tabM') {
flex-direction: row;
font-size: 12px;
line-height: 14.4px;
width: 335px;
height: 44px;
}
@include breakpoint-down('mobM') {
width: 100%;
justify-content: space-between;
}
&::before {
content: '';
left: 0;
top: 0;
border-radius: 20px;
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
box-shadow: 3px -4px 30px 3px rgba(248, 108, 111, 0.12);
}
}
&__cardText {
display: flex;
align-items: center;
gap: 12px;
width: fit-content;
@include accent;
@include breakpoint-down('tabL') {
font-size: 16px;
line-height: 22.4px;
}
@include breakpoint-down('tabM') {
font-size: 12px;
line-height: 14.4px;
}
}
&__cardValue {
font-weight: 700;
}
&.lang {
.becomeADream__rowItem {
text-wrap: wrap;
height: fit-content;
padding: 15px 30px;
line-height: 25px;
@include breakpoint-down('deskL') {
padding: 16px 26px;
line-height: 20px;
}
@include breakpoint-down('tabL') {
padding: 10px;
height: fit-content;
}
@include breakpoint-down('tabM') {
line-height: 12px;
}
}
.becomeADream__title, .becomeADream__description {
width: 1228px;
@include breakpoint-down('deskL') {
width: 1047px;
}
@include breakpoint-down('tabL') {
width: 620px;
}
@include breakpoint-down('tabM') {
width: 320px;
}
}
}
}
</style>