File: /var/www/quadcode.com/src/components/blocks/prop-firm/Hero.svelte
<script lang="ts">
import Button from '../../button/Button.svelte';
import heroImage from '../../../assets/images/prop-firm/hero-image.webp';
import heroImageDeskS from '../../../assets/images/prop-firm/hero-image-deskS.webp';
import heroImageTabM from '../../../assets/images/prop-firm/hero-image-tabM.webp';
import heroImageMobile from '../../../assets/images/prop-firm/hero-image-mobM.webp';
import { t, locale, defaultLocale } from '$lib/translations';
import { popupForm } from '../../../store';
</script>
<section class="prop-firm {$locale !== defaultLocale ? 'lang' : ''}">
<div class="container">
<div class="prop-firm__titleBlock">
<div class="prop-firm__textBlock">
<h1 class="prop-firm__title">{@html $t('prop-firm.Start White Label Prop Firm in Just 2 Weeks')}</h1>
<p class="prop-firm__description">{$t('prop-firm.Quick and easy way to start your prop trading business from scratch with a complete white label solution')}</p>
<Button onClick={() => {popupForm.set(true)}}>{$t('prop-firm.Request demo')}</Button>
</div>
<picture >
<source srcset={heroImageMobile} media="(max-width: 767px)" >
<source srcset={heroImageTabM} media="(max-width: 1024px)" >
<source srcset={heroImageDeskS} media="(max-width: 1799px)" >
<img src={heroImage} alt="image" class="prop-firm__image" loading="eager">
</picture>
<Button onClick={() => {popupForm.set(true)}}>{$t('prop-firm.Request demo')}</Button>
</div>
<div class="prop-firm__advantages">
<div class="prop-firm__advantage">
<div class="prop-firm__advantageNumber">
10+
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.8125 25.1875C5.6625 24.0375 6.425 21.625 5.8375 20.2125C5.25 18.8 3 17.5625 3 16C3 14.4375 5.225 13.25 5.8375 11.7875C6.45 10.325 5.6625 7.9625 6.8125 6.8125C7.9625 5.6625 10.375 6.425 11.7875 5.8375C13.2 5.25 14.4375 3 16 3C17.5625 3 18.75 5.225 20.2125 5.8375C21.675 6.45 24.0375 5.6625 25.1875 6.8125C26.3375 7.9625 25.575 10.375 26.1625 11.7875C26.75 13.2 29 14.4375 29 16C29 17.5625 26.775 18.75 26.1625 20.2125C25.55 21.675 26.3375 24.0375 25.1875 25.1875C24.0375 26.3375 21.625 25.575 20.2125 26.1625C18.8 26.75 17.5625 29 16 29C14.4375 29 13.25 26.775 11.7875 26.1625C10.325 25.55 7.9625 26.3375 6.8125 25.1875Z" stroke="#FF3737" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M21.5 13L14.1625 20L10.5 16.5" stroke="#FF3737" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<div class="prop-firm__advantageTitle">{$t('prop-firm.Years')} </div>
<div class="prop-firm__advantageDescription">{$t('prop-firm.in business')}</div>
</div>
<div class="prop-firm__advantage">
<div class="prop-firm__advantageNumber">
40+
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="mask0_394_6510" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="32" height="32">
<rect width="32" height="32" fill="#D9D9D9"/>
</mask>
<g mask="url(#mask0_394_6510)">
<path d="M8.3 22.6V14.9H10.5V22.6H8.3ZM14.9 22.6V14.9H17.1V22.6H14.9ZM5 27V24.8H27V27H5ZM21.5 22.6V14.9H23.7V22.6H21.5ZM5 12.7V10.5L16 5L27 10.5V12.7H5ZM9.895 10.5H22.105L16 7.475L9.895 10.5Z" fill="white"/>
</g>
</svg>
</div>
<div class="prop-firm__advantageTitle">{$t('prop-firm.Brokers')}</div>
<div class="prop-firm__advantageDescription">{$t('prop-firm.launched this year')}</div>
</div>
<div class="prop-firm__advantage">
<div class="prop-firm__advantageNumber">
12m+
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.5 5.45455C10.3998 5.45455 5.45455 10.3998 5.45455 16.5C5.45455 22.6002 10.3998 27.5455 16.5 27.5455C22.6002 27.5455 27.5455 22.6002 27.5455 16.5C27.5455 10.3998 22.6002 5.45455 16.5 5.45455ZM3 16.5C3 9.04416 9.04416 3 16.5 3C23.9558 3 30 9.04416 30 16.5C30 23.9558 23.9558 30 16.5 30C9.04416 30 3 23.9558 3 16.5ZM16.5 7.29545C17.1778 7.29545 17.7273 7.84492 17.7273 8.52273V9.13636H17.9318C20.1912 9.13636 22.0227 10.9679 22.0227 13.2273C22.0227 13.9051 21.4733 14.4545 20.7955 14.4545C20.1177 14.4545 19.5682 13.9051 19.5682 13.2273C19.5682 12.3235 18.8356 11.5909 17.9318 11.5909H15.2727C14.256 11.5909 13.4318 12.4151 13.4318 13.4318C13.4318 14.4485 14.256 15.2727 15.2727 15.2727H17.7273C20.0996 15.2727 22.0227 17.1959 22.0227 19.5682C22.0227 21.9405 20.0996 23.8636 17.7273 23.8636V24.4773C17.7273 25.1551 17.1778 25.7045 16.5 25.7045C15.8222 25.7045 15.2727 25.1551 15.2727 24.4773V23.8636H15.0682C12.8088 23.8636 10.9773 22.0321 10.9773 19.7727C10.9773 19.0949 11.5267 18.5455 12.2045 18.5455C12.8823 18.5455 13.4318 19.0949 13.4318 19.7727C13.4318 20.6765 14.1644 21.4091 15.0682 21.4091H17.7273C18.744 21.4091 19.5682 20.5849 19.5682 19.5682C19.5682 18.5515 18.744 17.7273 17.7273 17.7273H15.2727C12.9004 17.7273 10.9773 15.8041 10.9773 13.4318C10.9773 11.0595 12.9004 9.13636 15.2727 9.13636V8.52273C15.2727 7.84492 15.8222 7.29545 16.5 7.29545Z" fill="#FF3737"/>
</svg>
</div>
<div class="prop-firm__advantageTitle">{$t('prop-firm.Trades')}</div>
<div class="prop-firm__advantageDescription">{$t('prop-firm.opened per month')}</div>
</div>
<div class="prop-firm__advantage">
<div class="prop-firm__advantageNumber">
164
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.3605 5.75293C18.9236 8.55897 20.3802 12.2005 20.4593 16.0001C20.3802 19.7998 18.9236 23.4412 16.3605 26.2473M16.3605 5.75293C13.7974 8.55897 12.3408 12.2005 12.2616 16.0001C12.3408 19.7998 13.7974 23.4412 16.3605 26.2473M16.3605 5.75293C10.7011 5.75293 6.11328 10.3408 6.11328 16.0001C6.11328 21.6594 10.7011 26.2473 16.3605 26.2473M16.3605 5.75293C22.0198 5.75293 26.6077 10.3408 26.6077 16.0001C26.6077 21.6594 22.0198 26.2473 16.3605 26.2473M6.62566 12.926H26.0953M6.62564 19.0743H26.0953" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<div class="prop-firm__advantageTitle">{$t('prop-firm.Countries')}</div>
<div class="prop-firm__advantageDescription">{$t('prop-firm.covered')}</div>
</div>
<div class="prop-firm__advantage">
<div class="prop-firm__advantageNumber">
120k+
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16 8H8.22222C7.63285 8 7.06762 8.23413 6.65087 8.65087C6.23413 9.06762 6 9.63285 6 10.2222V25.7778C6 26.3671 6.23413 26.9324 6.65087 27.3491C7.06762 27.7659 7.63285 28 8.22222 28H23.7778C24.3671 28 24.9324 27.7659 25.3491 27.3491C25.7659 26.9324 26 26.3671 26 25.7778V18" stroke="#FF3737" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M25.4098 5.65998C25.8042 5.2374 26.3391 5 26.8969 5C27.4547 5 27.9896 5.2374 28.384 5.65998C28.7784 6.08256 29 6.6557 29 7.25332C29 7.85093 28.7784 8.42407 28.384 8.84665L18.9656 18.9378L15 20L15.9914 15.7511L25.4098 5.65998Z" stroke="#FF3737" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<div class="prop-firm__advantageTitle">{$t('prop-firm.Registrations')}</div>
<div class="prop-firm__advantageDescription">{$t('prop-firm.each month')}</div>
</div>
</div>
</div>
</section>
<style lang="scss">
@import 'src/scss/media';
.prop-firm {
position: relative;
padding-top: 79px;
padding-bottom: 97px;
background: linear-gradient(180deg, #D9EAFF 0%, #F1FBFF 100%);
@include breakpoint-down('deskL') {
padding-top: 35px;
padding-bottom: 62px;
}
@include breakpoint-down('tabL') {
padding-top: 36px;
padding-bottom: 64px;
}
@include breakpoint-down('tabM') {
padding-top: 47px;
padding-bottom: 40px;
}
.container {
display: flex;
flex-direction: column;
gap: 35px;
@include breakpoint-down('deskL') {
gap: 17px;
}
@include breakpoint-down('tabL') {
gap: 32px;
}
@include breakpoint-down('tabM') {
align-items: center;
gap: 25px;
}
}
&__titleBlock {
display: flex;
justify-content: space-between;
@include breakpoint-down('tabM') {
flex-direction: column;
}
@include breakpoint-down('mobM') {
width: 100%;
}
:global(> .button) {
display: none;
@include breakpoint-down('tabM') {
display: flex;
}
}
}
&__textBlock {
width: 748px;
margin-right: -41px;
display: flex;
flex-direction: column;
justify-content: center;
@include breakpoint-down('deskL') {
width: 437px;
margin-top: 26px;
}
@include breakpoint-down('tabL') {
width: 379px;
margin-right: -41px;
margin-top: 15px;
}
@include breakpoint-down('tabM') {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
:global(> .button) {
display: flex;
@include breakpoint-down('tabM') {
display: none;
}
}
}
&__title {
font-weight: 700;
font-size: 72px;
line-height: 72px;
letter-spacing: 0;
margin-bottom: 18px;
@include breakpoint-down('deskL') {
font-weight: 700;
font-size: 42px;
line-height: 46.2px;
}
@include breakpoint-down('tabL') {
font-weight: 700;
font-size: 36px;
line-height: 36px;
margin-bottom: 12px;
width: 278px;
}
@include breakpoint-down('tabM') {
font-weight: 700;
font-size: 31px;
line-height: 31px;
text-align: center;
width: 320px;
}
@include breakpoint-down('mobM') {
width: 100%;
}
:global(span) {
color: #E62334;
}
}
&__description {
font-weight: 400;
font-size: 24px;
line-height: 30px;
letter-spacing: 0;
margin-bottom: 30px;
width: 578px;
@include breakpoint-down('deskL') {
font-weight: 400;
font-size: 18px;
line-height: 20px;
width: 471px;
}
@include breakpoint-down('tabL') {
font-weight: 400;
font-size: 16px;
line-height: 19.49px;
letter-spacing: -1%;
width: 291px;
margin-bottom: 19px;
}
@include breakpoint-down('tabM') {
font-weight: 400;
font-size: 12px;
line-height: 14.4px;
letter-spacing: 0;
text-align: center;
width: 320px;
margin-bottom: 0;
}
@include breakpoint-down('mobM') {
width: 100%;
}
}
:global(.button) {
padding: 20px 42px;
font-weight: 700;
font-size: 30px;
line-height: 33px;
@include breakpoint-down('deskL') {
font-size: 18px;
line-height: 19.8px;
padding: 16px 36px;
}
@include breakpoint-down('tabL') {
font-size: 12px;
line-height: 14.4px;
padding: 12px 24px;
}
@include breakpoint-down('tabM') {
font-size: 12px;
line-height: 14.4px;
width: 320px;
align-self: center;
}
@include breakpoint-down('mobM') {
width: 100%;
}
}
picture {
position: relative;
right: -61px;
@include breakpoint-down('deskL') {
right: -28px;
}
@include breakpoint-down('tabL') {
right: 1px;
}
@include breakpoint-down('tabM') {
position: static;
}
}
&__image {
width: 831px;
height: 550px;
@include breakpoint-down('deskL') {
width: 665px;
height: 441px;
}
@include breakpoint-down('tabL') {
width: 397px;
height: 267px;
}
@include breakpoint-down('tabM') {
width: 335px;
height: 227px;
margin-top: 12px;
margin-bottom: 20px;
}
}
&__advantages {
display: flex;
gap: 12px;
justify-content: center;
@include breakpoint-down('tabM') {
flex-direction: column;
align-items: center;
width: 100%;
gap: 8px;
}
}
&__advantage {
position: relative;
backdrop-filter: blur(31.01175880432129px);
box-shadow: 6px -8px 20.67px 3px #F86C6F33;
width: 270px;
height: 150px;
padding: 30px 40px;
background: #EEF9FF;
z-index: 0;
border: 2px solid transparent;
border-radius: 20px;
background: linear-gradient(#EEF8FF, #EEF8FF 0) padding-box,
linear-gradient(125.13deg, #F96C6E 22.41%, rgba(255, 164, 165, 0.42) 80.51%) border-box;
@include breakpoint-down('deskL') {
padding: 24px 32px;
width: 212px;
height: 118px;
}
@include breakpoint-down('tabL') {
width: 131px;
height: 75px;
border-radius: 12px;
padding: 12px 16px;
}
@include breakpoint-down('tabM') {
width: 334px;
height: 60px;
padding: 20px 16px;
display: flex;
gap: 4px;
align-items: center;
border-radius: 8px;
}
@include breakpoint-down('mobM') {
width: 100%;
}
&:nth-child(2n) {
background: #E62334;
color: #fff;
}
&::before {
content: '';
position: absolute;
border-radius: 20px;
left: 0;
width: 100%;
height: 100%;
top: 0;
box-shadow: 0 18.61px 33.08px 3px #00000033;
z-index: -1;
@include breakpoint-down('tabL') {
border-radius: 12px;
}
}
}
&__advantageNumber {
display: flex;
justify-content: space-between;
font-weight: 400;
font-size: 42px;
line-height: 42px;
letter-spacing: 0;
margin-bottom: 4px;
@include breakpoint-down('deskL') {
font-weight: 700;
font-size: 24px;
line-height: 29.23px;
letter-spacing: -1%;
margin-bottom: 0;
}
@include breakpoint-down('tabL') {
font-size: 18px;
line-height: 19.8px;
letter-spacing: 0;
}
@include breakpoint-down('tabM') {
font-size: 18px;
line-height: 19.8px;
}
svg {
@include breakpoint-down('tabL') {
width: 20px;
height: 20px;
}
@include breakpoint-down('tabM') {
position: absolute;
top: 16px;
right: 20px;
}
}
}
&__advantageTitle {
font-weight: 700;
font-size: 20px;
line-height: 24px;
letter-spacing: 0;
@include breakpoint-down('deskL') {
font-size: 18px;
line-height: 19.8px;
margin-bottom: 4px;
}
@include breakpoint-down('tabL') {
font-size: 12px;
line-height: 14.4px;
margin-bottom: 0;
}
@include breakpoint-down('tabM') {
font-size: 12px;
line-height: 14.4px;
}
}
&__advantageDescription {
font-weight: 400;
font-size: 16px;
line-height: 20px;
letter-spacing: 0;
@include breakpoint-down('deskL') {
font-size: 14px;
line-height: 16.8px;
}
@include breakpoint-down('tabL') {
font-size: 10px;
line-height: 12px;
}
@include breakpoint-down('tabM') {
font-size: 12px;
line-height: 14.4px;
}
}
&.lang {
.prop-firm__advantage {
height: auto;
}
}
}
</style>