File: /var/www/quadcode.com/builds/-DFbjr9L/0/foach/quadcode.com/src/components/header/Header.svelte
<script lang="ts">
import { menuMobile, popupForm } from '../../store';
import { onMount } from 'svelte';
import turnkey from '../../assets/header/turnkey.svg';
import brokerage from '../../assets/header/brokerage.svg';
import subscription from '../../assets/header/subscription.svg';
import tradingPlatform from '../../assets/header/TradingPlatform_Menu.webp';
import backOffice from '../../assets/header/BackOffice_Menu.webp';
import marketingGuide from '../../assets/header/marketing-guide.svg';
import blog from '../../assets/header/blog.svg';
import videoTutorials from '../../assets/header/video-tutorials.svg';
import about from '../../assets/header/about.webp';
import HeaderTabs from './HeaderTabs.svelte';
export let className = '';
let prevClassName = className;
let linkText = '';
let visible = '';
let scrollY = 0;
let openMenu = false;
let type = 0;
let dropOpen = false;
let activeItem = 0;
const setType = (id: number) => {
type = id;
dropOpen = true;
activeItem = 0;
};
const setActiveItem = (id: number) => {
activeItem = id;
};
const setDropOpen = (active: boolean) => {
dropOpen = active;
type = 0;
activeItem = 0;
};
menuMobile.subscribe((value) => {
openMenu = value;
});
let lastKnownScrollPosition = 0;
let deltaY = 0;
onMount(() => {
scrollY = window.scrollY;
className = window.scrollY > 0 ? '' : prevClassName;
window.addEventListener('scroll', function () {
scrollY = window.scrollY;
className = window.scrollY > 0 ? '' : prevClassName;
let ticking = false;
if (!ticking) {
window.requestAnimationFrame(function () {
deltaY = window.scrollY - lastKnownScrollPosition;
lastKnownScrollPosition = window.scrollY;
ticking = false;
});
ticking = true;
}
if (deltaY > 0) {
visible = 'hide';
setDropOpen(false);
} else if (deltaY && window.scrollY >= window.screen.height) {
visible = 'hideMenu';
} else {
visible = '';
}
});
});
</script>
{#if dropOpen}
<div class="header-bg" />
{/if}
<header
class="header {className} {scrollY > 0 ? 'active' : ''} {dropOpen ? 'drop' : ''} {visible}"
on:mouseleave={() => setDropOpen(false)}
role="presentation"
>
<HeaderTabs {className} />
<div class="container">
<div class="header__list">
<div class="header__item">
<div class="logo header__logo" style={openMenu ? 'opacity: 0;' : ''}>
<a aria-label="link to home page" href="/">{linkText}</a>
</div>
</div>
<div class="header__item header__item_disable">
<div class="nav">
<div
class="nav_drop {className} {type === 1 ? 'active' : ''} {![1, 0].includes(type) ? 'opacity' : ''}"
on:mousemove={() => setType(1)}
role="menuitem"
tabindex="0"
>
Solutions
<div class="nav_dropArrow">
<div class="nav_dropArrowItem nav_dropArrowItemUp" />
<div class="nav_dropArrowItem nav_dropArrowItemDown" />
</div>
</div>
<div
class="nav_drop {className} {type === 2 ? 'active' : ''} {![2, 0].includes(type) ? 'opacity' : ''}"
on:mousemove={() => setType(2)}
role="menuitem"
tabindex="0"
>
Modules
<div class="nav_dropArrow">
<div class="nav_dropArrowItem nav_dropArrowItemUp" />
<div class="nav_dropArrowItem nav_dropArrowItemDown" />
</div>
</div>
<div
class="nav_drop {className} {type === 3 ? 'active' : ''} {![3, 0].includes(type) ? 'opacity' : ''}"
on:mousemove={() => setType(3)}
role="menuitem"
tabindex="0"
>
Resources
<div class="nav_dropArrow">
<div class="nav_dropArrowItem nav_dropArrowItemUp" />
<div class="nav_dropArrowItem nav_dropArrowItemDown" />
</div>
</div>
<div
class="nav_drop {className} {type === 4 ? 'active' : ''} {![4, 0].includes(type) ? 'opacity' : ''}"
on:mousemove={() => setType(4)}
role="menuitem"
tabindex="0"
>
More
<div class="nav_dropArrow">
<div class="nav_dropArrowItem nav_dropArrowItemUp" />
<div class="nav_dropArrowItem nav_dropArrowItemDown" />
</div>
</div>
</div>
</div>
<div class="header__item header__item_lang">
<div
class="header__button"
on:click={() => popupForm.set(true)}
on:keydown={(event) => {
if (event.key === 'Escape') {
popupForm.set(false);
}
}}
role="button"
tabindex="0"
>
Request demo
</div>
</div>
<div
aria-label="button-burger"
class="btn-burger"
on:click={() => menuMobile.set(true)}
on:keydown={() => menuMobile.set(false)}
role="button"
tabindex="0"
>
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="11" y="13" width="18" height="2" fill="#E62334" />
<rect x="11" y="19" width="18" height="2" fill="#E62334" />
<rect x="11" y="25" width="18" height="2" fill="#E62334" />
</svg>
</div>
</div>
</div>
<div class="header__drop {dropOpen ? 'open' : ''}">
<div class="listOne {type === 1 ? 'active' : 0}">
<div class="listOne__list">
<div class="listOne__listItem {![1, 0].includes(activeItem) ? 'active' : ''}">
<a
href="/turnkey-solution"
class="listOne__listItemLink"
aria-label="Page Turnkey Solution"
on:mousemove={() => setActiveItem(1)}
/>
<img src={turnkey} alt="" class="listOne__listItemIcon" />
<p class="listOne__listItemText">Turnkey Solution</p>
</div>
<div class="listOne__listItem {![2, 0].includes(activeItem) ? 'active' : ''}">
<a
href="/white-label-broker"
class="listOne__listItemLink"
aria-label="Page Forex / CFD"
on:mousemove={() => setActiveItem(2)}
/>
<img src={brokerage} alt="" class="listOne__listItemIcon" />
<p class="listOne__listItemText">Forex / CFD</p>
</div>
<div class="listOne__listItem {![3, 0].includes(activeItem) ? 'active' : ''}">
<a
href="/under-construction"
class="listOne__listItemLink"
aria-label="Page Plans & Pricing"
on:mousemove={() => setActiveItem(3)}
on:click={(e) => {
e.preventDefault();
}}
/>
<img src={subscription} alt="" class="listOne__listItemIcon" />
<p class="listOne__listItemText">Plans & Pricing</p>
</div>
</div>
<p class="listOne__content">
{#if [1, 0].includes(activeItem)}
White label brokerage platform tailored to your brand. <strong>Start your own brokerage</strong>
with fully customisable solutions <strong>in just 2 weeks.</strong>
{:else if [2].includes(activeItem)}
An all-in-one turnkey solution for launching your own forex brokerage business hassle-free and at minimal
cost.
{:else if [3].includes(activeItem)}
Explore our diverse range of plans and pricing options tailored to your brokerage launch. From starter
packages to all-in-one enterprise solutions, find the perfect fit that aligns with your goals and budget.
Select your ideal plan today and start your own brokerage in a matter of weeks.
{/if}
</p>
</div>
<div class="listTwo {type === 2 ? 'active' : 0}">
<div class="listTwo__list">
<div class="listTwo__listItem {![4, 0].includes(activeItem) ? 'active' : ''}">
<a
href="/trading-platform"
class="listTwo__listItemLink"
aria-label="Page Trading Platform"
on:mousemove={() => setActiveItem(4)}
/>
<img src={tradingPlatform} alt="" class="listTwo__listItemImage" />
<p class="listTwo__listItemText">Trading Platform</p>
</div>
<div class="listTwo__listItem {![5, 0].includes(activeItem) ? 'active' : ''}">
<a
href="/back-office"
class="listTwo__listItemLink"
aria-label="Page Back Office"
on:mousemove={() => setActiveItem(5)}
/>
<img src={backOffice} alt="" class="listTwo__listItemImage" />
<p class="listTwo__listItemText">Back Office</p>
</div>
</div>
<p class="listTwo__content">
{#if [4, 0].includes(activeItem)}
Cutting edge UI and seamless trading experience meet each other in our <strong
>white label trading platform</strong
> primed for your own brokerage brand.
{:else if [5].includes(activeItem)}
Seize complete control over your brokerage with a comprehensive <strong>one-stop back office solution</strong
>.
{/if}
</p>
</div>
<div class="listThree {type === 3 ? 'active' : 0}">
<div class="listThree__list">
<div class="listThree__listItem {![31, 0].includes(activeItem) ? 'active' : ''}">
<a
href="/marketing-guide"
class="listThree__listItemLink"
aria-label="Page Software as a service"
on:mousemove={() => setActiveItem(31)}
/>
<img src={marketingGuide} alt="" class="listThree__listItemIcon" />
<p class="listThree__listItemText">Marketing Guide</p>
</div>
<div class="listThree__listItem {![32, 0].includes(activeItem) ? 'active' : ''}">
<a
href="/blog"
class="listThree__listItemLink"
aria-label="Page Software as a service"
on:mousemove={() => setActiveItem(32)}
/>
<img src={blog} alt="" class="listThree__listItemIcon" />
<p class="listThree__listItemText">Blog</p>
</div>
<div class="listThree__listItem {![33, 0].includes(activeItem) ? 'active' : ''}">
<a
href="/video-tutorials"
class="listThree__listItemLink"
aria-label="Page Software as a service"
on:mousemove={() => setActiveItem(33)}
/>
<img src={videoTutorials} alt="" class="listThree__listItemIcon" />
<p class="listThree__listItemText">Video Tutorials</p>
</div>
</div>
</div>
<div class="listFour {type === 4 ? 'active' : 0}">
<div class="listFour__content">
<img src={about} alt="" class="listFour__contentImage" />
{#if [8, 0].includes(activeItem)}
<div class="listFour__contentText">
Meet our team! For any inquiries or partnership opportunities, feel free to reach out to us directly. We're
here and ready to assist.
</div>
{:else if [9].includes(activeItem)}
<div class="listFour__contentText">
Explore our list of upcoming industry events where we'll be present. Don't miss out on the opportunity to
connect with us and meet our team in person.
</div>
{:else if [10].includes(activeItem)}
<div class="listFour__contentText">
We're Quadcode - your gateway to brokerage business. Learn more about our company, team and upcoming events.
</div>
{:else if [11].includes(activeItem)}
<div class="listFour__contentText">
Get in touch with us! We're here to help you with your own brokerage brand setup.
</div>
{/if}
</div>
<div class="listFour__list">
<a
href="/about"
class="listFour__listLink {![8, 0].includes(activeItem) ? 'active' : ''}"
aria-label="Page About Us"
on:mousemove={() => setActiveItem(8)}>About Us</a
>
<a
href="/team"
class="listFour__listLink {![9, 0].includes(activeItem) ? 'active' : ''}"
aria-label="Page Team"
on:mousemove={() => setActiveItem(9)}>Team</a
>
<a
href="/under-construction"
class="listFour__listLink {![10, 0].includes(activeItem) ? 'active' : ''}"
aria-label="Page Blog"
on:mousemove={() => setActiveItem(10)}
on:click={(e) => {
e.preventDefault();
}}
>
Technologies
</a>
<a
href="/under-construction"
class="listFour__listLink {![11, 0].includes(activeItem) ? 'active' : ''}"
aria-label="Page Events"
on:mousemove={() => setActiveItem(11)}
on:click={(e) => {
e.preventDefault();
}}
>
Events
</a>
</div>
</div>
</div>
</header>
<style lang="scss">
@import 'src/scss/mixins';
@import 'src/scss/variables';
@import 'src/scss/media';
.header-bg {
position: fixed;
pointer-events: none;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100vw;
height: 100vh;
background: $techGrey5;
z-index: 10;
}
.header {
position: fixed;
width: 100%;
z-index: 10;
top: 0;
transition: 0.3s cubic-bezier(0.65, 0.05, 0.36, 1) 0.3s;
&__list {
height: 86px;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
@include breakpoint-down('deskS') {
height: 60px;
}
}
&__logo {
background-image: url('../../assets/logo-black.svg');
}
&__item {
display: flex;
@include breakpoint-down('deskS') {
&:first-of-type {
flex: 1;
}
}
&_lang {
align-items: center;
@include breakpoint-down('deskS') {
margin-right: 88px;
}
@include breakpoint-down('tabM') {
margin-right: 90px;
}
}
&_disable {
@include breakpoint-down('deskS') {
display: none;
}
}
}
&__button {
@include smallCTA;
padding: 12px 24px;
border-radius: 40px;
background: $fontPrimary;
color: $techWhite;
cursor: pointer;
@include breakpoint-down('deskL') {
padding: 8px 20px;
}
@include breakpoint-down('deskS') {
display: none;
}
}
&__drop {
z-index: -1;
position: absolute;
left: 0;
top: 0;
right: 0;
padding-top: 155px;
padding-bottom: 30px;
background: $techWhite;
opacity: 0;
pointer-events: none;
@include breakpoint-down('deskL') {
padding-top: 136px;
}
&:global(.open) {
opacity: 1;
pointer-events: all;
}
}
&:before {
content: '';
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: $techWhite;
height: 0;
transition: 0.3s cubic-bezier(0.65, 0.05, 0.36, 1);
}
&.ghostWhite {
.header__logo {
background-image: url('../../assets/logo.svg');
}
}
&.hide {
transform: translateY(calc(-100% - 1px));
pointer-events: none;
@include breakpoint-down('tabM') {
transform: translateY(calc(-100% - 1px)) !important;
}
}
&.hideMenu {
transform: translateY(calc(-51px));
@include breakpoint-down('tabM') {
transform: none !important;
}
}
}
:global(.header.active) {
&:before {
bottom: 0 !important;
height: 100% !important;
}
}
:global(.header.drop .headerTabsItem) {
&:first-of-type {
color: $techGrey30 !important;
&:hover {
color: $fontPrimary !important;
}
}
&:last-of-type {
color: $fontPrimary !important;
}
}
:global(.header.active .headerTabsItem) {
&:first-of-type {
color: $techGrey30 !important;
&:hover {
color: $fontPrimary !important;
}
}
&:last-of-type {
color: $fontPrimary !important;
}
}
.btn-burger {
display: none;
@include breakpoint-down('deskS') {
display: flex;
width: 40px;
height: 40px;
align-items: center;
justify-content: center;
position: absolute;
right: 0;
}
}
.nav {
display: flex;
align-items: center;
gap: 40px;
margin-right: 65px;
@include breakpoint-down('deskL') {
gap: 31px;
margin-right: 53px;
}
&_drop {
@include baseCTA;
display: flex;
align-items: center;
cursor: pointer;
padding: 32px 0;
transition: 0.2s ease-in-out;
&:global(.ghostWhite) {
color: $techWhite;
}
&:global(.active) {
color: $fontPrimary;
.nav_dropArrowItemDown {
transform: translateY(18px);
}
.nav_dropArrowItemUp {
transform: translateY(0);
}
}
&:global(.opacity) {
opacity: 0.3;
}
}
&_dropArrow {
display: flex;
align-items: center;
position: relative;
overflow: hidden;
}
&_dropArrowItem {
width: 10px;
height: 7px;
transition: 0.2s ease;
margin: 0 9px;
}
&_dropArrowItemUp {
transform: translateY(-18px);
background-image: url('../../assets/icons/arrow-up.svg');
position: absolute;
transition: 0.2s ease;
}
&_dropArrowItemDown {
background-image: url('../../assets/icons/arrow.svg');
}
}
.listOne,
.listThree {
display: flex;
align-items: flex-start;
justify-content: center;
gap: 40px;
@include breakpoint-down('deskL') {
gap: 32px;
align-items: flex-start;
}
&__list {
display: flex;
gap: 40px;
@include breakpoint-down('deskL') {
gap: 32px;
}
}
&__listItem {
max-width: 200px;
min-width: 200px;
width: 100%;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
transition: 0.3s ease-in-out;
@include breakpoint-down('deskL') {
max-width: 160px;
min-width: 160px;
}
&:global(.active) {
opacity: 0.3;
}
}
&__listItemLink {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
}
&__listItemIcon {
width: 70px;
height: 70px;
@include breakpoint-down('deskL') {
width: 58px;
height: 58px;
}
}
&__listItemText {
@include baseSubMenu;
}
&__content {
@include xSmallDefault;
width: 100%;
max-width: 320px;
padding: 17px 24px;
@include breakpoint-down('deskL') {
padding: 20px 24px;
}
}
}
.listTwo {
display: flex;
align-items: center;
justify-content: center;
gap: 40px;
@include breakpoint-down('deskL') {
gap: 80px;
}
&__list {
display: flex;
gap: 40px;
@include breakpoint-down('deskL') {
gap: 80px;
}
}
&__listItem {
max-width: 200px;
min-width: 200px;
width: 100%;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
transition: 0.3s ease-in-out;
@include breakpoint-down('deskL') {
max-width: 160px;
min-width: 160px;
}
&:global(.active) {
opacity: 0.3;
}
}
&__listItemLink {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
}
&__listItemImage {
width: 200px;
height: 95px;
margin-bottom: 8px;
@include breakpoint-down('deskL') {
width: 160px;
height: 76px;
}
}
&__listItemText {
@include baseSubMenu;
}
&__content {
@include xSmallDefault;
width: 100%;
max-width: 240px;
//> span {
// display: block;
// color: $redPrimary;
//}
}
}
.listFour {
display: flex;
align-items: flex-start;
justify-content: center;
@include breakpoint-down('deskL') {
padding-top: 19px;
}
&__content {
display: flex;
align-items: center;
gap: 40px;
@include breakpoint-down('deskL') {
gap: 32px;
}
}
&__contentImage {
background: $techBlue2;
border-radius: 16px;
width: 320px;
height: 163px;
object-fit: cover;
object-position: center;
@include breakpoint-down('deskL') {
width: 256px;
height: 151px;
}
}
&__contentText {
@include xSmallDefault;
max-width: 199px;
min-width: 199px;
width: 100%;
@include breakpoint-down('deskL') {
max-width: 192px;
min-width: 192px;
}
}
&__list {
width: 100%;
min-width: 268px;
max-width: 268px;
display: flex;
flex-direction: column;
gap: 21px;
position: relative;
padding-left: 68px;
margin-left: 63px;
margin-right: 28px;
@include breakpoint-down('deskL') {
margin-left: 39px;
padding-left: 52px;
min-width: 190px;
max-width: 190px;
margin-right: 0;
}
&:after {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 1px;
background: $techBlue2;
}
}
&__listLink {
@include baseSubMenu;
width: max-content;
transition: 0.3s ease-in-out;
&:global(.active) {
opacity: 0.3;
}
}
}
.header {
&:global(.drop) {
.header__logo {
background-image: url('../../assets/logo-black.svg');
}
.nav_drop {
color: $fontPrimary;
}
:global(.lang__text) {
color: $fontPrimary !important;
}
}
}
.listOne,
.listTwo,
.listThree,
.listFour {
opacity: 0;
height: 0;
overflow: hidden;
transition: opacity 0.3s 0.1s;
&:global(.active) {
height: auto;
overflow: initial;
opacity: 1;
}
}
</style>