fixup

components/CustomButton.vue

@@ -28,4 +28,4 @@ defineProps({
   padding-top: 10px;
   padding-bottom: 10px;
 }
-</style>
+</style>

components/FooterSection.vue

@@ -32,7 +32,7 @@
             <i18n-t keypath="footer.ado_text" tag="p" class="text-sm">
               <a
                 class="py-1 underline text-sm"
-                :href="urls.ado"
+                :href="URLS.ado"
                 target="_blank"
               >
                 theado.org
@@ -51,7 +51,7 @@
               <span>2018-{{ new Date().getFullYear() }}</span>
               <a
                 class="underline py-1 text-sm"
-                href="https://witnet.foundation"
+                :href="URLS.witnet_foundation"
                 target="_blank"
                 >{{ $t('footer.copyright.witnet_foundation') }}</a
               >
@@ -97,81 +97,14 @@ const footerSections = {
   // community: ['telegram', 'discord', 'x', 'reddit', 'youtube'],
 }
 
-const urls = {
-  developers: '#',
-  ecosystem: '#',
-  learn: '#',
-  // community: '#',
-  reference: '#',
-  libraries: '#',
-  tools: '#',
-  reference: '#',
-  libraries: '#',
-  tools: '#',
-  block_explorer: '#',
-  dfe: '#',
-  sheikah: '#',
-  mww: '#',
-  whitepaper: '#',
-  medium: '#',
-  tutorials: '#',
-  telegram: '#',
-  discord: '#',
-  x: '#',
-  reddit: '#',
-  youtube: '#',
-  ado: 'https://github.com/adoracles/',
-  advocateProgram:
-    'https://witnet.notion.site/The-Witnet-Advocate-Program-f572baff6b1d49a69d4db785a924fc61',
-  angelList: 'https://angel.co/company/witnet-foundation-1',
-  blockExplorer: 'https://witnet.network/',
-  coin: '#coin',
-  // community: 'https://witnet.io/#community',
-  data_feeds_explorer: 'https://feeds.witnet.io',
-  discord: 'https://discord.gg/witnet',
-  documentation: 'https://docs.witnet.io/',
-  ecosystem: 'https://witnet.io/#ecosystem',
-  fullNode: 'https://docs.witnet.io/try/run-a-node/',
-  mediaKit:
-    'https://drive.google.com/drive/u/1/folders/1z9dSts64xyaIZqRvniMPDib7UWOE2P3z',
-  gate: 'https://www.gate.io/trade/WIT_USDT',
-  getPostRequest:
-    'https://docs.witnet.io/smart-contracts/apis-and-http-get-post-oracle',
-  github: 'https://github.com/witnet',
-  grantProgram:
-    'https://witnet.notion.site/The-Witnet-Grant-Program-0e6bc5ddbe4a4bf8a22c262dedfe268f',
-  integrateDirectly:
-    'https://docs.witnet.io/smart-contracts/witnet-data-feeds/using-witnet-data-feeds#reading-last-price-and-timestamp-from-a-price-feed-contract-serving-a-specific-pair',
-  integrateThroughProxy:
-    'https://docs.witnet.io/smart-contracts/witnet-data-feeds/using-witnet-data-feeds#reading-multiple-currency-pairs-from-the-router',
-  medium: 'https://medium.com/witnet',
-  mexc: 'https://www.mexc.com/exchange/WIT_USDT',
-  mining: 'https://docs.witnet.io/node-operators/docker-quick-start-guide',
-  oracle: '#oracle',
-  priceFeeds: 'https://docs.witnet.io/smart-contracts/witnet-data-feeds',
-  randomness: 'https://docs.witnet.io/smart-contracts/witnet-randomness-oracle',
-  reddit: 'https://reddit.com/r/witnet',
-  requestDataFeed: 'https://tally.so/r/wMZDAn',
-  telegram: 'https://t.me/witnetio',
-  token: 'https://witnet.io/#coin',
-  tokenomics:
-    'https://medium.com/witnet/wit-witnet-blockchains-native-tokenomics-4559084073c5',
-  truffleBox:
-    'https://docs.witnet.io/smart-contracts/witnet-web-oracle/make-a-get-request',
-  x: 'https://twitter.com/witnet_io',
-  wallet: 'https://sheikah.app/',
-  whitepaper: 'https://witnet.io/witnet-whitepaper.pdf',
-  youtube: 'https://www.youtube.com/channel/UCCS143kLVAH7oHZKvNNNxKQ',
-  my_wit_wallet: 'https://mywitwallet.com/',
-}
-
 import snakeCase from 'lodash.snakecase'
+import  { URLS } from "../constants.js"
 
 function getFooterLinks(sections) {
   return Object.entries(sections).map(([sectionName, sectionItems]) => ({
     title: sectionName,
     links: sectionItems.map((sectionItem) => ({
-      url: urls[sectionItem],
+      url: URLS[sectionItem],
       text: getI18nStringFromSectionItem(sectionName, sectionItem),
     })),
   }))

components/IconWithText.vue

@@ -1,11 +1,13 @@
 <template>
+  <a :href="link">
   <div class="flex items-center">
     <RoundedIcon class="mr-md">
       <slot></slot>
       <!-- <GateIcon /> -->
     </RoundedIcon>
     <p class="text-lg">{{ text }}</p>
   </div>
+  </a>
 </template>
 
 <script setup>
@@ -14,6 +16,10 @@ defineProps({
     type: String,
     required: true,
   },
+  link: {
+    type: String,
+    required: true
+  }
 })
 </script>
 

components/cards/BuildWithWitnet.vue

@@ -36,6 +36,8 @@ return props.index.toLocaleString('en-US', {
 <style scoped lang="scss">
 .card {
   box-shadow: 7px 10px 0px rgb(0, 0, 0);
+  margin-bottom: 10px;
+  margin-right: 7px;;
 }
 
 .title-h2 {

components/sections/BuildSection.vue

@@ -3,15 +3,15 @@
     <template v-slot:title>
       <i18n-t
         keypath="build-section.title.key_features"
-        class="title-h2 mb-lg max-w-screen-sm"
+        class="title-h2"
         tag="span"
       >
         <span class="blue">{{ $t('build-section.title.dot') }}</span>
       </i18n-t>
     </template>
 
     <template v-slot:content>
-      <div class="grid grid-cols-1 p-xl gap-xl lg:grid-cols-2">
+      <div class="grid grid-cols-1 gap-sm lg:grid-cols-2">
         <BuildWithWitnet
           v-for="(reason, index) in reasons"
           :index="index + 1"

components/sections/BuySection.vue

@@ -7,29 +7,34 @@
     </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">
-
-        <!-- <div class="flex items-center"> -->
-          <IconWithText v-for="exchange in exchanges" :text="exchange.name">
-            <GateIcon class="icon" v-if="exchange.logo === 'gate'"></GateIcon>
-            <MexcIcon class="icon" v-if="exchange.logo === 'mexc'"></MexcIcon>
-            <BitmartIcon
-              class="icon"
-              v-if="exchange.logo === 'bitmart'"
-            ></BitmartIcon>
-            <ChangellyIcon
-              class="icon"
-              v-if="exchange.logo === 'changelly'"
-            ></ChangellyIcon>
-            <SimpleswapIcon
-              class="icon"
-              v-if="exchange.logo === 'simpleswap'"
-            ></SimpleswapIcon>
-            <LetsexchangeIcon
-              class="icon"
-              v-if="exchange.logo === 'letsexchange'"
-            ></LetsexchangeIcon>
-          </IconWithText>
+      <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"
+      >
+        <IconWithText
+          v-for="exchange in exchanges"
+          :text="exchange.name"
+          :link="exchange.link"
+          class="w-60"
+        >
+          <GateIcon class="icon" v-if="exchange.logo === 'gate'"></GateIcon>
+          <MexcIcon class="icon" v-if="exchange.logo === 'mexc'"></MexcIcon>
+          <BitmartIcon
+            class="icon"
+            v-if="exchange.logo === 'bitmart'"
+          ></BitmartIcon>
+          <ChangellyIcon
+            class="icon"
+            v-if="exchange.logo === 'changelly'"
+          ></ChangellyIcon>
+          <SimpleswapIcon
+            class="icon"
+            v-if="exchange.logo === 'simpleswap'"
+          ></SimpleswapIcon>
+          <LetsexchangeIcon
+            class="icon"
+            v-if="exchange.logo === 'letsexchange'"
+          ></LetsexchangeIcon>
+        </IconWithText>
       </div>
     </template>
   </SectionBase>
@@ -42,32 +47,39 @@ import BitmartIcon from '@/assets/svg/bitmart.svg?component'
 import ChangellyIcon from '@/assets/svg/changelly.svg?component'
 import SimpleswapIcon from '@/assets/svg/simpleswap.svg?component'
 import LetsexchangeIcon from '@/assets/svg/letsexchange.svg?component'
+import { URLS } from "../../constants.js"
 
 const { t } = useI18n()
 const exchanges: Array<any> = [
   {
     name: t('buy-section.exchanges.gate'),
     logo: 'gate',
+    link: 'https://www.gate.io/trade/WIT_USDT',
   },
   {
     name: t('buy-section.exchanges.mexc'),
     logo: 'mexc',
+    link: 'https://www.mexc.com/exchange/WIT_USDT',
   },
   {
     name: t('buy-section.exchanges.bitmart'),
     logo: 'bitmart',
+    link: URLS.bitmart 
   },
   {
     name: t('buy-section.exchanges.changelly'),
     logo: 'changelly',
+    link: URLS.changelly 
   },
   {
     name: t('buy-section.exchanges.simpleswap'),
     logo: 'simpleswap',
+    link: URLS.simpleswap, 
   },
   {
     name: t('buy-section.exchanges.letsexchange'),
     logo: 'letsexchange',
+    link: "https://letsexchange.io/coin/wit"
   },
 ]
 </script>

components/sections/CoinSection.vue

@@ -6,12 +6,12 @@
       <div class="flex justify-center items-center mb-xl flex-col md:flex-row">
         <i18n-t
           keypath="coin.title.main"
-          class="text-8xl font-bold text-white-50"
-          tag="h3"
-        >
+          class="text-6xl sm:text-7xl lg:text-8xl font-bold text-white-50" 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') }}
@@ -22,15 +22,18 @@
       </div>
 
       <CustomButton :type="ButtonType.primary" class="mb-md">
+        <!-- <i18n-t
+          keypath="coin.run_in_platform.main"
+          class="flex flex-row text-white-50" tag="span">
+          <span class="text-white-50">{{ $t('coin.run_in_platform.windows') }}</span>
+        </i18n-t> -->
+
         Run a Witnet Node and Stake on Windows
       </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">
-        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!
       </p>
 
       <div class="flex flex-col md:flex-row">
@@ -41,12 +44,12 @@
 
         <div class="flex flex-col items-center mb-xl md:mb-none md:mr-xl ">
           <WindowsIcon  class="icon mb-md" />
-          <p class="text-sm">Docker</p>
+          <p class="text-sm">Windows</p>
         </div>
 
         <div class="flex flex-col items-center mb-xl md:mb-none md:mr-xl">
           <AppleIcon class="icon mb-md" />
-          <p class="text-sm">Docker</p>
+          <p class="text-sm">Apple</p>
         </div>
 
         <div class="flex flex-col items-center mb-xl md:mb-none md:mr-xl">
@@ -56,7 +59,7 @@
 
         <div class="flex flex-col items-center mb-xl md:mb-none md:mr-xl">
           <RaspberryIcon class="icon mb-md" />
-          <p class="text-sm">Docker</p>
+          <p class="text-sm">Raspberry</p>
         </div>
       </div>
 
@@ -115,12 +118,12 @@ const explorers: Array<Explorer> = [
   // {
   //   title: t('coin.explorer-1.title'),
   //   description: t('coin.explorer-1.description'),
-  //   url: URLS.dataFeedsExplorer,
+  //   url: URLS.data_feeds_explorer,
   // },
   // {
   //   title: t('coin.explorer-2.title'),
   //   description: t('explore.explorer-2.description'),
-  //   url: URLS.blockExplorer,
+  //   url: URLS.block_explorer,
   // },
 ]
 </script>

components/sections/ExploreSection.vue

@@ -39,12 +39,12 @@ const explorers: Array<Explorer> = [
   {
     title: t('explore.explorer-1.title'),
     description: t('explore.explorer-1.description'),
-    url: URLS.dataFeedsExplorer,
+    url: URLS.data_feeds_explorer,
   },
   {
     title: t('explore.explorer-2.title'),
     description: t('explore.explorer-2.description'),
-    url: URLS.blockExplorer,
+    url: URLS.block_explorer,
   },
 ]
 </script>

components/sections/HeroSection.vue

@@ -93,4 +93,44 @@ import SquareDots from '@/assets/svg/square-dots.svg?component'
   right: 16px;
 }
 
+@media (min-width: 640px) {
+.squaredots1 {
+  width: 50px;
+  top: 1%;
+  left: 5%;
+}
+
+.plus1{
+  width: 30px;
+  top: px;
+  left: 7%;
+}
+
+.zigzag1 {
+  width: 50px;
+  top: 70%;
+  left: 3%;
+}
+
+.zigzag2 {
+  width: 50px;
+  top: 30px;
+  right: 10%;
+}
+
+.plus2 {
+  width: 30px;
+  top: 130px;
+  right: 0px;
+}
+
+.squaredots2 {
+  width: 60px;
+  top: 500px;
+  right: 16px;
+}
+
+}
+
+
 </style>