File: /var/www/fintechfuel/src/routes/[...lang=locale]/(app)/Build.svelte
<script lang="ts">
import blitz from '../../../assets/images/build/blitz.svg';
import digital from '../../../assets/images/build/digital.svg';
import binary from '../../../assets/images/build/binary.svg';
import forex from '../../../assets/images/build/forex.svg';
import stocks from '../../../assets/images/build/stocks.svg';
import crypto from '../../../assets/images/build/crypto.svg';
import flag from '../../../assets/images/build/flag.svg';
import { t } from '$lib/translations';
</script>
<div class="build">
<div class="buildContainer">
<h2 class="buildTitle">{$t('Build the perfect brokerage solution')}</h2>
</div>
<div class="buildContainer">
<div class="buildBlock">
<div class="buildBlockContent">
<p class="buildBlockTitle">{$t('Options')}</p>
<p class="buildBlockText">
{$t('Traders can buy or sell assets at an agreed upon price for a specific period of time.')}
</p>
<div class="buildBlockLine first">
<div class="buildBlockLineOne" />
<div class="buildBlockLineTwo" />
<div class="buildBlockLineMarker">
<img src={flag} alt="" />
</div>
<div class="buildBlockLineActive">
<p>{$t('Expiration')}</p>
</div>
</div>
</div>
<div class="buildBlockGrid">
<div class="buildBlockItem">
<div class="buildBlockItemIcon">
<img src={blitz} alt="" />
</div>
<p class="buildBlockItemTitle">{$t('Blitz')}</p>
<p class="buildBlockItemText">{$t('Offer high-risk high-reward short-term trading.')}</p>
</div>
<div class="buildBlockItem">
<div class="buildBlockItemIcon">
<img src={digital} alt="" />
</div>
<p class="buildBlockItemTitle">{$t('Digital')}</p>
<p class="buildBlockItemText">
{$t('Traders will get a fixed payout if the market moves beyond the strike price.')}
</p>
</div>
<div class="buildBlockItem">
<div class="buildBlockItemIcon">
<img src={binary} alt="" />
</div>
<p class="buildBlockItemTitle">{$t('Binary')}</p>
<p class="buildBlockItemText">{$t('Traders can bet on upward/downward market movement.')}</p>
</div>
</div>
</div>
<div class="buildBlock">
<div class="buildBlockContent">
<p class="buildBlockTitle">{$t('CFDs')}</p>
<p class="buildBlockText">{$t('Bet on stock movement without making long-term investments.')}</p>
<div class="buildBlockLine last">
<div class="buildBlockLineOne" />
<div class="buildBlockLineTwo" />
<div class="buildBlockLineMarker">
<img src={flag} alt="" />
</div>
<div class="buildBlockLineActive">
<p>{$t('Expiration')}</p>
</div>
</div>
</div>
<div class="buildBlockGrid">
<div class="buildBlockItem">
<div class="buildBlockItemIcon">
<img src={forex} alt="" />
</div>
<p class="buildBlockItemTitle">{$t('Forex')}</p>
<p class="buildBlockItemText">
{$t('Your customers can trade major, minor, and exotic foreign exchange pairings.')}
</p>
</div>
<div class="buildBlockItem">
<div class="buildBlockItemIcon">
<img src={stocks} alt="" />
</div>
<p class="buildBlockItemTitle">{$t('CFDs on Stocks')}</p>
<p class="buildBlockItemText">{$t('Invite customers to trade Apple, Amazon, and many other top stocks.')}</p>
</div>
<div class="buildBlockItem">
<div class="buildBlockItemIcon">
<img src={crypto} alt="" />
</div>
<p class="buildBlockItemTitle">{$t('Crypto')}</p>
<p class="buildBlockItemText">{$t('Include Bitcoin, ETH, and other popular crypto in your traderoom.')}</p>
</div>
</div>
</div>
</div>
</div>
<style lang="scss">
@import '../../../scss/media';
.build {
.buildContainer {
margin-bottom: 96px;
width: 100%;
@include breakpoint-down('deskS') {
margin-bottom: 80px;
}
@include breakpoint-down('tabM') {
margin-bottom: 64px;
}
@include breakpoint-down('mobM') {
margin-bottom: 56px;
}
&:last-of-type {
margin-bottom: 0;
}
&:first-of-type {
max-width: 839px;
@include breakpoint-down('tabM') {
max-width: 488px;
}
}
}
.buildTitle {
font-size: 72px;
font-weight: 600;
line-height: 94px;
@include breakpoint-down('tabM') {
font-size: 48px;
line-height: 58px;
}
@include breakpoint-down('mobM') {
font-size: 32px;
line-height: 42px;
}
}
.buildBlock {
display: flex;
align-items: flex-start;
gap: 24px;
padding-bottom: 64px;
margin-bottom: 64px;
border-bottom: thin solid #d9d7cc;
@include breakpoint-down('deskS') {
flex-direction: column;
gap: 48px;
}
@include breakpoint-down('tabM') {
gap: 64px;
}
@include breakpoint-down('tabS') {
flex-direction: row;
gap: 40px;
}
@include breakpoint-down('mobM') {
flex-direction: column;
padding-bottom: 56px;
margin-bottom: 56px;
}
&:last-of-type {
padding-bottom: 0;
margin-bottom: 0;
border-bottom: none;
}
}
.buildBlockContent {
width: 100%;
max-width: 407px;
padding-right: 56px;
@include breakpoint-down('deskS') {
display: flex;
align-items: center;
max-width: none;
gap: 100px;
padding-right: 0;
}
@include breakpoint-down('tabM') {
display: block;
max-width: 315px;
}
@include breakpoint-down('tabS') {
position: sticky;
top: 26px;
max-width: 194px;
min-width: 194px;
}
@include breakpoint-down('mobM') {
position: unset;
max-width: none;
min-width: 0;
}
}
.buildBlockTitle {
font-size: 48px;
font-weight: 600;
line-height: 62px;
margin-bottom: 24px;
@include breakpoint-down('deskS') {
margin-bottom: 0;
min-width: 180px;
}
@include breakpoint-down('tabM') {
margin-bottom: 24px;
}
@include breakpoint-down('tabS') {
font-size: 32px;
line-height: 42px;
}
}
.buildBlockText {
margin-bottom: 24px;
@include breakpoint-down('deskS') {
margin-bottom: 0;
}
@include breakpoint-down('tabM') {
margin-bottom: 24px;
}
}
.buildBlockGrid {
display: flex;
gap: 60px;
@include breakpoint-down('tabM') {
gap: 40px;
}
@include breakpoint-down('tabS') {
flex-direction: column;
gap: 60px;
}
@include breakpoint-down('mobM') {
gap: 48px;
}
}
.buildBlockItem {
flex: 1;
}
.buildBlockItemIcon {
margin-bottom: 24px;
width: 60px;
height: 60px;
background: #f0ede8;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
}
.buildBlockItemTitle {
font-size: 18px;
font-weight: 600;
line-height: 27px;
letter-spacing: 0.005em;
margin-bottom: 8px;
@include breakpoint-down('tabM') {
font-size: 16px;
line-height: 21px;
letter-spacing: 0;
}
@include breakpoint-down('tabS') {
font-size: 18px;
line-height: 27px;
letter-spacing: 0.005em;
}
}
.buildBlockItemText {
@include breakpoint-down('tabM') {
font-size: 14px;
font-weight: 400;
line-height: 21px;
}
@include breakpoint-down('tabS') {
font-size: 16px;
line-height: 24px;
}
}
.buildBlockLine {
padding: 19px 27px 18px 0;
width: max-content;
position: relative;
display: flex;
justify-content: flex-end;
.buildBlockLineOne {
width: 100%;
border-bottom: thin dashed #d9d7cc;
height: 1px;
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
z-index: 1;
}
.buildBlockLineTwo {
width: 1px;
border-left: thin dashed #d9d7cc;
height: 100%;
position: absolute;
top: 0;
right: 42px;
bottom: 0;
z-index: 1;
}
.buildBlockLineMarker {
border-radius: 100px;
border: 1px solid #fe4d0d;
background: #fafaf7;
box-shadow: 0 0 0 3px #fafaf7;
display: flex;
width: 33px;
height: 33px;
justify-content: center;
align-items: center;
flex-shrink: 0;
position: relative;
z-index: 3;
}
.buildBlockLineActive {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
right: 51px;
height: 1.2px;
background: #fe4d0d;
z-index: 2;
&:after {
content: '';
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
width: 1px;
height: 9px;
border-radius: 1px;
background: #fe4d0d;
}
> p {
position: absolute;
color: #a6a49c;
font-size: 14px;
font-weight: 400;
line-height: 21px;
top: 12px;
left: 0;
right: 0;
text-align: center;
@include breakpoint-down('deskS') {
top: 15px;
left: -11px;
}
}
}
&.first {
width: 151px;
@include breakpoint-down('deskS') {
width: 202px;
}
@include breakpoint-down('tabM') {
width: 151px;
}
}
&.last {
width: 299px;
@include breakpoint-down('deskS') {
width: 476px;
}
@include breakpoint-down('tabM') {
width: 299px;
}
@include breakpoint-down('tabS') {
width: 194px;
}
}
}
}
</style>