Skip to content

Commit 31b3379

Browse files
sOm2ysOm2y
committed
ui fix
1 parent 4f5a25a commit 31b3379

File tree

6 files changed

+67
-22
lines changed

6 files changed

+67
-22
lines changed

‎app/components/AppFooter.vue‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,9 @@ const { t } = useI18n()
5757
<NuxtLink to="https://cryptocity.network" target="_blank" rel="noopener noreferrer" class="w-[152px] h-[30px]">
5858
<NuxtImg src="/criptocidade.svg" alt="Criptocidade" width="152" height="50" />
5959
</NuxtLink>
60+
<NuxtLink to="https://cryptocity.network" target="_blank" rel="noopener noreferrer" class="w-[152px] h-[30px]">
61+
<NuxtImg src="/criptociudad.svg" alt="criptociudad" width="155" height="55" />
62+
</NuxtLink>
6063
</div>
6164

6265
<div>
@@ -136,9 +139,13 @@ const { t } = useI18n()
136139
{{ t('PrivacyPolicy') }}
137140
</NuxtLink>
138141

139-
<NuxtLink to="https://cryptocity.africa/en/cookies" target="_blank" rel="noopener noreferrer" class="pl-2">
142+
<NuxtLink to="https://cryptocity.africa/en/cookies" target="_blank" rel="noopener noreferrer" class="pl-2 pr-2 border-r border-gray-300" >
140143
{{ t('CookieUsage') }}
141144
</NuxtLink>
145+
146+
<NuxtLink to="https://cryptocity.africa/en/cookies" target="_blank" rel="noopener noreferrer" class="pl-2">
147+
{{ t('TermOfService') }}
148+
</NuxtLink>
142149
</div>
143150
</div>
144151
</div>

