feat: fix copies and adjust style

witnet · Jul 24, 2024 · afaad5f · afaad5f
1 parent 89d9217
commit afaad5f
Show file tree

Hide file tree

Showing 18 changed files with 56 additions and 37 deletions.
diff --git a/assets/styles/tailwind.css b/assets/styles/tailwind.css
@@ -90,7 +90,7 @@
 
   /* Button */
   .btn {
-    @apply w-full py-sm px-l cursor-pointer border-2 border-black-950;
+    @apply w-full py-sm px-md-alt cursor-pointer border-2 border-black-950;
   }
   .btn-primary {
     @apply font-semibold rounded-full shadow-md bg-wit-blue-500 hover:bg-wit-blue-400 text-black-950 focus:outline-none focus:ring focus:ring-wit-blue-500 focus:ring-opacity-80 shadow-[3px_7px_0px] shadow-black-950;

diff --git a/components/FooterSection.vue b/components/FooterSection.vue
@@ -48,9 +48,9 @@
           </div>
         </div>
         <div
-          class="grid grid-cols-[max-content_max-content_1fr] sm:grid-cols-1 align-middle gap-lg pt-10"
+          class="grid grid-cols-[max-content_max-content_1fr] sm:grid-cols-1 align-middle gap-lg pt-10 items-center"
         >
-          <Wit2Icon class="w-3xl white" name="witnet_dark" />
+          <WitOracleIcon class="w-[140px] h-auto white" name="witnet_dark" />
           <div class="h-max self-center">
             <i18n-t
               keypath="footer.copyright.base1"
@@ -99,7 +99,7 @@
 import snakeCase from 'lodash.snakecase'
 import { URLS } from '../constants'
 import AdoIcon from '@/assets/svg/ado.svg?component'
-import Wit2Icon from '@/assets/svg/wit2.svg?component'
+import WitOracleIcon from '@/assets/svg/witnet-logo-dark.svg?component'
 
 const footerSections = {
   developers: ['reference', 'randomness', 'supported_chains'],

diff --git a/components/IconWithText.vue b/components/IconWithText.vue
@@ -1,7 +1,7 @@
 <template>
   <a :href="link" target="_blank">
-    <div class="flex items-center">
-      <RoundedIcon class="mr-md">
+    <div class="flex items-center icon-container">
+      <RoundedIcon class="rounded-icon mr-md">
         <slot></slot>
       </RoundedIcon>
       <p class="text-link font-bold" :class="textColor">{{ text }}</p>
@@ -25,3 +25,12 @@ defineProps({
   },
 })
 </script>
+
+<style lang="scss">
+.rounded-icon {
+  @apply bg-wit-blue-500;
+}
+.icon-container:hover > .rounded-icon {
+  @apply bg-wit-blue-300;
+}
+</style>
diff --git a/components/MailchimpEmbed.vue b/components/MailchimpEmbed.vue
@@ -24,7 +24,7 @@
           type="email"
           placeholder="[email protected]"
           name="EMAIL"
-          class="text-black-950 outline-none required email rounded-l-full min-w-[300px] sm:min-w-full py-sm px-md block w-full border-gray-200 shadow-sm text-sm focus:z-10 focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400 dark:placeholder-neutral-500 dark:focus:ring-neutral-600"
+          class="text-black-950 outline-none required email rounded-l-full border min-w-[300px] sm:min-w-full py-sm px-md block w-full border-white-50 shadow-sm text-sm focus:z-10 focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400 dark:placeholder-neutral-500 dark:focus:ring-neutral-600"
           required=""
           value=""
         />

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">
+  <div class="border border-black-950 w-min rounded-full p-md">
     <slot></slot>
   </div>
 </template>
diff --git a/components/cards/TutorialsSubList.vue b/components/cards/TutorialsSubList.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="border-2 border-black-950 rounded-lg px-lg py-lg m-sm w-72 shadow-black-950 shadow-[7px_10px_0px]"
+    class="border-2 border-black-950 rounded-lg px-lg py-lg w-72 shadow-black-950 shadow-[7px_10px_0px]"
   >
     <h3 class="title-h5">{{ title }}</h3>
 

diff --git a/components/sections/BuildSection.vue b/components/sections/BuildSection.vue
@@ -19,7 +19,7 @@
       <p class="text text-center section-description-max-w">
         {{ t('build-section.description') }}
       </p>
-      <div class="mt-md grid grid-cols-2 gap-md sm:grid-cols-1 md:grid-cols-1">
+      <div class="mt-md grid grid-cols-2 gap-lg sm:grid-cols-1 md:grid-cols-1">
         <BuildWithWitnet
           v-for="(reason, index) in reasons"
           :key="reason.title"

diff --git a/components/sections/CoinSection.vue b/components/sections/CoinSection.vue
@@ -6,7 +6,7 @@
     :content-classes="'grid justify-items-center pt-[240px]'"
   >
     <template #top>
-      <BlueStarIcon class="lg:w-auto lg:h-[200px]" />
+      <BlueStarIcon class="w-auto h-[200px]" />
     </template>
     <template #content>
       <div class="flex flex-col items-center gap-md">
@@ -24,9 +24,15 @@
 
           <p class="mx-xl line transform md:rotate-90 sm:rotate-90"></p>
           <div class="max-w-md md:text-center">
-            <h4 class="title-h4 text-white-50 mb-md">
-              {{ $t('coin.description1-alt') }}
-            </h4>
+            <i18n-t
+              keypath="coin.description1-alt"
+              class="title-h4 text-white-50 mb-md"
+              tag="h4"
+              scope="global"
+            >
+              <br />
+              <span>{{ $t('coin.description1-1-alt') }}</span>
+            </i18n-t>
             <p class="text text-white-50">{{ $t('coin.description2-alt') }}</p>
             <p class="text text-white-50">{{ $t('coin.description3') }}</p>
           </div>

diff --git a/components/sections/ExploreSection.vue b/components/sections/ExploreSection.vue
@@ -5,24 +5,24 @@
     :content-classes="'grid justify-items-center'"
   >
     <template #content>
-      <div class="flex self-center sm:w-96 justify-self-center">
+      <div class="flex self-center sm:w-96 justify-self-center items-center">
         <ArrowTurnRightIcon class="arrow m-md" />
 
         <i18n-t
           keypath="explore.title.main"
-          class="title-h2 font-bold mr-0 sm:mr-sm text-white-50"
+          class="title-h2 font-bold mr-0 sm:mr-sm text-white-50 h-max"
           tag="h2"
           scope="global"
         >
           <span class="text-black-950">{{ $t('explore.title.witnet') }}</span>
         </i18n-t>
       </div>
 
-      <div class="grid grid-cols-2 sm:grid-cols-1 gap-md mt-lg">
+      <div class="grid grid-cols-2 sm:grid-cols-1 gap-lg mt-lg">
         <ExplorerLink
           v-for="explorer in explorers"
           :key="explorer.title"
-          class="m-sm min-w-80"
+          class="min-w-80"
           shadow-color="black"
           :title="explorer.title"
           :url="explorer.url"

diff --git a/components/sections/HeroSection.vue b/components/sections/HeroSection.vue
@@ -3,7 +3,7 @@
     name="section"
     :center-left-content="false"
     :content-classes="'p-[24px_100px] sm:p-[0px_32px] xs:p-[0px_16px]'"
-    :height="'h-lg-y-screen sm:h-[max-content] max-h-[900px]'"
+    :height="'h-lg-y-screen max-h-[900px]'"
   >
     <template #content>
       <div

diff --git a/components/sections/NewsletterSection.vue b/components/sections/NewsletterSection.vue
@@ -2,10 +2,10 @@
   <NuxtLayout
     name="section"
     :frame-classes="'bg-wit-blue-500'"
-    :content-classes="'grid justify-start gap-sm py-[200px]'"
+    :content-classes="'grid justify-start gap-sm py-[184px]'"
   >
     <template #content>
-      <h2 class="title-h2">{{ t('newsletter.title') }}</h2>
+      <h2 class="title-h2-xl">{{ t('newsletter.title') }}</h2>
       <div
         class="grid grid-cols-[max-content_1fr] gap-md justify-items-start items-center"
       >

diff --git a/components/sections/SecureSection.vue b/components/sections/SecureSection.vue
@@ -20,7 +20,9 @@
       <p class="text text-center section-description-max-w">
         {{ t('secure-section.description') }}
       </p>
-      <div class="grid grid-cols-2 md:grid-cols-1 mt-lg">
+      <div
+        class="grid grid-cols-2 md:grid-cols-1 w-full justify-between md:justify-itemscenter"
+      >
         <OutOfBoundariesCard
           v-for="wallet in wallets"
           :key="wallet.title"

diff --git a/components/sections/TutorialsSection.vue b/components/sections/TutorialsSection.vue
@@ -16,7 +16,7 @@
         {{ t('tutorials.description') }}
       </p>
       <div
-        class="grid grid-cols-3 text-black-950 justify-items-center gap-md mt-lg lg:grid-cols-3 md:grid-cols-2 sm:grid-cols-1"
+        class="grid grid-cols-3 text-black-950 justify-between gap-lg w-full mt-lg lg:grid-cols-3 md:grid-cols-2 sm:grid-cols-1"
       >
         <TutorialsSubList
           v-for="tutorialList in tutorials"

diff --git a/layouts/default.vue b/layouts/default.vue
@@ -3,7 +3,7 @@
     class="p-6 w-full grid grid-rows-[max-content_1fr_max-content] bg-white dark:text-wit-blue-500 min-h-screen relative"
   >
     <SocialLinks
-      class="fixed bottom-2xl left-sm-x-screen lg:left-lg md:left-md z-50 h-max w-auto"
+      class="fixed bottom-2xl left-sm-x-screen lg:left-lg md:left-md z-50 h-max w-auto sm:hidden"
     />
     <NuxtLayout name="navbar">
       <TopBar :nav-links="navLinks">

diff --git a/layouts/section.vue b/layouts/section.vue
@@ -19,15 +19,15 @@
     </div>
     <div
       class="sm:hidden"
-      :class="'absolute top-[-16px] left-auto md:hidden w-screen flex justify-center'"
+      :class="'absolute top-[-16px] left-auto w-screen flex justify-center'"
     >
       <slot name="top"></slot>
     </div>
     <div
       class="sm:hidden"
       :class="
         centerLeftContent
-          ? 'absolute top-[50px] right-[0px] md:hidden'
+          ? 'sm:hidden absolute top-[0px] right-[-1px] h-full w-auto flex align-center md:hidden'
           : 'absolute top-[0px] right-sm-x-screen lg:left-lg md:left-md'
       "
     >

diff --git a/locales/en-US.json b/locales/en-US.json
@@ -1,5 +1,5 @@
 {
-  "title": "Witnet 2.0 en-US",
+  "title": "Witnet/Oracle",
   "buy": "Buy",
   "stake": "Stake",
   "build": "Build",
@@ -24,7 +24,7 @@
   "what-is-witnet": {
     "title": {
       "main": "Buidl with confidence: {0}",
-      "witnet": "Witnet 2.0"
+      "witnet": "Wit/Oracle"
     },
     "subtitle": "the Oracle for a {0} {1}",
     "subtitle2": "Censorship-Resistant Future",
@@ -35,11 +35,13 @@
       "main": "Stake{0}",
       "mark": "!"
     },
-    "description1": "Secure the Network, Earn Rewards!",
-    "description1-alt": "Secure the Network, Support the Community!",
+    "description1": "Secure the Network,{0}{1}",
+    "description1-1": "Earn Rewards!",
+    "description1-alt": "Secure the Network,{0}{1}",
+    "description1-1-alt": "Support the Community!",
     "description2": "Secure the network, earn rewards, and be part of a censorship-resistant oracle.",
     "description2-alt": "Contribute the network, be part of a censorship-resistant oracle.",
-    "description3": "Witnet 2.0 is unstoppable.",
+    "description3": "Wit/Oracle is unstoppable.",
     "participate-alt-1": "Wit/2 development is in the final phase, get ready for staking by running a 1.8 node now.",
     "participate-alt-2": "Wit/2 development is in the final phase, get ready for staking by joining the public testnet.",
     "participate": "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!",
@@ -67,7 +69,7 @@
   },
   "buy-section": {
     "title": "Buy $WIT{0}",
-    "description": "$WIT, the native coin of Witnet, is available on trusted and well-known crypto exchanges. By acquiring and staking $WIT, you become a valuable part of the Witnet Community, contributing to the security, growth, and success of the decentralized future with Witnet.",
+    "description": "$WIT, the native coin of Witnet, is available on trusted and well-known crypto exchanges. By acquiring and staking $WIT, you become a valuable part of the Wit/Community, contributing to the security, growth, and success of the decentralized future with Witnet.",
     "exchanges": {
       "gate": "Gate.io",
       "mexc": "MEXC",
@@ -84,7 +86,7 @@
   },
   "build-section": {
     "title": {
-      "key_features": "Why is Witnet great for building{0}",
+      "key_features": "Why Witnet great for building{0}",
       "dot": "?"
     },
     "description": "Learn about the unique features that make Witnet the ultimate solution to sourcing data into smart contracts and blockchains reliably.",

diff --git a/locales/es-ES.json b/locales/es-ES.json
@@ -1,5 +1,5 @@
 {
-  "title": "Witnet 2.0 es-ES",
+  "title": "Wit/Oracle",
   "buy": "Compra",
   "stake": "Stake",
   "build": "Construye",
@@ -24,7 +24,7 @@
   "what-is-witnet": {
     "title": {
       "main": "Construye con confianza: {0}",
-      "witnet": "Witnet 2.0"
+      "witnet": "Wit/Oracle"
     },
     "subtitle": "el Oráculo para un {0} {1}",
     "subtitle2": "Futuro Resistente a la Censura",
@@ -39,7 +39,7 @@
     "description1-alt": "Asegura la Red, Apoya a la Comunidad!",
     "description2": "Asegura la red, gana recompensas y sé parte de un oráculo resistente a la censura.",
     "description2-alt": "Asegura la red y sé parte de un oráculo resistente a la censura.",
-    "description3": "Witnet 2.0 is unstoppable.",
+    "description3": "Wit/Oracle is unstoppable.",
     "participate-alt-1": "Wit/2 development is in the final phase, get ready for staking by running a 1.8 node now.",
     "participate-alt-2": "Wit/2 development is in the final phase, get ready for staking by joining the public testnet.",
     "participate": "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!",

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -108,7 +108,7 @@ export default {
       xs: '4px',
       sm: '8px',
       md: '16px',
-      l: '24px',
+      'md-alt': '24px',
       lg: '32px',
       xl: '40px',
       '2xl': '64px',