File: //var/www/quadcode.com/src/components/blocks/trading-platform/Analysis.svelte
<script lang="ts">
import img1 from '../../../assets/images/trading-platform/analysis/momentum.svg';
import img2 from '../../../assets/images/trading-platform/analysis/trand.svg';
import img3 from '../../../assets/images/trading-platform/analysis/volatility.svg';
import img4 from '../../../assets/images/trading-platform/analysis/moving.svg';
import img5 from '../../../assets/images/trading-platform/analysis/volume.svg';
import img6 from '../../../assets/images/trading-platform/analysis/other.svg';
import { t } from '$lib/translations';
</script>
<div class="block-analysis">
<div class="container">
<div class="block-analysis__wrapper">
<div class="block-analysis__content">
<div class="block-analysis__contentTitleBlock">
<div class="block-analysis__contentIcon">
<svg width="29" height="23" viewBox="0 0 29 23" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M2.25903 12.9728C2.25903 12.9728 2.93564 21.1853 9.0484 21.1853C15.1612 21.1853 14.3212 11.9229 20.364 11.9229C26.4068 11.9229 26.3835 21.1853 26.3835 21.1853"
stroke="#445667"
stroke-width="3"
stroke-linecap="square"
stroke-linejoin="bevel"
/>
<path
d="M1.20923 1H27.9701"
stroke="#445667"
stroke-width="2"
stroke-linecap="square"
stroke-linejoin="bevel"
/>
</svg>
</div>
<p class="block-analysis__contentTitle">{$t('trading-platform.Full tech analysis toolset')}</p>
</div>
<p class="block-analysis__contentText">
{$t("trading-platform.Offer 70+ advanced market and technical analysis tools that will fit any trader's requirements. Whether it's the nitty-gritty of elaborate mathematical methods or straightforward tools of trader sentiment analysis, we got you covered.")}
</p>
</div>
<div class="block-analysis__list">
<div class="block-analysis__item">
<div class="block-analysis__itemIcon">
<img src={img1} alt="" loading="lazy" />
</div>
<div class="block-analysis__itemContent">
<div class="block-analysis__itemCol">
<p class="block-analysis__itemName">{$t('trading-platform.Momentum')}</p>
</div>
<div class="block-analysis__itemCol">
<p class="block-analysis__itemCount">{$t('trading-platform.36')}</p>
</div>
</div>
</div>
<div class="block-analysis__item">
<div class="block-analysis__itemIcon">
<img src={img2} alt="" loading="lazy" />
</div>
<div class="block-analysis__itemContent">
<div class="block-analysis__itemCol">
<p class="block-analysis__itemName">{$t('trading-platform.Trend')}</p>
</div>
<div class="block-analysis__itemCol">
<p class="block-analysis__itemCount">{$t('trading-platform.24')}</p>
</div>
</div>
</div>
<div class="block-analysis__item">
<div class="block-analysis__itemIcon">
<img src={img3} alt="" loading="lazy" />
</div>
<div class="block-analysis__itemContent">
<div class="block-analysis__itemCol">
<p class="block-analysis__itemName">{$t('trading-platform.Volatility')}</p>
</div>
<div class="block-analysis__itemCol">
<p class="block-analysis__itemCount">{$t('trading-platform.13')}</p>
</div>
</div>
</div>
<div class="block-analysis__item">
<div class="block-analysis__itemIcon">
<img src={img4} alt="" loading="lazy" />
</div>
<div class="block-analysis__itemContent">
<div class="block-analysis__itemCol">
<p class="block-analysis__itemName">{$t('trading-platform.Moving Averages')}</p>
</div>
<div class="block-analysis__itemCol">
<p class="block-analysis__itemCount">{$t('trading-platform.7')}</p>
</div>
</div>
</div>
<div class="block-analysis__item">
<div class="block-analysis__itemIcon">
<img src={img5} alt="" loading="lazy" />
</div>
<div class="block-analysis__itemContent">
<div class="block-analysis__itemCol">
<p class="block-analysis__itemName">{$t('trading-platform.Volume')}</p>
</div>
<div class="block-analysis__itemCol">
<p class="block-analysis__itemCount">{$t('trading-platform.4')}</p>
</div>
</div>
</div>
<div class="block-analysis__item">
<div class="block-analysis__itemIcon">
<img src={img6} alt="" loading="lazy" />
</div>
<div class="block-analysis__itemContent">
<div class="block-analysis__itemCol">
<p class="block-analysis__itemName">{$t('trading-platform.Other')}</p>
</div>
<div class="block-analysis__itemCol">
<p class="block-analysis__itemCount">{$t('trading-platform.24')}</p>
</div>
</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-analysis {
padding-top: 160px;
background: #040E22;
color: $techWhite;
border-radius: 40px 40px 0 0;
@include breakpoint-down('deskL') {
padding-top: 90px;
border-radius: 20px 20px 0 0;
}
@include breakpoint-down('deskS') {
padding-top: 70px;
}
@include breakpoint-down('tabM') {
padding-top: 30px;
}
.container {
max-width: 62%;
@include breakpoint-down('deskL') {
max-width: 930px;
}
@include breakpoint-down('tabL') {
max-width: 100%;
padding: 0 40px;
}
}
&__wrapper {
display: flex;
align-items: center;
gap: 122px;
@include breakpoint-down('deskL') {
gap: 46px;
}
@include breakpoint-down('deskS') {
gap: 38px;
}
@include breakpoint-down('tabM') {
gap: 18px;
flex-direction: column;
}
}
&__content {
width: 100%;
max-width: 560px;
@include breakpoint-down('deskL') {
min-width: 388px;
max-width: 388px;
padding-top: 0;
}
@include breakpoint-down('deskS') {
max-width: 308px;
min-width: 308px;
}
@include breakpoint-down('tabM') {
max-width: none;
min-width: 0;
}
}
&__contentTitleBlock {
@include breakpoint-down('tabM') {
display: flex;
gap: 18px;
justify-content: center;
align-items: center;
margin-bottom: 20px;
}
}
&__contentIcon {
background: $techBlue1;
border-radius: 8px;
width: 64px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 18px;
@include breakpoint-down('deskS') {
margin-bottom: 18px;
}
@include breakpoint-down('tabM') {
margin: 0;
width: 42px;
height: 42px;
}
}
&__contentTitle {
font-size: 42px;
line-height: 42px;
color: $redPrimary;
margin-bottom: 20px;
font-weight: 700;
width: 320px;
@include breakpoint-down('deskL') {
font-size: 24px;
line-height: 29.23px;
}
@include breakpoint-down('deskS') {
font-size: 18px;
line-height: 19.8px;
margin-bottom: 20px;
}
@include breakpoint-down('tabM') {
width: 131px;
margin-bottom: 0;
}
}
&__contentText {
@include text;
font-weight: 400;
width: 496px;
@include breakpoint-down('deskL') {
width: 311px;
}
@include breakpoint-down('tabM') {
text-align: center;
width: 94%;
}
}
&__list {
width: 100%;
}
&__item {
display: flex;
gap: 30px;
margin-bottom: 5px;
border-radius: 20px;
padding-inline: 20px 40px;
border: 1px solid transparent;
background: linear-gradient(#1d2638, #1d2638 0) padding-box,
linear-gradient(125.13deg, #F96C6E 22.41%, rgba(255, 164, 165, 0.42) 80.51%) border-box;
@include breakpoint-down('deskL') {
gap: 38px;
margin-bottom: 6px;
}
@include breakpoint-down('deskS') {
gap: 11px;
margin-bottom: 6px;
border-radius: 12px;
}
@include breakpoint-down('tabM') {
margin-left: -24px;
margin-right: -22px;
padding-right: 10px;
}
}
&__itemContent {
display: flex;
justify-content: space-between;
width: 100%;
}
&__itemCol {
display: flex;
align-items: center;
}
&__itemIcon {
width: 90px;
min-width: 90px;
height: 90px;
@include breakpoint-down('deskL') {
width: 80px;
min-width: 80px;
height: 80px;
}
}
&__itemCount {
@include smallCTA;
background: $techBlue2;
color: $techBluePrimary;
border-radius: 16px;
padding: 2px 16px;
@include breakpoint-down('deskS') {
padding: 5px 15px;
}
}
}
</style>