f clean

witnet · Jul 15, 2024 · 81ae605 · 81ae605
1 parent 54c236e
commit 81ae605
Show file tree

Hide file tree

Showing 24 changed files with 199 additions and 285 deletions.
diff --git a/assets/styles/main.scss b/assets/styles/main.scss
@@ -5,6 +5,4 @@ html {
   height: 100%;
   margin: 0;
   padding: 0;
-  // color: $white;
-  // background-color: $black;
 }
diff --git a/assets/styles/tailwind.css b/assets/styles/tailwind.css
@@ -7,16 +7,12 @@
   .title-h1 {
     @apply font-title text-9xl;
     font-weight: 600;
-    /* line-height: 1; */
     line-height: 0.9;
     color: #232323;
 
   }
   .title-h2 {
-    /* @apply font-title text-8xl; */
-    /* @apply text-7xl; */
     @apply text-5xl sm:text-6xl lg:text-7xl;
-    /* @apply lg:text-7xl; */
 
     font-weight: 600;
     line-height: 1.1;

diff --git a/assets/svg/file:/home/tommy/Downloads/Group(12).svg b/assets/svg/file:/home/tommy/Downloads/Group(12).svg
diff --git a/components/ArrowButton.vue b/components/ArrowButton.vue
@@ -1,10 +1,10 @@
 <template>
-    <CustomButton :type="ButtonType.terciary">
-      <span class="flex items-center">
-        <slot></slot>
-        <ArrowRightIcon class="arrow ml-md"></ArrowRightIcon>
-      </span>
-    </CustomButton>
+  <CustomButton :type="ButtonType.terciary">
+    <span class="flex items-center">
+      <slot></slot>
+      <ArrowRightIcon class="arrow ml-md"></ArrowRightIcon>
+    </span>
+  </CustomButton>
 </template>
 
 <script setup>
@@ -30,4 +30,4 @@ defineProps({
 .arrow {
   height: 14px;
 }
-</style>
+</style>
diff --git a/components/Banner.vue b/components/Banner.vue
@@ -1,9 +1,8 @@
 <template>
-    <div class="w-full bg-dotted h-xl" :class="[`bg-dotted-${color}`]" />
+  <div class="w-full bg-dotted h-xl" :class="[`bg-dotted-${color}`]" />
 </template>
 
 <script setup lang="ts">
-
 enum BannerColor {
   blue = 'blue',
   black = 'black',
@@ -26,14 +25,12 @@ defineProps({
 }
 
 .bg-dotted-blue {
-    background-image: url('/assets/svg/dots.svg');
-    background-size: contain;
+  background-image: url('/assets/svg/dots.svg');
+  background-size: contain;
 }
 
 .bg-dotted-black {
-    background-image: url('/assets/svg/dots-black.svg');
-    background-size: contain;
+  background-image: url('/assets/svg/dots-black.svg');
+  background-size: contain;
 }
-
-
-</style>
+</style>
diff --git a/components/FooterSection.vue b/components/FooterSection.vue
@@ -98,7 +98,7 @@ const footerSections = {
 }
 
 import snakeCase from 'lodash.snakecase'
-import  { URLS } from "../constants"
+import { URLS } from '../constants'
 
 function getFooterLinks(sections) {
   return Object.entries(sections).map(([sectionName, sectionItems]) => ({
@@ -116,24 +116,3 @@ function getI18nStringFromSectionItem(sectionName, sectionItem) {
 
 const footerLinks = getFooterLinks(footerSections)
 </script>
-
-<style scoped lang="scss">
-// .bottom {
-//   grid-template-columns: max-content 1fr;
-//   grid-template-rows: max-content;
-//   .copyright {
-//     grid-row: 2;
-//     grid-column: 2;
-//   }
-//   .logo {
-//     grid-row: 2;
-//     grid-column: 1;
-//   }
-// }
-
-// @media (min-width: 600px) {
-//   .bottom {
-//     grid-template-columns: max-content 1fr max-content;
-//   }
-// }
-</style>
diff --git a/components/IconWithText.vue b/components/IconWithText.vue
@@ -1,12 +1,11 @@
 <template>
   <a :href="link">
-  <div class="flex items-center">
-    <RoundedIcon class="mr-md">
-      <slot></slot>
-      <!-- <GateIcon /> -->
-    </RoundedIcon>
-    <p class="text-lg">{{ text }}</p>
-  </div>
+    <div class="flex items-center">
+      <RoundedIcon class="mr-md">
+        <slot></slot>
+      </RoundedIcon>
+      <p class="text-lg">{{ text }}</p>
+    </div>
   </a>
 </template>
 
@@ -18,12 +17,11 @@ defineProps({
   },
   link: {
     type: String,
-    required: true
-  }
+    required: true,
+  },
 })
 </script>
 
-
 <style>
 /* TODO */
 .bg-white-50 {
@@ -33,4 +31,4 @@ defineProps({
 .bg-black-950 {
  color: white;
 }
-</style>
+</style>
diff --git a/components/PlatformsList.vue b/components/PlatformsList.vue
@@ -23,27 +23,27 @@ type Platform = {
 const platforms: Array<Platform> = [
   {
     name: 'Docker',
-    url: URLS.dockerNode,
+    url: URLS.docker_node,
     icon,
   },
   {
     name: 'Windows',
-    url: URLS.windowsNode,
+    url: URLS.windows_node,
     icon,
   },
   {
     name: 'macOS',
-    url: URLS.macosNode,
+    url: URLS.macos_node,
     icon,
   },
   {
     name: 'GNU/Linux',
-    url: URLS.linuxNode,
+    url: URLS.linux_node,
     icon,
   },
   {
     name: 'Rasberry Pi',
-    url: URLS.rasberrypiNode,
+    url: URLS.rasberrypi_node,
     icon,
   },
 ]

diff --git a/components/RoundedIcon.vue b/components/RoundedIcon.vue
@@ -1,5 +1,5 @@
 <template>
   <div class="border border-black-950 w-min rounded-full p-md bg-wit-blue-500">
     <slot></slot>
-</div>
-</template>
+  </div>
+</template>
diff --git a/components/cards/OutOfBoundariesCard.vue b/components/cards/OutOfBoundariesCard.vue
@@ -1,3 +1,6 @@
+<!--TODO: This comment is the bigger version of the component. We have to add slashes in bigger screens
+in the current component below -->
+
 <!-- <template>
   <div
     class="out-of-boundaries card border-2 border-black-950 bg-white-50 rounded-lg px-xl py-xl max-w-sm"
@@ -21,27 +24,26 @@
 </template> -->
 
 <template>
-<div>
-
-  <div
-    class="out-of-boundaries card border-2 border-black-950 bg-white-50 rounded-lg px-xl py-xl max-w-sm"
-  >
-    <RoundedIcon class="rounded-icon">
-      <slot name="icon"></slot>
-    </RoundedIcon>
-    <h3 class="text-2xl text-black-950 font-semibold leading-4 pl-14">
-      {{ title }}
-    </h3>
-    <hr class="hr my-md ml-14" />
-    <p class="text-base text-black-950 mb-xl">
-      {{ description }}
-    </p>
+  <div>
+    <div
+      class="out-of-boundaries card border-2 border-black-950 bg-white-50 rounded-lg px-xl py-xl max-w-sm"
+    >
+      <RoundedIcon class="rounded-icon">
+        <slot name="icon"></slot>
+      </RoundedIcon>
+      <h3 class="text-2xl text-black-950 font-semibold leading-4 pl-14">
+        {{ title }}
+      </h3>
+      <hr class="hr my-md ml-14" />
+      <p class="text-base text-black-950 mb-xl">
+        {{ description }}
+      </p>
 
-    <div class="flex items-center">
-      <ArrowButton class="action">{{ action }}</ArrowButton>
+      <div class="flex items-center">
+        <ArrowButton class="action">{{ action }}</ArrowButton>
+      </div>
     </div>
   </div>
-</div>
 </template>
 
 <script setup lang="ts">
@@ -57,15 +59,15 @@ const props = defineProps({
   },
   action: {
     type: String,
-    required: true
-  }
+    required: true,
+  },
 })
 </script>
 
 <style scoped lang="scss">
 :slotted(svg) {
   width: 60px;
-  height:  60px;
+  height: 60px;
 }
 .out-of-boundaries {
   // add margin equal to out of boundaries

diff --git a/components/cards/TutorialsSubList.vue b/components/cards/TutorialsSubList.vue
@@ -2,12 +2,10 @@
   <div class="border-2 border-black-950 rounded-lg px-xl py-md m-sm w-72">
     <h3 class="title-h4">{{ title }}</h3>
 
-    <hr class="hr my-md">
+    <hr class="hr my-md" />
 
     <ul>
-      <li v-for="tutorial in tutorials"
-      class="list-disc list-inside"
-      >
+      <li v-for="tutorial in tutorials" class="list-disc list-inside">
         <TutorialLink
           class="block"
           :key="tutorial.name"
@@ -45,6 +43,6 @@ defineProps({
 }
 .hr {
   height: 3px;
-  background-color: black;  /* Modern Browsers */
+  background-color: black; /* Modern Browsers */
 }
-</style>
+</style>
diff --git a/components/sections/BuildSection.vue b/components/sections/BuildSection.vue
@@ -1,17 +1,17 @@
 <template>
   <SectionBase :description="t('build-section.description')">
-    <template v-slot:title>
+    <template #title>
       <i18n-t
         keypath="build-section.title.key_features"
         class="title-h2"
         tag="span"
         id="build"
       >
-        <span class="blue">{{ $t('build-section.title.dot') }}</span>
+        <span class="text-wit-blue-500">{{ $t('build-section.title.dot') }}</span>
       </i18n-t>
     </template>
 
-    <template v-slot:content>
+    <template #content>
       <div class="grid grid-cols-1 gap-sm lg:grid-cols-2">
         <BuildWithWitnet
           v-for="(reason, index) in reasons"

diff --git a/components/sections/BuySection.vue b/components/sections/BuySection.vue
@@ -16,24 +16,15 @@
           :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>
+          <GateIcon class="icon" v-if="exchange.logo === 'gate'" />
+          <MexcIcon class="icon" v-if="exchange.logo === 'mexc'" />
+          <BitmartIcon class="icon" v-if="exchange.logo === 'bitmart'" />
+          <ChangellyIcon class="icon" v-if="exchange.logo === 'changelly'" />
+          <SimpleswapIcon class="icon" v-if="exchange.logo === 'simpleswap'" />
           <LetsexchangeIcon
             class="icon"
             v-if="exchange.logo === 'letsexchange'"
-          ></LetsexchangeIcon>
+          />
         </IconWithText>
       </div>
     </template>
@@ -47,7 +38,7 @@ 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"
+import { URLS } from '../../constants.js'
 
 const { t } = useI18n()
 const exchanges: Array<any> = [
@@ -64,22 +55,22 @@ const exchanges: Array<any> = [
   {
     name: t('buy-section.exchanges.bitmart'),
     logo: 'bitmart',
-    link: URLS.bitmart 
+    link: URLS.bitmart,
   },
   {
     name: t('buy-section.exchanges.changelly'),
     logo: 'changelly',
-    link: URLS.changelly 
+    link: URLS.changelly,
   },
   {
     name: t('buy-section.exchanges.simpleswap'),
     logo: 'simpleswap',
-    link: URLS.simpleswap, 
+    link: URLS.simpleswap,
   },
   {
     name: t('buy-section.exchanges.letsexchange'),
     logo: 'letsexchange',
-    link: URLS.letsexchange
+    link: URLS.letsexchange,
   },
 ]
 </script>