File: //var/www/quadcode.com/src/components/blocks/trading-platform/FeaturesOld.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: 40,
pagination: {
el: pagination,
clickable: true,
},
breakpoints: {
320: {
slidesPerView: 2,
spaceBetween: 40,
},
480: {
slidesPerView: 2,
spaceBetween: 40,
},
768: {
slidesPerView: 3,
spaceBetween: 20,
grid: {
rows: 2,
fill: 'row',
},
},
1366: {
slidesPerView: 4,
spaceBetween: 32,
grid: {
rows: 2,
fill: 'row',
},
},
1800: {
slidesPerView: 4,
spaceBetween: 40,
grid: {
rows: 2,
fill: 'row',
},
},
},
});
});
</script>
<div class="block-features">
<div class="container">
<div class="block-features__wrapper">
<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("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')}</p>
<a href={'javascript:void(0);'} class="block-features__itemLink">{$t('trading-platform.Beta')}</a>
<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';
.block-features {
padding-top: 151px;
padding-bottom: 21px;
background: $techWhite;
@include breakpoint-down('deskL') {
padding-top: 121px;
padding-bottom: 44px;
}
@include breakpoint-down('deskS') {
padding-top: 80px;
padding-bottom: 40px;
}
@include breakpoint-down('tabM') {
padding-bottom: 27px;
}
&__title {
@include titleXL;
text-align: center;
margin-bottom: 24px;
@include breakpoint-down('deskL') {
margin-bottom: 16px;
}
@include breakpoint-down('deskS') {
margin-bottom: 8px;
}
}
&__text {
width: 100%;
max-width: 920px;
margin-inline: auto;
text-align: center;
color: $techBluePrimary;
margin-bottom: 40px;
@include breakpoint-down('deskL') {
max-width: 750px;
margin-bottom: 64px;
}
@include breakpoint-down('deskS') {
max-width: 530px;
margin-bottom: 62px;
}
@include breakpoint-down('tabM') {
margin-bottom: 24px;
}
}
&__swiper {
width: 100%;
@include breakpoint-down('deskS') {
margin-bottom: 24px;
}
@include breakpoint-down('tabM') {
margin-bottom: 61px;
}
}
&__item {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
&__itemIcon {
width: 90px;
min-width: 90px;
height: 90px;
@include breakpoint-down('deskS') {
width: 70px;
min-width: 70px;
height: 70px;
}
}
&__itemTitle {
@include baseCTA;
color: $techBluePrimary;
text-align: center;
margin-bottom: 8px;
@include breakpoint-down('deskL') {
margin-bottom: 5px;
}
@include breakpoint-down('tabM') {
margin-bottom: 0;
}
}
&__itemText {
@include smallDefault;
color: $techBluePrimary;
text-align: center;
}
&__itemLink {
border-radius: 40px;
background: $fontPrimary;
padding: 1px 29.5px;
color: $techWhite;
font-size: 10px;
font-weight: 400;
line-height: 140%;
margin-bottom: 17px;
@include breakpoint-down('deskL') {
margin-bottom: 8px;
}
}
}
</style>