Improvements

app/components/AppFooter.vue

@@ -54,12 +54,24 @@ const { t } = useI18n()
             <NuxtLink to="https://cryptocity.network" target="_blank" rel="noopener noreferrer" class="w-[145px] h-[30px]">
               <NuxtImg src="/cryptocity.svg" alt="Criptociudad" width="145" height="50" />
             </NuxtLink>
-            <NuxtLink to="https://cryptocity.network" target="_blank" rel="noopener noreferrer" class="w-[150px] h-[30px]">
+            <NuxtLink
+              to="https://cryptocity.network" target="_blank" rel="noopener noreferrer"
+              class="w-[150px] h-[30px]"
+            >
               <NuxtImg src="/kryptostadt.svg" alt="Kryptostadt" width="150" height="50" />
             </NuxtLink>
-            <NuxtLink to="https://cryptocity.network" target="_blank" rel="noopener noreferrer" class="w-[152px] h-[30px]">
+            <NuxtLink
+              to="https://cryptocity.network" target="_blank" rel="noopener noreferrer"
+              class="w-[152px] h-[30px]"
+            >
               <NuxtImg src="/criptocidade.svg" alt="Criptocidade" width="152" height="50" />
             </NuxtLink>
+            <NuxtLink
+              to="https://cryptocity.network" target="_blank" rel="noopener noreferrer"
+              class="w-[152px] h-[30px]"
+            >
+              <NuxtImg src="/criptociudad.svg" alt="criptociudad" width="155" height="55" />
+            </NuxtLink>
           </div>
 
           <div>
@@ -147,13 +159,20 @@ const { t } = useI18n()
         </div>
 
         <div class="col-span-3 flex-wrap flex items-center  mt-4 md:mt-0">
-          <NuxtLink to="#" class="pl-0 pr-2 border-r border-gray-300">
+          <a href="/privacy-policy.pdf" download target="_blank" class="pl-0 pr-2 border-r border-gray-300">
             {{ t('PrivacyPolicy') }}
-          </NuxtLink>
+          </a>
 
-          <NuxtLink to="https://cryptocity.africa/en/cookies" target="_blank" rel="noopener noreferrer" class="pl-2">
+          <NuxtLink
+            to="https://cryptocity.africa/en/cookies" target="_blank" rel="noopener noreferrer"
+            class="pl-2 pr-2 border-r border-gray-300"
+          >
             {{ t('CookieUsage') }}
           </NuxtLink>
+
+          <a href="/terms-of-service.pdf" download class="pl-2" target="_blank">
+            {{ t('TermOfService') }}
+          </a>
         </div>
       </div>
     </div>

app/pages/index.vue

@@ -3,6 +3,8 @@ import CryptoMapBanner from '~/components/Banners/CryptoMapBanner.vue'
 import NimiqPayBanner from '~/components/Banners/NimiqPayBanner.vue'
 
 const swap = ref(false)
