File: /var/www/quadcode.com/src/components/footer/Footer.svelte
<script lang="ts">
import Social from './Social.svelte';
import { t, localeLink } from '$lib/translations';
import footerTitleSvg from '$assets/images/main/footer/footer_title.svg';
import { browser } from '$app/environment';
import { afterNavigate } from '$app/navigation';
import { onMount } from 'svelte';
const date = new Date();
function scrollToPricing() {
if (!browser) return;
setTimeout(() => {
const pricingElement = document.getElementById('pricing');
if (pricingElement) {
pricingElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
}, 100);
}
onMount(() => {
if (!browser) return;
if (window.location.hash === '#pricing') {
scrollToPricing();
}
});
afterNavigate((navigation) => {
if (navigation.to?.url.hash === '#pricing') {
scrollToPricing();
}
});
const navColumns = [
{
title: $t('SOLUTIONS'),
links: [
{ title: $t('Turnkey Solution'), href: `${localeLink()}/turnkey-solution` },
{ title: $t('Forex / CFD'), href: `${localeLink()}/white-label-broker` },
{ title: $t('Plans & Pricing'), href: `${localeLink()}/#pricing` },
],
},
{
title: $t('MODULES'),
links: [
{ title: $t('Trading Platform'), href: `${localeLink()}/trading-platform` },
{ title: $t('Back Office'), href: `${localeLink()}/back-office` },
],
},
{
title: $t('RESOURCES'),
links: [
{ title: $t('Marketing Guide'), href: `${localeLink()}/marketing-guide` },
{ title: $t('Blog'), href: `${localeLink()}/blog` },
{ title: $t('Video Tutorials'), href: `${localeLink()}/video-tutorials` },
],
},
{
title: $t('MORE'),
links: [
{ title: $t('Team'), href: `${localeLink()}/team` },
{ title: $t('Events'), href: `${localeLink()}/events` },
{ title: $t('About Us'), href: `${localeLink()}/about` },
],
},
];
</script>
<footer class="footer">
<div class="container">
<div class="footer__row footer__row_first">
<div class="footer__divider" />
<div class="footer__row_first-top">
<div class="footer__nav">
{#each navColumns as column}
<div class="footer__nav-column">
<div class="footer__nav-title">{column.title}</div>
<div class="footer__nav-list">
{#each column.links as link}
<div class="footer__nav-item">
<a
href={link.href}
class="footer__nav-link"
>
{link.title}
</a>
</div>
{/each}
</div>
</div>
{/each}
</div>
<div class="footer__social">
<div class="social__title">{$t('footer social')}</div>
<Social />
</div>
</div>
</div>
<div class="footer__row footer__row_middle">
<div class="footer__text">
<p>
{$t('footer description 1')}
</p>
<p>
{$t('footer description 2')}
</p>
<p>
{$t('footer description 3')}
</p>
</div>
</div>
<div class="footer__title">
<img src={footerTitleSvg} alt="Quadcode Brokerage Solutions" class="footer__title-image" />
</div>
<div class="footer__row footer__row_last">
<div class="footer__copyright">© Copyright Quadcode {date.getFullYear()}</div>
<div class="footer__items">
<div class="footer__item">
<a href="{localeLink()}/cookie-policy" class="footer__link">{$t('Cookies policy')}</a>
</div>
<div class="footer__item">
<a href="{localeLink()}/privacy-policy" class="footer__link">{$t('Privacy policy')}</a>
</div>
<div class="footer__item">
<a href="{localeLink()}/terms-and-conditions" class="footer__link">{$t('Terms & Conditions')}</a>
</div>
<div class="footer__item">
<a href="{localeLink()}/vulnerability-disclosure-policy" class="footer__link"
>{$t('Vulnerability disclosure policy')}</a
>
</div>
</div>
</div>
</div>
</footer>
<style lang="scss">
@import 'src/scss/variables';
@import 'src/scss/media';
@import 'src/scss/mixins';
.footer {
padding-top: 64px;
margin: 104px 0 0 0;
padding-bottom: 104px;
background: linear-gradient(to bottom, #ffffff 0%, #f2f5f7 100%);
@include breakpoint-down('tabM') {
margin: 56px 0 0 0;
padding-bottom: 56px;
}
.container {
max-width: 1490px;
@include breakpoint-down('deskL') {
max-width: 1104px;
}
@include breakpoint-down('deskM') {
max-width: 1070px;
}
@include breakpoint-down('tabM') {
max-width: 700px;
}
@include breakpoint-down('mobM') {
max-width: 335px;
}
}
&__title {
margin-bottom: 27px;
display: flex;
align-items: center;
}
&__title-image {
width: 100%;
max-width: 1104px;
height: auto;
opacity: 0.3;
@include breakpoint-down('deskM') {
max-width: 100%;
}
@include breakpoint-down('tabM') {
max-width: 100%;
}
}
&__divider {
width: 100%;
height: 1px;
background-color: #d9d9d9;
margin-bottom: 48px;
order: 0;
@include breakpoint-down('mobM') {
margin-bottom: 30px;
}
}
&__row {
&_first {
display: flex;
flex-direction: column;
position: relative;
&-top {
display: flex;
justify-content: space-between;
margin-bottom: 64px;
order: 1;
position: relative;
@media (max-width: 1023px) {
flex-direction: column;
}
}
}
&_middle {
margin-bottom: 64px;
}
&_last {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 24px;
@media (max-width: 720px) {
flex-direction: column-reverse;
gap: 24px;
align-items: flex-start;
}
@media (max-width: 480px) {
gap: 40px;
}
}
}
&__nav {
display: flex;
gap: 80px;
@include breakpoint-down('tabM') {
flex-wrap: wrap;
}
@media (max-width: 480px) {
gap: 48px 16px;
}
@include breakpoint-down('mobM') {
flex-direction: column;
}
}
&__nav-column {
display: flex;
flex-direction: column;
@media (max-width: 480px) {
max-width: 100%;
flex: 0 0 calc(50% - 8px);
max-width: calc(50% - 8px);
}
white-space: nowrap;
}
&__nav-title {
font-size: 12px;
line-height: 16px;
font-weight: 500;
color: #99a1af;
text-transform: uppercase;
margin-bottom: 22px;
}
&__nav-list {
display: flex;
flex-direction: column;
gap: 20px;
}
&__nav-item {
display: flex;
}
&__nav-link {
font-size: 14px;
line-height: 18px;
color: #1b1c1d;
text-decoration: none;
transition: color 0.2s ease, border-color 0.2s ease;
border-bottom: 1px solid #d4d8db;
display: inline-block;
&:hover {
color: #ff282b;
border-bottom-color: #ff282b;
}
&:active {
color: #e60019;
border-bottom-color: #e60019;
}
}
&__items {
display: flex;
align-items: center;
flex-wrap: wrap;
column-gap: 56px;
row-gap: 24px;
@media (max-width: 910px) {
align-items: flex-start;
flex-wrap: wrap;
gap: 47px;
}
@media (max-width: 720px) {
gap: 32px;
}
@include breakpoint-down('mobM') {
flex-direction: column;
gap: 16px;
}
@media (max-width: 480px) {
flex-direction: column;
align-items: flex-start;
gap: 24px;
}
}
&__social {
@media (max-width: 1023px) {
position: static;
margin-top: 48px;
}
:global(.social__title) {
font-size: 12px;
line-height: 16px;
font-weight: 500;
color: #99a1af;
text-transform: uppercase;
margin-bottom: 22px;
display: none;
@media (max-width: 720px) {
display: block;
}
}
:global(.social__items) {
display: flex;
gap: 16px;
align-items: flex-start;
@media (max-width: 720px) {
gap: 32px;
}
}
:global(.social__item) {
width: 24px;
min-width: 24px;
height: 24px;
margin-right: 0;
background-size: 100% 100%;
}
}
&__text {
font-size: 14px;
display: flex;
flex-direction: column;
gap: 20px;
p {
line-height: 20px;
color: #7d7d8a;
@include breakpoint-down('tabM') {
margin-bottom: 0;
}
}
}
&__item {
font-size: 14px;
line-height: 20px;
}
&__copyright {
font-size: 14px;
line-height: 20px;
color: $fontGraphite;
white-space: nowrap;
}
&__link {
font-size: 14px;
line-height: 20px;
color: #1b1c1d;
transition: color 0.2s ease, border-color 0.2s ease;
white-space: nowrap;
border-bottom: 1px solid #d4d8db;
&:hover {
color: #ff282b;
border-bottom-color: #ff282b;
}
&:active {
color: #e60019;
border-bottom-color: #e60019;
}
}
}
:global(body.ru) .footer__nav {
gap: 50px;
}
:global(body.es) .footer__nav {
gap: 44px;
}
:global(body.pt) .footer__nav {
gap: 50px;
}
:global(body.vi) .footer__nav {
gap: 39px;
}
</style>