File: //var/www/quadcode.com/src/components/blocks/for-traders/Hero.svelte
<script lang="ts">
import Button from '../../button/Button.svelte';
import logoBg from '../../../assets/images/for-traders/logos/logoBg.svg';
import iqOption from '../../../assets/images/for-traders/logos/iqOption.svg';
import casatrade from '../../../assets/images/for-traders/logos/casatrade.svg';
import { t } from '$lib/translations';
const onIqOptionButtonClick = () => {
window.open('https://affiliate.iqbroker.com/redir/?aff=385727&aff_model=revenue&afftrack=quadcode_for_traders');
}
const onCasatradeButtonClick = () => {
window.open('https://trade.casatrade.com/register?aff=745060&aff_model=revenue&afftrack=quadcode_for_traders');
}
</script>
<section class="for-traders">
<div class="container">
<div class="for-traders__text">
<h1 class="for-traders__textTitle">{@html $t('for-traders.Trader? We’ve got you covered')}</h1>
<p class="for-traders__textDescription">{$t('for-traders.Choose from a variety of brokers with best-in-class UI/UX.')}</p>
</div>
<div class="for-traders__blocks">
<div class="for-traders__block">
<div class="for-traders__blockImage">
<img src={logoBg} class="for-traders__blockImageBg" alt="bg">
<img src={casatrade} id="forTradersHeroQuadcodeMarkets" alt="Casatrade">
</div>
<div class="for-traders__blockTitle">Casatrade</div>
<div class="for-traders__blockDescription">{$t('for-traders.Trade currency pairs, crypto, and stocks with 90% profitability in the cozy interface. Start now and take charge of your finances.')}</div>
<Button onClick={onCasatradeButtonClick}>
{$t('for-traders.Register')}
<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.23633 16.875L14.1113 10L7.23633 3.125" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</Button>
</div>
<div class="for-traders__block">
<div class="for-traders__blockImage">
<img src={logoBg} class="for-traders__blockImageBg" alt="bg">
<img src={iqOption} id="forTradersHeroIqOption" alt="iqOption">
</div>
<div class="for-traders__blockTitle">IQ Option</div>
<div class="for-traders__blockDescription">{$t('for-traders.IQ Option is one of the fastest growing online trading platforms. Trade CFDs on stocks, ETFs, Forex and diversify your portfolio.')}</div>
<Button onClick={onIqOptionButtonClick}>
{$t('for-traders.Register')}
<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.23633 16.875L14.1113 10L7.23633 3.125" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</Button>
</div>
</div>
</div>
</section>
<style lang="scss">
@import 'src/scss/variables';
@import 'src/scss/media';
.for-traders {
overflow: hidden;
padding-top: 125px;
padding-bottom: 87px;
padding-left: 43px;
@include breakpoint-down('deskL') {
padding-top: 100px;
padding-left: 0;
padding-bottom: 66px;
}
@include breakpoint-down('tabL') {
padding-top: 83px;
padding-bottom: 35px;
}
@include breakpoint-down('tabM') {
padding-top: 133px;
padding-bottom: 88px;
}
.container {
display: flex;
flex-direction: column;
gap: 55px;
@include breakpoint-down('deskL') {
gap: 30px;
}
@include breakpoint-down('tabL') {
gap: 20px;
}
}
&__text {
display: flex;
align-items: center;
flex-direction: column;
gap: 18px;
@include breakpoint-down('deskL') {
gap: 9px;
}
}
&__textTitle {
font-size: 72px;
line-height: 72px;
font-weight: 700;
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: 70%;
}
:global(span) {
color: $redPrimary;
}
}
&__textDescription {
font-size: 28px;
font-weight: 700;
line-height: 33.6px;
color: $techBluePrimary;
@include breakpoint-down('deskL') {
font-size: 18px;
line-height: 19.8px;
}
@include breakpoint-down('tabL') {
font-size: 16px;
line-height: 22.4px;
}
@include breakpoint-down('tabM') {
font-size: 12px;
line-height: 14.4px;
font-weight: 400;
width: 100%;
text-align: center;
}
}
&__blocks {
display: flex;
justify-content: center;
gap: 8px;
@include breakpoint-down('tabM') {
flex-direction: column;
}
}
&__block {
width: 431px;
height: auto;
background: rgba(245, 245, 245, 1);
border-radius: 20px;
display: flex;
flex-direction: column;
align-items: center;
padding: 60px;
@include breakpoint-down('deskL') {
width: 345px;
padding: 30px;
}
@include breakpoint-down('tabL') {
width: 211px;
padding: 20px;
}
@include breakpoint-down('tabM') {
width: 100%;
}
}
&__blockTitle {
color: $redPrimary;
font-size: 42px;
text-wrap: nowrap;
font-weight: 700;
line-height: 42px;
margin-bottom: 12px;
text-align: center;
@include breakpoint-down('deskL') {
font-size: 24px;
font-weight: 700;
line-height: 29.23px;
}
@include breakpoint-down('tabL') {
font-size: 18px;
font-weight: 700;
line-height: 19.8px;
margin-bottom: 8px;
}
@include breakpoint-down('tabM') {
font-size: 31px;
font-weight: 700;
line-height: 31px;
}
}
&__blockDescription {
font-size: 24px;
font-weight: 400;
line-height: 30px;
text-align: center;
margin-bottom: 24px;
flex: 1;
@include breakpoint-down('deskL') {
font-size: 18px;
font-weight: 400;
line-height: 25.2px;
padding-inline: 21px;
}
@include breakpoint-down('tabL') {
font-size: 12px;
font-weight: 700;
line-height: 14.4px;
margin-bottom: 12px;
padding: 0;
}
@include breakpoint-down('tabM') {
font-size: 12px;
font-weight: 400;
line-height: 14.4px;
}
}
&__blockImage {
margin-bottom: 40px;
position: relative;
display: flex;
justify-content: center;
border-radius: 30px;
background: rgba(12, 3, 26, 1);
overflow: hidden;
height: 183px;
@include breakpoint-down('deskL') {
margin-bottom: 30px;
border-radius: 16px;
width: 280px;
height: 141px;
}
@include breakpoint-down('tabL') {
width: 100%;
margin-bottom: 20px;
border-radius: 12px;
height: 113px;
}
@include breakpoint-down('tabM') {
border-radius: 16px;
height: 141px;
}
}
&__blockImageBg {
object-fit: cover;
}
#forTradersHeroIqOption {
position: absolute;
width: 112px;
height: 80px;
top: 50px;
margin-inline: auto;
@include breakpoint-down('deskL') {
width: 112px;
height: 80px;
top: 25px;
}
@include breakpoint-down('tabL') {
width: 59px;
height: 42px;
top: 33px;
}
@include breakpoint-down('tabM') {
width: 112px;
height: 80px;
top: 28px;
}
}
#forTradersHeroQuadcodeMarkets {
position: absolute;
width: 181px;
height: 47px;
top: 77px;
@include breakpoint-down('deskL') {
width: 181px;
height: 54px;
top: 50px;
}
@include breakpoint-down('tabL') {
width: 108.44px;
height: 32px;
top: 41px;
}
@include breakpoint-down('tabM') {
width: 181px;
height: 54px;
top: 44px;
}
}
}
:global(.for-traders__block .button) {
height: 65px;
width: 100%;
font-size: 30px;
font-weight: 700;
line-height: 33px;
text-align: center;
@include breakpoint-down('deskL') {
font-size: 18px;
height: 52px;
width: 243px;
font-weight: 700;
line-height: 19.8px;
text-align: center;
}
@include breakpoint-down('tabL') {
width: 100%;
height: 38px ;
font-size: 12px;
font-weight: 700;
line-height: 14.4px;
}
@include breakpoint-down('tabM') {
width: 100%;
font-size: 12px;
font-weight: 700;
line-height: 14.4px;
text-align: center;
}
}
</style>