File: //var/www/quadcode.com/src/components/blocks/trading-platform/Pricing.svelte
<script lang="ts">
import Button from '../../button/Button.svelte';
import { t, locale, defaultLocale } from '$lib/translations';
import { popupForm } from '../../../store';
</script>
<section
id="affiliateBrokerPricing"
class="affiliate_broker__pricing block-pricing {$locale !== defaultLocale ? '_locale' : ''}"
>
<div class="container">
<div class="block-pricing__wrapper">
<div class="block-pricing__text">
<p class="underTitle">
{$t('trading-platform.Pricing')}
</p>
<h2 class="block-pricing__title title">
{$t('trading-platform.Choose the best option for you')}
</h2>
</div>
<div class="block-pricing__cartsContainer">
<div class="block-pricing__carts">
<div class="block-pricing__cart">
<div class="block-pricing__cart__title">{$t('Basic')}</div>
<div class="block-pricing__cart__text">17,500</div>
</div>
<div class="block-pricing__cart">
<div class="block-pricing__cart__list">
<div class="block-pricing__cart__listColumn">
<div class="block-pricing__cart__listItem">
<span>{$t('trading-platform.Web-Mobile Traderoom')}</span>
<svg width="66" height="54" viewBox="0 0 66 54" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect
x="27.0303"
y="34.4766"
width="25.8432"
height="4.69649"
rx="2"
transform="rotate(-45 27.0303 34.4766)"
fill="#22CA33"
/>
<rect
x="30.3276"
y="37.7944"
width="18.3179"
height="4.64951"
rx="2"
transform="rotate(-135 30.3276 37.7944)"
fill="#22CA33"
/>
</svg>
</div>
<div class="block-pricing__cart__listItem">
<span>{$t('trading-platform.Quotes & Liquidity')}</span>
<svg width="66" height="54" viewBox="0 0 66 54" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect
x="27.0303"
y="34.4766"
width="25.8432"
height="4.69649"
rx="2"
transform="rotate(-45 27.0303 34.4766)"
fill="#22CA33"
/>
<rect
x="30.3276"
y="37.7944"
width="18.3179"
height="4.64951"
rx="2"
transform="rotate(-135 30.3276 37.7944)"
fill="#22CA33"
/>
</svg>
</div>
<div class="block-pricing__cart__listItem">
<span>{$t('trading-platform.CRM')}</span>
<svg width="66" height="54" viewBox="0 0 66 54" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect
x="27.0303"
y="34.4766"
width="25.8432"
height="4.69649"
rx="2"
transform="rotate(-45 27.0303 34.4766)"
fill="#22CA33"
/>
<rect
x="30.3276"
y="37.7944"
width="18.3179"
height="4.64951"
rx="2"
transform="rotate(-135 30.3276 37.7944)"
fill="#22CA33"
/>
</svg>
</div>
<div class="block-pricing__cart__listItem">
<span>{$t('trading-platform.Dealing desk')}</span>
<svg width="66" height="54" viewBox="0 0 66 54" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect
x="27.0303"
y="34.4766"
width="25.8432"
height="4.69649"
rx="2"
transform="rotate(-45 27.0303 34.4766)"
fill="#22CA33"
/>
<rect
x="30.3276"
y="37.7944"
width="18.3179"
height="4.64951"
rx="2"
transform="rotate(-135 30.3276 37.7944)"
fill="#22CA33"
/>
</svg>
</div>
<div class="block-pricing__cart__listItem">
<span>{$t('trading-platform.KYC')}</span>
<svg width="66" height="54" viewBox="0 0 66 54" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M40.1765 39.9567L23.0245 22.8196L25.8434 19.9858L42.9954 37.1378L40.1765 39.9567ZM25.8434 39.9567L23.0245 37.1378L40.1765 19.9858L42.9954 22.8196L25.8434 39.9567Z"
fill="#E62334"
/>
</svg>
</div>
<div class="block-pricing__cart__listItem">
<span>{$t('trading-platform.Antifraud')}</span>
<svg width="66" height="54" viewBox="0 0 66 54" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M40.1765 39.9567L23.0245 22.8196L25.8434 19.9858L42.9954 37.1378L40.1765 39.9567ZM25.8434 39.9567L23.0245 37.1378L40.1765 19.9858L42.9954 22.8196L25.8434 39.9567Z"
fill="#E62334"
/>
</svg>
</div>
<div class="block-pricing__cart__listItem">
<span>{$t('trading-platform.Intergrated PSPs')}</span>
<svg width="66" height="54" viewBox="0 0 66 54" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M40.1765 39.9567L23.0245 22.8196L25.8434 19.9858L42.9954 37.1378L40.1765 39.9567ZM25.8434 39.9567L23.0245 37.1378L40.1765 19.9858L42.9954 22.8196L25.8434 39.9567Z"
fill="#E62334"
/>
</svg>
</div>
</div>
<div class="block-pricing__cart__listColumn">
<div class="block-pricing__cart__listItem">
<span>{$t('trading-platform.Technical SMS')}</span>
<svg width="66" height="54" viewBox="0 0 66 54" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M40.1765 39.9567L23.0245 22.8196L25.8434 19.9858L42.9954 37.1378L40.1765 39.9567ZM25.8434 39.9567L23.0245 37.1378L40.1765 19.9858L42.9954 22.8196L25.8434 39.9567Z"
fill="#E62334"
/>
</svg>
</div>
<div class="block-pricing__cart__listItem">
<span>{$t('trading-platform.Technical emails')}</span>
<svg width="66" height="54" viewBox="0 0 66 54" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M40.1765 39.9567L23.0245 22.8196L25.8434 19.9858L42.9954 37.1378L40.1765 39.9567ZM25.8434 39.9567L23.0245 37.1378L40.1765 19.9858L42.9954 22.8196L25.8434 39.9567Z"
fill="#E62334"
/>
</svg>
</div>
<div class="block-pricing__cart__listItem">
<span>{$t('trading-platform.iOS app')}</span>
<svg width="66" height="54" viewBox="0 0 66 54" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M40.1765 39.9567L23.0245 22.8196L25.8434 19.9858L42.9954 37.1378L40.1765 39.9567ZM25.8434 39.9567L23.0245 37.1378L40.1765 19.9858L42.9954 22.8196L25.8434 39.9567Z"
fill="#E62334"
/>
</svg>
</div>
<div class="block-pricing__cart__listItem">
<span>{$t('trading-platform.Android app')}</span>
<svg width="66" height="54" viewBox="0 0 66 54" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M40.1765 39.9567L23.0245 22.8196L25.8434 19.9858L42.9954 37.1378L40.1765 39.9567ZM25.8434 39.9567L23.0245 37.1378L40.1765 19.9858L42.9954 22.8196L25.8434 39.9567Z"
fill="#E62334"
/>
</svg>
</div>
<div class="block-pricing__cart__listItem">
<span>{$t('trading-platform.UCC')}</span>
<svg width="66" height="54" viewBox="0 0 66 54" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M40.1765 39.9567L23.0245 22.8196L25.8434 19.9858L42.9954 37.1378L40.1765 39.9567ZM25.8434 39.9567L23.0245 37.1378L40.1765 19.9858L42.9954 22.8196L25.8434 39.9567Z"
fill="#E62334"
/>
</svg>
</div>
<div class="block-pricing__cart__listItem">
<span>{$t('trading-platform.Affiliate Module')}</span>
<svg width="66" height="54" viewBox="0 0 66 54" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M40.1765 39.9567L23.0245 22.8196L25.8434 19.9858L42.9954 37.1378L40.1765 39.9567ZM25.8434 39.9567L23.0245 37.1378L40.1765 19.9858L42.9954 22.8196L25.8434 39.9567Z"
fill="#E62334"
/>
</svg>
</div>
<div class="block-pricing__cart__listItem">
<span>{$t('trading-platform.Sales Module')}</span>
<svg width="66" height="54" viewBox="0 0 66 54" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M40.1765 39.9567L23.0245 22.8196L25.8434 19.9858L42.9954 37.1378L40.1765 39.9567ZM25.8434 39.9567L23.0245 37.1378L40.1765 19.9858L42.9954 22.8196L25.8434 39.9567Z"
fill="#E62334"
/>
</svg>
</div>
</div>
</div>
<Button ghost onClick={() => popupForm.set(true)} text={$t('trading-platform.Get Started')} />
</div>
</div>
<div class="block-pricing__carts">
<div class="block-pricing__cart">
<div class="block-pricing__cart__title title3">{$t('Full')}</div>
<div class="block-pricing__cart__text title2">$50,000</div>
</div>
<div class="block-pricing__cart">
<div class="block-pricing__cart__list">
<div class="block-pricing__cart__listColumn">
<div class="block-pricing__cart__listItem">
<span>{$t('trading-platform.Web-Mobile Traderoom')} </span>
<svg width="66" height="54" viewBox="0 0 66 54" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect
x="27.0303"
y="34.4756"
width="25.8432"
height="4.69649"
rx="2"
transform="rotate(-45 27.0303 34.4756)"
fill="white"
/>
<rect
x="30.3276"
y="37.7939"
width="18.3179"
height="4.64951"
rx="2"
transform="rotate(-135 30.3276 37.7939)"
fill="white"
/>
</svg>
</div>
<div class="block-pricing__cart__listItem">
<span>{$t('trading-platform.Quotes & Liquidity')}</span>
<svg width="66" height="54" viewBox="0 0 66 54" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect
x="27.0303"
y="34.4756"
width="25.8432"
height="4.69649"
rx="2"
transform="rotate(-45 27.0303 34.4756)"
fill="white"
/>
<rect
x="30.3276"
y="37.7939"
width="18.3179"
height="4.64951"
rx="2"
transform="rotate(-135 30.3276 37.7939)"
fill="white"
/>
</svg>
</div>
<div class="block-pricing__cart__listItem">
<span>{$t('trading-platform.CRM')}</span>
<svg width="66" height="54" viewBox="0 0 66 54" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect
x="27.0303"
y="34.4756"
width="25.8432"
height="4.69649"
rx="2"
transform="rotate(-45 27.0303 34.4756)"
fill="white"
/>
<rect
x="30.3276"
y="37.7939"
width="18.3179"
height="4.64951"
rx="2"
transform="rotate(-135 30.3276 37.7939)"
fill="white"
/>
</svg>
</div>
<div class="block-pricing__cart__listItem">
<span>{$t('trading-platform.Dealing desk')}</span>
<svg width="66" height="54" viewBox="0 0 66 54" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect
x="27.0303"
y="34.4756"
width="25.8432"
height="4.69649"
rx="2"
transform="rotate(-45 27.0303 34.4756)"
fill="white"
/>
<rect
x="30.3276"
y="37.7939"
width="18.3179"
height="4.64951"
rx="2"
transform="rotate(-135 30.3276 37.7939)"
fill="white"
/>
</svg>
</div>
<div class="block-pricing__cart__listItem">
<span>{$t('trading-platform.KYC')}</span>
<svg width="66" height="54" viewBox="0 0 66 54" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect
x="27.0303"
y="34.4756"
width="25.8432"
height="4.69649"
rx="2"
transform="rotate(-45 27.0303 34.4756)"
fill="white"
/>
<rect
x="30.3276"
y="37.7939"
width="18.3179"
height="4.64951"
rx="2"
transform="rotate(-135 30.3276 37.7939)"
fill="white"
/>
</svg>
</div>
<div class="block-pricing__cart__listItem">
<span>{$t('trading-platform.Antifraud')}</span>
<svg width="66" height="54" viewBox="0 0 66 54" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect
x="27.0303"
y="34.4756"
width="25.8432"
height="4.69649"
rx="2"
transform="rotate(-45 27.0303 34.4756)"
fill="white"
/>
<rect
x="30.3276"
y="37.7939"
width="18.3179"
height="4.64951"
rx="2"
transform="rotate(-135 30.3276 37.7939)"
fill="white"
/>
</svg>
</div>
<div class="block-pricing__cart__listItem">
<span>{$t('trading-platform.Intergrated PSPs')}</span>
<svg width="66" height="54" viewBox="0 0 66 54" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect
x="27.0303"
y="34.4756"
width="25.8432"
height="4.69649"
rx="2"
transform="rotate(-45 27.0303 34.4756)"
fill="white"
/>
<rect
x="30.3276"
y="37.7939"
width="18.3179"
height="4.64951"
rx="2"
transform="rotate(-135 30.3276 37.7939)"
fill="white"
/>
</svg>
</div>
</div>
<div class="block-pricing__cart__listColumn">
<div class="block-pricing__cart__listItem">
<span>{$t('trading-platform.Technical SMS')}</span>
<svg width="66" height="54" viewBox="0 0 66 54" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect
x="27.0303"
y="34.4756"
width="25.8432"
height="4.69649"
rx="2"
transform="rotate(-45 27.0303 34.4756)"
fill="white"
/>
<rect
x="30.3276"
y="37.7939"
width="18.3179"
height="4.64951"
rx="2"
transform="rotate(-135 30.3276 37.7939)"
fill="white"
/>
</svg>
</div>
<div class="block-pricing__cart__listItem">
<span>{$t('trading-platform.Technical emails')}</span>
<svg width="66" height="54" viewBox="0 0 66 54" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect
x="27.0303"
y="34.4756"
width="25.8432"
height="4.69649"
rx="2"
transform="rotate(-45 27.0303 34.4756)"
fill="white"
/>
<rect
x="30.3276"
y="37.7939"
width="18.3179"
height="4.64951"
rx="2"
transform="rotate(-135 30.3276 37.7939)"
fill="white"
/>
</svg>
</div>
<div class="block-pricing__cart__listItem">
<span>{$t('trading-platform.iOS app')}</span>
<svg width="66" height="54" viewBox="0 0 66 54" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect
x="27.0303"
y="34.4756"
width="25.8432"
height="4.69649"
rx="2"
transform="rotate(-45 27.0303 34.4756)"
fill="white"
/>
<rect
x="30.3276"
y="37.7939"
width="18.3179"
height="4.64951"
rx="2"
transform="rotate(-135 30.3276 37.7939)"
fill="white"
/>
</svg>
</div>
<div class="block-pricing__cart__listItem">
<span>{$t('trading-platform.Android app')}</span>
<svg width="66" height="54" viewBox="0 0 66 54" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect
x="27.0303"
y="34.4756"
width="25.8432"
height="4.69649"
rx="2"
transform="rotate(-45 27.0303 34.4756)"
fill="white"
/>
<rect
x="30.3276"
y="37.7939"
width="18.3179"
height="4.64951"
rx="2"
transform="rotate(-135 30.3276 37.7939)"
fill="white"
/>
</svg>
</div>
<div class="block-pricing__cart__listItem">
<span>{$t('trading-platform.UCC')}</span>
<svg width="66" height="54" viewBox="0 0 66 54" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect
x="27.0303"
y="34.4756"
width="25.8432"
height="4.69649"
rx="2"
transform="rotate(-45 27.0303 34.4756)"
fill="white"
/>
<rect
x="30.3276"
y="37.7939"
width="18.3179"
height="4.64951"
rx="2"
transform="rotate(-135 30.3276 37.7939)"
fill="white"
/>
</svg>
</div>
<div class="block-pricing__cart__listItem">
<span>{$t('trading-platform.Affiliate Module')}</span>
<svg width="66" height="54" viewBox="0 0 66 54" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect
x="27.0303"
y="34.4756"
width="25.8432"
height="4.69649"
rx="2"
transform="rotate(-45 27.0303 34.4756)"
fill="white"
/>
<rect
x="30.3276"
y="37.7939"
width="18.3179"
height="4.64951"
rx="2"
transform="rotate(-135 30.3276 37.7939)"
fill="white"
/>
</svg>
</div>
<div class="block-pricing__cart__listItem">
<span>{$t('trading-platform.Sales Module')}</span>
<svg width="66" height="54" viewBox="0 0 66 54" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect
x="27.0303"
y="34.4756"
width="25.8432"
height="4.69649"
rx="2"
transform="rotate(-45 27.0303 34.4756)"
fill="white"
/>
<rect
x="30.3276"
y="37.7939"
width="18.3179"
height="4.64951"
rx="2"
transform="rotate(-135 30.3276 37.7939)"
fill="white"
/>
</svg>
</div>
</div>
</div>
<Button
text={$t('trading-platform.Get Started')}
onClick={() => popupForm.set(true)}
bgColor="#141414"
color="#FFFFFF"
/>
</div>
</div>
<div class="block-pricing__carts">
<div class="block-pricing__cart">
<div class="block-pricing__cart__title title3">{$t('trading-platform.Advanced')}</div>
<div class="block-pricing__cart__text title2">$37,000</div>
</div>
<div class="block-pricing__cart">
<div class="block-pricing__cart__list">
<div class="block-pricing__cart__listColumn">
<div class="block-pricing__cart__listItem">
<span>{$t('trading-platform.Web-Mobile Traderoom')}</span>
<svg width="66" height="54" viewBox="0 0 66 54" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect
x="27.0303"
y="34.4766"
width="25.8432"
height="4.69649"
rx="2"
transform="rotate(-45 27.0303 34.4766)"
fill="#22CA33"
/>
<rect
x="30.3276"
y="37.7944"
width="18.3179"
height="4.64951"
rx="2"
transform="rotate(-135 30.3276 37.7944)"
fill="#22CA33"
/>
</svg>
</div>
<div class="block-pricing__cart__listItem">
<span>{$t('trading-platform.Quotes & Liquidity')}</span>
<svg width="66" height="54" viewBox="0 0 66 54" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect
x="27.0303"
y="34.4766"
width="25.8432"
height="4.69649"
rx="2"
transform="rotate(-45 27.0303 34.4766)"
fill="#22CA33"
/>
<rect
x="30.3276"
y="37.7944"
width="18.3179"
height="4.64951"
rx="2"
transform="rotate(-135 30.3276 37.7944)"
fill="#22CA33"
/>
</svg>
</div>
<div class="block-pricing__cart__listItem">
<span>{$t('trading-platform.CRM')}</span>
<svg width="66" height="54" viewBox="0 0 66 54" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect
x="27.0303"
y="34.4766"
width="25.8432"
height="4.69649"
rx="2"
transform="rotate(-45 27.0303 34.4766)"
fill="#22CA33"
/>
<rect
x="30.3276"
y="37.7944"
width="18.3179"
height="4.64951"
rx="2"
transform="rotate(-135 30.3276 37.7944)"
fill="#22CA33"
/>
</svg>
</div>
<div class="block-pricing__cart__listItem">
<span>{$t('trading-platform.Dealing desk')}</span>
<svg width="66" height="54" viewBox="0 0 66 54" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect
x="27.0303"
y="34.4766"
width="25.8432"
height="4.69649"
rx="2"
transform="rotate(-45 27.0303 34.4766)"
fill="#22CA33"
/>
<rect
x="30.3276"
y="37.7944"
width="18.3179"
height="4.64951"
rx="2"
transform="rotate(-135 30.3276 37.7944)"
fill="#22CA33"
/>
</svg>
</div>
<div class="block-pricing__cart__listItem">
<span>{$t('trading-platform.KYC')}</span>
<svg width="66" height="54" viewBox="0 0 66 54" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect
x="27.0303"
y="34.4766"
width="25.8432"
height="4.69649"
rx="2"
transform="rotate(-45 27.0303 34.4766)"
fill="#22CA33"
/>
<rect
x="30.3276"
y="37.7944"
width="18.3179"
height="4.64951"
rx="2"
transform="rotate(-135 30.3276 37.7944)"
fill="#22CA33"
/>
</svg>
</div>
<div class="block-pricing__cart__listItem">
<span>{$t('trading-platform.Antifraud')}</span>
<svg width="66" height="54" viewBox="0 0 66 54" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect
x="27.0303"
y="34.4766"
width="25.8432"
height="4.69649"
rx="2"
transform="rotate(-45 27.0303 34.4766)"
fill="#22CA33"
/>
<rect
x="30.3276"
y="37.7944"
width="18.3179"
height="4.64951"
rx="2"
transform="rotate(-135 30.3276 37.7944)"
fill="#22CA33"
/>
</svg>
</div>
<div class="block-pricing__cart__listItem">
<span>{$t('trading-platform.Intergrated PSPs')}</span>
<svg width="66" height="54" viewBox="0 0 66 54" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect
x="27.0303"
y="34.4766"
width="25.8432"
height="4.69649"
rx="2"
transform="rotate(-45 27.0303 34.4766)"
fill="#22CA33"
/>
<rect
x="30.3276"
y="37.7944"
width="18.3179"
height="4.64951"
rx="2"
transform="rotate(-135 30.3276 37.7944)"
fill="#22CA33"
/>
</svg>
</div>
</div>
<div class="block-pricing__cart__listColumn">
<div class="block-pricing__cart__listItem">
<span>{$t('trading-platform.Technical SMS')}</span>
<svg width="66" height="54" viewBox="0 0 66 54" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect
x="27.0303"
y="34.4766"
width="25.8432"
height="4.69649"
rx="2"
transform="rotate(-45 27.0303 34.4766)"
fill="#22CA33"
/>
<rect
x="30.3276"
y="37.7944"
width="18.3179"
height="4.64951"
rx="2"
transform="rotate(-135 30.3276 37.7944)"
fill="#22CA33"
/>
</svg>
</div>
<div class="block-pricing__cart__listItem">
<span>{$t('trading-platform.Technical emails')}</span>
<svg width="66" height="54" viewBox="0 0 66 54" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect
x="27.0303"
y="34.4766"
width="25.8432"
height="4.69649"
rx="2"
transform="rotate(-45 27.0303 34.4766)"
fill="#22CA33"
/>
<rect
x="30.3276"
y="37.7944"
width="18.3179"
height="4.64951"
rx="2"
transform="rotate(-135 30.3276 37.7944)"
fill="#22CA33"
/>
</svg>
</div>
<div class="block-pricing__cart__listItem">
<span>{$t('trading-platform.iOS app')}</span>
<svg width="66" height="54" viewBox="0 0 66 54" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M40.1765 39.9567L23.0245 22.8196L25.8434 19.9858L42.9954 37.1378L40.1765 39.9567ZM25.8434 39.9567L23.0245 37.1378L40.1765 19.9858L42.9954 22.8196L25.8434 39.9567Z"
fill="#E62334"
/>
</svg>
</div>
<div class="block-pricing__cart__listItem">
<span>{$t('trading-platform.Android app')}</span>
<svg width="66" height="54" viewBox="0 0 66 54" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M40.1765 39.9567L23.0245 22.8196L25.8434 19.9858L42.9954 37.1378L40.1765 39.9567ZM25.8434 39.9567L23.0245 37.1378L40.1765 19.9858L42.9954 22.8196L25.8434 39.9567Z"
fill="#E62334"
/>
</svg>
</div>
<div class="block-pricing__cart__listItem">
<span>{$t('trading-platform.UCC')}</span>
<svg width="66" height="54" viewBox="0 0 66 54" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M40.1765 39.9567L23.0245 22.8196L25.8434 19.9858L42.9954 37.1378L40.1765 39.9567ZM25.8434 39.9567L23.0245 37.1378L40.1765 19.9858L42.9954 22.8196L25.8434 39.9567Z"
fill="#E62334"
/>
</svg>
</div>
<div class="block-pricing__cart__listItem">
<span>{$t('trading-platform.Affiliate Module')}</span>
<svg width="66" height="54" viewBox="0 0 66 54" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M40.1765 39.9567L23.0245 22.8196L25.8434 19.9858L42.9954 37.1378L40.1765 39.9567ZM25.8434 39.9567L23.0245 37.1378L40.1765 19.9858L42.9954 22.8196L25.8434 39.9567Z"
fill="#E62334"
/>
</svg>
</div>
<div class="block-pricing__cart__listItem">
<span>{$t('trading-platform.Sales Module')}</span>
<svg width="66" height="54" viewBox="0 0 66 54" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M40.1765 39.9567L23.0245 22.8196L25.8434 19.9858L42.9954 37.1378L40.1765 39.9567ZM25.8434 39.9567L23.0245 37.1378L40.1765 19.9858L42.9954 22.8196L25.8434 39.9567Z"
fill="#E62334"
/>
</svg>
</div>
</div>
</div>
<Button ghost text={$t('trading-platform.Get Started')} onClick={() => popupForm.set(true)} />
</div>
</div>
</div>
</div>
</div>
</section>
<style lang="scss">
@import 'src/scss/variables';
@import 'src/scss/media';
@import 'src/scss/mixins';
@import 'src/scss/trading-platform/mixins';
.block-pricing {
padding-top: 82px;
padding-bottom: 82px;
background-repeat: no-repeat;
background-position: center 52%;
background-size: 100%;
position: relative;
background-image: url('/src/assets/images/trading-platform/pricing/blockPricingBg.png');
@include breakpoint-down('deskL') {
background-position: center 65%;
padding-top: 69px;
padding-bottom: 69px;
}
@include breakpoint-down('tabL') {
background-position: center 52%;
padding-top: 28px;
padding-bottom: 48px;
}
@include breakpoint-down('tabM') {
background-image: none;
padding-top: 40px;
padding-bottom: 38px;
}
&__text {
display: flex;
flex-direction: column;
gap: 18px;
@include breakpoint-down('tabL') {
gap: 6px;
padding-left: 24px;
}
@include breakpoint-down('tabM') {
text-align: center;
align-items: center;
padding-left: 0px;
margin-left: -5px;
}
}
&__title {
@include titleBlock;
@include breakpoint-down('tabL') {
text-align: center;
}
@include breakpoint-down('tabM') {
width: 253px;
}
}
.container {
@include breakpoint-down('deskL') {
max-width: 1185px;
}
@include breakpoint-down('tabM') {
padding: 0 15px;
}
}
&__wrapper {
display: flex;
flex-direction: column;
gap: 80px;
@include breakpoint-down('deskL') {
gap: 23px;
}
@include breakpoint-down('tabL') {
gap: 25px;
}
}
&__cartsContainer {
display: flex;
flex-direction: column;
gap: 46px;
padding-right: 50px;
@include breakpoint-down('deskL') {
gap: 30px;
padding-right: 0;
}
@include breakpoint-down('tabL') {
gap: 22px;
}
@include breakpoint-down('tabM') {
gap: 17px;
}
}
.underTitle {
@include underTitle;
color: $redPrimary;
@include breakpoint-down('tabL') {
text-align: center;
}
}
&__carts {
display: flex;
gap: 30px;
@include breakpoint-down('tabL') {
gap: 18px;
}
@include breakpoint-down('tabM') {
gap: 15px;
flex-direction: column;
padding: 32px 34px;
box-shadow: 0px 1px 3px 1px #00000026;
box-shadow: 0px 1px 2px 0px #0000004d;
border-radius: 20px;
}
&:nth-child(2) {
color: $techWhite;
.block-pricing__cart {
background-color: $redPrimary;
.button {
color: $techWhite;
background-color: #141414;
}
}
@include breakpoint-down('tabL') {
.block-pricing__cart:last-child {
gap: 32px;
.button {
padding: 15px 0px;
}
}
}
@include breakpoint-down('tabM') {
background-color: $redPrimary;
.block-pricing__cart:last-child {
gap: 18px;
}
}
}
}
&__cart {
display: flex;
flex-direction: column;
border: 1px solid #cfdae1;
border-radius: 20px;
background-color: $techWhite;
&:first-child {
width: 548px;
height: 232px;
padding: 64px;
font-weight: 700;
gap: 0px;
@include breakpoint-down('deskL') {
width: 405px;
height: 135px;
padding: 32px;
gap: 6px;
}
@include breakpoint-down('tabL') {
width: 184px;
height: 88px;
gap: 1px;
padding: 20px 32px;
}
@include breakpoint-down('tabM') {
width: auto;
height: auto;
padding: 0px;
border: none;
}
}
&:last-child {
flex: 1;
width: 57%;
gap: 28px;
padding: 60px 64px 64px 64px;
@include breakpoint-down('deskL') {
padding: 32px;
gap: 21px;
}
@include breakpoint-down('tabL') {
padding: 20px 32px;
gap: 18px;
}
@include breakpoint-down('tabM') {
padding: 0px;
border: none;
width: 100%;
gap: 16px;
}
}
.button {
padding: 14px 88px;
font-size: 30px;
line-height: 33px;
width: 100%;
@include breakpoint-down('deskL') {
font-size: 18px;
line-height: 19.8px;
padding: 16px 0px;
}
@include breakpoint-down('tabL') {
padding: 10px 0px;
font-size: 16px;
line-height: 22.4px;
}
@include breakpoint-down('tabM') {
line-height: 17.6px;
padding: 15px 0px;
width: 100%;
}
}
&__title {
font-size: 28px;
line-height: 40px;
font-weight: 700;
@include breakpoint-down('deskL') {
font-size: 18px;
line-height: 19.8px;
}
@include breakpoint-down('tabL') {
font-size: 14px;
line-height: 19.6px;
}
@include breakpoint-down('tabM') {
font-size: 16px;
line-height: 18px;
text-align: center;
}
}
&__text {
font-size: 42px;
line-height: 56px;
font-weight: 700;
@include breakpoint-down('deskL') {
font-size: 42px;
line-height: 46.2px;
}
@include breakpoint-down('tabL') {
font-size: 18px;
line-height: 19.8px;
}
@include breakpoint-down('tabM') {
font-size: 24px;
line-height: 32px;
text-align: center;
}
}
&__list {
display: flex;
flex-direction: column;
height: 322px;
flex-wrap: wrap;
gap: 0px 74px;
@include breakpoint-down('deskS') {
gap: 0px 12px;
}
@include breakpoint-down('tabL') {
gap: 0px 18px;
height: 210px;
}
@include breakpoint-down('tabM') {
height: auto;
}
}
&__listColumn {
display: flex;
flex-direction: column;
height: 322px;
flex-wrap: wrap;
gap: 0px 74px;
@include breakpoint-down('deskS') {
gap: 0px 12px;
}
@include breakpoint-down('tabL') {
gap: 0px 18px;
height: 210px;
}
@include breakpoint-down('tabM') {
height: auto;
}
}
&__listItem {
display: flex;
align-items: flex-end;
justify-content: space-between;
font-weight: 700;
border-bottom: 1px solid #cfdae1;
font-size: 20px;
line-height: 24px;
width: 282px;
padding: 8px 0px;
svg {
width: 30px;
height: 30px;
}
span {
text-wrap: wrap;
max-width: 243px;
}
@include breakpoint-down('deskL') {
font-size: 18px;
line-height: 19.8px;
width: 303px;
}
@include breakpoint-down('deskS') {
width: 226px;
}
@include breakpoint-down('tabL') {
font-size: 12px;
line-height: 14.4px;
flex: 1;
width: 100%;
padding: 0px;
align-items: center;
svg {
height: 29px;
}
}
@include breakpoint-down('tabM') {
width: 100%;
span {
max-width: 216px;
}
}
&:first-child {
padding-top: 0px;
}
&:nth-child(8) {
padding-top: 0px;
}
}
}
.folderŠ”rest {
display: flex;
align-items: flex-end;
bottom: 0px;
&.mobile {
display: none;
}
&.deskL {
display: none;
}
&.tabL {
display: none;
}
@include breakpoint-down('deskL') {
display: none;
bottom: 0;
&.deskL {
display: flex;
}
svg {
height: auto;
}
}
@include breakpoint-down('tabL') {
display: none;
bottom: 0;
&.tabL {
display: flex;
}
&.deskL {
display: none;
}
}
@include breakpoint-down('tabM') {
display: none;
&.mobile {
margin: auto;
left: 0;
right: 0;
bottom: 0px;
display: flex;
}
&.tabL {
display: none;
}
}
}
}
:global(._locale) {
.block-pricing {
&__cart {
&__list {
height: 380px;
@include breakpoint-down('deskS') {
height: 361px;
}
@include breakpoint-down('tabL') {
height: 235px;
}
@include breakpoint-down('tabM') {
height: auto;
}
}
&__listColumn {
height: 380px;
@include breakpoint-down('deskS') {
height: 361px;
}
@include breakpoint-down('tabL') {
height: 235px;
}
@include breakpoint-down('tabM') {
height: auto;
}
}
&__listItem {
width: 300px;
@include breakpoint-down('deskS') {
width: 224px;
}
@include breakpoint-down('tabL') {
width: 204px;
}
@include breakpoint-down('tabM') {
width: auto;
}
span {
max-width: 267px;
@include breakpoint-down('deskS') {
width: 228px;
}
}
}
}
}
}
:global(.block-pricing .button) {
width: 100%;
@include heading2;
border-width: 2px;
text-transform: capitalize;
@include breakpoint-down('deskL') {
padding: 15px 40px;
}
@include breakpoint-down('tabL') {
font-size: 16px;
line-height: 22.4px;
padding: 10px 40px;
}
@include breakpoint-down('tabM') {
padding: 12px 40px;
}
}
:global(.block-pricing .block-pricing__carts:nth-child(2) .button) {
@include breakpoint-down('tabL') {
padding: 15px 40px;
}
}
</style>