File: /var/www/quadcode.com/src/components/blocks/prop-firm/WhatWeAreOfferingYou.svelte
<script lang="ts">
import { t, locale, defaultLocale} from '$lib/translations';
</script>
<section class="offering {$locale !== defaultLocale ? 'lang' : ''}">
<div class="container">
<h2 class="offering__title">{$t('prop-firm.What we are offering you')}</h2>
<div class="offering__cards">
<div class="offering__card">
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M37.5 33V12C37.5025 11.4084 37.3878 10.8221 37.1625 10.275C36.9372 9.72795 36.6059 9.23089 36.1875 8.81253C35.7692 8.39417 35.2721 8.0628 34.725 7.83753C34.1779 7.61226 33.5916 7.49756 33 7.50004H7.5" stroke="#E72C39" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M19.5 19.5H31.5" stroke="#E72C39" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M19.5 25.5H31.5" stroke="#E72C39" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M4.14375 15C3.65801 14.4562 3.31171 13.8024 3.13466 13.095C2.95761 12.3877 2.95511 11.6479 3.12739 10.9393C3.29966 10.2308 3.64154 9.57468 4.1236 9.02756C4.60567 8.48043 5.21346 8.05865 5.89468 7.79852C6.5759 7.53839 7.31013 7.4477 8.03417 7.53426C8.75822 7.62082 9.45038 7.88203 10.0511 8.29542C10.6518 8.70881 11.143 9.26198 11.4825 9.90732C11.822 10.5527 11.9996 11.2708 12 12V36C12.0004 36.7292 12.178 37.4474 12.5175 38.0928C12.857 38.7381 13.3482 39.2913 13.9489 39.7047C14.5496 40.118 15.2418 40.3793 15.9658 40.4658C16.6899 40.5524 17.4241 40.4617 18.1053 40.2016C18.7865 39.9414 19.3943 39.5196 19.8764 38.9725C20.3585 38.4254 20.7003 37.7693 20.8726 37.0608C21.0449 36.3522 21.0424 35.6124 20.8653 34.905C20.6883 34.1977 20.342 33.5439 19.8563 33H40.8562C41.4355 33.6477 41.8149 34.4491 41.9486 35.3077C42.0822 36.1662 41.9645 37.0451 41.6096 37.8381C41.2547 38.6312 40.6778 39.3046 39.9485 39.777C39.2193 40.2493 38.3689 40.5005 37.5 40.5H16.5" stroke="#E72C39" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<div class="offering__cardTitle">{$t('prop-firm.No license required')}</div>
<div class="offering__cardDescription">{$t('prop-firm.Leave your legal worries behind, as initiating a prop trading platform doesn\'t necessitate a licensing process.')}</div>
</div>
<div class="offering__card">
<svg width="48" height="49" viewBox="0 0 48 49" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M17.6437 34.6127C15.5062 40.9689 7.03125 40.9689 7.03125 40.9689C7.03125 40.9689 7.03125 32.4939 13.3875 30.3564" stroke="#E72C39" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M36.7309 19.7625L23.9996 32.4938L15.5059 24L28.2371 11.2688C33.0559 6.45002 37.8746 6.50627 39.9371 6.80627C40.2554 6.84873 40.5508 6.99475 40.7778 7.22178C41.0049 7.44882 41.1509 7.74426 41.1934 8.06252C41.4934 10.125 41.5496 14.9438 36.7309 19.7625Z" stroke="#E72C39" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M34.6125 21.8813V33.9939C34.6069 34.3895 34.4451 34.7669 34.1625 35.0438L28.1062 41.1189C27.9141 41.3108 27.6735 41.4469 27.41 41.5128C27.1466 41.5787 26.8702 41.5718 26.6103 41.4928C26.3505 41.4139 26.1169 41.2659 25.9346 41.0647C25.7522 40.8634 25.628 40.6165 25.575 40.3501L24 32.4939" stroke="#E72C39" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M26.1196 13.3877H14.0071C13.6114 13.3933 13.234 13.5551 12.9571 13.8377L6.88209 19.8939C6.69017 20.0861 6.55402 20.3267 6.48815 20.5902C6.42228 20.8536 6.42917 21.13 6.50809 21.3899C6.58701 21.6497 6.73499 21.8833 6.93625 22.0656C7.1375 22.248 7.38448 22.3722 7.65084 22.4252L15.5071 24.0002" stroke="#E72C39" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<div class="offering__cardTitle">{$t('prop-firm.Launch within a mere 2 weeks')}</div>
<div class="offering__cardDescription">{$t('prop-firm.Save time and resources with a ready to go platform, enter the market quickly and start generating revenue.')}</div>
</div>
<div class="offering__card">
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M42 39H6V9" stroke="#E72C39" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M39 12L24 27L18 21L6 33" stroke="#E72C39" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M39 19.5V12H31.5" stroke="#E72C39" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<div class="offering__cardTitle">{$t('prop-firm.Liquidity and capital solutions')}</div>
<div class="offering__cardDescription">{$t('prop-firm.Empower your brokerage platform with the advanced technology and diverse range of multi-asset liquidity.')}</div>
</div>
<div class="offering__card">
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M41.5497 28.0123C41.8608 26.647 42.0118 25.2501 41.9997 23.8498C41.9247 13.9311 33.7122 5.90609 23.8122 5.99984C19.5828 6.04443 15.5042 7.57697 12.292 10.3286C9.07981 13.0801 6.93914 16.875 6.24561 21.0474C5.55209 25.2197 6.34999 29.5031 8.49934 33.1458C10.6487 36.7886 14.0122 39.5582 17.9997 40.9686C18.678 41.2129 19.4053 41.29 20.1197 41.1933C20.8342 41.0966 21.5147 40.8289 22.1037 40.413C22.6926 39.997 23.1724 39.4452 23.5025 38.8042C23.8326 38.1632 24.0031 37.4521 23.9997 36.7311V35.9998C23.9972 35.4082 24.1119 34.8219 24.3372 34.2748C24.5625 33.7277 24.8938 33.2307 25.3122 32.8123C25.7305 32.394 26.2276 32.0626 26.7747 31.8373C27.3218 31.6121 27.9081 31.4974 28.4997 31.4998H37.1622C38.1802 31.5005 39.1683 31.156 39.9652 30.5225C40.7621 29.8891 41.3207 29.0042 41.5497 28.0123V28.0123Z" stroke="#E72C39" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
<mask id="path-2-inside-1_469_3274" fill="white">
<path d="M24 15.75C24.8284 15.75 25.5 15.0784 25.5 14.25C25.5 13.4216 24.8284 12.75 24 12.75C23.1716 12.75 22.5 13.4216 22.5 14.25C22.5 15.0784 23.1716 15.75 24 15.75Z"/>
</mask>
<path d="M24 15.75C24.8284 15.75 25.5 15.0784 25.5 14.25C25.5 13.4216 24.8284 12.75 24 12.75C23.1716 12.75 22.5 13.4216 22.5 14.25C22.5 15.0784 23.1716 15.75 24 15.75Z" fill="#E72C39"/>
<path d="M22.5 14.25C22.5 13.4216 23.1716 12.75 24 12.75V18.75C26.4853 18.75 28.5 16.7353 28.5 14.25H22.5ZM24 12.75C24.8284 12.75 25.5 13.4216 25.5 14.25H19.5C19.5 16.7353 21.5147 18.75 24 18.75V12.75ZM25.5 14.25C25.5 15.0784 24.8284 15.75 24 15.75V9.75C21.5147 9.75 19.5 11.7647 19.5 14.25H25.5ZM24 15.75C23.1716 15.75 22.5 15.0784 22.5 14.25H28.5C28.5 11.7647 26.4853 9.75 24 9.75V15.75Z" fill="#E72C39" mask="url(#path-2-inside-1_469_3274)"/>
<mask id="path-4-inside-2_469_3274" fill="white">
<path d="M15.5625 20.625C16.3909 20.625 17.0625 19.9534 17.0625 19.125C17.0625 18.2966 16.3909 17.625 15.5625 17.625C14.7341 17.625 14.0625 18.2966 14.0625 19.125C14.0625 19.9534 14.7341 20.625 15.5625 20.625Z"/>
</mask>
<path d="M15.5625 20.625C16.3909 20.625 17.0625 19.9534 17.0625 19.125C17.0625 18.2966 16.3909 17.625 15.5625 17.625C14.7341 17.625 14.0625 18.2966 14.0625 19.125C14.0625 19.9534 14.7341 20.625 15.5625 20.625Z" fill="#E72C39"/>
<path d="M14.0625 19.125C14.0625 18.2966 14.7341 17.625 15.5625 17.625V23.625C18.0478 23.625 20.0625 21.6103 20.0625 19.125H14.0625ZM15.5625 17.625C16.3909 17.625 17.0625 18.2966 17.0625 19.125H11.0625C11.0625 21.6103 13.0772 23.625 15.5625 23.625V17.625ZM17.0625 19.125C17.0625 19.9534 16.3909 20.625 15.5625 20.625V14.625C13.0772 14.625 11.0625 16.6397 11.0625 19.125H17.0625ZM15.5625 20.625C14.7341 20.625 14.0625 19.9534 14.0625 19.125H20.0625C20.0625 16.6397 18.0478 14.625 15.5625 14.625V20.625Z" fill="#E72C39" mask="url(#path-4-inside-2_469_3274)"/>
<path d="M15.5625 30.375C16.3909 30.375 17.0625 29.7034 17.0625 28.875C17.0625 28.0466 16.3909 27.375 15.5625 27.375C14.7341 27.375 14.0625 28.0466 14.0625 28.875C14.0625 29.7034 14.7341 30.375 15.5625 30.375Z" fill="#E72C39"/>
<path d="M32.4375 20.625C33.2659 20.625 33.9375 19.9534 33.9375 19.125C33.9375 18.2966 33.2659 17.625 32.4375 17.625C31.6091 17.625 30.9375 18.2966 30.9375 19.125C30.9375 19.9534 31.6091 20.625 32.4375 20.625Z" fill="#E72C39"/>
</svg>
<div class="offering__cardTitle">{$t('prop-firm.Branding freedom')}</div>
<div class="offering__cardDescription">{$t('prop-firm.Easily brand the platform with your logo and color scheme, creating a unique and recognizable presence in the market.')}</div>
</div>
<div class="offering__card">
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M24 33C28.9706 33 33 28.9706 33 24C33 19.0294 28.9706 15 24 15C19.0294 15 15 19.0294 15 24C15 28.9706 19.0294 33 24 33Z" stroke="#E72C39" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M34.4445 12.2061C34.9195 12.6436 35.3695 13.0936 35.7945 13.5561L40.9133 14.2873C41.7473 15.7358 42.3902 17.2862 42.8258 18.8998L39.7133 23.0436C39.7133 23.0436 39.7695 24.3186 39.7133 24.9561L42.8258 29.0998C42.3922 30.7141 41.7492 32.2648 40.9133 33.7123L35.7945 34.4436C35.7945 34.4436 34.9133 35.3623 34.4445 35.7936L33.7133 40.9123C32.2648 41.7463 30.7144 42.3892 29.1008 42.8248L24.957 39.7123C24.3208 39.7686 23.6808 39.7686 23.0445 39.7123L18.9008 42.8248C17.2864 42.3912 15.7358 41.7482 14.2883 40.9123L13.557 35.7936C13.0945 35.3561 12.6445 34.9061 12.207 34.4436L7.08828 33.7123C6.25425 32.2639 5.6114 30.7135 5.17578 29.0998L8.28828 24.9561C8.28828 24.9561 8.23203 23.6811 8.28828 23.0436L5.17578 18.8998C5.60938 17.2855 6.25233 15.7348 7.08828 14.2873L12.207 13.5561C12.6445 13.0936 13.0945 12.6436 13.557 12.2061L14.2883 7.0873C15.7367 6.25327 17.2871 5.61042 18.9008 5.1748L23.0445 8.2873C23.6808 8.23104 24.3208 8.23104 24.957 8.2873L29.1008 5.1748C30.7151 5.6084 32.2658 6.25136 33.7133 7.0873L34.4445 12.2061Z" stroke="#E72C39" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<div class="offering__cardTitle">{$t('prop-firm.Customization options')}</div>
<div class="offering__cardDescription">{$t('prop-firm.Customize trading instruments, assets, menu options, minimum deposit and withdrawal amounts, chart types, etc.')}</div>
</div>
</div>
</div>
</section>
<style lang="scss">
@import 'src/scss/media';
.offering {
background: #F5F5F5;
padding: 90px 0;
@include breakpoint-down('deskL') {
padding: 60px 0;
}
@include breakpoint-down('tabL') {
padding: 48px 0;
}
@include breakpoint-down('tabM') {
padding: 38px 0;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
gap: 60px;
max-width: 1404px;
@include breakpoint-down('tabL') {
max-width: 100%;
padding: 0;
gap: 30px;
}
@include breakpoint-down('tabM') {
gap: 20px;
}
}
&__title {
font-weight: 700;
font-size: 72px;
line-height: 72px;
letter-spacing: 0;
text-align: center;
@include breakpoint-down('deskL') {
font-size: 42px;
line-height: 46.2px;
}
@include breakpoint-down('tabL') {
font-size: 36px;
line-height: 36px;
}
@include breakpoint-down('tabM') {
font-size: 31px;
line-height: 31px;
width: 200px;
}
}
&__cards {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 20px;
width: 100%;
@include breakpoint-down('tabL') {
gap: 12px;
}
}
&__card {
display: flex;
flex-direction: column;
background: #FFFFFF;
width: 454px;
min-height: 250px;
border-radius: 20px;
padding: 32px;
@include breakpoint-down('deskL') {
width: 380px;
min-height: 200px;
border-radius: 16px;
padding: 20px 24px;
}
@include breakpoint-down('tabL') {
width: 341px;
min-height: 167px;
border-radius: 12px;
}
@include breakpoint-down('tabM') {
width: 335px;
min-height: 152px;
}
svg {
min-width: 48px;
min-height: 48px;
max-width: 48px;
max-height: 48px;
margin-bottom: 16px;
@include breakpoint-down('deskL') {
min-width: 32px;
min-height: 32px;
max-width: 32px;
max-height: 32px;
}
@include breakpoint-down('tabL') {
margin-bottom: 10px;
}
}
}
&__cardTitle {
font-weight: 700;
font-size: 28px;
line-height: 33.6px;
margin-bottom: 16px;
@include breakpoint-down('deskL') {
font-size: 24px;
line-height: 29.23px;
margin-bottom: 8px;
}
@include breakpoint-down('tabL') {
font-size: 18px;
line-height: 19.8px;
}
}
&__cardDescription {
font-weight: 400;
font-size: 20px;
line-height: 24px;
@include breakpoint-down('deskL') {
font-size: 18px;
line-height: 25.2px;
}
@include breakpoint-down('tabL') {
font-size: 16px;
line-height: 19.49px;
}
@include breakpoint-down('tabM') {
font-size: 12px;
line-height: 14.4px;
}
}
&:global(.lang .offering__card) {
height: 310px;
@include breakpoint-down('deskL') {
height: 260px;
}
@include breakpoint-down('tabL') {
height: 200px;
}
@include breakpoint-down('tabM') {
height: auto;
}
}
}
</style>