Merge pull request #15 from web3privacy/dk/codebase-update

dk/codebase-update

components/Badge.vue

@@ -10,7 +10,15 @@ const emits = defineEmits(['selected'])
   <div
     border-2px
     :class="[inverted ? 'border-app-black bg-app-white hover:bg-app-black text-app-black hover:text-app-white' : 'bg-app-black border-app-white hover:bg-app-white text-app-white hover:text-app-black']"
-    flex items-center justify-center px-24px py-16px font-700 leading-40px cursor-pointer @click="emits('selected')"
+    flex
+    items-center
+    justify-center
+    px-24px
+    py-16px
+    font-700
+    leading-40px
+    cursor-pointer
+    @click="emits('selected')"
   >
     {{ text }}
   </div>

components/Button.vue

@@ -5,13 +5,31 @@ defineProps<{
 </script>
 
 <template>
-  <div flex items-center gap-12px px-12px py-6px cursor-pointer text-app-white :class="[border ? 'border-2px border-app-white' : 'border-0']" hover:text-app-black hover:bg-app-white>
+  <div
+    flex
+    items-center
+    gap-12px
+    px-12px
+    py-6px
+    cursor-pointer
+    text-app-white
+    :class="[border ? 'border-2px border-app-white' : 'border-0']"
+    hover:text-app-black
+    hover:bg-app-white
+  >
     <template v-if="!!$slots.prefix">
       <div text-24px>
-        <slot v-if="!!$slots.prefix" name="prefix" />
+        <slot
+          v-if="!!$slots.prefix"
+          name="prefix"
+        />
       </div>
     </template>
-    <div text="14px" leading-32px font-700>
+    <div
+      text="14px"
+      leading-32px
+      font-700
+    >
       <slot />
     </div>
   </div>

components/Card.vue

@@ -11,63 +11,175 @@ const { switcher } = storeToRefs(useData())
   <NuxtLink
     :to="`/project/${project.id}`"
     :class="switcher ? 'flex-row' : 'lg:flex-col'"
-    flex w-full gap-16px hover:bg="#121212" transition-all
+    flex
+    w-full
+    gap-16px
+    hover:bg="#121212"
+    transition-all
   >
-    <div relative max-w="96px lg:200px" w-full h="96px lg:200px" :class="switcher ? '' : 'lg:max-w-full! lg:w-full '">
+    <div
-      <div flex items-center justify-center w-full my-auto h-full>
+      relative
-        <NuxtImg :src="project?.image || '/no-image-1-1.svg'" class="w-full h-auto" max-h="md:196px 96px" self-center z-10 object-fit bg="#121212" />
+      max-w="96px lg:200px"
+      w-full
+      h="96px lg:200px"
+      :class="switcher ? '' : 'lg:max-w-full! lg:w-full '"
+    >
+      <div
+        flex
+        items-center
+        justify-center
+        w-full
+        my-auto
+        h-full
+      >
+        <NuxtImg
+          :src="project?.image || '/no-image-1-1.svg'"
+          class="w-full h-auto"
+          max-h="md:196px 96px"
+          self-center
+          z-10
+          object-fit
+          bg="#121212"
+        />
       </div>
       <ClientOnly>
         <Badge
           v-if="project.percentage"
-          absolute bottom-0.5 lg:bottom-0 right-0.5 lg:right-0 mr-2px mb-2px
+          absolute
+          bottom-0.5
+          lg:bottom-0
+          right-0.5
+          lg:right-0
+          mr-2px
+          mb-2px
           :text="`${project.percentage}%`"
-          class="leading-12px! text-12px! lg:text-18px! border-0!" px="4px! lg:16px!" py="4px! lg:8px!"
+          class="leading-12px! text-12px! lg:text-18px! border-0!"
+          px="4px! lg:16px!"
+          py="4px! lg:8px!"
         />
       </ClientOnly>
     </div>
-    <div h="96px lg:200px" lg:py-24px lg:pr-24px flex flex-col justify-center lg:justify-between lg:gap-24px w-full text-white :class="switcher ? '' : 'lg:p-16px! lg:py-16px!'">
+    <div
-      <div w-full h-fit flex flex-col gap-8px>
+      h="96px lg:200px"
-        <div w-fit flex items-center gap-8px @click.prevent="navigateTo(project.website, { external: true, open: { target: '_blank' } })">
+      lg:py-24px
-          <h1 text="18px lg:24px app-white" font-700 line-clamp-1 hover:underline underline-offset-3>
+      lg:pr-24px
+      flex
+      flex-col
+      justify-center
+      lg:justify-between
+      lg:gap-24px
+      w-full
+      text-white
+      :class="switcher ? '' : 'lg:p-16px! lg:py-16px!'"
+    >
+      <div
+        w-full
+        h-fit
+        flex
+        flex-col
+        gap-8px
+      >
+        <div
+          w-fit
+          flex
+          items-center
+          gap-8px
+          @click.prevent="navigateTo(project.website, { external: true, open: { target: '_blank' } })"
+        >
+          <h1
+            text="18px lg:24px app-white"
+            font-700
+            line-clamp-1
+            hover:underline
+            underline-offset-3
+          >
             {{ project.title1 }}
           </h1>
-          <UnoIcon i-web-open text-16px />
+          <UnoIcon
+            i-web-open
+            text-16px
+          />
         </div>
-        <h2 text="14px app-text-grey" overflow-hidden text-ellipsis line-clamp-2 lg:line-clamp-2>
+        <h2
+          text="14px app-text-grey"
+          overflow-hidden
+          text-ellipsis
+          line-clamp-2
+          lg:line-clamp-2
+        >
           {{ project.description }}
         </h2>
       </div>
-      <div w-full flex justify-between>
+      <div
-        <div w-full max-w-692px grid whitespace-nowrap :class="switcher ? 'grid-cols-5' : 'grid-cols-3'" gap-24px lg:grid hidden>
+        w-full
+        flex
+        justify-between
+      >
+        <div
+          w-full
+          max-w-692px
+          grid
+          whitespace-nowrap
+          :class="switcher ? 'grid-cols-5' : 'grid-cols-3'"
+          gap-24px
+          lg:grid
+          hidden
+        >
           <ProjectInfoItem
             :check-undefined="project?.github"
             :link="project?.github"
-            title="Github" bold text-size="18px"
+            title="Github"
+            bold
+            text-size="18px"
           >
-            <div flex items-center gap-8px>
+            <div
-              <UnoIcon i-web-github text-16px />
+              flex
+              items-center
+              gap-8px
+            >
+              <UnoIcon
+                i-web-github
+                text-16px
+              />
               <span>{{ project?.github ? 'YES' : 'NO' }}</span>
             </div>
           </ProjectInfoItem>
           <ProjectInfoItem
             :check-undefined="project.readyness"
-            title="Readyness" text-size="18px"
+            title="Readyness"
+            text-size="18px"
           >
-            <div flex items-center gap-12px>
+            <div
-              <UnoIcon i-web-live text-10px :class="(project.readyness === 'Mainnet') ? 'color-#18FF2F' : (project.readyness === 'Testnet') ? 'color-#FFA800' : (project.readyness === 'Alpha') ? 'color-#FF0000' : ''" />
+              flex
+              items-center
+              gap-12px
+            >
+              <UnoIcon
+                i-web-live
+                text-10px
+                :class="(project.readyness === 'Mainnet') ? 'color-#18FF2F' : (project.readyness === 'Testnet') ? 'color-#FFA800' : (project.readyness === 'Alpha') ? 'color-#FF0000' : ''"
+              />
               <span :class="(project.readyness === 'Alpha') ? 'color-#FFA800' : 'color-white'">{{ project.readyness }}</span>
             </div>
           </ProjectInfoItem>
-          <ProjectInfoItem :check-undefined="true" title="Team" text-size="18px">
+          <ProjectInfoItem
+            :check-undefined="true"
+            title="Team"
+            text-size="18px"
+          >
             <span v-if="project.team?.length">{{ `${project.team?.length} members` }}</span>
-            <span v-else color="#FF0000">{{ 'Anonymous' }}</span>
+            <span
+              v-else
+              color="#FF0000"
+            >{{ 'Anonymous' }}</span>
           </ProjectInfoItem>
           <ProjectInfoItem
             :check-undefined="project?.docs"
             :link="project?.docs"
             :color="project?.docs ? '#18FF2F' : '#FF0000'"
-            title="Docs" bold text-size="18px"
+            title="Docs"
+            bold
+            text-size="18px"
           >
             {{ project?.docs ? 'YES' : 'NO' }}
           </ProjectInfoItem>
@@ -75,17 +187,59 @@ const { switcher } = storeToRefs(useData())
             :check-undefined="project.audits"
             :link="project?.audits?.[0]?.link ?? undefined"
             :color="project?.audits ? '#18FF2F' : '#FF0000'"
-            title="Audit" bold text-size="18px"
+            title="Audit"
+            bold
+            text-size="18px"
           >
             {{ project.audits ? 'YES' : 'NO' }}
           </ProjectInfoItem>
         </div>
-        <div hidden lg:flex items-center gap-16px>
+        <div
-          <UnoIcon v-if="project.forum" i-web-forum text-28px opacity-50 hover:opacity-100 @click.prevent="navigateTo(project.forum, { external: true, open: { target: '_blank' } })" />
+          hidden
-          <UnoIcon v-if="project.explorer" i-web-explorer text-32px opacity-50 hover:opacity-100 @click.prevent="navigateTo(project.explorer, { external: true, open: { target: '_blank' } })" />
+          lg:flex
-          <UnoIcon v-if="project.twitter" i-web-twitter_x text-22px opacity-50 hover:opacity-100 @click.prevent="navigateTo(project.twitter, { external: true, open: { target: '_blank' } })" />
+          items-center
-          <UnoIcon v-if="project.coingecko" i-web-coingecko text-24px opacity-50 hover:opacity-100 @click.prevent="navigateTo(project.coingecko, { external: true, open: { target: '_blank' } })" />
+          gap-16px
-          <UnoIcon v-if="project.newsletter" i-web-news text-28px opacity-50 hover:opacity-100 @click.prevent="navigateTo(project.newsletter, { external: true, open: { target: '_blank' } })" />
+        >
+          <UnoIcon
+            v-if="project.forum"
+            i-web-forum
+            text-28px
+            opacity-50
+            hover:opacity-100
+            @click.prevent="navigateTo(project.forum, { external: true, open: { target: '_blank' } })"
+          />
+          <UnoIcon
+            v-if="project.explorer"
+            i-web-explorer
+            text-32px
+            opacity-50
+            hover:opacity-100
+            @click.prevent="navigateTo(project.explorer, { external: true, open: { target: '_blank' } })"
+          />
+          <UnoIcon
+            v-if="project.twitter"
+            i-web-twitter_x
+            text-22px
+            opacity-50
+            hover:opacity-100
+            @click.prevent="navigateTo(project.twitter, { external: true, open: { target: '_blank' } })"
+          />
+          <UnoIcon
+            v-if="project.coingecko"
+            i-web-coingecko
+            text-24px
+            opacity-50
+            hover:opacity-100
+            @click.prevent="navigateTo(project.coingecko, { external: true, open: { target: '_blank' } })"
+          />
+          <UnoIcon
+            v-if="project.newsletter"
+            i-web-news
+            text-28px
+            opacity-50
+            hover:opacity-100
+            @click.prevent="navigateTo(project.newsletter, { external: true, open: { target: '_blank' } })"
+          />
         </div>
       </div>
     </div>

components/Category.vue

@@ -10,9 +10,20 @@ defineProps<{
   <div
     hover:bg-app-bg-grey
     :class="[selected ? 'bg-app-white' : 'bg-transparent']"
-    flex items-center gap-8px py-10px px-16px text-18px font-400 leading-24px cursor-pointer
+    flex
+    items-center
+    gap-8px
+    py-10px
+    px-16px
+    text-18px
+    font-400
+    leading-24px
+    cursor-pointer
   >
-    <h1 hover:text-app-white :class="[selected ? 'text-app-black font-700 opacity-100' : 'text-app-white opacity-50']">
+    <h1
+      hover:text-app-white
+      :class="[selected ? 'text-app-black font-700 opacity-100' : 'text-app-white opacity-50']"
+    >
       {{ title }}
     </h1>
     <p text-app-text-grey>

components/CategorySelectBox.vue

@@ -19,19 +19,26 @@ function onOptionSelected(value: string) {
 </script>
 
 <template>
-  <HeadlessListbox v-model="selectedValue" as="div">
+  <HeadlessListbox
+    v-model="selectedValue"
+    as="div"
+  >
     <div class="relative mt-2 font-700 font-24px">
       <HeadlessListboxButton
         class="relative w-full cursor-pointer py-8px p-16px text-left border-2px text-app-white sm:text-sm sm:leading-6"
       >
         <span class="block truncate mr-8px">{{ isOptionSelected?.label }} <span opacity-50>({{ isOptionSelected?.count }})</span></span>
         <span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
-          <UnoIcon i-heroicons-solid-chevron-down text-app-white />
+          <UnoIcon
+            i-heroicons-solid-chevron-down
+            text-app-white
+          />
         </span>
       </HeadlessListboxButton>
 
       <transition
-        leave-active-class="transition ease-in duration-100" leave-from-class="opacity-100"
+        leave-active-class="transition ease-in duration-100"
+        leave-from-class="opacity-100"
         leave-to-class="opacity-0"
       >
         <HeadlessListboxOptions
@@ -39,14 +46,20 @@ function onOptionSelected(value: string) {
         >
           <HeadlessListboxOption
             v-for="option in props.options"
-            :key="option.value" v-slot="{ active, selected }" as="template"
+            :key="option.value"
-            :value="option.value" @click="onOptionSelected(option.value)"
+            v-slot="{ active, selected }"
+            as="template"
+            :value="option.value"
+            @click="onOptionSelected(option.value)"
           >
             <li
               class="w-full relative cursor-pointer select-none py-8px p-16px"
               :class="[active ? 'bg-#ffffff1a' : 'text-white']"
             >
-              <span class="block truncate" :class="[selected ? 'font-semibold' : 'font-normal']">
+              <span
+                class="block truncate"
+                :class="[selected ? 'font-semibold' : 'font-normal']"
+              >
                 {{ option.label }}
                 <span opacity-50>({{ option.count }})</span>
               </span>

components/EditButton.vue

@@ -5,8 +5,16 @@ defineProps<{
 </script>
 
 <template>
-  <NuxtLink :to="to" flex gap-12px target="_blank">
+  <NuxtLink
-    <UnoIcon i-heroicons-solid-pencil text-24px />
+    :to="to"
+    flex
+    gap-12px
+    target="_blank"
+  >
+    <UnoIcon
+      i-heroicons-solid-pencil
+      text-24px
+    />
     <slot />
   </NuxtLink>
 </template>

components/Footer.vue

@@ -4,66 +4,239 @@
 <template>
   <div app-container>
     <div mt-48px>
-      <hr border-t-2px border-white opacity-10 w-full>
+      <hr
+        border-t-2px
+        border-white
+        opacity-10
+        w-full
+      >
     </div>
-    <div p-24px flex items-center>
+    <div
-      <div shrink-0 flex gap-32px justify-start>
+      p-24px
-        <NuxtImg src="/logo.svg" max-w-120px sm:w-160px cursor-pointer @click="navigateTo('/')" />
+      flex
+      items-center
+    >
+      <div
+        shrink-0
+        flex
+        gap-32px
+        justify-start
+      >
+        <NuxtImg
+          src="/logo.svg"
+          max-w-120px
+          sm:w-160px
+          cursor-pointer
+          @click="navigateTo('/')"
+        />
       </div>
-      <div w-full h-fit flex justify-end items-center gap-16px sm:gap-32px mt-0>
+      <div
-        <NuxtLink to="https://twitter.com/web3privacy" target="_blank" flex items-center gap-12px>
+        w-full
-          <UnoIcon i-web-twitter_x opacity-50 text-22px />
+        h-fit
-          <span hover:underline hidden lg:block text-16px>{{ '@web3privacy' }}</span>
+        flex
+        justify-end
+        items-center
+        gap-16px
+        sm:gap-32px
+        mt-0
+      >
+        <NuxtLink
+          to="https://twitter.com/web3privacy"
+          target="_blank"
+          flex
+          items-center
+          gap-12px
+        >
+          <UnoIcon
+            i-web-twitter_x
+            opacity-50
+            text-22px
+          />
+          <span
+            hover:underline
+            hidden
+            lg:block
+            text-16px
+          >{{ '@web3privacy' }}</span>
         </NuxtLink>
-        <NuxtLink to="https://t.me/web3privacynow" target="_blank" flex items-center gap-12px>
+        <NuxtLink
-          <UnoIcon i-web-telegram1 opacity-50 text-24px />
+          to="https://t.me/web3privacynow"
-          <span hover:underline hidden lg:block text-16px>{{ 'Telegram' }}</span>
+          target="_blank"
+          flex
+          items-center
+          gap-12px
+        >
+          <UnoIcon
+            i-web-telegram1
+            opacity-50
+            text-24px
+          />
+          <span
+            hover:underline
+            hidden
+            lg:block
+            text-16px
+          >{{ 'Telegram' }}</span>
         </NuxtLink>
-        <NuxtLink to="https://matrix.web3privacy.info/" target="_blank" flex items-center gap-12px>
+        <NuxtLink
-          <UnoIcon i-web-matrix opacity-50 text-24px />
+          to="https://matrix.web3privacy.info/"
-          <span hover:underline hidden lg:block text-16px>{{ 'Matrix' }}</span>
+          target="_blank"
+          flex
+          items-center
+          gap-12px
+        >
+          <UnoIcon
+            i-web-matrix
+            opacity-50
+            text-24px
+          />
+          <span
+            hover:underline
+            hidden
+            lg:block
+            text-16px
+          >{{ 'Matrix' }}</span>
         </NuxtLink>
-        <NuxtLink to="https://github.com/web3privacy" target="_blank" flex items-center gap-12px>
+        <NuxtLink
-          <UnoIcon i-web-github opacity-50 text-24px />
+          to="https://github.com/web3privacy"
-          <span hover:underline hidden lg:block text-16px>{{ 'GitHub' }}</span>
+          target="_blank"
+          flex
+          items-center
+          gap-12px
+        >
+          <UnoIcon
+            i-web-github
+            opacity-50
+            text-24px
+          />
+          <span
+            hover:underline
+            hidden
+            lg:block
+            text-16px
+          >{{ 'GitHub' }}</span>
         </NuxtLink>
       </div>
     </div>
-    <div text="14px sm:16px" px-24px grid grid-cols-2 sm:grid-cols-3 gap-16px mt-32px mb-16px>
+    <div
-      <NuxtLink to="https://docs.web3privacy.info/manifesto" opacity-50 hover:underline>
+      text="14px sm:16px"
+      px-24px
+      grid
+      grid-cols-2
+      sm:grid-cols-3
+      gap-16px
+      mt-32px
+      mb-16px
+    >
+      <NuxtLink
+        to="https://docs.web3privacy.info/manifesto"
+        opacity-50
+        hover:underline
+      >
         {{ 'Manifesto' }}
       </NuxtLink>
-      <NuxtLink to="https://docs.web3privacy.info/get-involved" opacity-50 hover:underline>
+      <NuxtLink
+        to="https://docs.web3privacy.info/get-involved"
+        opacity-50
+        hover:underline
+      >
         {{ 'How to get involved' }}
       </NuxtLink>
-      <NuxtLink to="https://github.com/web3privacy/grants" opacity-50 hover:underline>
+      <NuxtLink
+        to="https://github.com/web3privacy/grants"
+        opacity-50
+        hover:underline
+      >
         {{ 'Grants /  Support Us' }}
       </NuxtLink>
-      <NuxtLink to="https://web3privacy.info/events" opacity-50 hover:underline>
+      <NuxtLink
+        to="https://web3privacy.info/events"
+        opacity-50
+        hover:underline
+      >
         {{ 'Events' }}
       </NuxtLink>
-      <NuxtLink to="https://mirror.xyz/0x0f1F3DAf416B74DB3DE55Eb4D7513a80F4841073/" opacity-50 hover:underline>
+      <NuxtLink
+        to="https://mirror.xyz/0x0f1F3DAf416B74DB3DE55Eb4D7513a80F4841073/"
+        opacity-50
+        hover:underline
+      >
         {{ 'Articles' }}
       </NuxtLink>
-      <NuxtLink to="https://docs.web3privacy.info/events/" opacity-50 hover:underline>
+      <NuxtLink
+        to="https://docs.web3privacy.info/events/"
+        opacity-50
+        hover:underline
+      >
         {{ 'Talks' }}
       </NuxtLink>
-      <NuxtLink to="https://docs.web3privacy.info/projects/privacy-explorer/" opacity-50 hover:underline>
+      <NuxtLink
+        to="https://docs.web3privacy.info/projects/privacy-explorer/"
+        opacity-50
+        hover:underline
+      >
         {{ 'Privacy Explorer' }}
       </NuxtLink>
-      <NuxtLink to="https://github.com/web3privacy/web3privacy" opacity-50 hover:underline>
+      <NuxtLink
+        to="https://github.com/web3privacy/web3privacy"
+        opacity-50
+        hover:underline
+      >
         {{ 'Privacy database' }}
       </NuxtLink>
     </div>
-    <hr block sm:hidden border-t-2px border-white opacity-10 w-full>
+    <hr
-    <div px-24px my-16px sm:mt-32px flex flex-col sm:flex-row w-full items-center justify-between gap-18px>
+      block
-      <a w-full opacity-50 text-14px leading-24px font-400>{{ 'All rights not reserved,  Creative commons 2024 - Web3Privacy z.s.' }}</a>
+      sm:hidden
-      <div w-full sm:w-fit sm:justify-end items-center flex flex-row gap-6px>
+      border-t-2px
-        <span text-14px text-app-text-grey whitespace-nowrap>{{ 'Developed by' }}</span>
+      border-white
+      opacity-10
+      w-full
+    >
+    <div
+      px-24px
+      my-16px
+      sm:mt-32px
+      flex
+      flex-col
+      sm:flex-row
+      w-full
+      items-center
+      justify-between
+      gap-18px
+    >
+      <a
+        w-full
+        opacity-50
+        text-14px
+        leading-24px
+        font-400
+      >{{ 'All rights not reserved,  Creative commons 2024 - Web3Privacy z.s.' }}</a>
+      <div
+        w-full
+        sm:w-fit
+        sm:justify-end
+        items-center
+        flex
+        flex-row
+        gap-6px
+      >
+        <span
+          text-14px
+          text-app-text-grey
+          whitespace-nowrap
+        >{{ 'Developed by' }}</span>
         <div
           shrink-0
-          bg="[url(/develit-logo-white.svg)]" duration-300 bg-no-repeat bg-center
+          bg="[url(/develit-logo-white.svg)]"
-          cursor-pointer w-full max-w-104px h-32px hover:bg="[url(/develit-logo-color.svg)]"
+          duration-300
+          bg-no-repeat
+          bg-center
+          cursor-pointer
+          w-full
+          max-w-104px
+          h-32px
+          hover:bg="[url(/develit-logo-color.svg)]"
           @click="navigateTo('https://develit.io/', { external: true })"
         />
       </div>

components/Helper.vue

@@ -6,8 +6,14 @@ defineProps<{
 
 <template>
   <div relative>
-    <button class="peer" type="button">
+    <button
-      <UnoIcon i-heroicons-solid-information-circle class="w-20px h-20px opacity-50 hover:opacity-100 text-app-white" />
+      class="peer"
+      type="button"
+    >
+      <UnoIcon
+        i-heroicons-solid-information-circle
+        class="w-20px h-20px opacity-50 hover:opacity-100 text-app-white"
+      />
     </button>
     <div
       class="peer-hover:visible top-20px left-20px absolute invisible z-100 inline-block px-3 py-2 text-sm font-medium text-app-black bg-app-white"

components/MenuItem.vue

@@ -6,7 +6,14 @@ defineProps<{
 </script>
 
 <template>
-  <NuxtLink text-14px hover:text-app-white leading-32px uppercase cursor-pointer :class="[selected ? 'text-app-white  font-700 underline underline-offset-4px hover:no-underline' : 'text-app-text-grey font-500']">
+  <NuxtLink
+    text-14px
+    hover:text-app-white
+    leading-32px
+    uppercase
+    cursor-pointer
+    :class="[selected ? 'text-app-white  font-700 underline underline-offset-4px hover:no-underline' : 'text-app-text-grey font-500']"
+  >
     {{ title }}
   </NuxtLink>
 </template>

components/Navigation.vue

@@ -19,89 +19,391 @@ watch(y, (newY, oldY) => {
 </script>
 
 <template>
-  <div v-if="showMenu" w-full flex flex-col items-center>
+  <div
-    <NuxtLink to="https://web3privacy.info/" bg-black hover:bg-white w-full text-center justify-center py-14px cursor-pointer text-app-text-grey class="hover:text-black" hover:underline underline-offset-1 text-16px font-400 uppercase>
+    v-if="showMenu"
+    w-full
+    flex
+    flex-col
+    items-center
+  >
+    <NuxtLink
+      to="https://web3privacy.info/"
+      bg-black
+      hover:bg-white
+      w-full
+      text-center
+      justify-center
+      py-14px
+      cursor-pointer
+      text-app-text-grey
+      class="hover:text-black"
+      hover:underline
+      underline-offset-1
+      text-16px
+      font-400
+      uppercase
+    >
       HOME
     </NuxtLink>
-    <NuxtLink bg-black hover:bg-white w-full text-center justify-center py-14px cursor-pointer text-white class="hover:text-black" hover:underline underline-offset-1 text-16px font-400 to="/">
+    <NuxtLink
+      bg-black
+      hover:bg-white
+      w-full
+      text-center
+      justify-center
+      py-14px
+      cursor-pointer
+      text-white
+      class="hover:text-black"
+      hover:underline
+      underline-offset-1
+      text-16px
+      font-400
+      to="/"
+    >
       PROJECTS
     </NuxtLink>
-    <NuxtLink to="https://web3privacy.info/events/" bg-black hover:bg-white w-full text-center justify-center py-14px cursor-pointer text-app-text-grey class="hover:text-black" hover:underline underline-offset-1 text-16px font-400 uppercase>
+    <NuxtLink
+      to="https://web3privacy.info/events/"
+      bg-black
+      hover:bg-white
+      w-full
+      text-center
+      justify-center
+      py-14px
+      cursor-pointer
+      text-app-text-grey
+      class="hover:text-black"
+      hover:underline
+      underline-offset-1
+      text-16px
+      font-400
+      uppercase
+    >
       EVENTS
     </NuxtLink>
-    <NuxtLink bg-black hover:bg-white w-full justify-center to="https://mirror.xyz/0x0f1F3DAf416B74DB3DE55Eb4D7513a80F4841073/" flex items-center py-14px cursor-pointer text-app-text-grey class="hover:text-black" hover:underline underline-offset-1 text-16px font-400 uppercase>
+    <NuxtLink
+      bg-black
+      hover:bg-white
+      w-full
+      justify-center
+      to="https://mirror.xyz/0x0f1F3DAf416B74DB3DE55Eb4D7513a80F4841073/"
+      flex
+      items-center
+      py-14px
+      cursor-pointer
+      text-app-text-grey
+      class="hover:text-black"
+      hover:underline
+      underline-offset-1
+      text-16px
+      font-400
+      uppercase
+    >
       ARTICLES
-      <UnoIcon ml-10px i-web-open1 text-11px />
+      <UnoIcon
+        ml-10px
+        i-web-open1
+        text-11px
+      />
     </NuxtLink>
-    <NuxtLink bg-black hover:bg-white w-full justify-center to="https://docs.web3privacy.info/" flex items-center py-14px cursor-pointer text-app-text-grey class="hover:text-black" hover:underline underline-offset-1 text-16px font-400 uppercase>
+    <NuxtLink
+      bg-black
+      hover:bg-white
+      w-full
+      justify-center
+      to="https://docs.web3privacy.info/"
+      flex
+      items-center
+      py-14px
+      cursor-pointer
+      text-app-text-grey
+      class="hover:text-black"
+      hover:underline
+      underline-offset-1
+      text-16px
+      font-400
+      uppercase
+    >
       DOCS
-      <UnoIcon ml-10px i-web-open1 text-11px />
+      <UnoIcon
+        ml-10px
+        i-web-open1
+        text-11px
+      />
     </NuxtLink>
   </div>
-  <div w-full sticky md:relative top-0 z-100 bg-black lg:bg-app-bg-dark_grey>
+  <div
-    <div v-if="!isProjectRoute" relative app-container w-full h-full>
+    w-full
+    sticky
+    md:relative
+    top-0
+    z-100
+    bg-black
+    lg:bg-app-bg-dark_grey
+  >
+    <div
+      v-if="!isProjectRoute"
+      relative
+      app-container
+      w-full
+      h-full
+    >
       <img
-        absolute w-full h-167px sm:h-207px md:h-303px object-cover src="/web3privacy_eye.webp" z-101
+        absolute
+        w-full
+        h-167px
+        sm:h-207px
+        md:h-303px
+        object-cover
+        src="/web3privacy_eye.webp"
+        z-101
         class="object-pos-custom left--11% top-0 max-w-250px sm:max-w-335px md:max-w-588px"
-        :class="[(!showText && width < 768) ? 'opacity-0' : 'opacity-10', (!showText && width < 768) ? 'translate-y--128px' : 'translate-y-0px']" duration-200ms
+        :class="[(!showText && width < 768) ? 'opacity-0' : 'opacity-10', (!showText && width < 768) ? 'translate-y--128px' : 'translate-y-0px']"
+        duration-200ms
       >
     </div>
-    <div app-container flex items-center justify-between h-80px py-6 gap-24px>
+    <div
-      <div flex gap-16px w-full relative z-105>
+      app-container
-        <UnoIcon shrink-0 i-web-hamburger text-24px lg:hidden @click="showMenu ? showMenu = false : showMenu = true" />
+      flex
-        <NuxtImg max-w-160px w-full src="/logo.svg" cursor-pointer @click="navigateTo('/')" />
+      items-center
+      justify-between
+      h-80px
+      py-6
+      gap-24px
+    >
+      <div
+        flex
+        gap-16px
+        w-full
+        relative
+        z-105
+      >
+        <UnoIcon
+          shrink-0
+          i-web-hamburger
+          text-24px
+          lg:hidden
+          @click="showMenu ? showMenu = false : showMenu = true"
+        />
+        <NuxtImg
+          max-w-160px
+          w-full
+          src="/logo.svg"
+          cursor-pointer
+          @click="navigateTo('/')"
+        />
       </div>
-      <div hidden lg:flex items-center justify-center>
+      <div
-        <NuxtLink to="https://web3privacy.info/" py-2 px-4 cursor-pointer text-app-text-grey class="hover:text-[#c2c2c2]" hover:underline underline-offset-1 text-16px font-400 uppercase>
+        hidden
+        lg:flex
+        items-center
+        justify-center
+      >
+        <NuxtLink
+          to="https://web3privacy.info/"
+          py-2
+          px-4
+          cursor-pointer
+          text-app-text-grey
+          class="hover:text-[#c2c2c2]"
+          hover:underline
+          underline-offset-1
+          text-16px
+          font-400
+          uppercase
+        >
           HOME
         </NuxtLink>
-        <NuxtLink py-2 px-4 cursor-pointer text-white class="hover:text-[#c2c2c2]" hover:underline underline-offset-1 text-16px font-400 to="/">
+        <NuxtLink
+          py-2
+          px-4
+          cursor-pointer
+          text-white
+          class="hover:text-[#c2c2c2]"
+          hover:underline
+          underline-offset-1
+          text-16px
+          font-400
+          to="/"
+        >
           DASHBOARD
         </NuxtLink>
-        <NuxtLink to="https://web3privacy.info/events/" py-2 px-4 cursor-pointer text-app-text-grey class="hover:text-[#c2c2c2]" hover:underline underline-offset-1 text-16px font-400 uppercase>
+        <NuxtLink
+          to="https://web3privacy.info/events/"
+          py-2
+          px-4
+          cursor-pointer
+          text-app-text-grey
+          class="hover:text-[#c2c2c2]"
+          hover:underline
+          underline-offset-1
+          text-16px
+          font-400
+          uppercase
+        >
           EVENTS
         </NuxtLink>
-        <NuxtLink to="https://mirror.xyz/0x0f1F3DAf416B74DB3DE55Eb4D7513a80F4841073/" flex items-center py-2 px-4 cursor-pointer text-app-text-grey class="hover:text-[#c2c2c2]" hover:underline underline-offset-1 text-16px font-400 uppercase>
+        <NuxtLink
+          to="https://mirror.xyz/0x0f1F3DAf416B74DB3DE55Eb4D7513a80F4841073/"
+          flex
+          items-center
+          py-2
+          px-4
+          cursor-pointer
+          text-app-text-grey
+          class="hover:text-[#c2c2c2]"
+          hover:underline
+          underline-offset-1
+          text-16px
+          font-400
+          uppercase
+        >
           ARTICLES
-          <UnoIcon ml-10px i-web-open1 text-11px />
+          <UnoIcon
+            ml-10px
+            i-web-open1
+            text-11px
+          />
         </NuxtLink>
-        <NuxtLink to="https://docs.web3privacy.info/" flex items-center py-2 px-4 cursor-pointer text-app-text-grey class="hover:text-[#c2c2c2]" hover:underline underline-offset-1 text-16px font-400 uppercase>
+        <NuxtLink
+          to="https://docs.web3privacy.info/"
+          flex
+          items-center
+          py-2
+          px-4
+          cursor-pointer
+          text-app-text-grey
+          class="hover:text-[#c2c2c2]"
+          hover:underline
+          underline-offset-1
+          text-16px
+          font-400
+          uppercase
+        >
           DOCS
-          <UnoIcon ml-10px i-web-open1 text-11px />
+          <UnoIcon
+            ml-10px
+            i-web-open1
+            text-11px
+          />
         </NuxtLink>
       </div>
-      <div w-full h-full flex justify-end items-start lg:grow-0 gap-3 lg:gap-6 pt-1 lg:pt-2.5>
+      <div
+        w-full
+        h-full
+        flex
+        justify-end
+        items-start
+        lg:grow-0
+        gap-3
+        lg:gap-6
+        pt-1
+        lg:pt-2.5
+      >
         <NuxtLink to="https://twitter.com/web3privacy">
-          <UnoIcon target="_blank" i-web-twitter_x text-18px sm:text-24px opacity-50 hover:opacity-100 />
+          <UnoIcon
+            target="_blank"
+            i-web-twitter_x
+            text-18px
+            sm:text-24px
+            opacity-50
+            hover:opacity-100
+          />
         </NuxtLink>
         <NuxtLink to="https://t.me/web3privacynow">
-          <UnoIcon target="_blank" i-web-telegram1 text-20px sm:text-24px opacity-50 hover:opacity-100 />
+          <UnoIcon
+            target="_blank"
+            i-web-telegram1
+            text-20px
+            sm:text-24px
+            opacity-50
+            hover:opacity-100
+          />
         </NuxtLink>
         <NuxtLink to="https://matrix.to/#/#web3privacy:gwei.cz">
-          <UnoIcon target="_blank" i-web-matrix text-20px sm:text-24px opacity-50 hover:opacity-100 />
+          <UnoIcon
+            target="_blank"
+            i-web-matrix
+            text-20px
+            sm:text-24px
+            opacity-50
+            hover:opacity-100
+          />
         </NuxtLink>
-        <NuxtLink to="https://github.com/web3privacy" target="_blank">
+        <NuxtLink
-          <UnoIcon i-web-github text-20px sm:text-24px opacity-50 hover:opacity-100 />
+          to="https://github.com/web3privacy"
+          target="_blank"
+        >
+          <UnoIcon
+            i-web-github
+            text-20px
+            sm:text-24px
+            opacity-50
+            hover:opacity-100
+          />
         </NuxtLink>
       </div>
     </div>
   </div>
   <div
-    v-if="isProjectRoute" top-96px z-99 sticky md:static
+    v-if="isProjectRoute"
-    :class="[(!showBar && width < 768) ? 'translate-y--128px' : 'translate-y-0px']" duration-200ms
+    top-96px
+    z-99
+    sticky
+    md:static
+    :class="[(!showBar && width < 768) ? 'translate-y--128px' : 'translate-y-0px']"
+    duration-200ms
   >
     <ProjectNavigation md:mt-16px />
   </div>
-  <div v-else bg-black lg:bg-app-bg-dark_grey>
+  <div
+    v-else
+    bg-black
+    lg:bg-app-bg-dark_grey
+  >
     <div
-      app-container flex items-center gap-32px pb-16px pt-16px sm:pb-32px
+      app-container
+      flex
+      items-center
+      gap-32px
+      pb-16px
+      pt-16px
+      sm:pb-32px
     >
-      <div w-full flex flex-col items-center :class="[!showText && width < 768 ? 'opacity-0' : 'opacity-100']" duration-200ms relative z-101>
+      <div
-        <img src="/explorer.webp" max-w-155px sm:max-w-342px>
+        w-full
-        <p mt-24px hidden md:block text-14px text-center font-400 leading-24px text-app-text-grey>
+        flex
+        flex-col
+        items-center
+        :class="[!showText && width < 768 ? 'opacity-0' : 'opacity-100']"
+        duration-200ms
+        relative
+        z-101
+      >
+        <img
+          src="/explorer.webp"
+          max-w-155px
+          sm:max-w-342px
+        >
+        <p
+          mt-24px
+          hidden
+          md:block
+          text-14px
+          text-center
+          font-400
+          leading-24px
+          text-app-text-grey
+        >
           {{ 'There are challenges in finding crucial technical details and comparing various privacy-focused projects.' }}<br>
           {{ 'To address this, we created a platform that standardizes and expands the current ' }}
-          <NuxtLink to="https://web3privacy.info/" target="_blank" underline text-white>
+          <NuxtLink
+            to="https://web3privacy.info/"
+            target="_blank"
+            underline
+            text-white
+          >
             {{ 'Web3Privacy ecosystem research.' }}
           </NuxtLink><br>
           {{ 'Our goal is to make this valuable information accessible to the wider Web3 community.' }}
@@ -109,10 +411,19 @@ watch(y, (newY, oldY) => {
         <NuxtLink
           to="https://github.com/web3privacy/privacy-projects-db"
           target="_blank"
-          mt-12px flex text-14px items-center gap-8px sm:text-16px hover:underline
+          mt-12px
+          flex
+          text-14px
+          items-center
+          gap-8px
+          sm:text-16px
+          hover:underline
         >
           {{ 'Learn how to contribute' }}
-          <UnoIcon i-heroicons-solid-arrow-right text-24px />
+          <UnoIcon
+            i-heroicons-solid-arrow-right
+            text-24px
+          />
         </NuxtLink>
       </div>
     </div>

components/NavigationButton.vue

@@ -3,9 +3,28 @@
 </script>
 
 <template>
-  <NuxtLink w-fit px-16px py-8px flex items-center gap-12px text-app-white hover:text-app-black hover:bg-app-white uppercase cursor-pointer>
+  <NuxtLink
-    <UnoIcon i-heroicons-solid-arrow-left text-24px />
+    w-fit
-    <div text="16px" leading-24px font-400>
+    px-16px
+    py-8px
+    flex
+    items-center
+    gap-12px
+    text-app-white
+    hover:text-app-black
+    hover:bg-app-white
+    uppercase
+    cursor-pointer
+  >
+    <UnoIcon
+      i-heroicons-solid-arrow-left
+      text-24px
+    />
+    <div
+      text="16px"
+      leading-24px
+      font-400
+    >
       <slot />
     </div>
   </NuxtLink>

components/Project/ProjectActivity.vue

@@ -7,11 +7,20 @@ defineProps<{
 </script>
 
 <template>
-  <ProjectDetailCategoryDivider title="ACTIVITY" badge-text="3/10">
+  <ProjectDetailCategoryDivider
-    <UnoIcon i-web-code_v2 text-24px />
+    title="ACTIVITY"
+    badge-text="3/10"
+  >
+    <UnoIcon
+      i-web-code_v2
+      text-24px
+    />
   </ProjectDetailCategoryDivider>
   <ProjectDetailContainer>
-    <div lg:flex lg:justify-between>
+    <div
+      lg:flex
+      lg:justify-between
+    >
       <div mt-32px>
         <ProjectActivityLaunch
           v-if="project.history"
@@ -21,9 +30,22 @@ defineProps<{
           :to="project.history?.link"
         />
       </div>
-      <div flex flex-col gap-24px mt-16px>
+      <div
-        <ProjectActivityGithub :active-devs="13" last-commit="26/11/2022" :stars="45" />
+        flex
-        <ProjectActivityTwitter :followers="13" posts="26/11/202" :retweets="1654" />
+        flex-col
+        gap-24px
+        mt-16px
+      >
+        <ProjectActivityGithub
+          :active-devs="13"
+          last-commit="26/11/2022"
+          :stars="45"
+        />
+        <ProjectActivityTwitter
+          :followers="13"
+          posts="26/11/202"
+          :retweets="1654"
+        />
       </div>
     </div>
   </ProjectDetailContainer>

components/Project/ProjectActivityGithub.vue

@@ -7,23 +7,85 @@ defineProps<{
 </script>
 
 <template>
-  <div relative grid grid-cols-2 border-2px gap-y-8px gap-x-32px p-24px lg:grid-cols-3>
+  <div
-    <h1 px-8px text-14px font-700 bg-black absolute top--10px left-16px>
+    relative
+    grid
+    grid-cols-2
+    border-2px
+    gap-y-8px
+    gap-x-32px
+    p-24px
+    lg:grid-cols-3
+  >
+    <h1
+      px-8px
+      text-14px
+      font-700
+      bg-black
+      absolute
+      top--10px
+      left-16px
+    >
       {{ 'GITHUB ACTIVITY' }}
     </h1>
-    <div flex flex-col>
+    <div
-      <span text-14px font-400 text-app-text-grey leading-24px>{{ 'Active Developers' }}</span>
+      flex
-      <span text-14px font-700 leading-24px>{{ activeDevs }}</span>
+      flex-col
+    >
+      <span
+        text-14px
+        font-400
+        text-app-text-grey
+        leading-24px
+      >{{ 'Active Developers' }}</span>
+      <span
+        text-14px
+        font-700
+        leading-24px
+      >{{ activeDevs }}</span>
     </div>
-    <div flex flex-col>
+    <div
-      <span text-14px font-400 text-app-text-grey leading-24px>{{ 'Last commit' }}</span>
+      flex
-      <span text-14px font-700 leading-24px>{{ lastCommit }}</span>
+      flex-col
+    >
+      <span
+        text-14px
+        font-400
+        text-app-text-grey
+        leading-24px
+      >{{ 'Last commit' }}</span>
+      <span
+        text-14px
+        font-700
+        leading-24px
+      >{{ lastCommit }}</span>
     </div>
-    <div flex gap-6px lg:flex-col lg:gap-0>
+    <div
-      <span text-14px font-400 text-app-text-grey leading-24px>{{ 'Github stars' }}</span>
+      flex
-      <div flex items-center gap-4px>
+      gap-6px
-        <UnoIcon i-web-star text-16px />
+      lg:flex-col
-        <span text-14px font-400 leading-24px>{{ stars }}</span>
+      lg:gap-0
+    >
+      <span
+        text-14px
+        font-400
+        text-app-text-grey
+        leading-24px
+      >{{ 'Github stars' }}</span>
+      <div
+        flex
+        items-center
+        gap-4px
+      >
+        <UnoIcon
+          i-web-star
+          text-16px
+        />
+        <span
+          text-14px
+          font-400
+          leading-24px
+        >{{ stars }}</span>
       </div>
     </div>
   </div>

components/Project/ProjectActivityLaunch.vue

@@ -8,28 +8,86 @@ defineProps<{
 </script>
 
 <template>
-  <div flex items-start gap-18px>
+  <div
-    <svg width="30" height="153" viewBox="0 0 30 153" fill="none" xmlns="http://www.w3.org/2000/svg">
+    flex
-      <path d="M12.5002 5.01788L12.5012 149.5" stroke="white" stroke-dasharray="1 4" />
+    items-start
-      <circle cx="13" cy="6" r="6" fill="white" />
+    gap-18px
-      <rect y="129" width="30" height="24" fill="url(#paint0_linear_558_22)" />
+  >
+    <svg
+      width="30"
+      height="153"
+      viewBox="0 0 30 153"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12.5002 5.01788L12.5012 149.5"
+        stroke="white"
+        stroke-dasharray="1 4"
+      />
+      <circle
+        cx="13"
+        cy="6"
+        r="6"
+        fill="white"
+      />
+      <rect
+        y="129"
+        width="30"
+        height="24"
+        fill="url(#paint0_linear_558_22)"
+      />
       <defs>
-        <linearGradient id="paint0_linear_558_22" x1="15" y1="129" x2="15" y2="150.5" gradientUnits="userSpaceOnUse">
+        <linearGradient
+          id="paint0_linear_558_22"
+          x1="15"
+          y1="129"
+          x2="15"
+          y2="150.5"
+          gradientUnits="userSpaceOnUse"
+        >
           <stop stop-opacity="0" />
           <stop offset="1" />
         </linearGradient>
       </defs>
     </svg>
-    <div flex flex-col gap-8px>
+    <div
-      <div flex flex-col>
+      flex
-        <span text-14px font-700>{{ network }}</span>
+      flex-col
-        <span text-14px font-400>{{ date }}</span>
+      gap-8px
+    >
+      <div
+        flex
+        flex-col
+      >
+        <span
+          text-14px
+          font-700
+        >{{ network }}</span>
+        <span
+          text-14px
+          font-400
+        >{{ date }}</span>
       </div>
-      <div flex flex-col>
+      <div
-        <span text-14px font-400>{{ 'Launch' }}</span>
+        flex
-        <span text-14px font-400 text-app-text-grey>{{ launchType }}</span>
+        flex-col
+      >
+        <span
+          text-14px
+          font-400
+        >{{ 'Launch' }}</span>
+        <span
+          text-14px
+          font-400
+          text-app-text-grey
+        >{{ launchType }}</span>
       </div>
-      <NuxtLink underline underline-offset-4 :to="to">
+      <NuxtLink
+        underline
+        underline-offset-4
+        :to="to"
+      >
         {{ 'Learn more' }}
       </NuxtLink>
     </div>

components/Project/ProjectActivityTwitter.vue

@@ -7,22 +7,81 @@ defineProps<{
 </script>
 
 <template>
-  <div relative grid grid-cols-2 border-2px gap-y-8px gap-x-32px p-24px lg-grid-cols-3>
+  <div
-    <h1 px-8px text-14px font-700 bg-black absolute top--10px left-16px>
+    relative
+    grid
+    grid-cols-2
+    border-2px
+    gap-y-8px
+    gap-x-32px
+    p-24px
+    lg-grid-cols-3
+  >
+    <h1
+      px-8px
+      text-14px
+      font-700
+      bg-black
+      absolute
+      top--10px
+      left-16px
+    >
       {{ 'TWITTER ACTIVITY' }}
     </h1>
-    <div flex flex-col>
+    <div
-      <span text-14px font-400 text-app-text-grey leading-24px>{{ 'Followers #' }}</span>
+      flex
-      <span text-14px font-700 leading-24px>{{ followers }}</span>
+      flex-col
+    >
+      <span
+        text-14px
+        font-400
+        text-app-text-grey
+        leading-24px
+      >{{ 'Followers #' }}</span>
+      <span
+        text-14px
+        font-700
+        leading-24px
+      >{{ followers }}</span>
     </div>
-    <div flex flex-col>
+    <div
-      <span text-14px font-400 text-app-text-grey leading-24px>{{ 'Posts' }}</span>
+      flex
-      <span text-14px font-700 leading-24px>{{ posts }}</span>
+      flex-col
+    >
+      <span
+        text-14px
+        font-400
+        text-app-text-grey
+        leading-24px
+      >{{ 'Posts' }}</span>
+      <span
+        text-14px
+        font-700
+        leading-24px
+      >{{ posts }}</span>
     </div>
-    <div flex gap-6px lg:flex-col lg:gap-0>
+    <div
-      <span text-14px font-400 text-app-text-grey leading-24px>{{ 'Retweets' }}</span>
+      flex
-      <div flex items-center gap-4px>
+      gap-6px
-        <span text-14px font-400 leading-24px>{{ retweets }}x</span>
+      lg:flex-col
+      lg:gap-0
+    >
+      <span
+        text-14px
+        font-400
+        text-app-text-grey
+        leading-24px
+      >{{ 'Retweets' }}</span>
+      <div
+        flex
+        items-center
+        gap-4px
+      >
+        <span
+          text-14px
+          font-400
+          leading-24px
+        >{{ retweets }}x</span>
       </div>
     </div>
   </div>

components/Project/ProjectDetailCategoryDivider.vue

@@ -6,13 +6,37 @@ defineProps<{
 </script>
 
 <template>
-  <div w-full flex justify-between gap-8px lg:gap-32px mt-36px>
+  <div
-    <div flex items-center gap-8px text-16px font-700 lg:max-w-320px lg:w-full lg:justify-end>
+    w-full
+    flex
+    justify-between
+    gap-8px
+    lg:gap-32px
+    mt-36px
+  >
+    <div
+      flex
+      items-center
+      gap-8px
+      text-16px
+      font-700
+      lg:max-w-320px
+      lg:w-full
+      lg:justify-end
+    >
       <slot />
       {{ title }}
     </div>
-    <div w-full flex items-center>
+    <div
-      <hr border-t-2px border-white w-full>
+      w-full
+      flex
+      items-center
+    >
+      <hr
+        border-t-2px
+        border-white
+        w-full
+      >
       <!-- <Badge text-16px h-32px :text="badgeText" /> -->
     </div>
   </div>

components/Project/ProjectDetailContainer.vue

@@ -1,6 +1,14 @@
 <template>
-  <div lg:flex gap-32px>
+  <div
-    <div hidden w-full max-w-320px lg:block />
+    lg:flex
+    gap-32px
+  >
+    <div
+      hidden
+      w-full
+      max-w-320px
+      lg:block
+    />
     <div w-full>
       <slot />
     </div>

components/Project/ProjectGrid.vue

@@ -14,11 +14,23 @@ function showMoreProjects() {
 </script>
 
 <template>
-  <div flex flex-col items-start>
+  <div
-    <div v-if="displayedProjects.length" grid :class="switcher ? 'grid-cols-1 lg:grid-cols-1' : 'xl:grid-cols-3 lg:grid-cols-3 sm:grid-cols-2 grid-cols-1'" gap-16px text-white w-full>
+    flex
+    flex-col
+    items-start
+  >
+    <div
+      v-if="displayedProjects.length"
+      grid
+      :class="switcher ? 'grid-cols-1 lg:grid-cols-1' : 'xl:grid-cols-3 lg:grid-cols-3 sm:grid-cols-2 grid-cols-1'"
+      gap-16px
+      text-white
+      w-full
+    >
       <Card
         v-for="project in displayedProjects"
-        :key="project.id" :project="project"
+        :key="project.id"
+        :project="project"
       />
     </div>
     <div v-else>
@@ -26,8 +38,14 @@ function showMoreProjects() {
     </div>
     <button
       v-if="displayedProjects.length < projects.length"
-      mt-29px text="14px" leading-24px font-700 px-12px
+      mt-29px
-      py-4px border-2px border-app-white
+      text="14px"
+      leading-24px
+      font-700
+      px-12px
+      py-4px
+      border-2px
+      border-app-white
       @click="showMoreProjects"
     >
       Load more projects

components/Project/ProjectHeading.vue

@@ -22,7 +22,7 @@ const availableSupport = computed(() => {
   - audit: yes / no
  */
 const calculateScore = computed(() => {
-  const criterias: { value: string; key: string }[] = [
+  const criterias: { value: keyof ProjectIndexable, key: keyof ProjectIndexable | '' }[] = [
     { value: 'product_readiness', key: '' },
     { value: 'github', key: 'links' },
     { value: 'docs', key: 'links' },
@@ -35,9 +35,9 @@ const calculateScore = computed(() => {
     let value
     // value = ((criterias[i].key ?? props.project[criterias[i].value as keyof typeof props.project]) ?? null === null) ? null : (props.project as ProjectIndexable)[criterias[i].key][criterias[i].value]
 
-    const indexableProject = (props.project as ProjectIndexable)
+    const indexableProject = props.project as ProjectIndexable
     if (criterias[i].key !== '')
-      value = indexableProject?.[criterias[i].key]?.[criterias[i].value]
+      value = (indexableProject[criterias[i].key] as any)?.[criterias[i].value]
     else
       value = indexableProject?.[criterias[i].value]
 
@@ -61,7 +61,7 @@ function fulfilled(value: any): boolean {
         return true
       break
     case 'object':
-      if (Object.keys(value).length > 0)
+      if (Object.keys(value!).length > 0)
         return true
       break
     default:
@@ -74,43 +74,94 @@ const logo = props.project?.logos?.at(0)?.url
 </script>
 
 <template>
-  <div lg:flex lg:gap-32px>
+  <div
+    lg:flex
+    lg:gap-32px
+  >
     <NuxtImg
-      lg:max-w-320px lg:max-h-320px shrink :src="logo ?? '/no-image-1-1.svg'"
+      lg:max-w-320px
+      lg:max-h-320px
+      shrink
+      :src="logo ?? '/no-image-1-1.svg'"
       class="bg-app-bg-grey object-cover max-w-full h-full vertical-align[middle] block border-0 w-full h-[300px]"
     />
     <div grow>
-      <div flex flex-col justify-between gap-32px lg:flex-row lg:items-center>
+      <div
+        flex
+        flex-col
+        justify-between
+        gap-32px
+        lg:flex-row
+        lg:items-center
+      >
         <div mt-24px>
           <NuxtLink
-            :to="project.links?.web" target="_blank" flex items-center gap-12px hover:underline
+            :to="project.links?.web"
+            target="_blank"
+            flex
+            items-center
+            gap-12px
+            hover:underline
             underline-offset-3
           >
-            <h1 text="24px sm:32px app-white" leading-32px font-700>
+            <h1
+              text="24px sm:32px app-white"
+              leading-32px
+              font-700
+            >
               {{ project.name }}
             </h1>
-            <UnoIcon i-web-openinnew text-16px />
+            <UnoIcon
+              i-web-openinnew
+              text-16px
+            />
           </NuxtLink>
-          <h2 text="16px app-text-grey" leading-24px mt-8px>
+          <h2
+            text="16px app-text-grey"
+            leading-24px
+            mt-8px
+          >
             {{ project.project_type ?? '---' }}
           </h2>
         </div>
         <div
-          border-2px class="border-app-black bg-app-white text-app-black" flex items-center justify-center px-32px
+          border-2px
-          py-16px text-32px font-700 leading-40px cursor-pointer
+          class="border-app-black bg-app-white text-app-black"
+          flex
+          items-center
+          justify-center
+          px-32px
+          py-16px
+          text-32px
+          font-700
+          leading-40px
+          cursor-pointer
         >
           {{ `${calculateScore}%` }}
         </div>
       </div>
-      <div grid grid-cols-2 gap-16px my-32px lg:grid-cols-4>
+      <div
-        <ProjectInfoItem :check-undefined="project.links?.github" title="Github" bold text-size="18px">
+        grid
+        grid-cols-2
+        gap-16px
+        my-32px
+        lg:grid-cols-4
+      >
+        <ProjectInfoItem
+          :check-undefined="project.links?.github"
+          title="Github"
+          bold
+          text-size="18px"
+        >
           <template #prefix>
             <UnoIcon i-web-code />
           </template>
           {{ project.links?.github ? 'YES' : 'NO' }}
         </ProjectInfoItem>
         <ProjectInfoItem
-          :check-undefined="project.project_status?.version" title="Product readyness" bold
+          :check-undefined="project.project_status?.version"
+          title="Product readyness"
+          bold
           text-size="18px"
         >
           <template #prefix>
@@ -118,39 +169,80 @@ const logo = props.project?.logos?.at(0)?.url
           </template>
           {{ project.project_status?.version }}
         </ProjectInfoItem>
-        <ProjectInfoItem :check-undefined="project.team?.length" title="Team" bold text-size="18px">
+        <ProjectInfoItem
+          :check-undefined="project.team?.length"
+          title="Team"
+          bold
+          text-size="18px"
+        >
           <template #prefix>
             <UnoIcon i-web-team />
           </template>
           {{ `${project.team?.length} members` }}
         </ProjectInfoItem>
-        <ProjectInfoItem :check-undefined="project.links?.docs" title="Docs" bold text-size="18px">
+        <ProjectInfoItem
+          :check-undefined="project.links?.docs"
+          title="Docs"
+          bold
+          text-size="18px"
+        >
           <template #prefix>
-            <UnoIcon i-web-docs text-28px />
+            <UnoIcon
+              i-web-docs
+              text-28px
+            />
           </template>
           {{ project.links?.docs ? 'YES' : 'NO' }}
         </ProjectInfoItem>
-        <ProjectInfoItem :check-undefined="project.audits" title="Audit" bold text-size="18px">
+        <ProjectInfoItem
+          :check-undefined="project.audits"
+          title="Audit"
+          bold
+          text-size="18px"
+        >
           <template #prefix>
-            <UnoIcon i-web-audit text-28px />
+            <UnoIcon
+              i-web-audit
+              text-28px
+            />
           </template>
           {{ project.audits ? 'YES' : 'NO' }}
         </ProjectInfoItem>
-        <ProjectInfoItem :check-undefined="project.links" title="Available support" bold text-size="18px">
+        <ProjectInfoItem
+          :check-undefined="project.links"
+          title="Available support"
+          bold
+          text-size="18px"
+        >
           <template #prefix>
-            <UnoIcon i-web-support text-28px />
+            <UnoIcon
+              i-web-support
+              text-28px
+            />
           </template>
           {{ `${availableSupport} channels` }}
         </ProjectInfoItem>
       </div>
-      <div grid grid-cols-2 gap-16px my-32px lg:grid-cols-4>
+      <div
+        grid
+        grid-cols-2
+        gap-16px
+        my-32px
+        lg:grid-cols-4
+      >
         <ProjectInfoItem
-          :check-undefined="project.blockchain_features?.network" tooltip-link="/" title="Ecosystem"
+          :check-undefined="project.blockchain_features?.network"
+          tooltip-link="/"
+          title="Ecosystem"
           bold
         >
           {{ project.blockchain_features?.network }}
         </ProjectInfoItem>
-        <ProjectInfoItem invisible title="Last update" bold>
+        <ProjectInfoItem
+          invisible
+          title="Last update"
+          bold
+        >
           17/11/2023 – 23:22
         </ProjectInfoItem>
       </div>

components/Project/ProjectInfoItem.vue

@@ -33,15 +33,34 @@ function tooltipMouseOut() {
 </script>
 
 <template>
-  <div flex items-start relative>
+  <div
-    <div h-full flex items-center text-32px gap-12px>
+    flex
+    items-start
+    relative
+  >
+    <div
+      h-full
+      flex
+      items-center
+      text-32px
+      gap-12px
+    >
       <slot name="prefix" />
       <div />
     </div>
-    <div class="peer" flex flex-col justify-center w-full>
+    <div
+      class="peer"
+      flex
+      flex-col
+      justify-center
+      w-full
+    >
       <h3
         v-if="title"
-        ref="heading" w-fit text="14px sm:16px app-text-grey" leading-24px
+        ref="heading"
+        w-fit
+        text="14px sm:16px app-text-grey"
+        leading-24px
         :class="[tooltip ? 'cursor-pointer underline underline-offset-5 decoration-dotted  hover:decoration-solid hover:text-app-white' : '']"
         @mouseover="showTooltip = true"
         @mouseout="headingMouseOut()"
@@ -49,23 +68,47 @@ function tooltipMouseOut() {
         {{ title }}
       </h3>
       <template v-if="checkUndefined === undefined || checkUndefined === null">
-        <span opacity-50 leading-24px font-700 text-14px :class="`sm:text-${textSize ?? '16px'}`">{{ 'N/A' }}</span>
+        <span
+          opacity-50
+          leading-24px
+          font-700
+          text-14px
+          :class="`sm:text-${textSize ?? '16px'}`"
+        >{{ 'N/A' }}</span>
       </template>
       <template v-else>
         <template v-if="link">
           <div
 
-            flex gap-6px items-center justify-start hover:underline hover:text-white text-14px
+            flex
+            gap-6px
+            items-center
+            justify-start
+            hover:underline
+            hover:text-white
+            text-14px
             :color="color ?? '#FFF'"
             class="hoverEl"
             :class="`sm:text-${textSize ?? '16px'} font-${bold ? '700' : '400'} opacity-${opacity}`"
-            leading-24px @click.prevent="navigateTo(link, { external: true, open: { target: '_blank' } })"
+            leading-24px
+            @click.prevent="navigateTo(link, { external: true, open: { target: '_blank' } })"
           >
             <slot />
-            <UnoIcon i-web-openinnew text-16px text-app-text-grey class="customHover" />
+            <UnoIcon
+              i-web-openinnew
+              text-16px
+              text-app-text-grey
+              class="customHover"
+            />
           </div>
         </template>
-        <div v-else :color="color ?? '#FFF'" text-14px :class="`sm:text-${textSize ?? '16px'} font-${bold ? '700' : '400'} opacity-${opacity}`" leading-24px>
+        <div
+          v-else
+          :color="color ?? '#FFF'"
+          text-14px
+          :class="`sm:text-${textSize ?? '16px'} font-${bold ? '700' : '400'} opacity-${opacity}`"
+          leading-24px
+        >
           <slot />
         </div>
       </template>
@@ -82,12 +125,23 @@ function tooltipMouseOut() {
       {{ tooltip }}
       <NuxtLink
         v-if="tooltipLink"
-        mt-12px text-14px font-400 leading-20px underline underline-offset-2
+        mt-12px
+        text-14px
+        font-400
+        leading-20px
+        underline
+        underline-offset-2
         :to="tooltipLink"
       >
         {{ 'Learn More' }}
       </NuxtLink>
-      <div w-16px h-16px absolute bg-white class="top--8px left-50% translate-x--50% rotate-45 z-99" />
+      <div
+        w-16px
+        h-16px
+        absolute
+        bg-white
+        class="top--8px left-50% translate-x--50% rotate-45 z-99"
+      />
     </div>
   </div>
 </template>

components/Project/ProjectMarket.vue

@@ -2,10 +2,21 @@
 </script>
 
 <template>
-  <ProjectDetailCategoryDivider title="MARKET" badge-text="3/10">
+  <ProjectDetailCategoryDivider
-    <UnoIcon i-web-code_v2 text-24px />
+    title="MARKET"
+    badge-text="3/10"
+  >
+    <UnoIcon
+      i-web-code_v2
+      text-24px
+    />
   </ProjectDetailCategoryDivider>
   <ProjectDetailContainer>
-    <div mt-32px w-full h-500px bg-dark />
+    <div
+      mt-32px
+      w-full
+      h-500px
+      bg-dark
+    />
   </ProjectDetailContainer>
 </template>

components/Project/ProjectNavigation.vue

@@ -9,16 +9,63 @@ const githubProjectUrl = computed(() => {
 </script>
 
 <template>
-  <div app-container w-full flex items-center justify-between md:bg-transparent px-8px>
+  <div
-    <NavigationButton w-230px @click="$router.back()">
+    app-container
-      <span block md:hidden>{{ 'BACK' }}</span>
+    w-full
-      <span hidden whitespace-nowrap md:block>{{ 'BACK TO LIST' }}</span>
+    flex
+    items-center
+    justify-between
+    md:bg-transparent
+    px-8px
+  >
+    <NavigationButton
+      w-230px
+      @click="$router.back()"
+    >
+      <span
+        block
+        md:hidden
+      >{{ 'BACK' }}</span>
+      <span
+        hidden
+        whitespace-nowrap
+        md:block
+      >{{ 'BACK TO LIST' }}</span>
     </NavigationButton>
-    <hr hidden md:block border-t-2px border-white w-full>
+    <hr
-    <div flex gap-16px>
+      hidden
-      <EditButton px-16px py-8px hover:bg-white hover:text-black :to="githubProjectUrl">
+      md:block
-        <span text-16px whitespace-nowrap font-400 leading-24px hidden md:block>{{ 'EDIT RESEARCH' }}</span>
+      border-t-2px
-        <span text-16px whitespace-nowrap font-400 leading-24px block md:hidden>{{ 'EDIT' }}</span>
+      border-white
+      w-full
+    >
+    <div
+      flex
+      gap-16px
+    >
+      <EditButton
+        px-16px
+        py-8px
+        hover:bg-white
+        hover:text-black
+        :to="githubProjectUrl"
+      >
+        <span
+          text-16px
+          whitespace-nowrap
+          font-400
+          leading-24px
+          hidden
+          md:block
+        >{{ 'EDIT RESEARCH' }}</span>
+        <span
+          text-16px
+          whitespace-nowrap
+          font-400
+          leading-24px
+          block
+          md:hidden
+        >{{ 'EDIT' }}</span>
       </EditButton>
       <!-- <ShareButton>
         <span text-16px font-400 hidden md:block>{{ 'SHARE' }}</span>

components/Project/ProjectOpeness.vue

@@ -7,109 +7,224 @@ defineProps<{
 </script>
 
 <template>
-  <ProjectDetailCategoryDivider title="OPENESS" badge-text="3/10">
+  <ProjectDetailCategoryDivider
-    <UnoIcon i-web-code_v2 text-24px />
+    title="OPENESS"
+    badge-text="3/10"
+  >
+    <UnoIcon
+      i-web-code_v2
+      text-24px
+    />
   </ProjectDetailCategoryDivider>
   <ProjectDetailContainer>
-    <div mt-32px text="14px sm:16px" leading-24px font-400>
+    <div
+      mt-32px
+      text="14px sm:16px"
+      leading-24px
+      font-400
+    >
       <h3 text-app-text-grey>
         {{ 'Project Description' }}
       </h3>
-      <span text="14px sm:16px" leading-20px>{{ project.description ?? '---' }}</span>
+      <span
+        text="14px sm:16px"
+        leading-20px
+      >{{ project.description ?? '---' }}</span>
     </div>
     <div mt-24px>
-      <h3 text="14px sm:16px app-text-grey" leading-20px>
+      <h3
+        text="14px sm:16px app-text-grey"
+        leading-20px
+      >
         {{ 'Infrastructure links' }}
       </h3>
-      <div grid grid-cols-2 gap-16px mt-8px lg:grid-cols-4>
+      <div
-        <ProjectOpenessLink v-if="project.links?.web" :to="project.links?.web">
+        grid
+        grid-cols-2
+        gap-16px
+        mt-8px
+        lg:grid-cols-4
+      >
+        <ProjectOpenessLink
+          v-if="project.links?.web"
+          :to="project.links?.web"
+        >
           <template #prefix>
             <UnoIcon i-web-website />
           </template>
           {{ 'Website' }}
         </ProjectOpenessLink>
-        <ProjectOpenessLink v-if="project.links?.blog" :to="project.links.blog">
+        <ProjectOpenessLink
+          v-if="project.links?.blog"
+          :to="project.links.blog"
+        >
           <template #prefix>
             <UnoIcon i-web-website />
           </template>
           {{ 'Blog' }}
         </ProjectOpenessLink>
-        <ProjectOpenessLink v-if="project.links?.github" :to="project.links?.github">
+        <ProjectOpenessLink
+          v-if="project.links?.github"
+          :to="project.links?.github"
+        >
           <template #prefix>
-            <UnoIcon i-web-github opacity-30 text-27px />
+            <UnoIcon
+              i-web-github
+              opacity-30
+              text-27px
+            />
           </template>
           {{ 'Github' }}
         </ProjectOpenessLink>
-        <ProjectOpenessLink v-if="project.links?.docs" :to="project.links?.docs">
+        <ProjectOpenessLink
+          v-if="project.links?.docs"
+          :to="project.links?.docs"
+        >
           <template #prefix>
-            <UnoIcon i-web-documents text-24px />
+            <UnoIcon
+              i-web-documents
+              text-24px
+            />
           </template>
           {{ 'Docs' }}
         </ProjectOpenessLink>
-        <ProjectOpenessLink v-if="project.links?.block_explorer" :to="project.links.block_explorer">
+        <ProjectOpenessLink
+          v-if="project.links?.block_explorer"
+          :to="project.links.block_explorer"
+        >
           <template #prefix>
-            <UnoIcon i-web-explorer opacity-30 />
+            <UnoIcon
+              i-web-explorer
+              opacity-30
+            />
           </template>
           {{ 'Explorer' }}
         </ProjectOpenessLink>
-        <ProjectOpenessLink v-if="project.links?.snapshot" :to="project.links.snapshot">
+        <ProjectOpenessLink
+          v-if="project.links?.snapshot"
+          :to="project.links.snapshot"
+        >
           <template #prefix>
-            <UnoIcon i-web-snapshot text-32px />
+            <UnoIcon
+              i-web-snapshot
+              text-32px
+            />
           </template>
           {{ 'Snapshot' }}
         </ProjectOpenessLink>
-        <ProjectOpenessLink v-if="project.links?.token" :to="project.links.token">
+        <ProjectOpenessLink
+          v-if="project.links?.token"
+          :to="project.links.token"
+        >
           <template #prefix>
-            <UnoIcon i-web-token text-28px />
+            <UnoIcon
+              i-web-token
+              text-28px
+            />
           </template>
           {{ 'Token' }}
         </ProjectOpenessLink>
-        <ProjectOpenessLink v-if="project.links?.coingecko" :to="project.links.coingecko">
+        <ProjectOpenessLink
+          v-if="project.links?.coingecko"
+          :to="project.links.coingecko"
+        >
           <template #prefix>
-            <UnoIcon i-web-coingecko opacity-30 text-24px />
+            <UnoIcon
+              i-web-coingecko
+              opacity-30
+              text-24px
+            />
           </template>
           {{ 'Coingecko' }}
         </ProjectOpenessLink>
       </div>
     </div>
     <div mt-24px>
-      <h3 text="14px sm:16px app-text-grey" leading-20px>
+      <h3
+        text="14px sm:16px app-text-grey"
+        leading-20px
+      >
         {{ 'Socials' }}
       </h3>
-      <div grid grid-cols-2 gap-16px mt-8px lg:grid-cols-4>
+      <div
-        <ProjectOpenessLink v-if="project.links?.forum" :to="project.links.forum">
+        grid
+        grid-cols-2
+        gap-16px
+        mt-8px
+        lg:grid-cols-4
+      >
+        <ProjectOpenessLink
+          v-if="project.links?.forum"
+          :to="project.links.forum"
+        >
           <template #prefix>
-            <UnoIcon i-web-forum opacity-30 text-28px />
+            <UnoIcon
+              i-web-forum
+              opacity-30
+              text-28px
+            />
           </template>
           {{ 'Forum' }}
         </ProjectOpenessLink>
-        <ProjectOpenessLink v-if="project.links?.discord" :to="project.links.discord">
+        <ProjectOpenessLink
+          v-if="project.links?.discord"
+          :to="project.links.discord"
+        >
           <template #prefix>
-            <UnoIcon i-web-discord text-27px />
+            <UnoIcon
+              i-web-discord
+              text-27px
+            />
           </template>
           {{ 'Discord' }}
         </ProjectOpenessLink>
-        <ProjectOpenessLink v-if="project.links?.twitter" :to="project.links.twitter">
+        <ProjectOpenessLink
+          v-if="project.links?.twitter"
+          :to="project.links.twitter"
+        >
           <template #prefix>
-            <UnoIcon i-web-twitter_x opacity-30 text-22px />
+            <UnoIcon
+              i-web-twitter_x
+              opacity-30
+              text-22px
+            />
           </template>
           {{ 'Twitter' }}
         </ProjectOpenessLink>
-        <ProjectOpenessLink v-if="project.links?.lens" :to="project.links.lens">
+        <ProjectOpenessLink
+          v-if="project.links?.lens"
+          :to="project.links.lens"
+        >
           <template #prefix>
-            <UnoIcon i-web-lens text-32px />
+            <UnoIcon
+              i-web-lens
+              text-32px
+            />
           </template>
           {{ 'Lens' }}
         </ProjectOpenessLink>
-        <ProjectOpenessLink v-if="project.links?.farcaster" :to="project.links.farcaster">
+        <ProjectOpenessLink
+          v-if="project.links?.farcaster"
+          :to="project.links.farcaster"
+        >
           <template #prefix>
-            <UnoIcon i-web-farcaster text-26px />
+            <UnoIcon
+              i-web-farcaster
+              text-26px
+            />
           </template>
           {{ 'Farcaster' }}
         </ProjectOpenessLink>
-        <ProjectOpenessLink v-if="project.links?.telegram" :to="project.links.telegram">
+        <ProjectOpenessLink
+          v-if="project.links?.telegram"
+          :to="project.links.telegram"
+        >
           <template #prefix>
-            <UnoIcon i-web-telegram opacity-30 text-22px />
+            <UnoIcon
+              i-web-telegram
+              opacity-30
+              text-22px
+            />
           </template>
           {{ 'Telegram' }}
         </ProjectOpenessLink>
@@ -118,30 +233,63 @@ defineProps<{
     <div mt-24px>
       <ProjectOpenessTeamMembers :members="project.team" />
     </div>
-    <div grid grid-cols-2 items-start mt-32px gap-y-26px lg:grid-cols-4>
+    <div
-      <ProjectInfoItem :check-undefined="project.product_launch_day" title="Product launch day">
+      grid
+      grid-cols-2
+      items-start
+      mt-32px
+      gap-y-26px
+      lg:grid-cols-4
+    >
+      <ProjectInfoItem
+        :check-undefined="project.product_launch_day"
+        title="Product launch day"
+      >
         {{ project.product_launch_day }}
       </ProjectInfoItem>
       <ProjectInfoItem
-        title="Opensource" bold
+        title="Opensource"
+        bold
         :check-undefined="project.blockchain_features?.opensource"
         :color=" project.blockchain_features?.opensource ? '#A8FF18' : '#FF0000'"
       >
         {{ project.blockchain_features?.opensource ? 'Yes' : 'No' }}
       </ProjectInfoItem>
     </div>
-    <div mt-32px w-full>
+    <div
+      mt-32px
+      w-full
+    >
       <ProjectInfoItem
         :check-undefined="project.funding"
-        title="Funding" bold
+        title="Funding"
+        bold
         w-full
       >
-        <template v-for="fund in project.funding" :key="fund.name">
+        <template
-          <div mt-16px grid grid-cols-2 sm:grid-cols-4>
+          v-for="fund in project.funding"
+          :key="fund.name"
+        >
+          <div
+            mt-16px
+            grid
+            grid-cols-2
+            sm:grid-cols-4
+          >
             <span v-if="fund.name">{{ fund.name }}</span>
-            <span v-if="fund.time" font-400>{{ fund.time }}</span>
+            <span
-            <span v-if="fund.time" font-400 text-app-text-grey>{{ fund.type }}</span>
+              v-if="fund.time"
-            <span v-if="fund.time" font-400>{{ fund.value }}</span>
+              font-400
+            >{{ fund.time }}</span>
+            <span
+              v-if="fund.time"
+              font-400
+              text-app-text-grey
+            >{{ fund.type }}</span>
+            <span
+              v-if="fund.time"
+              font-400
+            >{{ fund.value }}</span>
           </div>
         </template>
       </ProjectInfoItem>

components/Project/ProjectOpenessLink.vue

@@ -5,12 +5,33 @@ defineProps<{
 </script>
 
 <template>
-  <NuxtLink :to="to" flex items-center gap-12px>
+  <NuxtLink
-    <div flex justify-center items-center w-32px h-32px text-32px>
+    :to="to"
+    flex
+    items-center
+    gap-12px
+  >
+    <div
+      flex
+      justify-center
+      items-center
+      w-32px
+      h-32px
+      text-32px
+    >
       <slot name="prefix" />
     </div>
-    <div flex flex-col justify-center>
+    <div
-      <div text="14px sm:16px app-white" font-400 leading-24px hover:underline>
+      flex
+      flex-col
+      justify-center
+    >
+      <div
+        text="14px sm:16px app-white"
+        font-400
+        leading-24px
+        hover:underline
+      >
         <slot />
       </div>
     </div>

components/Project/ProjectOpenessTeamMembers.vue

@@ -10,38 +10,101 @@ const props = defineProps<{
 
 <template>
   <div>
-    <h3 text="14px sm:16px app-text-grey" leading-24px>
+    <h3
+      text="14px sm:16px app-text-grey"
+      leading-24px
+    >
       {{ 'Team members' }}
     </h3>
-    <div grid grid-cols-1 gap-16px mt-12px sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4>
+    <div
+      grid
+      grid-cols-1
+      gap-16px
+      mt-12px
+      sm:grid-cols-2
+      md:grid-cols-3
+      lg:grid-cols-4
+    >
       <template v-if="props.members?.length">
-        <template v-for="member in members" :key="member.name">
+        <template
-          <div flex gap-12px>
+          v-for="member in members"
+          :key="member.name"
+        >
+          <div
+            flex
+            gap-12px
+          >
             <template v-if="member.link">
-              <NuxtImg :src="member.link" width="48" height="48" :alt="member.name" />
+              <NuxtImg
+                :src="member.link"
+                width="48"
+                height="48"
+                :alt="member.name"
+              />
             </template>
             <template v-else>
-              <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <svg
-                <circle opacity="0.2" cx="24" cy="24" r="23.5" stroke="white" />
+                width="48"
+                height="48"
+                viewBox="0 0 48 48"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <circle
+                  opacity="0.2"
+                  cx="24"
+                  cy="24"
+                  r="23.5"
+                  stroke="white"
+                />
                 <g opacity="0.2">
-                  <mask id="mask0_2200_7716" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="12" y="12" width="24" height="24">
+                  <mask
-                    <rect x="12" y="12" width="24" height="24" fill="#D9D9D9" />
+                    id="mask0_2200_7716"
+                    style="mask-type:alpha"
+                    maskUnits="userSpaceOnUse"
+                    x="12"
+                    y="12"
+                    width="24"
+                    height="24"
+                  >
+                    <rect
+                      x="12"
+                      y="12"
+                      width="24"
+                      height="24"
+                      fill="#D9D9D9"
+                    />
                   </mask>
                   <g mask="url(#mask0_2200_7716)">
-                    <path d="M24 24C22.9 24 21.9583 23.6083 21.175 22.825C20.3917 22.0417 20 21.1 20 20C20 18.9 20.3917 17.9583 21.175 17.175C21.9583 16.3917 22.9 16 24 16C25.1 16 26.0417 16.3917 26.825 17.175C27.6083 17.9583 28 18.9 28 20C28 21.1 27.6083 22.0417 26.825 22.825C26.0417 23.6083 25.1 24 24 24ZM16 32V29.2C16 28.6333 16.1458 28.1125 16.4375 27.6375C16.7292 27.1625 17.1167 26.8 17.6 26.55C18.6333 26.0333 19.6833 25.6458 20.75 25.3875C21.8167 25.1292 22.9 25 24 25C25.1 25 26.1833 25.1292 27.25 25.3875C28.3167 25.6458 29.3667 26.0333 30.4 26.55C30.8833 26.8 31.2708 27.1625 31.5625 27.6375C31.8542 28.1125 32 28.6333 32 29.2V32H16Z" fill="white" />
+                    <path
+                      d="M24 24C22.9 24 21.9583 23.6083 21.175 22.825C20.3917 22.0417 20 21.1 20 20C20 18.9 20.3917 17.9583 21.175 17.175C21.9583 16.3917 22.9 16 24 16C25.1 16 26.0417 16.3917 26.825 17.175C27.6083 17.9583 28 18.9 28 20C28 21.1 27.6083 22.0417 26.825 22.825C26.0417 23.6083 25.1 24 24 24ZM16 32V29.2C16 28.6333 16.1458 28.1125 16.4375 27.6375C16.7292 27.1625 17.1167 26.8 17.6 26.55C18.6333 26.0333 19.6833 25.6458 20.75 25.3875C21.8167 25.1292 22.9 25 24 25C25.1 25 26.1833 25.1292 27.25 25.3875C28.3167 25.6458 29.3667 26.0333 30.4 26.55C30.8833 26.8 31.2708 27.1625 31.5625 27.6375C31.8542 28.1125 32 28.6333 32 29.2V32H16Z"
+                      fill="white"
+                    />
                   </g>
                 </g>
               </svg>
             </template>
-            <div flex flex-col>
+            <div
-              <span text="14px sm:16px" font-700>{{ member.name }}</span>
+              flex
-              <span text="14px sm:16px app-text-grey" font-400>{{ member.role ?? 'N/A' }}</span>
+              flex-col
+            >
+              <span
+                text="14px sm:16px"
+                font-700
+              >{{ member.name }}</span>
+              <span
+                text="14px sm:16px app-text-grey"
+                font-400
+              >{{ member.role ?? 'N/A' }}</span>
             </div>
           </div>
         </template>
       </template>
       <template v-else>
-        <span text-14px opacity-50>{{ 'N/A' }}</span>
+        <span
+          text-14px
+          opacity-50
+        >{{ 'N/A' }}</span>
       </template>
     </div>
   </div>

components/Project/ProjectPrivacy.vue

@@ -7,27 +7,43 @@ defineProps<{
 </script>
 
 <template>
-  <ProjectDetailCategoryDivider title="PRIVACY" badge-text="3/10">
+  <ProjectDetailCategoryDivider
-    <UnoIcon i-web-code_v2 text-24px />
+    title="PRIVACY"
+    badge-text="3/10"
+  >
+    <UnoIcon
+      i-web-code_v2
+      text-24px
+    />
   </ProjectDetailCategoryDivider>
   <ProjectDetailContainer>
-    <div grid grid-cols-2 items-start mt-32px gap-y-16px lg:grid-cols-4>
+    <div
+      grid
+      grid-cols-2
+      items-start
+      mt-32px
+      gap-y-16px
+      lg:grid-cols-4
+    >
       <ProjectInfoItem
         :check-undefined="project.blockchain_features?.p2p"
-        bold title="Peer to Peer (P2P)"
+        bold
+        title="Peer to Peer (P2P)"
       >
         {{ project.blockchain_features?.p2p ? 'YES' : 'NO' }}
       </ProjectInfoItem>
       <ProjectInfoItem
         :check-undefined="project.tracebility?.kyc"
-        bold :color="project.tracebility?.kyc ? '#FF0000' : '#18FF2F'"
+        bold
+        :color="project.tracebility?.kyc ? '#FF0000' : '#18FF2F'"
         title="Know Your Customer (KYC)"
       >
         {{ project.tracebility?.kyc ? 'YES' : 'NO' }}
       </ProjectInfoItem>
       <ProjectInfoItem
         :check-undefined="project.storage"
-        bold title="Decentralized storage"
+        bold
+        title="Decentralized storage"
         :color="project.storage?.decentralized ? '#18FF2F' : '#FF0000'"
       >
         {{ project.storage?.decentralized ? 'YES' : 'NO' }}
@@ -40,88 +56,163 @@ defineProps<{
         {{ project.default_privacy ? 'YES' : 'NO' }}
       </ProjectInfoItem>
     </div>
-    <div grid grid-cols-2 items-start mt-32px gap-y-16px lg:grid-cols-4>
+    <div
+      grid
+      grid-cols-2
+      items-start
+      mt-32px
+      gap-y-16px
+      lg:grid-cols-4
+    >
       <ProjectInfoItem
         :check-undefined="project.blockchain_features?.revealed_recipient"
         :color="project.blockchain_features?.revealed_recipient ? '#FF0000' : '#18FF2F'"
-        bold title="Revealed recipient"
+        bold
+        title="Revealed recipient"
       >
         {{ project.blockchain_features?.revealed_recipient ? 'YES' : 'NO' }}
       </ProjectInfoItem>
       <ProjectInfoItem
         :check-undefined="project.blockchain_features?.revealed_sender"
         :color="project.blockchain_features?.revealed_sender ? '#FF0000' : '#18FF2F'"
-        bold title="Revealed sender"
+        bold
+        title="Revealed sender"
       >
         {{ project.blockchain_features?.revealed_sender ? 'YES' : 'NO' }}
       </ProjectInfoItem>
       <ProjectInfoItem
         :check-undefined="project.blockchain_features?.revealed_ammount"
         :color="project.blockchain_features?.revealed_ammount ? '#FF0000' : '#18FF2F'"
-        bold title="Revealed amount"
+        bold
+        title="Revealed amount"
       >
         {{ project.blockchain_features?.revealed_ammount ? 'YES' : 'NO' }}
       </ProjectInfoItem>
       <ProjectInfoItem
         :check-undefined="project.blockchain_features?.reversability_condition"
-        bold title="Reversability"
+        bold
+        title="Reversability"
       >
         {{ project.blockchain_features?.reversability_condition }}
       </ProjectInfoItem>
     </div>
-    <div grid grid-cols-2 items-start mt-32px gap-y-16px lg:grid-cols-4>
+    <div
+      grid
+      grid-cols-2
+      items-start
+      mt-32px
+      gap-y-16px
+      lg:grid-cols-4
+    >
       <ProjectInfoItem
         :check-undefined="project.blockchain_features?.connected_tx"
         :color="project.blockchain_features?.connected_tx ? '#FF0000' : '#18FF2F'"
-        bold title="Connected Txs"
+        bold
+        title="Connected Txs"
       >
         {{ project.blockchain_features?.connected_tx ? 'YES' : 'NO' }}
       </ProjectInfoItem>
-      <ProjectInfoItem :check-undefined="project.blockchain_features?.data_masking" bold title="Data masking">
+      <ProjectInfoItem
+        :check-undefined="project.blockchain_features?.data_masking"
+        bold
+        title="Data masking"
+      >
         {{ project.blockchain_features?.data_masking }}
       </ProjectInfoItem>
-      <ProjectInfoItem :check-undefined="project.blockchain_features?.tx_history" bold title="Tx history">
+      <ProjectInfoItem
+        :check-undefined="project.blockchain_features?.tx_history"
+        bold
+        title="Tx history"
+      >
         {{ project.blockchain_features?.tx_history ? 'YES' : 'NO' }}
       </ProjectInfoItem>
     </div>
     <div my-24px>
-      <hr border-t-2px border-white opacity-20 w-80px>
+      <hr
+        border-t-2px
+        border-white
+        opacity-20
+        w-80px
+      >
     </div>
-    <div grid grid-cols-2 items-start mt-32px gap-y-16px lg:grid-cols-4>
+    <div
+      grid
+      grid-cols-2
+      items-start
+      mt-32px
+      gap-y-16px
+      lg:grid-cols-4
+    >
       <ProjectInfoItem
         :check-undefined="project.privacy_policy"
         :color="project.privacy_policy?.defined ? '#18FF2F' : '#FF0000'"
-        bold title="Privacy Policy"
+        bold
+        title="Privacy Policy"
       >
         {{ project.privacy_policy?.defined ? 'YES' : 'NO' }}
       </ProjectInfoItem>
-      <ProjectInfoItem :check-undefined="project.tracebility?.tracked_data" title="Collected data">
+      <ProjectInfoItem
+        :check-undefined="project.tracebility?.tracked_data"
+        title="Collected data"
+      >
         {{ project.tracebility?.tracked_data }}
       </ProjectInfoItem>
-      <ProjectInfoItem :check-undefined="project.privacy_policy?.data_usage" title="Data usage">
+      <ProjectInfoItem
+        :check-undefined="project.privacy_policy?.data_usage"
+        title="Data usage"
+      >
         {{ project.privacy_policy?.data_usage }}
       </ProjectInfoItem>
-      <ProjectInfoItem :check-undefined="project.blockchain_features?.frontend_anonymity" bold title="Frontend anonymity">
+      <ProjectInfoItem
+        :check-undefined="project.blockchain_features?.frontend_anonymity"
+        bold
+        title="Frontend anonymity"
+      >
         {{ project.blockchain_features?.frontend_anonymity }}
       </ProjectInfoItem>
     </div>
     <div my-24px>
-      <hr border-t-2px border-white opacity-20 w-80px>
+      <hr
+        border-t-2px
+        border-white
+        opacity-20
+        w-80px
+      >
     </div>
-    <div grid grid-cols-2 items-start mt-32px gap-y-16px>
+    <div
+      grid
+      grid-cols-2
+      items-start
+      mt-32px
+      gap-y-16px
+    >
       <ProjectInfoItem
         :check-undefined="project.compliance"
         :color="project.compliance ? '#FF0000' : '#18FF2F'"
-        bold title="Compliance"
+        bold
+        title="Compliance"
       >
         {{ project.compliance ? 'YES' : 'NO' }}
       </ProjectInfoItem>
     </div>
-    <div grid grid-cols-2 items-start mt-32px gap-y-16px>
+    <div
-      <ProjectInfoItem :check-undefined="project.tracebility?.sign_in_type_requirments" bold title="Sign-in requirements">
+      grid
+      grid-cols-2
+      items-start
+      mt-32px
+      gap-y-16px
+    >
+      <ProjectInfoItem
+        :check-undefined="project.tracebility?.sign_in_type_requirments"
+        bold
+        title="Sign-in requirements"
+      >
         {{ project.tracebility?.sign_in_type_requirments }}
       </ProjectInfoItem>
-      <ProjectInfoItem :check-undefined="project.blockchain_features?.identity_integration" title="Identity integrations">
+      <ProjectInfoItem
+        :check-undefined="project.blockchain_features?.identity_integration"
+        title="Identity integrations"
+      >
         {{ project.blockchain_features?.identity_integration }}
       </ProjectInfoItem>
     </div>

components/Project/ProjectSecurity.vue

@@ -7,14 +7,28 @@ defineProps<{
 </script>
 
 <template>
-  <ProjectDetailCategoryDivider title="SECURITY" badge-text="3/10">
+  <ProjectDetailCategoryDivider
-    <UnoIcon i-web-code_v2 text-24px />
+    title="SECURITY"
+    badge-text="3/10"
+  >
+    <UnoIcon
+      i-web-code_v2
+      text-24px
+    />
   </ProjectDetailCategoryDivider>
   <ProjectDetailContainer>
-    <div grid grid-cols-2 items-start mt-32px gap-y-16px lg:grid-cols-4>
+    <div
+      grid
+      grid-cols-2
+      items-start
+      mt-32px
+      gap-y-16px
+      lg:grid-cols-4
+    >
       <ProjectInfoItem
         :check-undefined="project.blockchain_features?.asset_custody_type"
-        bold title="Asset custody"
+        bold
+        title="Asset custody"
       >
         {{ project.blockchain_features?.asset_custody_type }}
       </ProjectInfoItem>
@@ -27,12 +41,17 @@ defineProps<{
         </b>
         {{ ` – ${project.blockchain_features?.upgradability?.type}` }}
       </ProjectInfoItem>
-      <ProjectInfoItem :check-undefined="project.social_trust" title="Social dependency">
+      <ProjectInfoItem
+        :check-undefined="project.social_trust"
+        title="Social dependency"
+      >
         {{ project.social_trust }}
       </ProjectInfoItem>
       <ProjectInfoItem
         :check-undefined="project.third_party_dependency"
-        bold :color="project.third_party_dependency ? '#FF0000' : '#18FF2F'" title="Third-party dependency"
+        bold
+        :color="project.third_party_dependency ? '#FF0000' : '#18FF2F'"
+        title="Third-party dependency"
       >
         {{ project.third_party_dependency ? 'YES' : 'NO' }}
       </ProjectInfoItem>
@@ -45,19 +64,36 @@ defineProps<{
       </ProjectInfoItem>
     </div>
     <div my-24px>
-      <hr border-t-2px border-white opacity-20 w-80px>
+      <hr
+        border-t-2px
+        border-white
+        opacity-20
+        w-80px
+      >
     </div>
     <div v-if="project.audits">
-      <h2 text-18px text-app-text-grey my-24px>
+      <h2
+        text-18px
+        text-app-text-grey
+        my-24px
+      >
         Audits
       </h2>
-      <template v-for="audit in project.audits" :key="audit.name">
+      <template
+        v-for="audit in project.audits"
+        :key="audit.name"
+      >
         <ProjectSecurityAudit
           :audit-name="audit.name"
           :audit-url="audit.link"
           :date="audit.time"
         >
-          <NuxtImg :src="audit.logo ?? '/no-image-1-1.svg'" w-64px h-64px object-cover />
+          <NuxtImg
+            :src="audit.logo ?? '/no-image-1-1.svg'"
+            w-64px
+            h-64px
+            object-cover
+          />
         </ProjectSecurityAudit>
       </template>
     </div>

components/Project/ProjectSecurityAudit.vue

@@ -7,14 +7,38 @@ defineProps<{
 </script>
 
 <template>
-  <div flex items-center gap-16px>
+  <div
+    flex
+    items-center
+    gap-16px
+  >
     <slot />
-    <div flex flex-col text-14px font-700 leading-24px>
+    <div
-      <NuxtLink hover:underline flex items-center gap-8px :to="auditUrl">
+      flex
+      flex-col
+      text-14px
+      font-700
+      leading-24px
+    >
+      <NuxtLink
+        hover:underline
+        flex
+        items-center
+        gap-8px
+        :to="auditUrl"
+      >
         {{ auditName }}
-        <UnoIcon v-if="auditUrl" i-web-openinnew text-16px />
+        <UnoIcon
+          v-if="auditUrl"
+          i-web-openinnew
+          text-16px
+        />
       </NuxtLink>
-      <span text-14px font-400 leading-24px>{{ date }}</span>
+      <span
+        text-14px
+        font-400
+        leading-24px
+      >{{ date }}</span>
     </div>
   </div>
 </template>

components/Project/ProjectTechnology.vue

@@ -7,14 +7,28 @@ defineProps<{
 </script>
 
 <template>
-  <ProjectDetailCategoryDivider title="TECHNOLOGY" badge-text="3/10">
+  <ProjectDetailCategoryDivider
-    <UnoIcon i-web-code_v2 text-24px />
+    title="TECHNOLOGY"
+    badge-text="3/10"
+  >
+    <UnoIcon
+      i-web-code_v2
+      text-24px
+    />
   </ProjectDetailCategoryDivider>
   <ProjectDetailContainer>
-    <div grid grid-cols-2 items-start mt-32px gap-y-16px lg:grid-cols-4>
+    <div
+      grid
+      grid-cols-2
+      items-start
+      mt-32px
+      gap-y-16px
+      lg:grid-cols-4
+    >
       <ProjectInfoItem
         :check-undefined="project.technology?.type"
-        title="Technology type" bold
+        title="Technology type"
+        bold
       >
         {{ project.technology?.type }}
       </ProjectInfoItem>
@@ -32,22 +46,52 @@ defineProps<{
       >
         {{ project.licences }}
       </ProjectInfoItem>
-      <ProjectInfoItem :check-undefined="project.links?.whitepaper" title="Whitepaper" bold :link="project.links?.whitepaper">
+      <ProjectInfoItem
+        :check-undefined="project.links?.whitepaper"
+        title="Whitepaper"
+        bold
+        :link="project.links?.whitepaper"
+      >
         {{ project.links?.whitepaper ? 'YES' : 'NO' }}
       </ProjectInfoItem>
     </div>
-    <div grid grid-cols-1 items-start mt-16px gap-y-16px lg:grid-cols-4>
+    <div
+      grid
+      grid-cols-1
+      items-start
+      mt-16px
+      gap-y-16px
+      lg:grid-cols-4
+    >
       <ProjectInfoItem
         :check-undefined="project.project_status"
         title="Version"
         bold
       >
-        <div v-if="project.project_status?.live_status" flex items-center gap-12px>
+        <div
-          <UnoIcon i-web-live text-10px class="color-#B5E26B" />
+          v-if="project.project_status?.live_status"
+          flex
+          items-center
+          gap-12px
+        >
+          <UnoIcon
+            i-web-live
+            text-10px
+            class="color-#B5E26B"
+          />
           <span>{{ `Live on ${project.project_status.version}` }}</span>
         </div>
-        <div v-else flex items-center gap-12px>
+        <div
-          <UnoIcon i-web-live text-10px class="color-#e26b6b" />
+          v-else
+          flex
+          items-center
+          gap-12px
+        >
+          <UnoIcon
+            i-web-live
+            text-10px
+            class="color-#e26b6b"
+          />
           <span>{{ 'Offline' }}</span>
         </div>
       </ProjectInfoItem>
@@ -60,9 +104,13 @@ defineProps<{
       </ProjectInfoItem>
       <ProjectInfoItem
         :check-undefined="project.client_diversability"
-        title="Client diversability" bold
+        title="Client diversability"
+        bold
       >
-        <template v-for="item in project.client_diversability" :key="item.name">
+        <template
+          v-for="item in project.client_diversability"
+          :key="item.name"
+        >
           <NuxtLink :to="item.link">
             {{ item.name }}
           </NuxtLink><br>

components/SearchBox.vue

@@ -12,33 +12,103 @@ const isSearchFocused = ref(false)
 </script>
 
 <template>
-  <div flex justify-between gap-16px items-centeer>
+  <div
-    <div border-2px flex items-center max-w-320px w-full hover:opacity-100 :class="isSearchFocused ? 'opacity-100' : 'opacity-25'">
+    flex
-      <div px-12px py-0px flex w-fit>
+    justify-between
+    gap-16px
+    items-centeer
+  >
+    <div
+      border-2px
+      flex
+      items-center
+      max-w-320px
+      w-full
+      hover:opacity-100
+      :class="isSearchFocused ? 'opacity-100' : 'opacity-25'"
+    >
+      <div
+        px-12px
+        py-0px
+        flex
+        w-fit
+      >
         <UnoIcon
-          i-web-search text-16px
+          i-web-search
+          text-16px
           :class="isSearchFocused ? 'opacity-100' : 'opacity-50' "
           class="uno-icon"
         />
       </div>
       <input
-        v-model="filter.query" type="text"
+        v-model="filter.query"
-        bg-transparent border-transparent
+        type="text"
-        focus:border-transparent focus:ring-0
+        bg-transparent
-        h-full w-full outline-none @focus="isSearchFocused = true" @blur="isSearchFocused = false"
+        border-transparent
+        focus:border-transparent
+        focus:ring-0
+        h-full
+        w-full
+        outline-none
+        @focus="isSearchFocused = true"
+        @blur="isSearchFocused = false"
       >
     </div>
     <div>
-      <div flex gap-24px items-center w-full>
+      <div
-        <div gap-12px items-center xl:flex hidden invisible>
+        flex
-          <UnoIcon i-web-list text-16px cursor-pointer hover:opacity-100 :class="switcher ? 'opacity-100' : 'opacity-50'" @click="switcher = true" />
+        gap-24px
-          <UnoIcon i-web-blocks text-16px cursor-pointer hover:opacity-100 :class="!switcher ? 'opacity-100' : 'opacity-50'" @click="switcher = false" />
+        items-center
+        w-full
+      >
+        <div
+          gap-12px
+          items-center
+          xl:flex
+          hidden
+          invisible
+        >
+          <UnoIcon
+            i-web-list
+            text-16px
+            cursor-pointer
+            hover:opacity-100
+            :class="switcher ? 'opacity-100' : 'opacity-50'"
+            @click="switcher = true"
+          />
+          <UnoIcon
+            i-web-blocks
+            text-16px
+            cursor-pointer
+            hover:opacity-100
+            :class="!switcher ? 'opacity-100' : 'opacity-50'"
+            @click="switcher = false"
+          />
         </div>
-        <div flex gap-12px items-center w-full>
+        <div
-          <h4 xl:block hidden text-16px opacity-50 w-fit>
+          flex
+          gap-12px
+          items-center
+          w-full
+        >
+          <h4
+            xl:block
+            hidden
+            text-16px
+            opacity-50
+            w-fit
+          >
             Sort by
           </h4>
-          <SelectBox v-model="filter.sortby" :black-and-white="false" :options="options" w-99px sm:w-162px text-black :is-margin-top="false" />
+          <SelectBox
+            v-model="filter.sortby"
+            :black-and-white="false"
+            :options="options"
+            w-99px
+            sm:w-162px
+            text-black
+            :is-margin-top="false"
+          />
         </div>
       </div>
     </div>

components/SelectBox.vue

@@ -18,33 +18,50 @@ const selectedValue = useVModel(props, 'modelValue', emits)
 </script>
 
 <template>
-  <HeadlessListbox v-model="selectedValue" as="div">
+  <HeadlessListbox
-    <div class="relative font-700" :class="[isMarginTop ? 'mt-2' : 'mt-0', blackAndWhite ? 'bg-app-black' : 'bg-app-white']">
+    v-model="selectedValue"
+    as="div"
+  >
+    <div
+      class="relative font-700"
+      :class="[isMarginTop ? 'mt-2' : 'mt-0', blackAndWhite ? 'bg-app-black' : 'bg-app-white']"
+    >
       <HeadlessListboxButton
-        class="relative w-full cursor-pointer py-8px p-16px text-left border-2px  sm:text-sm sm:leading-6" :class="[blackAndWhite ? ' text-app-white' : 'text-app-black']"
+        class="relative w-full cursor-pointer py-8px p-16px text-left border-2px  sm:text-sm sm:leading-6"
+        :class="[blackAndWhite ? ' text-app-white' : 'text-app-black']"
       >
         <span class="block truncate mr-8px">{{ props.options.find(option => option.value === selectedValue)?.label }}</span>
         <span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
-          <UnoIcon i-heroicons-solid-chevron-down :class="[blackAndWhite ? ' text-app-white' : 'text-app-black']" />
+          <UnoIcon
+            i-heroicons-solid-chevron-down
+            :class="[blackAndWhite ? ' text-app-white' : 'text-app-black']"
+          />
         </span>
       </HeadlessListboxButton>
 
       <transition
-        leave-active-class="transition ease-in duration-100" leave-from-class="opacity-100"
+        leave-active-class="transition ease-in duration-100"
+        leave-from-class="opacity-100"
         leave-to-class="opacity-0"
       >
         <HeadlessListboxOptions
           class="absolute z-100 max-h-60 w-full divide-y-2px border-2px border-t-0 overflow-auto bg-app-black text-app-white focus:outline-none sm:text-sm"
         >
           <HeadlessListboxOption
-            v-for="option in props.options" :key="option.value" v-slot="{ active, selected }"
+            v-for="option in props.options"
-            as="template" :value="option.value"
+            :key="option.value"
+            v-slot="{ active, selected }"
+            as="template"
+            :value="option.value"
           >
             <li
               class="w-full relative cursor-pointer select-none py-8px p-16px"
               :class="[active ? 'bg-#ffffff1a' : 'text-white']"
             >
-              <span class="block truncate" :class="[selected ? 'font-semibold' : 'font-normal']">{{ option.label }}</span>
+              <span
+                class="block truncate"
+                :class="[selected ? 'font-semibold' : 'font-normal']"
+              >{{ option.label }}</span>
             </li>
           </HeadlessListboxOption>
         </HeadlessListboxOptions>

components/ShareButton.vue

@@ -2,8 +2,14 @@
 </script>
 
 <template>
-  <div flex gap-12px>
+  <div
-    <UnoIcon i-heroicons-solid-share text-24px />
+    flex
+    gap-12px
+  >
+    <UnoIcon
+      i-heroicons-solid-share
+      text-24px
+    />
     <slot />
   </div>
 </template>

components/Tabs.vue

@@ -12,8 +12,23 @@ const selectedValue = useVModel(props, 'modelValue', emits)
 </script>
 
 <template>
-  <div flex items-center gap-16px>
+  <div
-    <div v-for="option in options" :key="option.value" :class="[selectedValue === option.value ? 'font-700 text-app-black bg-app-white' : 'font-400 text-app-white  border-app-white']" text-24px leading-32px px-16px py-8px border-2px cursor-pointer @click="selectedValue = option.value">
+    flex
+    items-center
+    gap-16px
+  >
+    <div
+      v-for="option in options"
+      :key="option.value"
+      :class="[selectedValue === option.value ? 'font-700 text-app-black bg-app-white' : 'font-400 text-app-white  border-app-white']"
+      text-24px
+      leading-32px
+      px-16px
+      py-8px
+      border-2px
+      cursor-pointer
+      @click="selectedValue = option.value"
+    >
       {{ option.label }}
     </div>
   </div>

eslint.config.mjs

@@ -0,0 +1,12 @@
+// @ts-check
+import withNuxt from './.nuxt/eslint.config.mjs'
+
+export default withNuxt(
+  // Your custom configs here
+  {
+    rules: {
+      '@typescript-eslint/no-explicit-any': 'off',
+      'vue/multi-word-component-names': 'off',
+    },
+  },
+)

layouts/default.vue

@@ -14,7 +14,7 @@ const selectedCategory = computed(() => {
 
 const sortedFilteredCategories = computed(() => ([
   categories.value.find(c => c.id === 'defi')!,
-  ...categories.value.sort((a, b) => a.name.localeCompare(b.name)).filter(c => c.id !== 'defi'),
+  ...[...categories.value].sort((a, b) => a.name.localeCompare(b.name)).filter(c => c.id !== 'defi'),
 ]))
 
 const { showBar } = storeToRefs(useNavigaiton())
@@ -38,39 +38,95 @@ watch([scrollY, top, y], (newValues, oldValues) => {
 </script>
 
 <template>
-  <div ref="swipeEl" flex flex-col min-h-100vh h-full w-full>
+  <div
+    ref="swipeEl"
+    flex
+    flex-col
+    min-h-100vh
+    h-full
+    w-full
+  >
     <Navigation />
-    <div app-container mt-32px>
+    <div
-      <div flex w-full xl:gap-32px>
+      app-container
+      mt-32px
+    >
+      <div
+        flex
+        w-full
+        xl:gap-32px
+      >
         <div w-fit>
           <div
             ref="scrollEl"
             class="no-scrollbar"
-            h-100vh overflow-y-auto sticky top-32px hidden xl:block min-w-234px pb-48px
+            h-100vh
+            overflow-y-auto
+            sticky
+            top-32px
+            hidden
+            xl:block
+            min-w-234px
+            pb-48px
           >
             <Category
               v-for="category in sortedFilteredCategories"
-              :key="category.id" :title="category.name"
+              :key="category.id"
-              :count="category.projectsCount" :selected="selectedCategoryId === category.id"
+              :title="category.name"
+              :count="category.projectsCount"
+              :selected="selectedCategoryId === category.id"
               @click="[navigateTo(`/category/${category.id}`), selectedCategoryId = category.id]"
             />
           </div>
         </div>
         <div w-full>
-          <div flex flex-col gap-16px w-full>
+          <div
-            <div xl:hidden block>
+            flex
-              <h2 text-14px font-700>
+            flex-col
+            gap-16px
+            w-full
+          >
+            <div
+              xl:hidden
+              block
+            >
+              <h2
+                text-14px
+                font-700
+              >
                 Choose category
               </h2>
-              <CategorySelectBox v-model="selectedCategoryId" :options="extendedOptions" w-full @selected="selectedCategoryId === 'all' ? navigateTo(`/`) : navigateTo(`/category/${selectedCategoryId}`)" />
+              <CategorySelectBox
+                v-model="selectedCategoryId"
+                :options="extendedOptions"
+                w-full
+                @selected="selectedCategoryId === 'all' ? navigateTo(`/`) : navigateTo(`/category/${selectedCategoryId}`)"
+              />
             </div>
             <SearchBox />
           </div>
-          <div flex gap-28px items-center my-24px mt-28px>
+          <div
-            <h2 v-if="selectedCategoryId" w-max font-700 text-18px sm:text-28px whitespace-nowrap>
+            flex
+            gap-28px
+            items-center
+            my-24px
+            mt-28px
+          >
+            <h2
+              v-if="selectedCategoryId"
+              w-max
+              font-700
+              text-18px
+              sm:text-28px
+              whitespace-nowrap
+            >
               {{ selectedCategoryId === 'all' ? `${filteredProjectsCount} All Projects` : `${filteredProjectsCount ?? 0} ${selectedCategory?.name}` }}
             </h2>
-            <div h-2px w="full" bg-white />
+            <div
+              h-2px
+              w="full"
+              bg-white
+            />
           </div>
           <slot />
         </div>

layouts/detail.vue

@@ -12,7 +12,11 @@ watch(y, (newY, oldY) => {
 </script>
 
 <template>
-  <div ref="swipeEl" h-full w-full>
+  <div
+    ref="swipeEl"
+    h-full
+    w-full
+  >
     <Navigation />
     <slot />
   </div>

nuxt.config.ts

@@ -1,6 +1,7 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   modules: [
+    '@nuxt/eslint',
     '@vueuse/nuxt',
     '@unocss/nuxt',
     '@pinia/nuxt',
@@ -21,8 +22,6 @@ export default defineNuxtConfig({
     // when using generate, payload js assets included in sw precache manifest
     // but missing on offline, disabling extraction it until fixed
     payloadExtraction: false,
-    inlineSSRStyles: false,
-    reactivityTransform: true,
     // typedPages: true,
     componentIslands: true,
   },
@@ -32,6 +31,11 @@ export default defineNuxtConfig({
   colorMode: {
     classSuffix: '',
   },
+  eslint: {
+    config: {
+      stylistic: true,
+    },
+  },
   nitro: {
     preset: 'vercel',
     esbuild: {

package.json

@@ -1,7 +1,7 @@
 {
   "name": "develitesse-nuxt",
   "private": true,
-  "packageManager": "pnpm@8.12.1",
+  "packageManager": "pnpm@9.9.0",
   "scripts": {
     "build": "nuxt build",
     "cleanup": "nuxt cleanup",
@@ -16,29 +16,35 @@
     "typecheck": "nuxt typecheck --no-emit"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "0.43.1",
+    "@formkit/auto-animate": "^0.8.2",
-    "@formkit/auto-animate": "^0.8.1",
+    "@iconify-json/heroicons-outline": "^1.2.0",
-    "@iconify-json/heroicons-outline": "^1.1.10",
+    "@iconify-json/heroicons-solid": "^1.2.0",
-    "@iconify-json/heroicons-solid": "^1.1.11",
+    "@nuxt/devtools": "^1.4.1",
-    "@nuxt/devtools": "^1.0.6",
+    "@nuxt/eslint": "0.5.5",
-    "@nuxt/image": "^1.1.0",
+    "@nuxt/image": "^1.8.0",
-    "@nuxt/test-utils": "^3.9.0",
+    "@nuxt/test-utils": "^3.14.1",
-    "@nuxtjs/color-mode": "^3.3.2",
+    "@nuxtjs/color-mode": "^3.4.4",
-    "@pinia/nuxt": "^0.5.1",
+    "@pinia/nuxt": "^0.5.4",
-    "@unocss/nuxt": "^0.58.0",
+    "@unocss/nuxt": "^0.62.3",
-    "@vueuse/nuxt": "^10.7.0",
+    "@vueuse/nuxt": "^11.0.3",
-    "eslint": "^8.56.0",
+    "eslint": "^9.9.1",
-    "nuxt": "^3.8.2",
+    "nuxt": "^3.13.0",
-    "nuxt-headlessui": "^1.1.4",
+    "nuxt-headlessui": "^1.2.0",
     "nuxt-lodash": "^2.5.3",
-    "pinia": "^2.1.7",
+    "pinia": "^2.2.2",
-    "pnpm": "^8.12.1",
+    "taze": "^0.16.7",
-    "taze": "^0.13.0",
+    "typescript": "^5.5.4",
-    "typescript": "^5.3.3",
+    "vitest": "^2.0.5",
-    "vitest": "^1.1.0",
+    "vue-tsc": "^2.1.4"
-    "vue-tsc": "^1.8.25"
   },
   "overrides": {
     "vue": "latest"
+  },
+  "simple-git-hooks": {
+    "commit-msg": "npx commitlint --edit $1",
+    "pre-commit": "npx lint-staged"
+  },
+  "lint-staged": {
+    "*": "eslint --fix"
   }
 }

pages/project/[id].vue

@@ -33,7 +33,12 @@ useSeoMeta({
 <template>
   <div v-if="project">
     <div app-container>
-      <div flex flex-col gap-48px mt-54px>
+      <div
+        flex
+        flex-col
+        gap-48px
+        mt-54px
+      >
         <div>
           <div>
             <ProjectHeading :project="project" />

pages/styleguide.vue

@@ -7,26 +7,39 @@ const options: InputOption[] = [
 
 const loremIpsum: string = 'Description just text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tempus nulla quis enim vulputate semper. Duis varius nibh sed magna tincidunt pellentesque.'
 
-const cardData = {
+// const cardData = {
-  image: 'https://ctrlv.cz/Epud',
+//   image: 'https://ctrlv.cz/Epud',
-  title1: 'title1',
+//   title1: 'title1',
-  title2: 'title2',
+//   title2: 'title2',
-  percentage: 84,
+//   percentage: 84,
-  anonymity: true,
+//   anonymity: true,
-  decentralized: true,
+//   decentralized: true,
-  opensource: true,
+//   opensource: true,
-  license: 'MIT',
+//   license: 'MIT',
-  datatracking: true,
+//   datatracking: true,
-  compliance: true,
+//   compliance: true,
-}
+// }
 
 const selectedOption = ref('all')
 </script>
 
 <template>
-  <div flex flex-col items-start justify-start gap-8px>
+  <div
-    <Category title="All Projects" :count="503" />
+    flex
-    <Category title="All Projects" :count="503" selected />
+    flex-col
+    items-start
+    justify-start
+    gap-8px
+  >
+    <Category
+      title="All Projects"
+      :count="503"
+    />
+    <Category
+      title="All Projects"
+      :count="503"
+      selected
+    />
     <Button mt-16px>
       <template #prefix>
         <UnoIcon i-heroicons-solid-pencil />
@@ -36,19 +49,39 @@ const selectedOption = ref('all')
     <Button>
       Save Research
     </Button>
-    <MenuItem title="Dashboard" mt-16px />
+    <MenuItem
-    <MenuItem title="Dashboard" selected />
+      title="Dashboard"
+      mt-16px
+    />
+    <MenuItem
+      title="Dashboard"
+      selected
+    />
     <Badge text="84%" />
-    <Badge text="84%" inverted />
+    <Badge
-    <SelectBox v-model="selectedOption" mt-16px :options="options" />
+      text="84%"
-    <h1 custom-link mt-16px>
+      inverted
+    />
+    <SelectBox
+      v-model="selectedOption"
+      mt-16px
+      :options="options"
+    />
+    <h1
+      custom-link
+      mt-16px
+    >
       Custom Link
     </h1>
     <Helper :info="loremIpsum" />
     <NavigationButton @click="$router.back()">
       Back
     </NavigationButton>
-    <Tabs v-model="selectedOption" mt-16px :options="options" />
+    <Tabs
+      v-model="selectedOption"
+      mt-16px
+      :options="options"
+    />
   <!--   <Card
       v-if="cardData"
       id="test"

types/project.ts

@@ -145,5 +145,5 @@ export interface ProjectShallow {
 }
 
 export interface ProjectIndexable extends Project {
-  [key: string]: any
+  [key: string]: unknown
 }