‎app/components/Banners/NimiqPayBanner.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -124,12 +124,12 @@ onMounted(() => {
124124
const handleRedirect = (store: 'appstore' | 'googleplay') => {
125125
if (isMobile.value) {
126126
if (store === 'appstore') {
127-
window.open('https://apps.apple.com/us/app/nimiq-pay/id6471844738', '_blank');
127+
window.open('https://apps.apple.com/us/app/nimiq-pay/id6471844738', '_blank')
128128
} else if (store === 'googleplay') {
129-
window.open('https://play.google.com/store/apps/details?id=com.nimiq.pay&hl=gsw', '_blank');
129+
window.open('https://play.google.com/store/apps/details?id=com.nimiq.pay&hl=gsw', '_blank')
130130
}
131131
}
132-
};
132+
}
133133
</script>
134134

135135
<style>

‎app/pages/index.vue‎

Lines changed: 50 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ import CryptoMapBanner from '~/components/Banners/CryptoMapBanner.vue'
44
import NimiqPayBanner from '~/components/Banners/NimiqPayBanner.vue'
55
66
const swap = ref(false);
7+
const widgetRef = ref<HTMLElement | null>(null);
8+
79
useSeoMeta({
810
title: 'Buy and Sell Crypto - Cryptocity',
911
description: 'Buy and sell NIM, Bitcoin, USDC, and USDT with Euro, USD, CHF, and more on Cryptocity.',
@@ -17,6 +19,11 @@ defineOgImageComponent('NuxtSeo', {
1719
const handleRedirect = () => {
1820
window.open('https://wallet.nimiq.com/', '_blank')
1921
}
22+
23+
const scrollToWidget = () => {
24+
widgetRef.value?.scrollIntoView({ behavior: 'smooth', block: 'center' });
25+
};
26+
2027
</script>
2128

2229
<template>
@@ -31,27 +38,33 @@ const handleRedirect = () => {
3138
<!-- Component 1: Title & Text (Mobile Order 1) -->
3239
<div class="space-y-1 mb-3 order-1 md:order-none text-center md:text-left ">
3340
<h1 class="pb-6 text-5xl/16 max-w-full md:max-w-[398px] text-wrap text-neutral px-4 md:px-0">
34-
Buy and Sell Crypto
41+
{{ !swap?' Buy and Sell Crypto' :'Swap Your Crypto' }}
3542
</h1>
3643
<h3
3744
class="pb-8 text-xl/8 max-w-full md:max-w-[248px] text-wrap font-semibold text-neutral opacity-60 px-4 md:px-0">
38-
Buy and Sell NIM with
39-
Euro, USD, CHF, and more!
45+
46+
{{ !swap ? 'Buy and Sell NIM with Euro, USD, CHF, and more!' : 'Swap Your Crypto, Swap 5520+ cryptos to NIM and back!' }}
4047
</h3>
41-
<div class="pb-20">
48+
<div class="pb-20" @click="scrollToWidget">
4249
<SliderToggle v-model="swap" />
4350
</div>
4451
</div>
4552

4653
<div
47-
class="hover-icons grid grid-cols-2 border-2 border-gray-200 rounded-xl px-8 py-5 max-w-full md:max-w-[398px] font-semibold hidden md:flex cursor-pointer" @click="handleRedirect">
54+
class="hover-icons grid grid-cols-2 border-2 border-gray-200 rounded-xl px-8 py-5 max-w-full md:max-w-[398px] h-[126px] font-semibold hidden md:flex cursor-pointer">
4855
<div class="col-span-1">
49-
<p class="text-netural mb-2 max-w-[165px]">
50-
{{ !swap ? 'Get your self-hosted wallet in 30 sec!' : 'Swap Your Crypto, Swap 5520+ cryptos to NIM and back!' }}
56+
<p class="text-netural mb-3 max-w-[165px]">
57+
Get your self-hosted wallet in 30 sec!
5158
</p>
52-
<NuxtLink to="https://wallet.nimiq.com/" target="_blank" rel="noopener noreferrer" class="text-blue">
59+
60+
<NuxtLink to="https://wallet.nimiq.com/" target="_blank" rel="noopener noreferrer" class="text-blue crypto-map-desktop">
5361
Create
5462
</NuxtLink>
63+
64+
<button class="nq-pill-blue crypto-map-desktop px-3 py-1 text-md mx-auto md:mx-0 flex items-center gap-1 " @click="handleRedirect">
65+
<span>Create</span>
66+
<div class="i-lucide-arrow-right text-lg"></div>
67+
</button>
5568
</div>
5669

5770
<div class="col-span-1 flex flex-col items-center justify-center pl-4">
@@ -76,18 +89,22 @@ const handleRedirect = () => {
7689
</div>
7790

7891
<!-- Right Column: Widget (Mobile Order 2) -->
79-
<div class="flex justify-center order-2 md:col-span-1 md:order-none">
92+
<div class="flex justify-center order-2 md:col-span-1 md:order-none" ref="widgetRef">
8093
<CoinifyWidget v-if="!swap" />
8194
<LetsexchangeWidget v-else />
8295
</div>
8396

8497
<!-- Component 3: Supported Currencies (Mobile Order 3 - At Bottom) -->
8598
<div
86-
class="hover-icons mt-[150px] mb-[200px] flex md:hidden grid grid-cols-2 border-2 border-gray-200 rounded-xl px-10 py-5 order-3 md:order-none max-w-full md:max-w-[398px] font-semibold cursor-pointer" @click="handleRedirect">
99+
class="hover-icons mt-[150px] mb-[200px] flex md:hidden grid grid-cols-2 border-2 border-gray-200 rounded-xl px-10 py-5 order-3 md:order-none max-w-full md:max-w-[398px] h-[126px] font-semibold cursor-pointer"
100+
@click="handleRedirect">
87101
<div class="col-span-1">
88-
<p class="text-netural mb-2 max-w-[165px] "> {{ !swap ? 'Get your self-hosted wallet in 30 sec!' : 'Swap Your Crypto, Swap 5520 + cryptos to NIM and back!' }}</p>
89-
<!-- TODO: link from design is using gradiant blue -->
90-
<NuxtLink to="https://wallet.nimiq.com/" target="_blank" rel="noopener noreferrer" class="text-blue">Create
102+
<p class="text-netural mb-3 max-w-[165px] "> Get your self-hosted wallet in 30 sec! </p>
103+
104+
105+
106+
<NuxtLink to="https://wallet.nimiq.com/" target="_blank" rel="noopener noreferrer" class="text-blue">
107+
Create
91108
</NuxtLink>
92109

93110
</div>
@@ -97,8 +114,10 @@ const handleRedirect = () => {
97114
height="26" />
98115
<img class="icon md:grayscale md:brightness-100 transition" src="/bitcoin.svg" alt="Bitcoin" width="26"
99116
height="26" />
100-
<img class="icon md:grayscale md:brightness-100 transition" src="/usdc.svg" alt="USDC" width="26" height="26" />
101-
<img class="icon md:grayscale md:brightness-100 transition" src="/usdt.svg" alt="USDT" width="26" height="26" />
117+
<img class="icon md:grayscale md:brightness-100 transition" src="/usdc.svg" alt="USDC" width="26"
118+
height="26" />
119+
<img class="icon md:grayscale md:brightness-100 transition" src="/usdt.svg" alt="USDT" width="26"
120+
height="26" />
102121
</div>
103122
<span class="text-neutral uppercase text-[9px] font-bold tracking-widest pl-1">Supported currencies</span>
104123

@@ -116,4 +135,20 @@ const handleRedirect = () => {
116135
.hover-icons:hover .icon {
117136
filter: none;
118137
}
138+
139+
.hover-icons:hover button.crypto-map-desktop {
140+
display: none;
141+
}
142+
143+
.hover-icons button.crypto-map-desktop {
144+
display: flex;
145+
}
146+
147+
.hover-icons:hover a.crypto-map-desktop {
148+
display: block;
149+
}
150+
151+
.hover-icons a.crypto-map-desktop {
152+
display: none;
153+
}
119154
</style>

‎i18n/locales/de.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,5 +12,6 @@
1212
"Privacy": "Datenschutz",
1313
"Disclaimer": "Haftungsausschluss",
1414
"PrivacyPolicy": "Datenschutzerklärung",
15-
"CookieUsage": "Verwendung von Cookies"
15+
"CookieUsage": "Verwendung von Cookies",
16+
"TermOfService": "Nutzungsbedingungen"
1617
}

‎i18n/locales/en.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,5 +12,6 @@
1212
"Privacy": "Privacy",
1313
"Disclaimer": "Disclaimer",
1414
"PrivacyPolicy": "Privacy policy",
15-
"CookieUsage": "Cookie usage"
15+
"CookieUsage": "Cookie usage",
16+
"TermOfService": "Terms of service"
1617
}

‎i18n/locales/es.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,5 +12,6 @@
1212
"Privacy": "Privacidad",
1313
"Disclaimer": "Descargo de responsabilidad",
1414
"PrivacyPolicy": "Política de privacidad",
15-
"CookieUsage": "Uso de cookies"
15+
"CookieUsage": "Uso de cookies",
16+
"TermOfService": "Términos de servicio"
1617
}

0 commit comments

Comments
 (0)