File: /var/www/quadcode.com/src/components/blocks/white-label-binary-options/AvailableOnAllDevices.svelte
<script lang="ts">
import active from '../../../assets/images/white-label-binary-options/allDevices/allDevicesActive.webp';
import active2x from '../../../assets/images/white-label-binary-options/allDevices/allDevicesActive@2x.webp';
import activeTab from '../../../assets/images/white-label-binary-options/allDevices/allDevicesActiveTab.webp';
import activeTab2x from '../../../assets/images/white-label-binary-options/allDevices/allDevicesActiveTab@2x.webp';
import activeMob from '../../../assets/images/white-label-binary-options/allDevices/allDevicesActiveMob.webp';
import activeMob2x from '../../../assets/images/white-label-binary-options/allDevices/allDevicesActiveMob@2x.webp';
import mobile from '../../../assets/images/white-label-binary-options/allDevices/allDevicesMobile.webp';
import mobile2x from '../../../assets/images/white-label-binary-options/allDevices/allDevicesMobile@2x.webp';
import browsers from '../../../assets/images/white-label-binary-options/allDevices/allDevicesBrowsers.webp';
import browsers2x from '../../../assets/images/white-label-binary-options/allDevices/allDevicesBrowsers@2x.webp';
import os from '../../../assets/images/white-label-binary-options/allDevices/allDevicesOs.webp';
import os2x from '../../../assets/images/white-label-binary-options/allDevices/allDevicesOs@2x.webp';
import { t, locale, defaultLocale } from '$lib/translations';
</script>
<section class="availableOnAllDevices {$locale !== defaultLocale ? 'lang' : ''} {$locale}">
<div class="container">
<div class="availableOnAllDevices__text">
<h2 class="availableOnAllDevices__title">{@html $t('white-label-binary-options.Available on all devices')}</h2>
<p class="availableOnAllDevices__description">{$t('white-label-binary-options.Enable your clients to trade on the go and never miss an opportunity.')}</p>
<ul class="availableOnAllDevices__list">
<li class="availableOnAllDevices__listItem">
<img src={mobile} srcset="{mobile} 1x, {mobile2x} 2x" alt="mobile device" />
<div class="availableOnAllDevices__listItemTitle">{$t('white-label-binary-options.Mobile Apps')}</div>
<div class="availableOnAllDevices__listItemDescription">{$t('white-label-binary-options.iOS · Android')}</div>
</li>
<li class="availableOnAllDevices__listItem">
<img src={browsers} srcset="{browsers} 1x, {browsers2x} 2x" alt="browser" />
<div class="availableOnAllDevices__listItemTitle">{$t('white-label-binary-options.All browsers')}</div>
<div class="availableOnAllDevices__listItemDescription">{$t('white-label-binary-options.Safari · Chrome · Opera · etc.')}</div>
</li>
<li class="availableOnAllDevices__listItem">
<img src={os} srcset="{os} 1x, {os2x} 2x" alt="os" />
<div class="availableOnAllDevices__listItemTitle">{$t('white-label-binary-options.Standalone OS Apps')}</div>
<div class="availableOnAllDevices__listItemDescription">{$t('white-label-binary-options.Windows · MacOS')}</div>
</li>
</ul>
</div>
<picture>
<source srcset="{activeMob} 1x, {activeMob2x} 2x" media="(max-width: 767px)">
<source srcset="{activeTab} 1x, {activeTab2x} 2x" media="(max-width: 1024px)">
<img class="availableOnAllDevices__activeImage" src={active} srcset="{active} 1x, {active2x} 2x" alt="os" />
</picture>
</div>
</section>
<style lang="scss">
@import "src/scss/variables";
@import "src/scss/media";
@import "src/scss/mixins";
.availableOnAllDevices {
background: $techBlue2;
padding: 90px 0 93px 0;
@include breakpoint-down('deskL') {
padding: 60px 0 70px 0;
}
@include breakpoint-down('tabL') {
padding: 49px 0 84px 0;
}
@include breakpoint-down('tabM') {
padding: 49px 0 50px 0;
}
.container {
display: flex;
gap: 106px;
align-items: center;
@include breakpoint-down('deskL') {
gap: 53px;
}
@include breakpoint-down('tabL') {
flex-direction: column;
gap: 0;
}
@include breakpoint-down('tabM') {
gap: 6px;
flex-direction: column-reverse;
}
}
&__text {
display: flex;
flex-direction: column;
width: 526px;
@include breakpoint-down('deskL') {
width: 377px;
margin-left: 4px;
}
@include breakpoint-down('tabL') {
width: 381px;
align-items: center;
}
@include breakpoint-down('tabM') {
width: 334px;
}
@include breakpoint-down('mobM') {
width: 100%;
}
}
&__title {
@include H1;
margin-bottom: 20px;
width: 488px;
@include breakpoint-down('deskL') {
width: 288px;
margin-bottom: 20px;
}
@include breakpoint-down('tabL') {
margin-bottom: 12px;
width: 100%;
}
:global(span) {
color: $redPrimary;
}
}
&__description {
@include body;
margin-bottom: 36px;
width: 488px;
@include breakpoint-down('deskL') {
width: 338px;
}
@include breakpoint-down('tabL') {
margin-bottom: 24px;
text-align: center;
letter-spacing: -0.12px;
}
@include breakpoint-down('tabM') {
width: 246px;
}
}
&__list {
width: 100%;
display: flex;
gap: 41px;
@include breakpoint-down('deskL') {
gap: 28px;
}
@include breakpoint-down('tabL') {
width: 369px;
}
@include breakpoint-down('tabM') {
width: 100%;
gap: 16px;
justify-content: center;
}
}
&__listItem {
display: flex;
flex-direction: column;
@include breakpoint-down('tabL') {
align-items: center;
}
img {
height: 183px;
width: 100%;
margin-bottom: 14px;
@include breakpoint-down('deskL') {
height: 141px;
}
@include breakpoint-down('tabM') {
height: 144px;
}
}
&:nth-child(1) {
width: 119px;
@include breakpoint-down('deskL') {
width: 89px;
}
@include breakpoint-down('tabL') {
width: 100px;
}
@include breakpoint-down('tabM') {
width: 70px;
}
img {
width: 89px;
@include breakpoint-down('deskL') {
width: 69px;
}
}
}
&:nth-child(2) {
width: 133px;
@include breakpoint-down('deskL') {
width: 101px;
}
@include breakpoint-down('tabL') {
width: 100px;
}
@include breakpoint-down('tabM') {
width: 90px;
}
img {
width: 115.22px;
@include breakpoint-down('deskL') {
width: 90px;
}
}
}
&:nth-child(3) {
width: 190px;
@include breakpoint-down('deskL') {
width: 131px;
}
@include breakpoint-down('tabL') {
width: 113px;
}
@include breakpoint-down('tabM') {
width: 113px;
}
img {
width: 139.24px;
@include breakpoint-down('deskL') {
width: 109px;
}
}
}
}
&__listItemTitle {
@include subtext;
font-weight: 700;
text-wrap: nowrap;
@include breakpoint-down('tabL') {
@include table;
font-weight: 700;
text-align: center;
}
@include breakpoint-down('tabM') {
@include body;
font-weight: 700;
}
}
&__listItemDescription {
@include subtext;
@include breakpoint-down('tabL') {
@include table;
font-weight: 400;
text-align: center;
}
@include breakpoint-down('tabM') {
@include body;
}
}
&__activeImage {
width: 769px;
height: fit-content;
margin-left: -3px;
margin-top: 2px;
@include breakpoint-down('deskL') {
width: 687px;
margin-left: 8px;
margin-top: 0;
top: 2px;
position: relative;
}
@include breakpoint-down('tabL') {
width: 542px;
margin-left: 1px;
position: relative;
top: 34px;
}
@include breakpoint-down('tabM') {
width: 327px;
margin-left: 0;
margin-bottom: 25px;
top: 0;
}
@include breakpoint-down('mobM') {
width: 100%;
margin-left: 0;
height: fit-content;
}
}
&.lang {
.availableOnAllDevices__listItemTitle {
text-wrap: wrap;
}
}
&.ru {
.availableOnAllDevices__title {
@include breakpoint-down('tabL') {
text-align: center;
}
}
}
}
</style>