+const widgetRef = ref<HTMLElement | null>(null)
+
 useSeoMeta({
   title: 'Buy and Sell Crypto - Cryptocity',
   description: 'Buy and sell NIM, Bitcoin, USDC, and USDT with Euro, USD, CHF, and more on Cryptocity.',
@@ -12,6 +14,14 @@ defineOgImageComponent('NuxtSeo', {
   description: 'Buy and sell NIM, Bitcoin, USDC, and USDT with Euro, USD, CHF, and more on Cryptocity.',
   colorMode: 'light',
 })
+
+function handleRedirect() {
+  window.open('https://wallet.nimiq.com/', '_blank')
+}
+
+function scrollToWidget() {
+  widgetRef.value?.scrollIntoView({ behavior: 'smooth', block: 'center' })
+}
 </script>
 
 <template>
@@ -24,30 +34,34 @@ defineOgImageComponent('NuxtSeo', {
           <!-- Component 1: Title & Text (Mobile Order 1) -->
           <div class="space-y-1 mb-3 order-1 md:order-none text-center md:text-left ">
             <h1 class="pb-6 text-5xl/16 max-w-full md:max-w-[398px] text-wrap text-neutral px-4 md:px-0">
-              Buy and Sell Crypto
+              {{ !swap ? ' Buy and Sell Crypto' : 'Swap Your Crypto' }}
             </h1>
             <h3
               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"
             >
-              Buy and Sell NIM with
-              Euro, USD, CHF, and more!
+              {{ !swap ? 'Buy and Sell NIM with Euro, USD, CHF, and more!' : 'Swap Your Crypto, Swap 5520+ cryptos to NIM and back!' }}
             </h3>
-            <div class="pb-20">
+            <div class="pb-20" @click="scrollToWidget">
               <SliderToggle v-model="swap" />
             </div>
           </div>
 
-          <NuxtLink
-            to="https://wallet.nimiq.com" external target="_blank"
-            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"
+          <div
+            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"
           >
             <div class="col-span-1">
-              <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 class="text-netural mb-3 max-w-[165px]">
+                Get your self-hosted wallet in 30 sec!
               </p>
-              <NuxtLink to="https://wallet.nimiq.com/" target="_blank" rel="noopener noreferrer" class="text-blue">
+
+              <NuxtLink to="https://wallet.nimiq.com/" target="_blank" rel="noopener noreferrer" class="text-blue crypto-map-desktop">
                 Create
               </NuxtLink>
+
+              <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">
+                <span>Create</span>
+                <div class="i-lucide-arrow-right text-lg" />
+              </button>
             </div>
 
             <div class="col-span-1 flex flex-col items-center justify-center pl-4">
@@ -73,17 +87,17 @@ defineOgImageComponent('NuxtSeo', {
                 Supported currencies
               </span>
             </div>
-          </NuxtLink>
+          </div>
         </div>
 
         <!-- Right Column: Widget (Mobile Order 2) -->
-        <div class="flex justify-center order-2 md:col-span-1 md:order-none">
+        <div ref="widgetRef" class="flex justify-center order-2 md:col-span-1 md:order-none">
           <CoinifyWidget v-if="!swap" />
           <LetsexchangeWidget v-else />
         </div>
 
         <!-- Component 3: Supported Currencies (Mobile Order 3 - At Bottom) -->
-        <NuxtLink
+        <div
           to="https://wallet.nimiq.com" target="_blank" external
           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"
         >
@@ -111,7 +125,7 @@ defineOgImageComponent('NuxtSeo', {
             </div>
             <span class="text-neutral uppercase text-[9px] font-bold tracking-widest pl-1">Supported currencies</span>
           </div>
-        </NuxtLink>
+        </div>
       </div>
       <CryptoMapBanner />
       <NimiqPayBanner />
@@ -123,4 +137,20 @@ defineOgImageComponent('NuxtSeo', {
 .hover-icons:hover .icon {
   filter: none;
 }
+
+.hover-icons:hover button.crypto-map-desktop {
+  display: none;
+}
+
+.hover-icons button.crypto-map-desktop {
+  display: flex;
+}
+
+.hover-icons:hover a.crypto-map-desktop {
+  display: block;
+}
+
+.hover-icons a.crypto-map-desktop {
+  display: none;
+}
 </style>

i18n/locales/de.json

@@ -12,5 +12,6 @@
   "Privacy": "Datenschutz",
   "Disclaimer": "Haftungsausschluss",
   "PrivacyPolicy": "Datenschutzerklärung",
-  "CookieUsage": "Verwendung von Cookies"
+  "CookieUsage": "Verwendung von Cookies",
+  "TermOfService": "Nutzungsbedingungen"
 }

i18n/locales/en.json

@@ -12,5 +12,6 @@
   "Privacy": "Privacy",
   "Disclaimer": "Disclaimer",
   "PrivacyPolicy": "Privacy policy",
-  "CookieUsage": "Cookie usage"
+  "CookieUsage": "Cookie usage",
+  "TermOfService": "Terms of service"
 }

i18n/locales/es.json

@@ -12,5 +12,6 @@
   "Privacy": "Privacidad",
   "Disclaimer": "Descargo de responsabilidad",
   "PrivacyPolicy": "Política de privacidad",
-  "CookieUsage": "Uso de cookies"
+  "CookieUsage": "Uso de cookies",
+  "TermOfService": "Términos de servicio"
 }