From 54c236e6354ffa06933185c2703473401415f11a Mon Sep 17 00:00:00 2001
From: tommytrg <tomastrg22@gmail.com>
Date: Thu, 11 Jul 2024 22:54:01 +0200
Subject: [PATCH] fixup

---
 components/FooterSection.vue         |  2 +-
 components/cards/ExplorerLink.vue    |  2 +-
 components/sections/BuildSection.vue |  1 +
 components/sections/BuySection.vue   | 10 +++---
 components/sections/CoinSection.vue  | 41 +++++++++++++++++-------
 components/sections/HeroSection.vue  | 47 +++++++++++++++++++---------
 constants.ts                         |  2 +-
 locales/en-US.json                   |  9 ------
 pages/index.vue                      | 22 ++++++-------
 utils/getLatestRelease.ts            | 27 +++++++++-------
 10 files changed, 96 insertions(+), 67 deletions(-)

diff --git a/components/FooterSection.vue b/components/FooterSection.vue
index 6428c80e..053ce473 100644
--- a/components/FooterSection.vue
+++ b/components/FooterSection.vue
@@ -98,7 +98,7 @@ const footerSections = {
 }
 
 import snakeCase from 'lodash.snakecase'
-import  { URLS } from "../constants.js"
+import  { URLS } from "../constants"
 
 function getFooterLinks(sections) {
   return Object.entries(sections).map(([sectionName, sectionItems]) => ({
diff --git a/components/cards/ExplorerLink.vue b/components/cards/ExplorerLink.vue
index c51f9956..123b1dc3 100644
--- a/components/cards/ExplorerLink.vue
+++ b/components/cards/ExplorerLink.vue
@@ -2,7 +2,7 @@
   <!-- extra div to be able to style margins from parent without collision with inner styles -->
   <div>
     <div
-      class="card border rounded-lg px-xl py-xl mr-sm mb-sm max-w-md"
+      class="card border rounded-lg px-xl py-xl mr-sm mb-sm max-w-md h-full"
       :class="['shadow-' + shadowColor]"
     >
       <div class="flex justify-between items-center">
diff --git a/components/sections/BuildSection.vue b/components/sections/BuildSection.vue
index 3368ee90..a90ad56a 100644
--- a/components/sections/BuildSection.vue
+++ b/components/sections/BuildSection.vue
@@ -5,6 +5,7 @@
         keypath="build-section.title.key_features"
         class="title-h2"
         tag="span"
+        id="build"
       >
         <span class="blue">{{ $t('build-section.title.dot') }}</span>
       </i18n-t>
diff --git a/components/sections/BuySection.vue b/components/sections/BuySection.vue
index 346880a0..3809aca5 100644
--- a/components/sections/BuySection.vue
+++ b/components/sections/BuySection.vue
@@ -1,14 +1,14 @@
 <template>
   <SectionBase :description="t('buy-section.description')">
     <template v-slot:title>
-      <span>
+      <span id="buy">
         {{ t('buy-section.title') }}
       </span>
     </template>
 
     <template v-slot:content>
       <div
-        class="max-w-4xl grid p-lg gap-xl grid-cols-1 md:grid-cols-2 lg:grid-cols-3 justify-items-center md:justify-items-start"
+        class="max-w-4xl grid p-lg pb-0 gap-xl grid-cols-1 md:grid-cols-2 lg:grid-cols-3 justify-items-center md:justify-items-start"
       >
         <IconWithText
           v-for="exchange in exchanges"
@@ -54,12 +54,12 @@ const exchanges: Array<any> = [
   {
     name: t('buy-section.exchanges.gate'),
     logo: 'gate',
-    link: 'https://www.gate.io/trade/WIT_USDT',
+    link: URLS.gate,
   },
   {
     name: t('buy-section.exchanges.mexc'),
     logo: 'mexc',
-    link: 'https://www.mexc.com/exchange/WIT_USDT',
+    link: URLS.mexc,
   },
   {
     name: t('buy-section.exchanges.bitmart'),
@@ -79,7 +79,7 @@ const exchanges: Array<any> = [
   {
     name: t('buy-section.exchanges.letsexchange'),
     logo: 'letsexchange',
-    link: "https://letsexchange.io/coin/wit"
+    link: URLS.letsexchange
   },
 ]
 </script>
diff --git a/components/sections/CoinSection.vue b/components/sections/CoinSection.vue
index d8da207f..4bc79ed2 100644
--- a/components/sections/CoinSection.vue
+++ b/components/sections/CoinSection.vue
@@ -6,12 +6,14 @@
       <div class="flex justify-center items-center mb-xl flex-col md:flex-row">
         <i18n-t
           keypath="coin.title.main"
-          class="text-6xl sm:text-7xl lg:text-8xl font-bold text-white-50" tag="h3">
+          class="text-6xl sm:text-7xl lg:text-8xl font-bold text-white-50"
+          id="stake"
+          tag="h3"
+        >
           <span class="text-wit-blue-500">{{ $t('coin.title.mark') }}</span>
         </i18n-t>
 
         <p class="mx-xl line transform rotate-90 md:transform-none"></p>
-        
         <div class="max-w-md">
           <h4 class="text-4xl font-bold text-white-50 mb-md">
             {{ $t('coin.description1') }}
@@ -28,22 +30,23 @@
           <span class="text-white-50">{{ $t('coin.run_in_platform.windows') }}</span>
         </i18n-t> -->
 
-        Run a Witnet Node and Stake on Windows
+        Run a Witnet Node and Stake on {{ release.platform }} 
       </CustomButton>
 
-      <p class="text-lg text-wit-blue-500 mb-lg">Windows • x86_64 • 14.8 MB ⓘ</p>
-
-      <p class="text-large text-white-50 text-center max-w-4xl mb-xl">
+      <p class="text-lg text-wit-blue-500 mb-lg">
+        {{ release.platform }} • x86_64 • {{ size }} MB ⓘ
       </p>
 
+      <p class="text-large text-white-50 text-center max-w-4xl mb-xl"></p>
+
       <div class="flex flex-col md:flex-row">
         <div class="flex flex-col items-center my-xl md:my-0 md:mr-xl">
           <DockerIcon class="icon mb-md" />
           <p class="text-sm">Docker</p>
         </div>
 
-        <div class="flex flex-col items-center mb-xl md:mb-none md:mr-xl ">
-          <WindowsIcon  class="icon mb-md" />
+        <div class="flex flex-col items-center mb-xl md:mb-none md:mr-xl">
+          <WindowsIcon class="icon mb-md" />
           <p class="text-sm">Windows</p>
         </div>
 
@@ -74,10 +77,6 @@
           :url="explorer.url"
         />
       </div>
-      <!-- <div>
-      <CustomButton :type="ButtonType.primary">Stake</CustomButton>
-      <CustomButton :type="ButtonType.secondary">Buy</CustomButton>
-    </div> -->
     </div>
   </PalmSectionBase>
 </template>
@@ -91,6 +90,24 @@ import LinuxIcon from '@/assets/svg/linux.svg?component'
 import RaspberryIcon from '@/assets/svg/raspberry.svg?component'
 
 import { ButtonType } from '~/types'
+
+import { getLatestRelease } from '../../utils/getLatestRelease'
+
+const release = ref({
+  platform: '',
+  releaseUrl: '',
+  size: 0 
+})
+
+const size = computed(() => {
+  return (release.value.size / 1024 / 1024).toFixed(1)
+})
+
+onMounted(async () => {
+  const latestRelease = await getLatestRelease(window.navigator)
+  release.value = latestRelease
+})
+
 // const { t } = useI18n()
 type Explorer = {
   title: string
diff --git a/components/sections/HeroSection.vue b/components/sections/HeroSection.vue
index 178c1f78..1a02fe02 100644
--- a/components/sections/HeroSection.vue
+++ b/components/sections/HeroSection.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="px-4">
+  <div class="px-4 py-28">
     <div
       class="flex flex-col items-center gap-y-lg justify-items-center relative"
     >
@@ -26,11 +26,11 @@
         <h2 class="text text-center">{{ $t('hero.description') }}</h2>
       </div>
 
-      <CustomButton :type="ButtonType.primary" class="z-20">
+      <CustomButton :type="ButtonType.primary" class="z-20 mb-28">
         {{ $t('hero.action') }}
       </CustomButton>
 
-      <ArrowDownIcon class="m-xl z-20" />
+      <ArrowDownIcon class="scroll z-20" />
     </div>
   </div>
 </template>
@@ -73,15 +73,15 @@ import SquareDots from '@/assets/svg/square-dots.svg?component'
   position: absolute;
   width: 30px;
   height: auto;
-  top: 30px;
-  right: 0px;
+  top: 10%;
+  right: 1%;
 }
 
 .plus2 {
   position: absolute;
   width: 15px;
   height: auto;
-  top: 130px;
+  top: 25%;
   right: 0px;
 }
 
@@ -89,8 +89,25 @@ import SquareDots from '@/assets/svg/square-dots.svg?component'
   position: absolute;
   width: 30px;
   height: auto;
-  top: 500px;
-  right: 16px;
+  top: 80%;
+  right: 10%;
+}
+
+.scroll {
+  width: 40px;
+  height: auto;
+  animation: down 1s infinite  alternate;
+}
+
+
+@keyframes down {
+ 0% {
+    transform: translateY(0px);
+  }
+
+ 100% {
+    transform: translateY(-30px);
+  }
 }
 
 @media (min-width: 640px) {
@@ -102,8 +119,8 @@ import SquareDots from '@/assets/svg/square-dots.svg?component'
 
 .plus1{
   width: 30px;
-  top: px;
-  left: 7%;
+  top: 40%;
+  left: 15%;
 }
 
 .zigzag1 {
@@ -114,20 +131,20 @@ import SquareDots from '@/assets/svg/square-dots.svg?component'
 
 .zigzag2 {
   width: 50px;
-  top: 30px;
+  top: 15%;
   right: 10%;
 }
 
 .plus2 {
   width: 30px;
-  top: 130px;
-  right: 0px;
+  top: 45%;
+  right: 0;
 }
 
 .squaredots2 {
   width: 60px;
-  top: 500px;
-  right: 16px;
+  top: 70%;
+  right: 15%;
 }
 
 }
diff --git a/constants.ts b/constants.ts
index 5f139262..374ea864 100644
--- a/constants.ts
+++ b/constants.ts
@@ -37,7 +37,7 @@ export const URLS: Record<string, string> = {
   medium: 'https://medium.com/witnet',
   mexc: 'https://www.mexc.com/exchange/WIT_USDT',
   mining: 'https://docs.witnet.io/node-operators/docker-quick-start-guide',
-  mww: '#',
+  letsexchange: "https://letsexchange.io/coin/wit",
   my_wit_wallet: 'https://mywitwallet.com/',
   newsletter: 'http://eepurl.com/iDxYzs',
   oracle: '#oracle',
diff --git a/locales/en-US.json b/locales/en-US.json
index b89064ac..0e6df5e9 100644
--- a/locales/en-US.json
+++ b/locales/en-US.json
@@ -153,15 +153,6 @@
     "description": "Opt for myWitWallet for instant transactions without the wait for synchronization, perfect for quick and easy sending and receiving of WIT.",
     "action": "Download myWitWallet"
   },
-  "stake-page": {
-    "title": "Stake! Secure the Network and Earn Rewards!",
-    "description": "Secure the network, earn rewards, and be part of a censorship-resistant oracle. Witnet 2.0 is unstoppable.",
-    "action": "Run a Witnet Node and Stake on {0}",
-    "action-description": "To participate in the Witnet network, run a Witnet node and stake some $WIT. Stakers can earn rewards while contributing to data retrieval, verification, and network security!",
-    "available-platforms-title": "Need Another Version?",
-    "action-2": "Get Started",
-    "action-2-description": "Start Staking Now and earn rewards!"
-  },
   "footer": {
     "documentation": "Documentation",
     "request_data_feed": "Request new price feed",
diff --git a/pages/index.vue b/pages/index.vue
index 85f4b75c..ca8b2b75 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,21 +1,21 @@
 <template>
   <div class="grid grid-flow-row overflow-hidden">
     <HeroSection />
-    <WhatIsWitnetSection class="pt-10 pb-10 pt- px-4" />
-    <CoinSection class="pt-10 pb-10 px-4" />
-    <BuySection class="pt-10 pb-10 px-4" />
-    <SecureSection class="pt-10 pb-10 px-4" />
-    <BuildSection class="pt-10 pb-10 px-4" />
-    <ExploreSection class="pt-10 pb-10 px-4" />
-    <TutorialsSection class="pt-10 pb-10 px-4" />
-    <CommunitySection class="pt-10 pb-10 px-4" />
-    <Newsletter class="pt-10 pb-10 px-4" />
-    <FooterSection class="pt-10 pb-10 px-4" />
+    <WhatIsWitnetSection class="pt-28 pb-28 pt- px-4" />
+    <CoinSection class="pt-28 pb-28 px-4" />
+    <BuySection class="pt-28 pb-28 px-4" />
+    <SecureSection class="pt-28 pb-28 px-4" />
+    <BuildSection class="pt-28 pb-28 px-4" />
+    <ExploreSection class="pt-28 pb-28 px-4" />
+    <TutorialsSection class="pt-28 pb-28 px-4" />
+    <CommunitySection class="pt-28 pb-28 px-4" />
+    <Newsletter class="pt-28 pb-28 px-4" />
+    <FooterSection class="pt-28 pb-28 px-4" />
   </div>
 </template>
 
 <style scoped>
-/* .pt-10 pb-10 {
+/* .pt-28 pb-28 {
   padding-top: 96px;
   padding-bottom: 96px;
 } */
diff --git a/utils/getLatestRelease.ts b/utils/getLatestRelease.ts
index 79b76a4c..3eef09fb 100644
--- a/utils/getLatestRelease.ts
+++ b/utils/getLatestRelease.ts
@@ -1,34 +1,37 @@
 import { getBrowserOs } from './getBrowserOs'
 export const URL_RELEASE_BASE =
-  'https://api.github.com/repos/witnet/sheikah/releases/latest'
+  'https://api.github.com/repos/witnet/witnet-rust/releases/latest'
 
 export async function getLatestRelease(navigator: any) {
   return await fetch(URL_RELEASE_BASE).then(async (result: any) => {
+    const json = await result.json()
     const os = await getBrowserOs(navigator).toLowerCase()
-    const macRelease = await result.data.assets.find((asset: any) =>
-      asset.browser_download_url.includes('.dmg')
+
+    const macRelease = json.assets.find((asset: any) =>
+      asset.browser_download_url.includes('apple')
     )
-    const linuxRelease = await result.data.assets.find((asset: any) =>
-      asset.browser_download_url.includes('.AppImage')
+    const linuxRelease = json.assets.find((asset: any) =>
+      asset.browser_download_url.includes('aarch64-unknown-linux-gnu')
     )
-    const windowsRelease = await result.data.assets.find((asset: any) =>
-      asset.browser_download_url.includes('.exe')
+    const windowsRelease = json.assets.find((asset: any) =>
+      asset.browser_download_url.includes('x86_64-pc-windows')
     )
+    console.log(linuxRelease.size / 1024 / 1024)
     const release = {
       linux: {
-        platform: 'GNU / Linux',
+        platform: 'Linux',
         releaseUrl: linuxRelease.browser_download_url,
-        downloadName: linuxRelease.name,
+        size: linuxRelease.size
       },
       win: {
         platform: 'Windows',
         releaseUrl: windowsRelease.browser_download_url,
-        downloadName: windowsRelease.name,
+        size: linuxRelease.size 
       },
       mac: {
-        platform: 'Mac OS',
+        platform: 'macOS',
         releaseUrl: macRelease.browser_download_url,
-        downloadName: windowsRelease.name,
+        size: linuxRelease.size 
       },
     }
     return (release as any)[os] as any