File: //var/www/quadcode.com/src/components/blocks/trading-platform/Hero.svelte
<script lang="ts">
import bestAllInOne from '../../../assets/images/trading-platform/awards/BestAllInOne.png';
import bestTradingPlatform from '../../../assets/images/trading-platform/awards/bestTradingPlatform.png';
import bestWhiteLabelSolution from '../../../assets/images/trading-platform/awards/bestWhiteLabelSolution.png';
import mostInnovativeTradingPlatform from '../../../assets/images/trading-platform/awards/mostInnovativeTradingPlatform.png';
import heroActive from '../../../assets/images/trading-platform/hero/heroActive.webp';
import heroActiveDeskL from '../../../assets/images/trading-platform/hero/heroActiveDeskL.webp';
import heroActiveTabL from '../../../assets/images/trading-platform/hero/heroActiveTabL.webp';
import heroActiveTabM from '../../../assets/images/trading-platform/hero/heroActiveTabM.webp';
import Button from '../../button/Button.svelte';
import { onMount } from 'svelte';
import { loadEvent, popupForm } from '../../../store';
import loadObserver from '$utils/loadObserver';
import { t } from '$lib/translations';
let width = 0;
let height = 0;
onMount(() => {
});
loadEvent.set(false);
const onload = loadObserver(() => {
loadEvent.set(true);
});
</script>
<div class="block-hero">
<div class="container">
<div class="block-hero__wrapper">
<div class="block-hero__row">
<div class="block-hero__text">
<h1 class="block-hero__title">{$t('trading-platform.White Label Trading Platform')}</h1>
<p class="block-hero__subtitle">{$t('trading-platform.Tailor the look and feel of the platform to align with your brand identity.')}</p>
<Button text={$t('trading-platform.Get in touch')} className="block-hero__button" onClick={() => popupForm.set(true)} />
</div>
<div class="block-hero__picture">
<picture>
<source media="(max-width: 766px)" srcset={heroActiveTabM}>
<source media="(max-width: 1024px)" srcset={heroActiveTabL}>
<source media="(max-width: 1439px)" srcset={heroActiveDeskL}>
<img src={heroActive} loading="eager" alt="block">
</picture>
</div>
</div>
<div class="block-hero__row">
<div class="block-hero__cards">
<div class="block-hero__card">
<div class="block-hero__cardContainer">
<div class="block-hero__cardTitle">100%
<svg width="71" height="70" viewBox="0 0 71 70" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M34.3614 12.3999C33.6201 12.4388 32.9245 12.7705 32.4278 13.3222C31.9311 13.8738 31.6739 14.6002 31.7128 15.3416C31.9606 20.071 26.3661 22.741 22.845 19.5705C22.5732 19.3171 22.2536 19.1203 21.9049 18.9917C21.5562 18.863 21.1854 18.8052 20.8141 18.8214C20.4428 18.8376 20.0784 18.9276 19.7423 19.0862C19.4061 19.2447 19.1049 19.4686 18.8563 19.7448C18.6076 20.021 18.4164 20.344 18.2938 20.6949C18.1713 21.0457 18.1199 21.4175 18.1426 21.7885C18.1652 22.1595 18.2616 22.5222 18.4259 22.8555C18.5903 23.1889 18.8194 23.4862 19.0998 23.73C22.6209 26.9005 20.5532 32.7435 15.8211 32.9915C15.0798 33.0303 14.3843 33.3621 13.8876 33.9137C13.3909 34.4654 13.1336 35.1918 13.1725 35.9331C13.2113 36.6745 13.5431 37.37 14.0947 37.8667C14.6464 38.3634 15.3728 38.6207 16.1141 38.5818C20.8434 38.334 23.5133 43.9287 20.343 47.4498C19.8614 48.0037 19.6167 48.7245 19.6615 49.4571C19.7063 50.1896 20.037 50.8753 20.5824 51.3664C21.1277 51.8574 21.8442 52.1147 22.5774 52.0826C23.3106 52.0506 24.0019 51.7318 24.5024 51.1951C27.6727 47.6739 33.5156 49.7417 33.7636 54.4739C33.8024 55.2152 34.1342 55.9108 34.6858 56.4075C35.2375 56.9042 35.9639 57.1614 36.7052 57.1226C37.4465 57.0837 38.142 56.752 38.6387 56.2003C39.1354 55.6487 39.3926 54.9223 39.3538 54.1809C39.1059 49.4515 44.7005 46.7815 48.2216 49.952C48.4934 50.2054 48.813 50.4022 49.1617 50.5308C49.5104 50.6595 49.8812 50.7173 50.2525 50.7011C50.6238 50.6849 50.9881 50.5949 51.3243 50.4363C51.6604 50.2778 51.9616 50.0539 52.2103 49.7777C52.459 49.5015 52.6502 49.1785 52.7727 48.8276C52.8952 48.4768 52.9467 48.105 52.924 47.734C52.9013 47.363 52.805 47.0003 52.6406 46.667C52.4763 46.3336 52.2472 46.0363 51.9667 45.7925C48.4456 42.622 50.5134 36.779 55.2454 36.531C55.9868 36.4922 56.6823 36.1604 57.179 35.6088C57.6757 35.0571 57.9329 34.3307 57.8941 33.5894C57.8552 32.848 57.5235 32.1525 56.9718 31.6558C56.4202 31.1591 55.6938 30.9018 54.9525 30.9407C50.2232 31.1885 47.5532 25.5938 50.7236 22.0727C51.2051 21.5188 51.4498 20.798 51.4051 20.0654C51.3603 19.3329 51.0296 18.6472 50.4842 18.1562C49.9388 17.6651 49.2224 17.4078 48.4892 17.4399C47.756 17.4719 47.0647 17.7907 46.5642 18.3274C43.3938 21.8486 37.551 19.7808 37.303 15.0486C37.2641 14.3073 36.9324 13.6117 36.3807 13.115C35.829 12.6183 35.1027 12.3611 34.3614 12.3999ZM26.1123 15.01C26.1561 12.8895 27.0008 10.8642 28.4765 9.34091C29.9523 7.81762 31.9498 6.90923 34.0678 6.79823C36.1858 6.68723 38.2673 7.38185 39.8942 8.74254C41.5211 10.1032 42.5728 12.0292 42.8381 14.1335C44.3698 12.6719 46.397 11.8429 48.5139 11.8124C50.6307 11.7819 52.681 12.5522 54.2541 13.969C55.8273 15.3858 56.8072 17.3446 56.9976 19.4532C57.1881 21.5617 56.575 23.6644 55.2812 25.3402C57.4016 25.3837 59.427 26.2281 60.9506 27.7036C62.4741 29.1791 63.3828 31.1766 63.4941 33.2946C63.6055 35.4126 62.9112 37.4943 61.5509 39.1215C60.1905 40.7486 58.2648 41.8007 56.1606 42.0663C57.6221 43.598 58.4511 45.6253 58.4816 47.7422C58.5121 49.8592 57.7418 51.9095 56.3251 53.4826C54.9083 55.0558 52.9495 56.0357 50.841 56.2262C48.7325 56.4166 46.6299 55.8035 44.9541 54.5097C44.9103 56.6302 44.0656 58.6555 42.5899 60.1788C41.1141 61.7021 39.1166 62.6105 36.9986 62.7215C34.8806 62.8325 32.7991 62.1379 31.1722 60.7772C29.5453 59.4165 28.4936 57.4905 28.2283 55.3862C26.697 56.8482 24.6699 57.6777 22.5531 57.7087C20.4362 57.7397 18.3858 56.9699 16.8123 55.5534C15.2388 54.1369 14.2585 52.1784 14.0675 50.0699C13.8766 47.9614 14.4892 45.8585 15.7826 44.1825C13.6621 44.1386 11.6368 43.2939 10.1136 41.8181C8.59033 40.3423 7.68195 38.3447 7.57095 36.2267C7.45995 34.1087 8.15454 32.0271 9.5152 30.4001C10.8758 28.7732 12.8017 27.7214 14.906 27.4562C13.4403 25.9253 12.6077 23.8968 12.5752 21.7776C12.5428 19.6584 13.3129 17.6054 14.731 16.0303C16.1491 14.4553 18.1104 13.4748 20.2213 13.2856C22.3322 13.0963 24.4366 13.7123 26.1123 15.01Z" fill="#FF3737"/>
<path d="M35.2403 29.1709C33.7577 29.2486 32.3667 29.9121 31.3732 31.0154C30.3798 32.1188 29.8654 33.5716 29.9431 35.0542C30.0208 36.5369 30.6843 37.9279 31.7876 38.9214C32.8909 39.9148 34.3436 40.4293 35.8262 40.3516C37.3089 40.2739 38.6999 39.6104 39.6933 38.507C40.6867 37.4037 41.2012 35.9509 41.1235 34.4683C41.0458 32.9856 40.3823 31.5946 39.279 30.6011C38.1757 29.6077 36.7229 29.0932 35.2403 29.1709ZM27.2145 27.2708C28.1899 26.1488 29.3789 25.2324 30.7123 24.575C32.0456 23.9175 33.4965 23.5322 34.9804 23.4415C36.4642 23.3508 37.9513 23.5565 39.3548 24.0467C40.7583 24.5369 42.0501 25.3016 43.1549 26.2964C44.2596 27.2912 45.1552 28.496 45.7894 29.8406C46.4236 31.1852 46.7836 32.6427 46.8485 34.1279C46.9134 35.6131 46.6819 37.0964 46.1674 38.4912C45.653 39.886 44.8659 41.1644 43.8521 42.2517C41.8502 44.3989 39.085 45.6738 36.1522 45.802C33.2194 45.9301 30.3536 44.9012 28.1721 42.9369C25.9905 40.9726 24.6677 38.2299 24.4886 35.2997C24.3095 32.3695 25.2884 29.4862 27.2145 27.2708Z" fill="#FF3737"/>
</svg>
</div>
<div class="block-hero__cardDescription">
{$t('trading-platform.Fully customizable solution')}
</div>
</div>
</div>
<div class="block-hero__card">
<div class="block-hero__cardContainer">
<div class="block-hero__cardTitle">
{$t('trading-platform.14 days')}
<svg width="66" height="67" viewBox="0 0 66 67" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M26.9779 12.5C26.9779 11.2574 27.9853 10.25 29.2279 10.25L37.5221 10.25C38.7647 10.25 39.7721 11.2574 39.7721 12.5C39.7721 13.7426 38.7647 14.75 37.5221 14.75L35.625 14.75L35.625 16.6772C45.563 17.8082 53.25 26.3419 53.25 36.65C53.25 47.7239 44.3784 56.75 33.375 56.75C22.3715 56.75 13.5 47.7239 13.5 36.65C13.5 26.3419 21.1869 17.8082 31.125 16.6772L31.125 14.75L29.2279 14.75C27.9853 14.75 26.9779 13.7426 26.9779 12.5ZM20.7958 15.2922C21.68 16.1653 21.689 17.5899 20.816 18.4742L17.7057 21.6242C16.8326 22.5084 15.408 22.5174 14.5237 21.6443C13.6395 20.7712 13.6305 19.3467 14.5036 18.4624L17.6139 15.3124C18.4869 14.4282 19.9115 14.4191 20.7958 15.2922ZM45.9543 15.2922C46.8385 14.4191 48.2631 14.4282 49.1362 15.3124L52.2465 18.4624C53.1196 19.3467 53.1105 20.7712 52.2263 21.6443C51.3421 22.5174 49.9175 22.5084 49.0444 21.6242L45.9341 18.4742C45.061 17.5899 45.07 16.1653 45.9543 15.2922ZM33.375 21.05C24.9104 21.05 18 28.0074 18 36.65C18 45.2926 24.9105 52.25 33.375 52.25C41.8395 52.25 48.75 45.2926 48.75 36.65C48.75 28.0074 41.8395 21.05 33.375 21.05ZM33.375 26C34.6176 26 35.625 27.0074 35.625 28.25L35.625 35.3844L39.7273 37.8772C40.7892 38.5225 41.127 39.9065 40.4817 40.9684C39.8364 42.0304 38.4523 42.3681 37.3904 41.7228L32.2066 38.5728C31.535 38.1647 31.125 37.4358 31.125 36.65L31.125 28.25C31.125 27.0074 32.1324 26 33.375 26Z" fill="white"/>
</svg>
</div>
<div class="block-hero__cardDescription">
{$t('trading-platform.Get started in 2 weeks')}
</div>
</div>
</div>
<div class="block-hero__card">
<div class="block-hero__cardContainer">
<div class="block-hero__cardTitle">
{$t('trading-platform.Up to 150K')}
<svg width="70" height="71" viewBox="0 0 70 71" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M35.7075 15.8461C24.8775 15.2786 15.6379 23.5979 15.0703 34.4279C14.5028 45.2579 22.8221 54.4975 33.6521 55.065C44.4821 55.6326 53.7217 47.3133 54.2892 36.4833C54.8568 25.6533 46.5375 16.4137 35.7075 15.8461ZM10.7127 34.1995C11.4064 20.9629 22.6992 10.7948 35.9359 11.4885C49.1725 12.1822 59.3406 23.475 58.6469 36.7117C57.9532 49.9483 46.6604 60.1164 33.4237 59.4227C20.1871 58.729 10.019 47.4362 10.7127 34.1995ZM35.5362 19.1144C36.7395 19.1774 37.6639 20.2041 37.6008 21.4074L37.5438 22.4968L37.9069 22.5158C41.918 22.7261 44.9992 26.1481 44.789 30.1592C44.726 31.3626 43.6993 32.2869 42.496 32.2239C41.2927 32.1608 40.3683 31.1342 40.4314 29.9309C40.5155 28.3264 39.283 26.9576 37.6785 26.8735L32.9577 26.6261C31.1527 26.5315 29.6128 27.9181 29.5182 29.7231C29.4236 31.5281 30.8102 33.068 32.6152 33.1626L36.9728 33.391C41.1845 33.6117 44.4198 37.2048 44.1991 41.4165C43.9783 45.6282 40.3852 48.8635 36.1735 48.6428L36.1164 49.7322C36.0533 50.9355 35.0267 51.8599 33.8234 51.7968C32.6201 51.7337 31.6957 50.7071 31.7587 49.5038L31.8158 48.4144L31.4527 48.3953C27.4416 48.1851 24.3604 44.7631 24.5706 40.752C24.6336 39.5486 25.6603 38.6243 26.8636 38.6873C28.0669 38.7504 28.9913 39.777 28.9282 40.9803C28.8441 42.5848 30.0766 43.9536 31.6811 44.0377L36.4019 44.2851C38.2069 44.3797 39.7468 42.9931 39.8414 41.1881C39.936 39.3831 38.5494 37.8432 36.7444 37.7486L32.3868 37.5202C28.1751 37.2995 24.9398 33.7063 25.1605 29.4947C25.3813 25.283 28.9744 22.0477 33.1861 22.2684L33.2432 21.179C33.3063 19.9757 34.3329 19.0513 35.5362 19.1144Z" fill="#FF3737"/>
</svg>
</div>
<div class="block-hero__cardDescription">
{@html $t('trading-platform.Can be saved on development costs')}
</div>
</div>
</div>
</div>
<div class="block-hero__awards">
<div class="block-hero__award">
<img src={bestAllInOne} alt="Best All in One Brokerage Solution 2023" />
</div>
<div class="block-hero__award">
<img src={bestTradingPlatform} alt="Best Trading Platform Australia 2022" />
</div>
<div class="block-hero__award">
<img src={bestWhiteLabelSolution} alt="Best White Label Solution Global 2023">
</div>
<div class="block-hero__award">
<img src={mostInnovativeTradingPlatform} alt="Most Innovative Trading Platform Australia">
</div>
</div>
</div>
</div>
</div>
</div>
<style lang="scss">
@import 'src/scss/variables';
@import 'src/scss/media';
@import 'src/scss/mixins';
@import 'src/scss/trading-platform/mixins';
.block-hero {
position: relative;
background: $blue;
padding-bottom: 100px;
border-radius: 0 0 40px 40px;
overflow: hidden;
display: flex;
align-items: stretch;
@include breakpoint-down('deskL') {
padding-top: 52px;
padding-bottom: 60px;
border-radius: 0 0 20px 20px;
}
@include breakpoint-down('deskS') {
padding-top: 50px;
padding-bottom: 64px;
}
@include breakpoint-down('tabM') {
padding-top: 189px;
padding-bottom: 50px;
}
.container {
max-width: 1408px;
@include breakpoint-down('deskL') {
max-width: 1120px;
}
}
&__wrapper {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
height: 100%;
@include breakpoint-down('tabM') {
gap: 22px;
}
}
&__picture {
position: absolute;
top: 0;
right: -44px;
@include breakpoint-down('deskL') {
top: -49px;
right: -31px;
}
@include breakpoint-down('deskS') {
right: 12%;
}
@include breakpoint-down('tabL'){
right: -40px;
}
@include breakpoint-down('tabM') {
position: static;
}
img {
width: 870px;
height: 783px;
@include breakpoint-down('deskL') {
width: 675px;
height: 541px;
}
@include breakpoint-down('deskS') {
width: 429px;
height: 387px;
}
@include breakpoint-down('tabM') {
width: auto;
max-height: 328.75px;
}
}
}
&__row {
display: flex;
&:first-child {
height: 767px;
padding-top: 273px;
@include breakpoint-down('deskL') {
height: 453px;
padding-top: 76px;
}
@include breakpoint-down('deskS') {
height: 328px;
padding-top: 50px;
}
@include breakpoint-down('tabM') {
flex-direction: column-reverse;
align-items: center;
}
}
&:last-child {
flex-direction: column;
gap: 90px;
@include breakpoint-down('deskL') {
gap: 46px;
}
@include breakpoint-down('deskS'){
gap: 55px;
}
@include breakpoint-down('tabM') {
gap: 34px;
}
}
}
&__awards {
display: flex;
width: 100%;
justify-content: space-around;
@include breakpoint-down('tabM') {
flex-wrap: wrap;
gap: 20px;
}
}
&__award {
img {
width: auto;
height: 94.66px;
@include breakpoint-down('deskL') {
height: 72px;
width: auto;
}
@include breakpoint-down('deskS') {
height: 48.91px;
width: auto;
}
}
}
&__cards {
display: flex;
justify-content: center;
@include breakpoint-down('tabM') {
flex-direction: column;
gap: 12px;
}
}
&__card {
width: 480px;
height: 240px;
color: $techWhite;
padding-inline: 70px;
display: flex;
position: relative;
flex-direction: column;
justify-content: center;
@include breakpoint-down('deskL') {
width: 380px;
height: 170px;
padding-inline: 40px;
}
@include breakpoint-down('deskS') {
width: 240px;
height: 120px;
padding-inline: 30px;
}
@include breakpoint-down('tabM') {
width: 100%;
height: 120px;
}
&::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
border-radius: 20px;
top: 0;
left: 0;
backdrop-filter: blur(31.01175880432129px);
background: #FFFFFF1A;
border: 2px solid #f96c6e;
//border-image-source: linear-gradient(125.13deg, #F96C6E 22.41%, rgba(255, 164, 165, 0.42) 80.51%);
box-shadow: 6px -8px 20.67px 3px #F86C6F33;
}
&:first-child {
transform: rotate(357deg);
margin-right: -31px;
margin-top: -13px;
@include breakpoint-down('deskL') {
margin-top: -20px;
margin-right: -9px;
}
@include breakpoint-down('deskS') {
margin-top: -12px;
}
@include breakpoint-down('tabM') {
transform: rotate(0);
margin: 0;
}
}
&:nth-child(2) {
border-color: $techWhite;
z-index: 1;
&::before {
background: $redPrimary;
}
}
&:last-child {
transform: rotate(3deg);
margin-left: -10px;
margin-top: -13px;
@include breakpoint-down('deskL') {
margin-top: -20px;
}
@include breakpoint-down('deskS') {
margin-top: -12px;
}
@include breakpoint-down('tabM') {
transform: rotate(0);
margin: 0;
}
.block-hero__cardTitle {
margin-right: -20px;
@include breakpoint-down('deskS') {
font-size: 28px;
line-height: 28px;
}
@include breakpoint-down('tabM') {
margin: 0;
}
}
}
svg {
@include breakpoint-down('deskL') {
width: 42px;
height: 42px;
}
@include breakpoint-down('deskS') {
width: 32px;
height: 32px;
}
}
}
&__cardContainer {
display: flex;
flex-direction: column;
gap: 18px;
z-index: 1;
}
&__cardTitle {
@include heading1;
display: flex;
justify-content: space-between;
align-items: center;
}
&__cardDescription {
@include heading3;
}
&__text {
width: 642px;
@include breakpoint-down('deskL'){
width: 378px;
}
@include breakpoint-down('deskS') {
width: 334px;
}
@include breakpoint-down('tabM'){
text-align: center;
align-items: center;
display: flex;
flex-direction: column;
}
}
&__title {
@include titleBlock;
color: $techWhite;
width: 100%;
max-width: 919px;
margin-bottom: 18px;
@include breakpoint-down('deskS'){
max-width: 320px;
}
@include breakpoint-down('tabM') {
margin-bottom: 12px;
max-width: 265px;
}
}
&__subtitle {
@include text;
color: $techWhite;
max-width: 595px;
margin-bottom: 30px;
width: 65%;
@include breakpoint-down('deskL') {
width: 82%;
}
@include breakpoint-down('tabM') {
margin-bottom: 20px;
}
}
& :global(.block-hero__button) {
@include heading2;
min-width: 403px;
padding: 20px 0;
@include breakpoint-down('deskL') {
min-width: 284px;
padding: 16px 0;
}
@include breakpoint-down('deskS') {
min-width: 180px;
padding: 12px 0;
}
@include breakpoint-down('tabM') {
width: 100%;
}
}
&:after {
content: '';
position: absolute;
left: 50%;
top: calc(50% - 50px);
transform: translate(-50%, -50%);
width: 1700px;
height: 1700px;
border-radius: 1700px;
background: radial-gradient(50% 50% at 50% 50%, #7495d4 -100%, rgba(5, 13, 33, 0) 100%);
pointer-events: none;
z-index: 0;
@include breakpoint-down('tabM'){
width: 588px;
height: 588px;
transform: translate(-50%, -27%);
}
}
}
</style>