File: /var/www/quadcode.com/src/components/blocks/trading-platform/Quality.svelte
<script lang="ts" type="module">
import imageD1 from '../../../assets/images/trading-platform/quality/Devices0001.webp';
import imageD2 from '../../../assets/images/trading-platform/quality/Devices0002.webp';
import imageD3 from '../../../assets/images/trading-platform/quality/Devices0003.webp';
import imageD4 from '../../../assets/images/trading-platform/quality/Devices0004.webp';
import imageD5 from '../../../assets/images/trading-platform/quality/Devices0005.webp';
import imageD6 from '../../../assets/images/trading-platform/quality/Devices0006.webp';
import imageD7 from '../../../assets/images/trading-platform/quality/Devices0007.webp';
import imageD8 from '../../../assets/images/trading-platform/quality/Devices0008.webp';
import imageD9 from '../../../assets/images/trading-platform/quality/Devices0009.webp';
import imageD10 from '../../../assets/images/trading-platform/quality/Devices0010.webp';
import imageD11 from '../../../assets/images/trading-platform/quality/Devices0011.webp';
import imageD12 from '../../../assets/images/trading-platform/quality/Devices0012.webp';
import imageD13 from '../../../assets/images/trading-platform/quality/Devices0013.webp';
import imageD14 from '../../../assets/images/trading-platform/quality/Devices0014.webp';
import imageD15 from '../../../assets/images/trading-platform/quality/Devices0015.webp';
import imageD16 from '../../../assets/images/trading-platform/quality/Devices0016.webp';
import imageD17 from '../../../assets/images/trading-platform/quality/Devices0017.webp';
import imageD18 from '../../../assets/images/trading-platform/quality/Devices0018.webp';
import imageD19 from '../../../assets/images/trading-platform/quality/Devices0019.webp';
import imageD20 from '../../../assets/images/trading-platform/quality/Devices0020.webp';
import imageD21 from '../../../assets/images/trading-platform/quality/Devices0021.webp';
import imageD22 from '../../../assets/images/trading-platform/quality/Devices0022.webp';
import imageD23 from '../../../assets/images/trading-platform/quality/Devices0023.webp';
import imageD24 from '../../../assets/images/trading-platform/quality/Devices0024.webp';
import imageD25 from '../../../assets/images/trading-platform/quality/Devices0025.webp';
import imageD26 from '../../../assets/images/trading-platform/quality/Devices0026.webp';
import imageD27 from '../../../assets/images/trading-platform/quality/Devices0027.webp';
import imageD28 from '../../../assets/images/trading-platform/quality/Devices0028.webp';
import imageD29 from '../../../assets/images/trading-platform/quality/Devices0029.webp';
import imageD30 from '../../../assets/images/trading-platform/quality/Devices0030.webp';
import imageD31 from '../../../assets/images/trading-platform/quality/Devices0031.webp';
import imageD32 from '../../../assets/images/trading-platform/quality/Devices0032.webp';
import imageD33 from '../../../assets/images/trading-platform/quality/Devices0033.webp';
import imageD34 from '../../../assets/images/trading-platform/quality/Devices0034.webp';
import imageD35 from '../../../assets/images/trading-platform/quality/Devices0035.webp';
import imageD36 from '../../../assets/images/trading-platform/quality/Devices0036.webp';
import imageD37 from '../../../assets/images/trading-platform/quality/Devices0037.webp';
import imageD38 from '../../../assets/images/trading-platform/quality/Devices0038.webp';
import imageD39 from '../../../assets/images/trading-platform/quality/Devices0039.webp';
import imageD40 from '../../../assets/images/trading-platform/quality/Devices0040.webp';
import imageD41 from '../../../assets/images/trading-platform/quality/Devices0041.webp';
import imageD42 from '../../../assets/images/trading-platform/quality/Devices0042.webp';
import imageD43 from '../../../assets/images/trading-platform/quality/Devices0043.webp';
import imageD44 from '../../../assets/images/trading-platform/quality/Devices0044.webp';
import imageD45 from '../../../assets/images/trading-platform/quality/Devices0045.webp';
import imageD46 from '../../../assets/images/trading-platform/quality/Devices0046.webp';
import imageD47 from '../../../assets/images/trading-platform/quality/Devices0047.webp';
import imageD48 from '../../../assets/images/trading-platform/quality/Devices0048.webp';
import imageD49 from '../../../assets/images/trading-platform/quality/Devices0049.webp';
import imageD50 from '../../../assets/images/trading-platform/quality/Devices0050.webp';
import imageD51 from '../../../assets/images/trading-platform/quality/Devices0051.webp';
import imageD52 from '../../../assets/images/trading-platform/quality/Devices0052.webp';
import imageD53 from '../../../assets/images/trading-platform/quality/Devices0053.webp';
import imageD54 from '../../../assets/images/trading-platform/quality/Devices0054.webp';
import imageD55 from '../../../assets/images/trading-platform/quality/Devices0055.webp';
import imageD56 from '../../../assets/images/trading-platform/quality/Devices0056.webp';
import imageD57 from '../../../assets/images/trading-platform/quality/Devices0057.webp';
import imageD58 from '../../../assets/images/trading-platform/quality/Devices0058.webp';
import imageD59 from '../../../assets/images/trading-platform/quality/Devices0059.webp';
import imageD60 from '../../../assets/images/trading-platform/quality/Devices0060.webp';
import mobileImg from '../../../assets/images/trading-platform/quality/Mobile.webp';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/dist/ScrollTrigger';
import { onMount } from 'svelte';
import img1 from '../../../assets/images/trading-platform/quality/icon1.svg';
import img2 from '../../../assets/images/trading-platform/quality/icon2.svg';
import img3 from '../../../assets/images/trading-platform/quality/icon3.svg';
import img4 from '../../../assets/images/trading-platform/quality/icon4.svg';
import { isMobile } from '../../../store.js';
import { t } from '$lib/translations';
const imagesLink = [
imageD1,
imageD2,
imageD3,
imageD4,
imageD5,
imageD6,
imageD7,
imageD8,
imageD9,
imageD10,
imageD11,
imageD12,
imageD13,
imageD14,
imageD15,
imageD16,
imageD17,
imageD18,
imageD19,
imageD20,
imageD21,
imageD22,
imageD23,
imageD24,
imageD25,
imageD26,
imageD27,
imageD28,
imageD29,
imageD30,
imageD31,
imageD32,
imageD33,
imageD34,
imageD35,
imageD36,
imageD37,
imageD38,
imageD39,
imageD40,
imageD41,
imageD42,
imageD43,
imageD44,
imageD45,
imageD46,
imageD47,
imageD48,
imageD49,
imageD50,
imageD51,
imageD52,
imageD53,
imageD54,
imageD55,
imageD56,
imageD57,
imageD58,
imageD59,
imageD60,
imageD1,
];
let mobile = false;
isMobile.subscribe((value) => {
mobile = value;
});
onMount(() => {
gsap.registerPlugin(ScrollTrigger);
if (!mobile) {
const canvas = document.getElementById('hero-lightpass');
const context = canvas.getContext('2d');
canvas.width = 1400;
canvas.height = 816;
const frameCount = 60;
const currentFrame = (index) => imagesLink[index];
const images = [];
const airpods = {
frame: 0,
};
for (let i = 0; i < frameCount; i++) {
const img = new Image();
img.src = currentFrame(i);
images.push(img);
}
gsap.to(airpods, {
frame: frameCount - 1,
snap: 'frame',
ease: 'power1.inOut',
scrollTrigger: {
trigger: '.block-quality',
start: 'top top',
end: '+=2500',
pin: true,
scrub: 2.5,
preventOverlaps: true,
fastScrollEnd: true,
},
onUpdate: render, // use animation onUpdate instead of scrollTrigger's onUpdate
});
if (!mobile) {
gsap.to('.block-quality__title', {
ease: 'none',
scrollTrigger: {
trigger: '.block-quality',
start: 'top top',
end: '+=800',
scrub: 1,
},
opacity: 0,
});
gsap.to('.block-quality__text', {
ease: 'none',
scrollTrigger: {
trigger: '.block-quality',
start: 'top top',
end: '+=800',
scrub: 1,
},
opacity: 0,
});
gsap.to('.block-quality__grid', {
ease: 'none',
scrollTrigger: {
trigger: '.block-quality',
start: 'top top',
end: '+=800',
scrub: 1,
},
opacity: 0,
});
}
images[0].onload = render;
function render() {
context.clearRect(0, 0, canvas.width, canvas.height);
context.drawImage(images[airpods.frame], 0, 0);
}
}
});
</script>
<div class="block-quality">
<div class="container">
<div class="block-quality__animation canvas-container">
<canvas id="hero-lightpass" />
<img src={mobileImg} alt="" class="block-quality__image" loading="lazy" />
</div>
<p class="block-quality__title">{$t('trading-platform.Exceptional quality. Incredible ease of use.')}</p>
<p class="block-quality__text">
{$t('trading-platform.Quadcode Trading is everything modern trading software should be: Sleek, smooth, and perfect down to the last detail, it sets a new standard for the entire industry.')}
</p>
<div class="block-quality__grid">
<div class="block-quality__gridItem">
<img src={img1} alt="" loading="lazy" />
</div>
<div class="block-quality__gridItem">
<img src={img2} alt="" loading="lazy" />
</div>
<div class="block-quality__gridItem">
<img src={img3} alt="" loading="lazy" />
</div>
<div class="block-quality__gridItem">
<img src={img4} alt="" loading="lazy" />
</div>
</div>
</div>
</div>
<style lang="scss">
@import 'src/scss/variables';
@import 'src/scss/media';
@import 'src/scss/mixins';
.block-quality {
padding-top: 169px;
padding-bottom: 150px;
@include breakpoint-down('deskL') {
padding-top: 204px;
padding-bottom: 160px;
}
@include breakpoint-down('deskS') {
padding-top: 93px;
padding-bottom: 100px;
}
@include breakpoint-down('tabM') {
padding-top: 0;
}
&__animation {
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
z-index: -1;
width: 100%;
height: 816px;
display: flex;
justify-content: center;
align-items: center;
@include breakpoint-down('deskS') {
height: 653px;
}
@include breakpoint-down('deskS') {
height: 653px;
right: 40px;
left: auto;
}
@include breakpoint-down('tabM') {
padding-top: 60px;
height: auto;
position: relative;
top: 0;
right: auto;
left: auto;
transform: none;
margin-bottom: 12px;
}
canvas {
max-width: 100%;
max-height: 100%;
@include breakpoint-down('tabM') {
display: none;
}
}
}
&__image {
display: none;
@include breakpoint-down('tabM') {
display: block;
width: 110%;
}
}
&__title {
@include titleXL;
margin-bottom: 24px;
width: 100%;
max-width: 560px;
@include breakpoint-down('deskL') {
margin-bottom: 16px;
max-width: 544px;
}
@include breakpoint-down('deskS') {
margin-bottom: 8px;
max-width: 373px;
}
@include breakpoint-down('tabM') {
text-align: center;
margin-inline: auto;
}
}
&__text {
color: $techBluePrimary;
margin-bottom: 40px;
width: 100%;
max-width: 560px;
@include breakpoint-down('deskL') {
max-width: 544px;
}
@include breakpoint-down('deskS') {
margin-bottom: 24px;
max-width: 373px;
}
@include breakpoint-down('tabM') {
text-align: center;
margin-bottom: 40px;
margin-inline: auto;
}
}
&__grid {
gap: 40px;
width: 100%;
max-width: 440px;
display: flex;
flex-wrap: wrap;
@include breakpoint-down('deskL') {
max-width: 344px;
gap: 24px;
}
@include breakpoint-down('deskS') {
max-width: 295px;
row-gap: 16px;
column-gap: 0;
}
@include breakpoint-down('tabM') {
max-width: 217px;
margin: 0 auto;
gap: 24px;
}
}
&__gridItem {
width: calc((100% - 40px) / 2);
@include breakpoint-down('deskL') {
width: calc((100% - 24px) / 2);
}
@include breakpoint-down('deskS') {
width: calc(100% / 2);
}
@include breakpoint-down('tabM') {
width: 100%;
}
&:nth-child(1) {
@include breakpoint-down('deskS') {
order: 1;
}
}
&:nth-child(2) {
@include breakpoint-down('deskS') {
order: 4;
}
}
&:nth-child(3) {
@include breakpoint-down('deskS') {
order: 2;
}
}
&:nth-child(4) {
@include breakpoint-down('deskS') {
order: 3;
}
}
}
}
</style>