File: //var/www/quadcode.com/src/components/blocks/trading-platform/Features.svelte
<script lang="ts">
import PaginationEl from '../../pagination/Pagination.svelte';
import img1 from '../../../assets/images/trading-platform/features/tournaments.svg';
import img2 from '../../../assets/images/trading-platform/features/quick-registration.svg';
import img3 from '../../../assets/images/trading-platform/features/leaderboard.svg';
import img4 from '../../../assets/images/trading-platform/features/user-account.svg';
import img5 from '../../../assets/images/trading-platform/features/chats.svg';
import img6 from '../../../assets/images/trading-platform/features/news.svg';
import img7 from '../../../assets/images/trading-platform/features/payment.svg';
import img8 from '../../../assets/images/trading-platform/features/bots.svg';
import { onMount } from 'svelte';
import Swiper from 'swiper';
import 'swiper/css';
import 'swiper/css/grid';
import 'swiper/css/pagination';
import { Grid, Pagination } from 'swiper/modules';
import { t } from '$lib/translations';
onMount(() => {
const container: HTMLElement | null = document.querySelector('.block-features__swiper');
const pagination: HTMLElement | null = document.querySelector('.block-features__pagination');
if (!container || !pagination) return;
new Swiper(container, {
modules: [Pagination, Grid],
spaceBetween: 28,
pagination: {
el: pagination,
clickable: true,
},
breakpoints: {
320: {
slidesPerView: 2,
spaceBetween: 20,
},
480: {
slidesPerView: 2,
spaceBetween: 20,
},
768: {
slidesPerView: 3,
spaceBetween: 14,
grid: {
rows: 3,
fill: 'row',
},
},
1366: {
slidesPerView: 4,
spaceBetween: 36,
grid: {
rows: 2,
fill: 'row',
},
},
1800: {
slidesPerView: 4,
spaceBetween: 28,
grid: {
rows: 2,
fill: 'row',
},
},
},
});
});
</script>
<div class="block-features">
<div class="container">
<div class="block-features__wrapper">
<p class="block-features__underTitle">{$t('trading-platform.Our Platform')}</p>
<p class="block-features__title">{$t('trading-platform.Trading terminal features')}</p>
<p class="block-features__text">
{$t("trading-platform.Make the most of the platform's wide range of features to offer a seamless trading experience and become the ideal broker for your traders.")}
</p>
<div class="swiper block-features__swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="block-features__item">
<div class="block-features__itemIcon">
<img src={img1} alt="" loading="lazy" />
</div>
<p class="block-features__itemTitle">{$t('trading-platform.Tournaments')}</p>
<p class="block-features__itemText">
{$t('trading-platform.Allow your traders to showcase their skills and win amazing prizes.')}
</p>
</div>
</div>
<div class="swiper-slide">
<div class="block-features__item">
<div class="block-features__itemIcon">
<img src={img2} alt="" loading="lazy" />
</div>
<p class="block-features__itemTitle">{$t('trading-platform.Quick Registration')}</p>
<p class="block-features__itemText">
{$t('trading-platform.Your traders can register via Google, Facebook, email, phone & more.')}
</p>
</div>
</div>
<div class="swiper-slide">
<div class="block-features__item">
<div class="block-features__itemIcon">
<img src={img3} alt="" loading="lazy" />
</div>
<p class="block-features__itemTitle">{$t('trading-platform.Leaderboard')}</p>
<p class="block-features__itemText">{$t("trading-platform.Show your traders how well they're doing in comparison to others.")}</p>
</div>
</div>
<div class="swiper-slide">
<div class="block-features__item">
<div class="block-features__itemIcon">
<img src={img4} alt="" loading="lazy" />
</div>
<p class="block-features__itemTitle">{$t('trading-platform.User account')}</p>
<p class="block-features__itemText">
{$t('trading-platform.Allow users to manage their personal data and customize their trading preferences.')}
</p>
</div>
</div>
<div class="swiper-slide">
<div class="block-features__item">
<div class="block-features__itemIcon">
<img src={img5} alt="" loading="lazy" />
</div>
<p class="block-features__itemTitle">{$t('trading-platform.Chats')}</p>
<p class="block-features__itemText">{$t('trading-platform.Internal communication between traders within the platform')}</p>
</div>
</div>
<div class="swiper-slide">
<div class="block-features__item">
<div class="block-features__itemIcon">
<img src={img6} alt="" loading="lazy" />
</div>
<p class="block-features__itemTitle">{$t('trading-platform.Market News')}</p>
<p class="block-features__itemText">
{$t('trading-platform.Your clients will get the most important news from the most reliable sources.')}
</p>
</div>
</div>
<div class="swiper-slide">
<div class="block-features__item">
<div class="block-features__itemIcon">
<img src={img7} alt="" loading="lazy" />
</div>
<p class="block-features__itemTitle">{$t('trading-platform.Payment page')}</p>
<p class="block-features__itemText">
{$t('trading-platform.Billing traders is secure and quick, with many payment methods available.')}
</p>
</div>
</div>
<div class="swiper-slide">
<div class="block-features__item">
<div class="block-features__itemIcon">
<img src={img8} alt="" loading="lazy" />
</div>
<p class="block-features__itemTitle">{$t('trading-platform.Trading bots')} <span class="block-features__itemLink">{$t('trading-platform.Beta')}</span></p>
<p class="block-features__itemText">
{$t('trading-platform.Clients can automatize their trading by integrating trading bots into the dash.')}
</p>
</div>
</div>
</div>
</div>
<PaginationEl className="block-features__pagination" />
</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-features {
padding-top: 92px;
padding-bottom: 92px;
background: $techWhite;
@include breakpoint-down('deskL') {
padding-top: 60px;
padding-bottom: 78px;
}
@include breakpoint-down('tabL') {
padding-top: 40px;
padding-bottom: 13px;
}
@include breakpoint-down('tabM') {
padding-bottom: 40px;
}
&__underTitle {
@include underTitle;
color: $redPrimary;
text-align: center;
margin-bottom: 18px;
@include breakpoint-down('tabL') {
margin-bottom: 11px;
}
}
&__title {
@include titleBlock;
text-align: center;
margin-bottom: 21px;
@include breakpoint-down('deskL') {
margin-bottom: 20px;
}
@include breakpoint-down('deskS') {
margin-bottom: 8px;
}
@include breakpoint-down('tabL') {
margin-bottom: 12px;
}
@include breakpoint-down('tabM') {
margin-bottom: 14px;
}
}
&__text {
@include text;
width: 100%;
max-width: 920px;
margin-inline: auto;
text-align: center;
color: $techBluePrimary;
margin-bottom: 40px;
@include breakpoint-down('deskL') {
max-width: 634px;
margin-bottom: 30px;
}
@include breakpoint-down('deskS') {
max-width: 530px;
margin-bottom: 62px;
}
@include breakpoint-down('tabL') {
max-width: 434px;
margin-bottom: 32px;
}
@include breakpoint-down('tabM') {
max-width: 80%;
margin-bottom: 9px;
}
}
&__swiper {
width: 100%;
@include breakpoint-down('deskS') {
margin-bottom: 24px;
}
@include breakpoint-down('tabL') {
width: 74%;
}
@include breakpoint-down('tabM') {
width: 100%;
margin-bottom: 42px;
}
}
.swiper-wrapper {
@include breakpoint-down('tabL') {
justify-content: center;
}
@include breakpoint-down('tabM') {
justify-content: normal;
}
}
&__item {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
&__itemIcon {
width: 90px;
min-width: 90px;
height: 90px;
}
&__itemTitle {
@include baseCTA;
color: $redPrimary;
text-align: center;
margin-bottom: 8px;
@include breakpoint-down('deskL') {
margin-bottom: 5px;
}
@include breakpoint-down('tabM') {
margin-bottom: 0;
}
}
&__itemText {
@include subtext;
color: $techBluePrimary;
text-align: center;
}
&__itemLink {
border-radius: 40px;
background: #B8B8B8;
padding: 1px 18px;
color: $techWhite;
font-size: 10px;
font-weight: 400;
line-height: 140%;
margin: auto;
@include breakpoint-down('deskL') {
margin-bottom: 8px;
}
}
}
</style>