File: //var/www/quadcode.com/src/components/blocks/trading-platform/AnalysisOld.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__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>
<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';
.block-analysis {
padding-top: 160px;
margin-bottom: 94px;
@include breakpoint-down('deskL') {
padding-top: 120px;
margin-bottom: 160px;
}
@include breakpoint-down('deskS') {
padding-top: 64px;
margin-bottom: 58px;
}
@include breakpoint-down('tabM') {
margin-bottom: 94px;
}
&__wrapper {
display: flex;
align-items: flex-start;
gap: 160px;
@include breakpoint-down('deskL') {
gap: 128px;
}
@include breakpoint-down('deskS') {
gap: 20px;
}
@include breakpoint-down('tabM') {
gap: 40px;
flex-direction: column;
}
}
&__content {
width: 100%;
max-width: 560px;
min-width: 560px;
padding-top: 22px;
@include breakpoint-down('deskL') {
max-width: 448px;
min-width: 448px;
padding-top: 0;
}
@include breakpoint-down('deskS') {
max-width: 373px;
min-width: 373px;
}
@include breakpoint-down('tabM') {
max-width: none;
min-width: 0;
}
}
&__contentIcon {
background: $techBlue1;
border-radius: 8px;
width: 64px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 24px;
@include breakpoint-down('deskL') {
margin-bottom: 16px;
}
@include breakpoint-down('deskS') {
margin-bottom: 8px;
}
@include breakpoint-down('tabM') {
margin: 0 auto 8px;
}
}
&__contentTitle {
@include titleXL;
margin-bottom: 24px;
@include breakpoint-down('deskL') {
margin-bottom: 16px;
}
@include breakpoint-down('deskS') {
margin-bottom: 8px;
}
@include breakpoint-down('tabM') {
text-align: center;
}
}
&__contentText {
color: $techBluePrimary;
@include breakpoint-down('tabM') {
text-align: center;
}
}
&__list {
width: 100%;
}
&__item {
display: flex;
gap: 30px;
margin-bottom: 8px;
@include breakpoint-down('deskL') {
gap: 6px;
margin-bottom: 0;
}
@include breakpoint-down('deskS') {
gap: 11px;
margin-bottom: 18px;
}
}
&__itemContent {
display: flex;
justify-content: space-between;
width: 100%;
border-bottom: 1px solid rgba(242, 246, 249, 1);
}
&__itemCol {
display: flex;
align-items: center;
}
&__itemIcon {
width: 90px;
min-width: 90px;
height: 90px;
@include breakpoint-down('deskS') {
width: 70px;
min-width: 70px;
height: 70px;
}
}
&__itemCount {
@include smallCTA;
background: $techBlue2;
color: $techBluePrimary;
border-radius: 16px;
padding: 2px 16px;
@include breakpoint-down('deskS') {
padding: 5px 15px;
}
}
}
</style>