File: /var/www/quadcode.com/src/components/blocks/white-label-binary-options/EffortlessIntegration.svelte
<script lang="ts">
import image from '../../../assets/images/white-label-binary-options/effortlessIntegration/effortlessIntegration.webp';
import image2x from '../../../assets/images/white-label-binary-options/effortlessIntegration/effortlessIntegration@2x.webp';
import imageDeskL from '../../../assets/images/white-label-binary-options/effortlessIntegration/effortlessIntegrationDeskL.webp';
import imageDeskL2x from '../../../assets/images/white-label-binary-options/effortlessIntegration/effortlessIntegrationDeskL@2x.webp';
import imageTab from '../../../assets/images/white-label-binary-options/effortlessIntegration/effortlessIntegrationTab.webp';
import imageTab2x from '../../../assets/images/white-label-binary-options/effortlessIntegration/effortlessIntegrationTab@2x.webp';
import imageMob from '../../../assets/images/white-label-binary-options/effortlessIntegration/effortlessIntegrationMob.webp';
import imageMob2x from '../../../assets/images/white-label-binary-options/effortlessIntegration/effortlessIntegrationMob@2x.webp';
import { t } from '$lib/translations';
</script>
<section class="effortlessIntegration">
<div class="effortlessIntegration__content">
<div class="container">
<h2 class="effortlessIntegration__title">{$t('white-label-binary-options.Effortless Integration')}</h2>
<p class="effortlessIntegration__description">{$t('white-label-binary-options.Effortlessly integrate the Quadcode Traderoom into your product lineup with our seamless iFrame solution. Instantly connect our widget data to your system with a single click using our powerful API integration.')}</p>
<div class="effortlessIntegration__card">
<div class="effortlessIntegration__cardText">
<h3 class="effortlessIntegration__cardTitle">{$t('white-label-binary-options.Seamless integration')}</h3>
<p class="effortlessIntegration__cardDescription">{$t("white-label-binary-options.Introduce your users to binary options trading, creating an additional revenue stream and enhancing your platform's offerings.")}</p>
<ul class="effortlessIntegration__list">
<li class="effortlessIntegration__listItem">
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.36719 10.7902H27.6303M10.7882 10.7902V27.6323M9.10403 2.36914H20.8935C23.2517 2.36914 24.4306 2.36914 25.3314 2.82806C26.1237 3.23174 26.7677 3.87586 27.1714 4.66813C27.6303 5.5688 27.6303 6.74786 27.6303 9.10598V20.8955C27.6303 23.2536 27.6303 24.4326 27.1714 25.3334C26.7677 26.1256 26.1237 26.7697 25.3314 27.1734C24.4306 27.6323 23.2517 27.6323 20.8935 27.6323H9.10403C6.74591 27.6323 5.56685 27.6323 4.66618 27.1734C3.87391 26.7697 3.22978 26.1256 2.82611 25.3334C2.36719 24.4326 2.36719 23.2536 2.36719 20.8955V9.10598C2.36719 6.74786 2.36719 5.5688 2.82611 4.66813C3.22978 3.87586 3.87391 3.23174 4.66618 2.82806C5.56685 2.36914 6.74591 2.36914 9.10403 2.36914Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
{$t('white-label-binary-options.iFrame integration')}
</li>
<li class="effortlessIntegration__listItem">
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_4478_45149)">
<path d="M11.0508 15.0011V5.61908C11.0508 3.3884 12.8181 1.58008 14.9981 1.58008C17.1782 1.58008 18.9455 3.3884 18.9455 5.61908V6.96925" stroke="white" stroke-width="2" stroke-linecap="round"/>
<path d="M18.9455 15.002V24.396C18.9455 26.62 17.1782 28.423 14.9981 28.423C12.8181 28.423 11.0508 26.62 11.0508 24.396V23.0335" stroke="white" stroke-width="2" stroke-linecap="round"/>
<path d="M14.9992 18.9494H5.5938C3.376 18.9494 1.57812 17.1821 1.57812 15.0021C1.57812 12.822 3.376 11.0547 5.5938 11.0547H6.9389" stroke="white" stroke-width="2" stroke-linecap="round"/>
<path d="M15 11.0547H24.3872C26.615 11.0547 28.4211 12.822 28.4211 15.0021C28.4211 17.1821 26.615 18.9494 24.3872 18.9494H23.0971" stroke="white" stroke-width="2" stroke-linecap="round"/>
</g>
<defs>
<clipPath id="clip0_4478_45149">
<rect width="30" height="30" fill="white"/>
</clipPath>
</defs>
</svg>
{$t('white-label-binary-options.API')}
</li>
</ul>
</div>
<picture>
<source srcset="{imageMob} 1x, {imageMob2x} 2x" media="(max-width: 767px)">
<source srcset="{imageTab} 1x, {imageTab2x} 2x" media="(max-width: 1024px)">
<source srcset="{imageDeskL} 1x, {imageDeskL2x} 2x" media="(max-width: 1799px)">
<img class="effortlessIntegration__img" src={image} srcset="{image} 1x, {image2x} 2x" alt="Seamless integration">
</picture>
</div>
</div>
</div>
</section>
<style lang="scss">
@import "src/scss/media";
@import "src/scss/mixins";
@import "src/scss/variables";
.effortlessIntegration {
background: rgba(245, 245, 245, 1);
position: relative;
z-index: 1;
&__content {
background: $techWhite;
border-radius: 40px;
padding: 90px 0;
border: 1px solid rgba(207, 218, 225, 1);
box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
@include breakpoint-down('deskL') {
padding: 60px 0;
}
@include breakpoint-down('tabL') {
padding: 50px 0 55px 0;
border-radius: 12px;
}
@include breakpoint-down('tabM') {
padding: 50px 0 40px 0;
}
}
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
&__title {
@include H1;
text-align: center;
color: $redPrimary;
margin-bottom: 24px;
@include breakpoint-down('deskL') {
margin-bottom: 16px;
}
@include breakpoint-down('tabL') {
margin-bottom: 10px;
}
@include breakpoint-down('tabM') {
margin-bottom: 8px;
}
}
&__description {
@include body;
text-align: center;
width: 754px;
margin-bottom: 107px;
@include breakpoint-down('deskL') {
width: 707px;
margin-bottom: 56px;
}
@include breakpoint-down('tabL') {
width: 433px;
margin-bottom: 48px;
}
@include breakpoint-down('tabM') {
width: 335px;
margin-bottom: 75px;
}
}
&__card {
width: 100%;
background: $redPrimary;
padding: 58px 54px;
color: $fontWhite;
border-radius: 30px;
display: flex;
position: relative;
@include breakpoint-down('deskL') {
padding: 50px 76px;
width: 1118px;
}
@include breakpoint-down('deskS') {
width: 951px;
}
@include breakpoint-down('tabL') {
padding: 27px 30px 30px 30px;
border-radius: 16px;
width: 688px;
}
@include breakpoint-down('tabM') {
flex-direction: column-reverse;
width: 335px;
}
@include breakpoint-down('mobM') {
width: 100%;
}
}
&__cardText {
display: flex;
flex-direction: column;
width: 484px;
@include breakpoint-down('deskL') {
width: 369px;
}
@include breakpoint-down('tabL') {
width: 262px;
}
@include breakpoint-down('tabM') {
width: 275px;
margin-top: -4px;
}
@include breakpoint-down('mobM') {
width: 100%;
}
}
&__cardTitle {
@include H2;
margin-bottom: 12px;
@include breakpoint-down('tabL') {
@include H4;
margin-bottom: 9px;
}
@include breakpoint-down('tabM') {
@include H2;
text-align: center;
margin-bottom: 13px;
}
}
&__cardDescription {
@include body;
margin-bottom: 24px;
@include breakpoint-down('tabL') {
margin-bottom: 20px;
letter-spacing: -0.2px;
}
@include breakpoint-down('tabM') {
margin-bottom: 12px;
text-align: center;
letter-spacing: 0;
}
}
&__list {
display: flex;
flex-direction: column;
gap: 8px;
@include breakpoint-down('tabM') {
flex-direction: row;
justify-content: center;
}
}
&__listItem {
@include body;
font-weight: 700;
display: flex;
align-items: center;
gap: 12px;
@include breakpoint-down('deskL') {
@include H3;
}
@include breakpoint-down('tabL') {
gap: 8px;
}
@include breakpoint-down('tabM') {
@include body;
font-weight: 700;
}
svg {
width: 30px;
height: 30px;
@include breakpoint-down('tabL') {
width: 24px;
height: 24px;
}
@include breakpoint-down('tabM') {
width: 20px;
height: 20px;
}
}
}
&__img {
position: absolute;
width: 789px;
height: auto;
right: 20px;
top: -99px;
@include breakpoint-down('deskL') {
width: 625px;
right: 25px;
top: -33px;
}
@include breakpoint-down('deskS') {
width: 475px;
}
@include breakpoint-down('tabL') {
width: 385px;
right: 7px;
top: -49px;
}
@include breakpoint-down('tabM') {
position: static;
width: 245px;
margin-top: -90px;
margin-left: 13px;
}
}
}
</style>