File: /var/www/quadcode.com/src/components/blocks/white-label-binary-options/GetStarted.svelte
<script lang="ts">
import Button from '../../button/Button.svelte';
import { t, locale } from '$lib/translations';
import Form from '../../form/Form.svelte';
const handleOnWhatsUpClick = () => {
window.open('https://wa.me/+35795951209', '_blank');
}
const handleOnTelegramClick = () => {
window.open('https://t.me/quadcode_software_bot', '_blank');
}
</script>
<section class="getStarted {$locale}">
<div class="getStarted__decor"></div>
<div class="getStarted__content">
<div class="container">
<div class="getStarted__text">
<p class="getStarted__aboveTitle">{$t('white-label-binary-options.Get Started 1')}</p>
<h2 class="getStarted__title">{@html $t('white-label-binary-options.Launch Your Binary Options Platform in 2 Weeks')}</h2>
<div class="getStarted__buttons">
<Button onClick={handleOnWhatsUpClick}>
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_4478_50873)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.4031 15.5332C17.138 16.2836 16.0842 16.9044 15.2438 17.086C14.6685 17.2081 13.9183 17.3047 11.3905 16.2572C8.5514 15.081 4.609 10.8911 4.609 8.10283C4.609 6.6834 5.4274 5.03057 6.8585 5.03057C7.5471 5.03057 7.6989 5.04399 7.9255 5.58755C8.1906 6.22795 8.8374 7.80574 8.9144 7.96748C9.2323 8.63098 8.59099 9.01939 8.12569 9.59707C7.97719 9.77091 7.8089 9.95893 7.997 10.2824C8.184 10.5993 8.8308 11.6535 9.7812 12.4996C11.0088 13.5933 12.0043 13.9425 12.3607 14.0911C12.6258 14.2011 12.9426 14.1755 13.1362 13.9686C13.3815 13.7034 13.6862 13.2635 13.9964 12.8299C14.2153 12.5196 14.4936 12.4809 14.7851 12.5909C14.982 12.6591 17.4845 13.8213 17.5901 14.0073C17.6682 14.1426 17.6682 14.7828 17.4031 15.5332ZM11.0022 0H10.9967C4.93239 0 0 4.93389 0 11C0 13.4053 0.775508 15.6369 2.09441 17.4469L0.723805 21.5343L4.95111 20.1835C6.69021 21.3344 8.7659 22 11.0022 22C17.0665 22 22 17.0661 22 11C22 4.93389 17.0665 0 11.0022 0Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_4478_50873">
<rect width="22" height="22" fill="white"/>
</clipPath>
</defs>
</svg>
{$t('white-label-binary-options.Contact us in WhatsApp')}
</Button>
<Button onClick={handleOnTelegramClick}>
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18.9838 3.3506C18.9838 3.3506 20.7646 2.65623 20.6162 4.34257C20.5667 5.03696 20.1216 7.46727 19.7753 10.096L18.5881 17.8829C18.5881 17.8829 18.4892 19.0237 17.5988 19.2221C16.7084 19.4205 15.3729 18.5277 15.1255 18.3293C14.9276 18.1805 11.4156 15.9486 10.1789 14.8574C9.83267 14.5598 9.43694 13.9646 10.2284 13.2703L15.4223 8.31046C16.0159 7.71527 16.6095 6.32652 14.1362 8.01287L7.211 12.7247C7.211 12.7247 6.41955 13.2207 4.93561 12.7743L1.72032 11.7823C1.72032 11.7823 0.533138 11.0384 2.56124 10.2944C7.50782 7.96323 13.5921 5.58251 18.9838 3.3506Z" fill="white"/>
</svg>
{$t('white-label-binary-options.Contact us in Telegram')}
</Button>
</div>
</div>
<Form
logo
formTitle={$t('white-label-binary-options.Ready to Launch?')}
formDescription={$t("white-label-binary-options.With Quadcode white-label solution, it's easier than you might think.")}
/>
</div>
</div>
</section>
<style lang="scss">
@import 'src/scss/media';
@import 'src/scss/mixins';
@import 'src/scss/variables';
.getStarted {
background: rgba(245, 245, 245, 1);
padding-top: 26px;
position: relative;
@include breakpoint-down('deskL') {
padding-top: 20px;
}
@include breakpoint-down('tabL') {
padding-top: 10px;
}
@include breakpoint-down('tabM') {
padding-top: 16px;
}
&__content {
padding: 65px 0 70px 0;
background: linear-gradient(53.99deg, #F8FBFD 8.34%, #CCEBFF 97.82%);
border-radius: 40px;
position: relative;
z-index: 1;
@include breakpoint-down('deskL') {
padding: 98px 0;
border-radius: 20px;
}
@include breakpoint-down('tabL') {
padding: 38px 0;
border-radius: 12px;
}
@include breakpoint-down('tabM') {
padding: 27px 0 50px 0;
border-radius: 12px;
}
}
&__decor {
background: $redPrimary;
height: 10%;
border-radius: 40px;
width: 100%;
position: absolute;
top: 0;
left: 0;
@include breakpoint-down('deskL') {
border-radius: 20px;
}
@include breakpoint-down('tabL') {
border-radius: 12px;
}
@include breakpoint-down('tabM') {
border-radius: 12px;
}
}
.container {
display: flex;
justify-content: space-between;
align-items: center;
gap: 75px;
max-width: 1568px;
@include breakpoint-down('deskL') {
max-width: 1189px;
gap: 91px;
justify-content: center;
}
@include breakpoint-down('tabL') {
max-width: 100%;
gap: 32px;
}
@include breakpoint-down('tabM') {
flex-direction: column;
gap: 30px;
}
}
&__text {
display: flex;
flex-direction: column;
width: 768px;
margin-top: 18px;
margin-left: 5px;
@include breakpoint-down('deskL') {
width: 611px;
margin-top: 36px;
margin-left: 2px;
}
@include breakpoint-down('deskS') {
width: 422px;
}
@include breakpoint-down('tabL') {
width: 284px;
margin-left: 23px;
margin-top: -22px;
}
@include breakpoint-down('tabM') {
width: 339px;
margin: 0;
align-items: center;
justify-content: center;
}
@include breakpoint-down('mobM') {
width: 100%;
}
}
&__aboveTitle {
@include H4;
color: $redPrimary;
margin-bottom: 18px;
@include breakpoint-down('deskL') {
@include H3;
margin-bottom: 12px;
}
@include breakpoint-down('tabL') {
margin-bottom: 4px;
}
@include breakpoint-down('tabM') {
margin-bottom: 8px;
}
}
&__title {
@include H1;
margin-bottom: 24px;
@include breakpoint-down('deskL') {
width: 524px;
}
@include breakpoint-down('tabL') {
width: 100%;
}
@include breakpoint-down('tabM') {
width: 62%;
text-align: center;
}
:global(span) {
color: $redPrimary;
}
}
&__buttons {
display: flex;
gap: 18px;
width: 653px;
@include breakpoint-down('deskL') {
width: 614px;
}
@include breakpoint-down('deskS') {
width: 263px;
flex-direction: column;
}
@include breakpoint-down('tabM') {
width: 100%;
}
:global(.button) {
padding: 13px 36px;
gap: 18px;
@include breakpoint-down('tabL') {
padding: 12px 24px;
letter-spacing: 0.3px;
}
@include breakpoint-down('tabM') {
width: 339px;
}
@include breakpoint-down('mobM') {
width: 100%;
padding: 16px 24px;
}
:global(svg) {
max-width: 22px;
max-height: 22px;
min-width: 22px;
min-height: 22px;
}
}
}
:global(.form__form) {
min-width: 722px;
max-width: 722px;
@include breakpoint-down('deskL') {
min-width: 483px;
max-width: 483px;
}
@include breakpoint-down('deskS') {
min-width: 403px;
max-width: 403px;
}
@include breakpoint-down('tabL') {
min-width: 349px;
max-width: 349px;
}
@include breakpoint-down('tabM') {
min-width: 339px;
max-width: 339px;
}
@include breakpoint-down('mobM') {
min-width: 100%;
max-width: 100%;
}
}
:global(.form__formText) {
width: 382px;
@include breakpoint-down('deskL') {
width: 237px;
}
@include breakpoint-down('deskS') {
width: 193px;
}
@include breakpoint-down('tabM') {
width: 195px;
}
}
:global(.form__formDescription) {
padding: 0;
@include breakpoint-down('deskL') {
line-height: 20px;
}
@include breakpoint-down('deskS') {
line-height: 15px;
}
}
&.ru, &.pt {
:global(.getStarted__buttons .button) {
@include breakpoint-down('tabL') {
font-size: 14px;
}
}
}
&.pt, &.vi {
:global(.getStarted__buttons .button) {
@include breakpoint-down('tabL') {
width: 100%;
}
}
}
}
</style>