From b6e198404647925ee306aff9a9380342d835a317 Mon Sep 17 00:00:00 2001
From: Daniel Klein <daniel@develit.io>
Date: Thu, 12 Sep 2024 08:41:48 +0200
Subject: [PATCH] feat(project-detail): redesign detail

---
 .../Project/ProjectDetailCategoryDivider.vue  |   3 -
 components/Project/ProjectDetailContainer.vue |   2 -
 components/Project/ProjectHeading.vue         | 310 ++++++++-------
 components/Project/ProjectHistory.vue         |  36 ++
 components/Project/ProjectNavigation.vue      |   7 -
 components/Project/ProjectOpeness.vue         | 354 ++++++++++--------
 .../Project/ProjectOpenessTeamMembers.vue     |  54 +--
 components/Project/ProjectPrivacy.vue         | 190 ++--------
 components/Project/ProjectRating.vue          | 159 ++++++++
 components/Project/ProjectSecurity.vue        |  81 ++--
 components/Project/ProjectSecurityAudit.vue   |  79 ++--
 components/Project/ProjectTechnology.vue      | 112 ++----
 package.json                                  |  11 +-
 pages/project/[id].vue                        |   3 +-
 pnpm-lock.yaml                                | 104 +++--
 unocss.config.collections.ts                  |   5 +-
 unocss.config.ts                              |  20 +
 17 files changed, 843 insertions(+), 687 deletions(-)
 create mode 100644 components/Project/ProjectHistory.vue
 create mode 100644 components/Project/ProjectRating.vue

diff --git a/components/Project/ProjectDetailCategoryDivider.vue b/components/Project/ProjectDetailCategoryDivider.vue
index cd49d13..48ffd0e 100644
--- a/components/Project/ProjectDetailCategoryDivider.vue
+++ b/components/Project/ProjectDetailCategoryDivider.vue
@@ -20,9 +20,6 @@ defineProps<{
       gap-8px
       text-16px
       font-700
-      lg:max-w-320px
-      lg:w-full
-      lg:justify-end
     >
       <slot />
       {{ title }}
diff --git a/components/Project/ProjectDetailContainer.vue b/components/Project/ProjectDetailContainer.vue
index 576ae78..0a68200 100644
--- a/components/Project/ProjectDetailContainer.vue
+++ b/components/Project/ProjectDetailContainer.vue
@@ -6,8 +6,6 @@
     <div
       hidden
       w-full
-      max-w-320px
-      lg:block
     />
     <div w-full>
       <slot />
diff --git a/components/Project/ProjectHeading.vue b/components/Project/ProjectHeading.vue
index a815a54..88de9aa 100644
--- a/components/Project/ProjectHeading.vue
+++ b/components/Project/ProjectHeading.vue
@@ -75,26 +75,36 @@ const logo = props.project?.logos?.at(0)?.url
 
 <template>
   <div
-    lg:flex
+    flex
+    flex-col
+    gap-y-16px
+    lg:flex-row
+    items-center
     lg:gap-32px
   >
     <NuxtImg
-      lg:max-w-320px
-      lg:max-h-320px
+      max-w-200px
+      max-h-200px
       shrink
+      border="1px app-text-grey"
       :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]"
+      class="bg-app-bg-grey object-cover h-full vertical-align[middle] block w-full h-[300px]"
     />
-    <div grow>
+    <div
+      grow
+      w-full
+    >
       <div
         flex
         flex-col
+        items-center
+        lg:items-start
         justify-between
-        gap-32px
-        lg:flex-row
-        lg:items-center
+        gap-y="lg:12px 24px"
+        text-app-text-grey
+        w-full
       >
-        <div mt-24px>
+        <div mt-4px>
           <NuxtLink
             :to="project.links?.web"
             target="_blank"
@@ -112,139 +122,175 @@ const logo = props.project?.logos?.at(0)?.url
               {{ project.name }}
             </h1>
             <UnoIcon
-              i-web-openinnew
-              text-16px
+              i-ic-twotone-open-in-new
+              text="22px app-white"
             />
           </NuxtLink>
-          <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
-          py-16px
-          text-32px
-          font-700
-          leading-40px
-          cursor-pointer
+          lg:grid
+          grid-cols-10
+          w-full
+          items-center
+          mt-4px
         >
-          {{ `${calculateScore}%` }}
+          <h2
+            hidden
+            lg:block
+          >
+            Usecases:
+          </h2>
+          <p
+            text-app-white
+            col-span-9
+          >
+            Swap, Mixer
+          </p>
         </div>
-      </div>
-      <div
-        grid
-        grid-cols-2
-        gap-16px
-        my-32px
-        lg:grid-cols-4
-      >
-        <ProjectInfoItem
-          :check-undefined="project.links?.github"
-          title="Github"
-          bold
-          text-size="18px"
+        <div
+          grid
+          grid-cols-2
+          gap-y-12px
+          lg:flex
+          lg:flex-col
+          order-3
+          lg:order-2
+          w-full
         >
-          <template #prefix>
-            <UnoIcon i-web-code />
-          </template>
-          {{ project.links?.github ? 'YES' : 'NO' }}
-        </ProjectInfoItem>
-        <ProjectInfoItem
-          :check-undefined="project.project_status?.version"
-          title="Product readyness"
-          bold
-          text-size="18px"
+          <div
+            flex
+            flex-col
+            gap-4px
+            lg:grid
+            lg:grid-cols-10
+            lg:items-center
+            w-full
+          >
+            <h2>
+              Categories:
+            </h2>
+            <p
+              text-app-white
+              col-span-9
+            >
+              Dapp, Network
+            </p>
+          </div>
+          <div
+            flex
+            flex-col
+            gap-4px
+            lg:grid
+            lg:grid-cols-10
+            lg:items-center
+            w-full
+          >
+            <h2>
+              Ecosystems:
+            </h2>
+            <p
+              text-app-white
+              col-span-9
+            >
+              Ethereum, Secret Network
+            </p>
+          </div>
+        </div>
+        <div
+          grid
+          grid-cols-4
+          w-full
+          items-center
+          order-2
+          lg:order-3
         >
-          <template #prefix>
-            <UnoIcon i-web-cube />
-          </template>
-          {{ project.project_status?.version }}
-        </ProjectInfoItem>
-        <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"
-        >
-          <template #prefix>
-            <UnoIcon
-              i-web-docs
-              text-28px
-            />
-          </template>
-          {{ project.links?.docs ? 'YES' : 'NO' }}
-        </ProjectInfoItem>
-        <ProjectInfoItem
-          :check-undefined="project.audits"
-          title="Audit"
-          bold
-          text-size="18px"
-        >
-          <template #prefix>
-            <UnoIcon
-              i-web-audit
-              text-28px
-            />
-          </template>
-          {{ project.audits ? 'YES' : 'NO' }}
-        </ProjectInfoItem>
-        <ProjectInfoItem
-          :check-undefined="project.links"
-          title="Available support"
-          bold
-          text-size="18px"
-        >
-          <template #prefix>
-            <UnoIcon
-              i-web-support
-              text-28px
-            />
-          </template>
-          {{ `${availableSupport} channels` }}
-        </ProjectInfoItem>
-      </div>
-      <div
-        grid
-        grid-cols-2
-        gap-16px
-        my-32px
-        lg:grid-cols-4
-      >
-        <ProjectInfoItem
-          :check-undefined="project.blockchain_features?.network"
-          tooltip-link="/"
-          title="Ecosystem"
-          bold
-        >
-          {{ project.blockchain_features?.network }}
-        </ProjectInfoItem>
-        <ProjectInfoItem
-          invisible
-          title="Last update"
-          bold
-        >
-          17/11/2023 – 23:22
-        </ProjectInfoItem>
+          <div
+            flex
+            items-center
+            justify-between
+            lg:justify-start
+            lg:gap-24px
+            col-span-3
+          >
+            <div
+              flex
+              flex-col
+              lg:flex-row
+              items-center
+            >
+              <p text="12px lg:16px" leading="16px lg:24px">Openess:</p>
+              <ProjectRating
+                :rating="project.ratings.openess"
+                type="openess"
+                :score="1"
+                compact
+              />
+            </div>
+            <div
+              flex
+              flex-col
+              lg:flex-row
+              items-center
+            >
+              <p text="12px lg:16px" leading="16px lg:24px">Technology:</p>
+              <ProjectRating
+                :rating="project.ratings.technology"
+                type="technology"
+                :score="2"
+                compact
+              />
+            </div>
+            <div
+              flex
+              flex-col
+              lg:flex-row
+              items-center
+            >
+              <p text="12px lg:16px" leading="16px lg:24px">Privacy:</p>
+              <ProjectRating
+                :rating="project.ratings.privacy"
+                type="privacy"
+                :score="3"
+                compact
+              />
+            </div>
+          </div>
+          <div
+            flex
+            items-center
+            justify-end
+            w-full
+            gap-16px
+            mt--8px lg:mt-0
+          >
+            <h2
+              hidden
+              lg:block
+            >
+              Total Score:
+            </h2>
+            <div
+              flex
+              items-center
+              justify-center
+              border="2px app-white"
+              text="16px lg:24px app-white"
+              leading="24px md:32px"
+              max-h-="32px md:40px"
+              max-w="84px"
+              w-full
+              h-full
+              font-700
+              whitespace-nowrap
+              py="2px lg:8px"
+              lg:py-4px
+            >
+              {{ calculateScore }} %
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </div>
diff --git a/components/Project/ProjectHistory.vue b/components/Project/ProjectHistory.vue
new file mode 100644
index 0000000..2b34e0b
--- /dev/null
+++ b/components/Project/ProjectHistory.vue
@@ -0,0 +1,36 @@
+<script lang="ts" setup>
+import type { Project } from '~/types'
+
+defineProps<{
+  project: Project
+}>()
+</script>
+
+<template>
+  <ProjectDetailCategoryDivider
+    title="HISTORY"
+    badge-text="3/10"
+  >
+    <UnoIcon
+      i-material-symbols-calendar-month
+      text-24px
+    />
+  </ProjectDetailCategoryDivider>
+  <ProjectDetailContainer>
+    <div
+      grid
+      grid-cols-2
+      items-start
+      mt-32px
+      gap-y-16px
+      lg:grid-cols-4
+    >
+      <ProjectInfoItem
+        :check-undefined="project.history?.time"
+        title="Date of creation"
+      >
+        {{ formatDate(project.history?.time) }}
+      </ProjectInfoItem>
+    </div>
+  </ProjectDetailContainer>
+</template>
diff --git a/components/Project/ProjectNavigation.vue b/components/Project/ProjectNavigation.vue
index 94f2f9c..c226100 100644
--- a/components/Project/ProjectNavigation.vue
+++ b/components/Project/ProjectNavigation.vue
@@ -32,13 +32,6 @@ const githubProjectUrl = computed(() => {
         md:block
       >{{ 'BACK TO LIST' }}</span>
     </NavigationButton>
-    <hr
-      hidden
-      md:block
-      border-t-2px
-      border-white
-      w-full
-    >
     <div
       flex
       gap-16px
diff --git a/components/Project/ProjectOpeness.vue b/components/Project/ProjectOpeness.vue
index 42ef5db..11ba632 100644
--- a/components/Project/ProjectOpeness.vue
+++ b/components/Project/ProjectOpeness.vue
@@ -12,7 +12,7 @@ defineProps<{
     badge-text="3/10"
   >
     <UnoIcon
-      i-web-code_v2
+      i-bi-code-square
       text-24px
     />
   </ProjectDetailCategoryDivider>
@@ -23,25 +23,98 @@ defineProps<{
       leading-24px
       font-400
     >
-      <h3 text-app-text-grey>
-        {{ 'Project Description' }}
+      <h3
+        text-app-text-grey
+        mb-8px
+      >
+        Project Description
       </h3>
-      <span
+      <p
         text="14px sm:16px"
         leading-20px
-      >{{ project.description ?? '---' }}</span>
+      >
+        {{ project.description ?? '---' }}
+      </p>
+    </div>
+    <div
+      grid
+      grid-cols="2 lg:4"
+      mt="24px lg:32px"
+      text="14px lg:16px"
+      gap-y-16px
+    >
+      <div>
+        <h3
+          text-app-text-grey
+          leading-20px
+          mb="4px lg:8px"
+        >
+          Project Phase
+        </h3>
+        <div
+          flex
+          items-center
+          gap-8px
+        >
+          <div
+            h-10px
+            w-10px
+            rounded-full
+            bg-green
+          /><p leading="20px lg:24px">
+            Mainnet
+          </p>
+        </div>
+      </div>
+      <div>
+        <h3
+          text-app-text-grey
+          leading-20px
+          mb="4px lg:8px"
+        >
+          Assets used
+        </h3>
+        <p leading="20px lg:24px">
+          ETH, DAI, USDC, FRAX
+        </p>
+      </div>
+      <div>
+        <h3
+          text-app-text-grey
+          leading-20px
+          mb="4px lg:8px"
+        >
+          Native token
+        </h3>
+        <p leading="20px lg:24px">
+          SCRT
+        </p>
+      </div>
+      <div>
+        <h3
+          text-app-text-grey
+          leading-20px
+          mb="4px lg:8px"
+        >
+          Project launch day
+        </h3>
+        <p leading="20px lg:24px">
+          06/2017
+        </p>
+      </div>
     </div>
     <div mt-24px>
       <h3
         text="14px sm:16px app-text-grey"
         leading-20px
       >
-        {{ 'Infrastructure links' }}
+        Infrastructure links:
       </h3>
       <div
         grid
         grid-cols-2
-        gap-16px
+        gap-x-16px
+        gap-y-12px
         mt-8px
         lg:grid-cols-4
       >
@@ -50,18 +123,12 @@ defineProps<{
           :to="project.links?.web"
         >
           <template #prefix>
-            <UnoIcon i-web-website />
+            <UnoIcon
+              i-ic-baseline-language
+              text="24px app-text-grey"
+            />
           </template>
-          {{ 'Website' }}
-        </ProjectOpenessLink>
-        <ProjectOpenessLink
-          v-if="project.links?.blog"
-          :to="project.links.blog"
-        >
-          <template #prefix>
-            <UnoIcon i-web-website />
-          </template>
-          {{ 'Blog' }}
+          Website
         </ProjectOpenessLink>
         <ProjectOpenessLink
           v-if="project.links?.github"
@@ -69,12 +136,25 @@ defineProps<{
         >
           <template #prefix>
             <UnoIcon
-              i-web-github
-              opacity-30
+              i-mdi-github
+              text="24px app-text-grey"
               text-27px
             />
           </template>
-          {{ 'Github' }}
+          Github
+        </ProjectOpenessLink>
+        <ProjectOpenessLink
+          v-if="project.links?.whitepaper"
+          :to="project.links?.whitepaper"
+        >
+          <template #prefix>
+            <UnoIcon
+              i-material-symbols-description
+              text="24px app-text-grey"
+              text-27px
+            />
+          </template>
+          Whitepaper
         </ProjectOpenessLink>
         <ProjectOpenessLink
           v-if="project.links?.docs"
@@ -82,11 +162,38 @@ defineProps<{
         >
           <template #prefix>
             <UnoIcon
-              i-web-documents
-              text-24px
+              i-material-symbols-contract
+              text="24px app-text-grey"
+              text-27px
             />
           </template>
-          {{ 'Docs' }}
+          Docs
+        </ProjectOpenessLink>
+        <ProjectOpenessLink
+          v-if="project.links?.blog"
+          :to="project.links.blog"
+        >
+          <template #prefix>
+            <UnoIcon
+              i-material-symbols-newsmode
+              text="24px app-text-grey"
+              text-27px
+            />
+          </template>
+          Blog
+        </ProjectOpenessLink>
+        <ProjectOpenessLink
+          v-if="project.links?.forum"
+          :to="project.links.forum"
+        >
+          <template #prefix>
+            <UnoIcon
+              i-material-symbols-forum-outline
+              text="24px app-text-grey"
+              text-27px
+            />
+          </template>
+          Forum
         </ProjectOpenessLink>
         <ProjectOpenessLink
           v-if="project.links?.block_explorer"
@@ -94,48 +201,25 @@ defineProps<{
         >
           <template #prefix>
             <UnoIcon
-              i-web-explorer
-              opacity-30
+              i-material-symbols-explore-outline
+              text="24px app-text-grey"
+              text-27px
             />
           </template>
-          {{ 'Explorer' }}
+          Explorer
         </ProjectOpenessLink>
         <ProjectOpenessLink
-          v-if="project.links?.snapshot"
-          :to="project.links.snapshot"
+          v-if="project.links?.governance"
+          :to="project.links.governance"
         >
           <template #prefix>
             <UnoIcon
-              i-web-snapshot
-              text-32px
+              i-material-symbols-how-to-vote-outline
+              text="24px app-text-grey"
+              text-27px
             />
           </template>
-          {{ 'Snapshot' }}
-        </ProjectOpenessLink>
-        <ProjectOpenessLink
-          v-if="project.links?.token"
-          :to="project.links.token"
-        >
-          <template #prefix>
-            <UnoIcon
-              i-web-token
-              text-28px
-            />
-          </template>
-          {{ 'Token' }}
-        </ProjectOpenessLink>
-        <ProjectOpenessLink
-          v-if="project.links?.coingecko"
-          :to="project.links.coingecko"
-        >
-          <template #prefix>
-            <UnoIcon
-              i-web-coingecko
-              opacity-30
-              text-24px
-            />
-          </template>
-          {{ 'Coingecko' }}
+          Governance
         </ProjectOpenessLink>
       </div>
     </div>
@@ -149,22 +233,22 @@ defineProps<{
       <div
         grid
         grid-cols-2
-        gap-16px
+        gap-x-16px
+        gap-y-12px
         mt-8px
         lg:grid-cols-4
       >
         <ProjectOpenessLink
-          v-if="project.links?.forum"
-          :to="project.links.forum"
+          v-if="project.links?.twitter"
+          :to="project.links.twitter"
         >
           <template #prefix>
             <UnoIcon
-              i-web-forum
-              opacity-30
-              text-28px
+              i-bi-twitter-x
+              text="24px app-text-grey"
             />
           </template>
-          {{ 'Forum' }}
+          Twitter
         </ProjectOpenessLink>
         <ProjectOpenessLink
           v-if="project.links?.discord"
@@ -172,24 +256,23 @@ defineProps<{
         >
           <template #prefix>
             <UnoIcon
-              i-web-discord
-              text-27px
+              i-ic-baseline-discord
+              text="24px app-text-grey"
             />
           </template>
-          {{ 'Discord' }}
+          Discord
         </ProjectOpenessLink>
         <ProjectOpenessLink
-          v-if="project.links?.twitter"
-          :to="project.links.twitter"
+          v-if="project.links?.telegram"
+          :to="project.links.telegram"
         >
           <template #prefix>
             <UnoIcon
-              i-web-twitter_x
-              opacity-30
-              text-22px
+              i-mdi-telegram
+              text="24px app-text-grey"
             />
           </template>
-          {{ 'Twitter' }}
+          Telegram
         </ProjectOpenessLink>
         <ProjectOpenessLink
           v-if="project.links?.lens"
@@ -198,10 +281,10 @@ defineProps<{
           <template #prefix>
             <UnoIcon
               i-web-lens
-              text-32px
+              text="24px app-text-grey"
             />
           </template>
-          {{ 'Lens' }}
+          Lens
         </ProjectOpenessLink>
         <ProjectOpenessLink
           v-if="project.links?.farcaster"
@@ -210,89 +293,62 @@ defineProps<{
           <template #prefix>
             <UnoIcon
               i-web-farcaster
-              text-26px
+              text="24px app-text-grey"
             />
           </template>
-          {{ 'Farcaster' }}
-        </ProjectOpenessLink>
-        <ProjectOpenessLink
-          v-if="project.links?.telegram"
-          :to="project.links.telegram"
-        >
-          <template #prefix>
-            <UnoIcon
-              i-web-telegram
-              opacity-30
-              text-22px
-            />
-          </template>
-          {{ 'Telegram' }}
+          Farcaster
         </ProjectOpenessLink>
       </div>
     </div>
-    <div mt-24px>
-      <ProjectOpenessTeamMembers :members="project.team" />
-    </div>
-    <div
-      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"
+    <ProjectOpenessTeamMembers
+      v-if="projcet?.team"
+      :members="project.team.teammembers"
+      mt-24px
+    />
+    <div mt-32px>
+      <h3
+        text="app-text-grey 14px lg:16px"
+        leading-24px
       >
-        {{ project.product_launch_day }}
-      </ProjectInfoItem>
-      <ProjectInfoItem
-        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
-    >
-      <ProjectInfoItem
-        :check-undefined="project.funding"
-        title="Funding"
-        bold
+        Funding
+      </h3>
+      <div
+        v-if="project.funding"
+        flex
+        items-center
+        justify-between
+        rounded-full
         w-full
+        bg-app-bg-funding-card
+        px-24px
+        py-12px
+        mt-12px
       >
-        <template
-          v-for="fund in project.funding"
-          :key="fund.name"
+        <h3
+          text="14px lg:16px"
+          leading="20px lg:24px"
+          font-700
         >
-          <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
-              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>
+          {{ project.funding.name }}
+        </h3>
+        <NuxtLink
+          :to="project.funding.link"
+          external
+          target="_blank"
+        >
+          <UnoIcon
+            i-ic-twotone-open-in-new
+            text="22px app-text-grey"
+          />
+        </NuxtLink>
+      </div>
+      <h3
+        v-else
+        text="app-text-grey 14px lg:16px"
+        leading-24px
+      >
+        N/A
+      </h3>
     </div>
   </ProjectDetailContainer>
 </template>
diff --git a/components/Project/ProjectOpenessTeamMembers.vue b/components/Project/ProjectOpenessTeamMembers.vue
index cb1d66c..1c1a431 100644
--- a/components/Project/ProjectOpenessTeamMembers.vue
+++ b/components/Project/ProjectOpenessTeamMembers.vue
@@ -32,58 +32,20 @@ const props = defineProps<{
         >
           <div
             flex
+            items-center
             gap-12px
           >
-            <template v-if="member.link">
+            <!-- <template v-if="member.link">
               <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"
-              >
-                <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"
-                  >
-                    <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"
-                    />
-                  </g>
-                </g>
-              </svg>
-            </template>
+            </template> -->
+            <div flex items-center justify-center text-black w="40px lg:48px" h="40px lg:48px" rounded-full bg-app-bg-team-grey>
+              <div i-heroicons-solid-user text-24px></div>
+            </div>
             <div
               flex
               flex-col
@@ -92,10 +54,6 @@ const props = defineProps<{
                 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>
diff --git a/components/Project/ProjectPrivacy.vue b/components/Project/ProjectPrivacy.vue
index c607b55..96b7cd2 100644
--- a/components/Project/ProjectPrivacy.vue
+++ b/components/Project/ProjectPrivacy.vue
@@ -12,7 +12,7 @@ defineProps<{
     badge-text="3/10"
   >
     <UnoIcon
-      i-web-code_v2
+      i-heroicons-solid-eye
       text-24px
     />
   </ProjectDetailCategoryDivider>
@@ -26,11 +26,11 @@ defineProps<{
       lg:grid-cols-4
     >
       <ProjectInfoItem
-        :check-undefined="project.blockchain_features?.p2p"
-        bold
-        title="Peer to Peer (P2P)"
+        :check-undefined="project.default_privacy"
+        title="Default privacy"
+        :color="project.default_privacy ? '#18FF2F' : '#FF0000'"
       >
-        {{ project.blockchain_features?.p2p ? 'YES' : 'NO' }}
+        {{ project.default_privacy ? 'YES' : 'NO' }}
       </ProjectInfoItem>
       <ProjectInfoItem
         :check-undefined="project.tracebility?.kyc"
@@ -40,109 +40,6 @@ defineProps<{
       >
         {{ project.tracebility?.kyc ? 'YES' : 'NO' }}
       </ProjectInfoItem>
-      <ProjectInfoItem
-        :check-undefined="project.storage"
-        bold
-        title="Decentralized storage"
-        :color="project.storage?.decentralized ? '#18FF2F' : '#FF0000'"
-      >
-        {{ project.storage?.decentralized ? 'YES' : 'NO' }}
-      </ProjectInfoItem>
-      <ProjectInfoItem
-        :check-undefined="project.default_privacy"
-        title="Default privacy"
-        :color="project.default_privacy ? '#18FF2F' : '#FF0000'"
-      >
-        {{ project.default_privacy ? 'YES' : 'NO' }}
-      </ProjectInfoItem>
-    </div>
-    <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"
-      >
-        {{ 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"
-      >
-        {{ 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"
-      >
-        {{ project.blockchain_features?.revealed_ammount ? 'YES' : 'NO' }}
-      </ProjectInfoItem>
-      <ProjectInfoItem
-        :check-undefined="project.blockchain_features?.reversability_condition"
-        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
-    >
-      <ProjectInfoItem
-        :check-undefined="project.blockchain_features?.connected_tx"
-        :color="project.blockchain_features?.connected_tx ? '#FF0000' : '#18FF2F'"
-        bold
-        title="Connected Txs"
-      >
-        {{ project.blockchain_features?.connected_tx ? 'YES' : 'NO' }}
-      </ProjectInfoItem>
-      <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"
-      >
-        {{ project.blockchain_features?.tx_history ? 'YES' : 'NO' }}
-      </ProjectInfoItem>
-    </div>
-    <div my-24px>
-      <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
-    >
       <ProjectInfoItem
         :check-undefined="project.privacy_policy"
         :color="project.privacy_policy?.defined ? '#18FF2F' : '#FF0000'"
@@ -150,6 +47,31 @@ defineProps<{
         title="Privacy Policy"
       >
         {{ project.privacy_policy?.defined ? 'YES' : 'NO' }}
+        <NuxtLink
+          :to="project.privacy_policy?.link"
+          external
+          target="_blank"
+        >
+          <UnoIcon
+            i-ic-twotone-open-in-new
+            text="22px app-text-grey"
+          />
+        </NuxtLink>
+      </ProjectInfoItem>
+      <ProjectInfoItem
+        :check-undefined="project.compliance"
+        color="#FFB800"
+        bold
+        title="Compliance with"
+      >
+        {{ project.compliance ? 'YES' : 'NO' }}
+      </ProjectInfoItem>
+      <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.tracebility?.tracked_data"
@@ -163,58 +85,6 @@ defineProps<{
       >
         {{ project.privacy_policy?.data_usage }}
       </ProjectInfoItem>
-      <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
-      >
-    </div>
-    <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"
-      >
-        {{ project.compliance ? 'YES' : 'NO' }}
-      </ProjectInfoItem>
-    </div>
-    <div
-      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"
-      >
-        {{ project.blockchain_features?.identity_integration }}
-      </ProjectInfoItem>
     </div>
   </ProjectDetailContainer>
 </template>
diff --git a/components/Project/ProjectRating.vue b/components/Project/ProjectRating.vue
new file mode 100644
index 0000000..7909084
--- /dev/null
+++ b/components/Project/ProjectRating.vue
@@ -0,0 +1,159 @@
+<script lang="ts" setup>
+import type { OpenessRating, TechnologyRating, PrivacyRating } from '~/types'
+
+// Define props for score
+const props = defineProps<{
+  rating: TechnologyRating | OpenessRating | PrivacyRating
+  type: string
+  score: number
+  compact?: boolean
+}>()
+
+// Determine the color by score
+const colorByScore = props.score <= 1
+  ? 'bg-app-bg-rating-red'
+  : props.score === 2
+    ? 'bg-app-bg-rating-orange'
+    : props.score === 3
+      ? 'bg-app-bg-rating-yellow'
+      : 'bg-app-bg-rating-green'
+
+const isPopoverVisible = ref(false)
+
+let hideTimeout: ReturnType<typeof setTimeout> | null = null
+const showPopover = () => {
+  if (hideTimeout) {
+    clearTimeout(hideTimeout)
+    hideTimeout = null
+  }
+  isPopoverVisible.value = true
+}
+
+const hidePopover = () => {
+  hideTimeout = setTimeout(() => {
+    isPopoverVisible.value = false
+  }, 100) // Delay of 200ms before hiding
+}
+
+function currentRating<T>(): T {
+  if (props.type === 'privacy')
+    return props.rating as T
+  if (props.type === 'technology')
+    return props.rating as T
+  return props.rating as T
+}
+
+function items(): { label: string, condition: boolean, positive: string, negative: string, link?: string }[] {
+  if (props.type === 'privacy')
+    return [
+      { label: 'KYC', condition: !!currentRating<PrivacyRating>().no_kyc, positive: 'No', negative: 'Yes' },
+      { label: 'Compliance', condition: !!currentRating<PrivacyRating>().no_compliance, positive: 'No', negative: 'OFAC' },
+      { label: 'Privacy policy', condition: !!currentRating<PrivacyRating>().policy, positive: 'Link', negative: 'Not available', link: currentRating<PrivacyRating>().policy },
+      { label: 'Default privacy', condition: !!currentRating<PrivacyRating>().default_privacy, positive: 'Yes', negative: 'No' },
+    ]
+  if (props.type === 'technology')
+    return [
+      { label: 'Mainnet', condition: !!currentRating<TechnologyRating>().mainnet, positive: 'Yes', negative: 'No' },
+      { label: 'Opensource', condition: !!currentRating<TechnologyRating>().opensource, positive: 'Yes', negative: 'No' },
+      { label: 'Asset custody', condition: !!currentRating<TechnologyRating>().assets, positive: 'None', negative: 'Custodial' },
+      { label: 'Upgradability', condition: !!currentRating<TechnologyRating>().no_pgradability, positive: 'Disabled', negative: 'Enabled' },
+      { label: 'Audits', condition: currentRating<TechnologyRating>().audits >= 1, positive: `${currentRating<TechnologyRating>().audits} ${currentRating<TechnologyRating>().audits > 1 ? 'Audits' : 'Audit'}`, negative: 'None' },
+    ]
+  return [
+    { label: 'Documentation', condition: !!currentRating<OpenessRating>().documentation, positive: 'Link', negative: 'Not available', link: currentRating<OpenessRating>().documentation },
+    { label: 'Github', condition: !!currentRating<OpenessRating>().github, positive: 'Link', negative: 'Not available', link: currentRating<OpenessRating>().github },
+    { label: 'Socials', condition: !!currentRating<OpenessRating>().socials, positive: 'Link', negative: 'Not available', link: currentRating<OpenessRating>().socials },
+    { label: 'Whitepaper', condition: !!currentRating<OpenessRating>().whitepaper, positive: 'Link', negative: 'Not available', link: currentRating<OpenessRating>().whitepaper },
+    { label: 'Team', condition: currentRating<OpenessRating>().team >= 1, positive: `${currentRating<OpenessRating>().team} ${currentRating<OpenessRating>().team > 1 ? 'Members' : 'Member'}`, negative: 'Anonymous' },
+    { label: 'Funding', condition: currentRating<OpenessRating>().funding >= 1, positive: `${currentRating<OpenessRating>().funding} ${currentRating<OpenessRating>().team > 1 ? 'Investments' : 'Investment'}`, negative: 'Not available' },
+  ]
+}
+</script>
+
+<template>
+  <div class="relative">
+    <!-- Main div that shows rating and triggers the popover on hover -->
+    <div
+      flex
+      items-center
+      gap-4px
+      p-12px
+      hover:bg-app-bg-rating-hover
+      hover:rounded-8px
+      @mouseenter="showPopover"
+      @mouseleave="hidePopover"
+    >
+      <!-- Render the score points -->
+      <div
+        v-for="point of 5"
+        :key="point"
+        w="10px lg:12px"
+        h="10px lg:12px"
+        rounded-2px
+        :class="[point <= score ? colorByScore : 'bg-app-bg-rating-default', compact ? 'h-8px lg:h-10px w-8px lg:w-10px' : 'w-10px lg:w-12px h-10px lg:h-12px']"
+      />
+    </div>
+
+    <!-- Popover panel that appears on hover -->
+    <transition
+      enter-active-class="transition duration-300 ease-out"
+      enter-from-class="transform scale-95 opacity-0"
+      enter-to-class="transform scale-100 opacity-100"
+      leave-active-class="transition duration-200 ease-in"
+      leave-from-class="transform scale-100 opacity-100"
+      leave-to-class="transform scale-95 opacity-0"
+    >
+      <div
+        v-if="isPopoverVisible"
+        class="absolute mt-2 p-2 bg-app-bg-rating-hover w-240px shadow-lg rounded"
+        z-100
+        style="left: 50%; transform: translateX(-50%);"
+        flex
+        flex-col
+        gap-14px
+        px-16px
+        py-10px
+        @mouseenter="showPopover"
+        @mouseleave="hidePopover"
+      >
+        <div
+          v-for="item in items()"
+          :key="item.label"
+          flex
+          justify-between
+          items-center
+          text-12px
+          font-700
+          leading-20px
+          :class="{ 'text-app-text-rating-negative': !item.condition }"
+        >
+          <div
+            flex
+            items-center
+            gap-6px
+          >
+            <div
+              :class="[item.condition ? 'i-ic-sharp-thumb-up' : 'i-ic-sharp-thumb-down']"
+              text-20px
+              mt--4px
+            />
+            {{ item.label }}
+          </div>
+          <NuxtLink
+            v-if="item.link"
+            :to="item.link"
+            target="_blank"
+            external
+            underline
+            @click.stop
+          >
+            Link
+          </NuxtLink>
+          <div v-else>
+            {{ item.condition ? item.positive : item.negative }}
+          </div>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
diff --git a/components/Project/ProjectSecurity.vue b/components/Project/ProjectSecurity.vue
index 4d97c2b..817b20f 100644
--- a/components/Project/ProjectSecurity.vue
+++ b/components/Project/ProjectSecurity.vue
@@ -12,11 +12,32 @@ defineProps<{
     badge-text="3/10"
   >
     <UnoIcon
-      i-web-code_v2
+      i-material-symbols-lock-outline
       text-24px
     />
   </ProjectDetailCategoryDivider>
   <ProjectDetailContainer>
+    <div v-if="project.audits">
+      <h2
+        text-18px
+        text-app-text-grey
+        my-24px
+      >
+        Audits
+      </h2>
+      <div flex flex-col gap="12px lg:16px">
+        <template
+          v-for="audit in project.audits"
+          :key="audit.name"
+        >
+          <ProjectSecurityAudit
+            :audit-name="audit.name"
+            :audit-url="audit.link"
+            :date="audit.time"
+          />
+        </template>
+      </div>
+    </div>
     <div
       grid
       grid-cols-2
@@ -26,20 +47,11 @@ defineProps<{
       lg:grid-cols-4
     >
       <ProjectInfoItem
-        :check-undefined="project.blockchain_features?.asset_custody_type"
-        bold
-        title="Asset custody"
+        :check-undefined="project.technical_spof"
+        :color="project.technical_spof ? '#FF0000' : '#18FF2F'"
+        title="Technical dependency"
       >
-        {{ project.blockchain_features?.asset_custody_type }}
-      </ProjectInfoItem>
-      <ProjectInfoItem
-        :check-undefined="project.blockchain_features?.upgradability"
-        title="Upgradability"
-      >
-        <b :color="project.blockchain_features?.upgradability?.enabled ? '#FF0000' : '#18FF2F'">
-          {{ project.blockchain_features?.upgradability?.enabled ? 'YES' : 'NO' }}
-        </b>
-        {{ ` – ${project.blockchain_features?.upgradability?.type}` }}
+        {{ project.technical_spof }}
       </ProjectInfoItem>
       <ProjectInfoItem
         :check-undefined="project.social_trust"
@@ -55,47 +67,6 @@ defineProps<{
       >
         {{ project.third_party_dependency ? 'YES' : 'NO' }}
       </ProjectInfoItem>
-      <ProjectInfoItem
-        :check-undefined="project.technical_spof"
-        :color="project.technical_spof ? '#FF0000' : '#18FF2F'"
-        title="Technical dependency"
-      >
-        {{ project.technical_spof }}
-      </ProjectInfoItem>
-    </div>
-    <div my-24px>
-      <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
-      >
-        Audits
-      </h2>
-      <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
-          />
-        </ProjectSecurityAudit>
-      </template>
     </div>
   </ProjectDetailContainer>
 </template>
diff --git a/components/Project/ProjectSecurityAudit.vue b/components/Project/ProjectSecurityAudit.vue
index 287d62b..a49f573 100644
--- a/components/Project/ProjectSecurityAudit.vue
+++ b/components/Project/ProjectSecurityAudit.vue
@@ -9,36 +9,67 @@ defineProps<{
 <template>
   <div
     flex
-    items-center
-    gap-16px
+    justify-between
+    lg:grid
+    lg:grid-cols-2
+    rounded-full
+    py-12px px-16px
+    bg-app-bg-audits-card
   >
-    <slot />
     <div
-      flex
-      flex-col
-      text-14px
-      font-700
-      leading-24px
+      grid grid-cols-3
+      w-full
     >
-      <NuxtLink
-        hover:underline
-        flex
-        items-center
-        gap-8px
-        :to="auditUrl"
+      <h2
+        text="14px lg:16px"
+        leading-20px
+        font-700
+        col-span="3 lg:2"
       >
         {{ auditName }}
-        <UnoIcon
-          v-if="auditUrl"
-          i-web-openinnew
-          text-16px
-        />
-      </NuxtLink>
-      <span
+      </h2>
+      <h2
         text-14px
-        font-400
-        leading-24px
-      >{{ date }}</span>
+        leading-20px
+        hidden
+        lg:block
+      >
+        Overview of smart contracts
+      </h2>
+    </div>
+    <div
+      flex
+      items-center
+      justify-end
+      gap="16px lg:80px"
+      whitespace-nowrap
+    >
+      <h2
+        text-14px
+        leading-20px
+      >
+        {{ formatDate(date) }}
+      </h2>
+      <NuxtLink
+        flex
+        items-center
+        gap-4px
+        :to="auditUrl"
+        external
+        target="_blank"
+        text-14px
+        text-app-text-grey
+        leading-20px
+        hover:underline
+      ><p
+        hidden
+        lg:block
+      >
+        More info
+      </p> <UnoIcon
+        i-ic-twotone-open-in-new
+        text-22px
+      /></NuxtLink>
     </div>
   </div>
 </template>
diff --git a/components/Project/ProjectTechnology.vue b/components/Project/ProjectTechnology.vue
index 9479125..16e692d 100644
--- a/components/Project/ProjectTechnology.vue
+++ b/components/Project/ProjectTechnology.vue
@@ -12,7 +12,7 @@ defineProps<{
     badge-text="3/10"
   >
     <UnoIcon
-      i-web-code_v2
+      i-material-symbols-deployed-code-outline
       text-24px
     />
   </ProjectDetailCategoryDivider>
@@ -21,100 +21,54 @@ defineProps<{
       grid
       grid-cols-2
       items-start
-      mt-32px
+      mt-24px
       gap-y-16px
       lg:grid-cols-4
     >
+      <ProjectInfoItem
+        :check-undefined="project.blockchain_features?.opensource"
+        title="Opensource"
+        bold
+        :color="project.blockchain_features?.opensource ? '#18FF2F' : '#FF0000'"
+      >
+        {{ project.blockchain_features?.opensource ? 'YES' : 'NO' }}
+      </ProjectInfoItem>
+      <ProjectInfoItem
+        :check-undefined="project.blockchain_features?.asset_custody_type"
+        title="Asset custody"
+        :color="project.blockchain_features?.asset_custody_type === 'non-custody' ? '#18FF2F' : project.blockchain_features?.asset_custody_type === 'multisig' ? '#FFB800' : '#FF0000'"
+        bold
+      >
+        {{ project.blockchain_features?.asset_custody_type.toUpperCase() }}
+      </ProjectInfoItem>
+      <ProjectInfoItem
+        title="Upgradability"
+        bold
+        :check-undefined="project.blockchain_features?.upgradability"
+        :color="project.blockchain_features?.upgradability ? '#FF0000' : '#18FF2F' "
+      >
+        {{ project.blockchain_features?.upgradability ? 'YES' : 'NO' }}
+      </ProjectInfoItem>
       <ProjectInfoItem
         :check-undefined="project.technology?.type"
         title="Technology type"
         bold
       >
-        {{ project.technology?.type }}
+        {{ project.technology.type.toUpperCase() }}
       </ProjectInfoItem>
       <ProjectInfoItem
-        :check-undefined="project.blockchain_features?.encryption"
-        title="Encryption"
+        :check-undefined="project.blockchain_features?.p2p"
+        title="Peer to Peer (P2P)"
         bold
       >
-        {{ project.blockchain_features?.encryption }}
+        {{ project.blockchain_features?.p2p ? 'YES' : 'NO' }}
       </ProjectInfoItem>
       <ProjectInfoItem
-        title="License"
-        bold
-        :check-undefined="project.licences"
-      >
-        {{ project.licences }}
-      </ProjectInfoItem>
-      <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
-    >
-      <ProjectInfoItem
-        :check-undefined="project.project_status"
-        title="Version"
+        :check-undefined="project.storage?.decentralized"
+        title="Decentralized storage"
         bold
       >
-        <div
-          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
-        >
-          <UnoIcon
-            i-web-live
-            text-10px
-            class="color-#e26b6b"
-          />
-          <span>{{ 'Offline' }}</span>
-        </div>
-      </ProjectInfoItem>
-      <ProjectInfoItem
-        :check-undefined="project.technology?.features"
-        title="Features"
-        bold
-      >
-        {{ project.technology?.features.join(', ') }}
-      </ProjectInfoItem>
-      <ProjectInfoItem
-        :check-undefined="project.client_diversability"
-        title="Client diversability"
-        bold
-      >
-        <template
-          v-for="item in project.client_diversability"
-          :key="item.name"
-        >
-          <NuxtLink :to="item.link">
-            {{ item.name }}
-          </NuxtLink><br>
-        </template>
+        {{ project.storage?.decentralized ? 'YES' : 'NO' }}
       </ProjectInfoItem>
     </div>
   </ProjectDetailContainer>
diff --git a/package.json b/package.json
index 4d7eaef..6fde3e1 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "develitesse-nuxt",
   "private": true,
-  "packageManager": "pnpm@9.9.0",
+  "packageManager": "pnpm@9.10.0",
   "scripts": {
     "build": "nuxt build",
     "cleanup": "nuxt cleanup",
@@ -17,8 +17,14 @@
   },
   "devDependencies": {
     "@formkit/auto-animate": "^0.8.2",
+    "@iconify-json/bi": "^1.2.0",
     "@iconify-json/heroicons-outline": "^1.2.0",
     "@iconify-json/heroicons-solid": "^1.2.0",
+    "@iconify-json/ic": "^1.2.0",
+    "@iconify-json/iconoir": "^1.2.0",
+    "@iconify-json/material-symbols": "^1.2.1",
+    "@iconify-json/mdi": "^1.2.0",
+    "@iconify-json/simple-icons": "^1.2.2",
     "@nuxt/devtools": "^1.4.1",
     "@nuxt/eslint": "0.5.5",
     "@nuxt/image": "^1.8.0",
@@ -46,5 +52,8 @@
   },
   "lint-staged": {
     "*": "eslint --fix"
+  },
+  "dependencies": {
+    "moment": "^2.30.1"
   }
 }
diff --git a/pages/project/[id].vue b/pages/project/[id].vue
index 70cb5ae..76acaf4 100644
--- a/pages/project/[id].vue
+++ b/pages/project/[id].vue
@@ -32,7 +32,7 @@ useSeoMeta({
 
 <template>
   <div v-if="project">
-    <div app-container>
+    <div app-container px-16px>
       <div
         flex
         flex-col
@@ -46,6 +46,7 @@ useSeoMeta({
             <ProjectTechnology :project="project" />
             <ProjectPrivacy :project="project" />
             <ProjectSecurity :project="project" />
+            <ProjectHistory :project="project" />
             <!-- <ProjectActivity :project="project" />
             <ProjectMarket /> -->
           </div>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d3143df..88c4b1c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -7,16 +7,38 @@ settings:
 importers:
 
   .:
+    dependencies:
+      moment:
+        specifier: ^2.30.1
+        version: 2.30.1
     devDependencies:
       '@formkit/auto-animate':
         specifier: ^0.8.2
         version: 0.8.2
+      '@iconify-json/bi':
+        specifier: ^1.2.0
+        version: 1.2.0
       '@iconify-json/heroicons-outline':
         specifier: ^1.2.0
         version: 1.2.0
       '@iconify-json/heroicons-solid':
         specifier: ^1.2.0
         version: 1.2.0
+      '@iconify-json/ic':
+        specifier: ^1.2.0
+        version: 1.2.0
+      '@iconify-json/iconoir':
+        specifier: ^1.2.0
+        version: 1.2.0
+      '@iconify-json/material-symbols':
+        specifier: ^1.2.1
+        version: 1.2.1
+      '@iconify-json/mdi':
+        specifier: ^1.2.0
+        version: 1.2.0
+      '@iconify-json/simple-icons':
+        specifier: ^1.2.2
+        version: 1.2.2
       '@nuxt/devtools':
         specifier: ^1.4.1
         version: 1.4.1(rollup@4.21.2)(vite@5.4.2(@types/node@20.8.7)(terser@5.22.0))
@@ -1088,12 +1110,30 @@ packages:
     resolution: {integrity: sha512-d2CGZR2o7fS6sWB7DG/3a95bGKQyHMACZ5aW8qGkkqQpUoZV6C0X7Pc7l4ZNMZkfNBf4VWNe9E1jRsf0G146Ew==}
     engines: {node: '>=18.18'}
 
+  '@iconify-json/bi@1.2.0':
+    resolution: {integrity: sha512-kaBV87cQlyeMkBBiMqsf3b43Nsxdk/rYKvR29dnktht57WUyHCnBAuH+ca/bscX856CzRpVX+sYs7arjrJD0qA==}
+
   '@iconify-json/heroicons-outline@1.2.0':
     resolution: {integrity: sha512-Qy1sRmQYqih6xRxwCtnX0hXJ4252t83C0CnNWAP3gF0fH0Qmp9RY66LMB0moYGxQxUhsTFIl2nNceSVSBUo8Tg==}
 
   '@iconify-json/heroicons-solid@1.2.0':
     resolution: {integrity: sha512-o+PjtMXPr4wk0veDS7Eh6H1BnTJT1vD7HcKl+I7ixdYQC8i1P2zdtk0C2v7C9OjJBMsiwJSCxT4qQ3OzONgyjw==}
 
+  '@iconify-json/ic@1.2.0':
+    resolution: {integrity: sha512-L4+m77xTQB08X3I+3xs1+IrvK+aNcuN/7ODu5aUPznHKLU+/8UYcsjUgNHze6vPOGPQ0AG+kCwvy91EYPXSRxw==}
+
+  '@iconify-json/iconoir@1.2.0':
+    resolution: {integrity: sha512-GbYAERFy9c1laIo1QZon9sBjRkX9rksirehmLIvvohn+W++fpPlvQnzVl0VpY/v2GCvs1pZ42spTKDj0AcofvA==}
+
+  '@iconify-json/material-symbols@1.2.1':
+    resolution: {integrity: sha512-r9yaBzlUmN87aCTSoCNtDCd7R9F0iVDjNPL9QHHhm1WglFJvTUKx9iBC5xcZpP0qN0bg9R5FkM90CndWxEBAnw==}
+
+  '@iconify-json/mdi@1.2.0':
+    resolution: {integrity: sha512-E9/3l5Syg3wfuarorFodhn4s8YorxhH3U3U20LaNBNiqw1kFNIDWhF6HymuzAD35k7RH0OBasJ+ZUyFtVVV6eg==}
+
+  '@iconify-json/simple-icons@1.2.2':
+    resolution: {integrity: sha512-VMgCoMnpvcCJ5b3rTOGPzW5j6959nIdRCk+8FGzK/vAaDd6f9sx65OcKOqP3C75llpybH/iQhk5yrJ/TOdQKeg==}
+
   '@iconify/types@2.0.0':
     resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
 
@@ -1671,9 +1711,6 @@ packages:
   '@types/eslint-scope@3.7.6':
     resolution: {integrity: sha512-zfM4ipmxVKWdxtDaJ3MP3pBurDXOCoyjvlpE3u6Qzrmw4BPbfm4/ambIeTk/r/J0iq/+2/xp0Fmt+gFvXJY2PQ==}
 
-  '@types/eslint@8.44.6':
-    resolution: {integrity: sha512-P6bY56TVmX8y9J87jHNgQh43h6VVU+6H7oN7hgvivV81K2XY8qJZ5vqPy/HdUoVIelii2kChYVzQanlswPWVFw==}
-
   '@types/eslint@9.6.1':
     resolution: {integrity: sha512-FXx2pKgId/WyYo2jXw63kk7/+TY7u7AziEJxJAnSFzHlqTAS3Ync6SvgYAN/k4/PQpnnVuzoMuVnByKK2qp0ag==}
 
@@ -2821,9 +2858,6 @@ packages:
   errx@0.1.0:
     resolution: {integrity: sha512-fZmsRiDNv07K6s2KkKFTiD2aIvECa7++PKyD5NC32tpRw46qZA3sOz+aM+/V9V0GDHxVTKLziveV4JhzBHDp9Q==}
 
-  es-module-lexer@1.3.1:
-    resolution: {integrity: sha512-JUFAyicQV9mXc3YRxPnDlrfBKpqt6hUYzz9/boprUJHs4e4KVr3XwOF70doO6gwXUor6EWZJAyWAfKki84t20Q==}
-
   es-module-lexer@1.5.4:
     resolution: {integrity: sha512-MVNK56NiMrOwitFB7cqDwq0CQutbw+0BvLshJSse0MUNU+y1FC3bUS/AQg7oUng+/wKrrki7JfmwtVHkVfPLlw==}
 
@@ -3827,6 +3861,9 @@ packages:
   mlly@1.7.1:
     resolution: {integrity: sha512-rrVRZRELyQzrIUAVMHxP97kv+G786pHmOKzuFII8zDYahFBS7qnHh2AlYSl1GAHhaMPCz6/oHjVMcfFYgFYHgA==}
 
+  moment@2.30.1:
+    resolution: {integrity: sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==}
+
   mri@1.2.0:
     resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
     engines: {node: '>=4'}
@@ -6425,6 +6462,10 @@ snapshots:
 
   '@humanwhocodes/retry@0.3.0': {}
 
+  '@iconify-json/bi@1.2.0':
+    dependencies:
+      '@iconify/types': 2.0.0
+
   '@iconify-json/heroicons-outline@1.2.0':
     dependencies:
       '@iconify/types': 2.0.0
@@ -6433,6 +6474,26 @@ snapshots:
     dependencies:
       '@iconify/types': 2.0.0
 
+  '@iconify-json/ic@1.2.0':
+    dependencies:
+      '@iconify/types': 2.0.0
+
+  '@iconify-json/iconoir@1.2.0':
+    dependencies:
+      '@iconify/types': 2.0.0
+
+  '@iconify-json/material-symbols@1.2.1':
+    dependencies:
+      '@iconify/types': 2.0.0
+
+  '@iconify-json/mdi@1.2.0':
+    dependencies:
+      '@iconify/types': 2.0.0
+
+  '@iconify-json/simple-icons@1.2.2':
+    dependencies:
+      '@iconify/types': 2.0.0
+
   '@iconify/types@2.0.0': {}
 
   '@iconify/utils@2.1.32':
@@ -7223,13 +7284,8 @@ snapshots:
 
   '@types/eslint-scope@3.7.6':
     dependencies:
-      '@types/eslint': 8.44.6
-      '@types/estree': 1.0.3
-
-  '@types/eslint@8.44.6':
-    dependencies:
-      '@types/estree': 1.0.3
-      '@types/json-schema': 7.0.14
+      '@types/eslint': 9.6.1
+      '@types/estree': 1.0.5
 
   '@types/eslint@9.6.1':
     dependencies:
@@ -7947,9 +8003,9 @@ snapshots:
     dependencies:
       event-target-shim: 5.0.1
 
-  acorn-import-assertions@1.9.0(acorn@8.11.2):
+  acorn-import-assertions@1.9.0(acorn@8.12.1):
     dependencies:
-      acorn: 8.11.2
+      acorn: 8.12.1
 
   acorn-import-attributes@1.9.5(acorn@8.12.1):
     dependencies:
@@ -8662,8 +8718,6 @@ snapshots:
 
   errx@0.1.0: {}
 
-  es-module-lexer@1.3.1: {}
-
   es-module-lexer@1.5.4: {}
 
   esbuild@0.19.10:
@@ -9865,6 +9919,8 @@ snapshots:
       pkg-types: 1.2.0
       ufo: 1.5.4
 
+  moment@2.30.1: {}
+
   mri@1.2.0: {}
 
   mrmime@2.0.0: {}
@@ -10793,7 +10849,7 @@ snapshots:
 
   schema-utils@3.3.0:
     dependencies:
-      '@types/json-schema': 7.0.14
+      '@types/json-schema': 7.0.15
       ajv: 6.12.6
       ajv-keywords: 3.5.2(ajv@6.12.6)
 
@@ -11141,7 +11197,7 @@ snapshots:
 
   terser-webpack-plugin@5.3.9(esbuild@0.23.1)(webpack@5.89.0(esbuild@0.23.1)):
     dependencies:
-      '@jridgewell/trace-mapping': 0.3.20
+      '@jridgewell/trace-mapping': 0.3.25
       jest-worker: 27.5.1
       schema-utils: 3.3.0
       serialize-javascript: 6.0.1
@@ -11724,16 +11780,16 @@ snapshots:
   webpack@5.89.0(esbuild@0.23.1):
     dependencies:
       '@types/eslint-scope': 3.7.6
-      '@types/estree': 1.0.3
+      '@types/estree': 1.0.5
       '@webassemblyjs/ast': 1.11.6
       '@webassemblyjs/wasm-edit': 1.11.6
       '@webassemblyjs/wasm-parser': 1.11.6
-      acorn: 8.11.2
-      acorn-import-assertions: 1.9.0(acorn@8.11.2)
-      browserslist: 4.22.2
+      acorn: 8.12.1
+      acorn-import-assertions: 1.9.0(acorn@8.12.1)
+      browserslist: 4.23.3
       chrome-trace-event: 1.0.3
       enhanced-resolve: 5.15.0
-      es-module-lexer: 1.3.1
+      es-module-lexer: 1.5.4
       eslint-scope: 5.1.1
       events: 3.3.0
       glob-to-regexp: 0.4.1
diff --git a/unocss.config.collections.ts b/unocss.config.collections.ts
index b41987f..57f7ca0 100644
--- a/unocss.config.collections.ts
+++ b/unocss.config.collections.ts
@@ -35,7 +35,8 @@ export const collections = {
     open1: '<svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="gray" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg>',
     matrix: '<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none"><path d="M1.266 1.10241V46.8989H4.5615V48.0014H0V0.00141309H4.5615V1.10391L1.266 1.10241ZM15.3525 15.6179V17.9384H15.414C16.032 17.0459 16.782 16.3679 17.6475 15.8819C18.516 15.3974 19.524 15.1559 20.6475 15.1559C21.726 15.1559 22.7175 15.3674 23.61 15.7814C24.5085 16.2029 25.1805 16.9454 25.6485 17.9999C26.157 17.2499 26.853 16.5854 27.7185 16.0154C28.587 15.4454 29.619 15.1559 30.813 15.1559C31.719 15.1559 32.5545 15.2654 33.3285 15.4919C34.11 15.7094 34.767 16.0619 35.3205 16.5464C35.868 17.0399 36.297 17.6729 36.6105 18.4544C36.915 19.2344 37.071 20.1809 37.071 21.2909V32.7434H32.3775V23.0414C32.3775 22.4699 32.3535 21.9239 32.3055 21.4154C32.2755 20.9549 32.157 20.5094 31.947 20.0954C31.7505 19.7189 31.4475 19.4069 31.071 19.2059C30.6885 18.9779 30.1575 18.8699 29.5005 18.8699C28.836 18.8699 28.305 18.9944 27.8985 19.2434C27.501 19.4939 27.165 19.8374 26.9385 20.2439C26.697 20.6744 26.541 21.1499 26.4765 21.6344C26.3985 22.1579 26.361 22.6829 26.352 23.2064V32.7449H21.6555V23.1434C21.6555 22.6349 21.648 22.1354 21.618 21.6434C21.6015 21.1679 21.5085 20.7074 21.3285 20.2694C21.1725 19.8479 20.877 19.4954 20.5005 19.2614C20.118 19.0109 19.5465 18.8789 18.7965 18.8789C18.57 18.8789 18.2745 18.9254 17.9145 19.0274C17.5545 19.1279 17.196 19.3154 16.86 19.5899C16.5165 19.8719 16.218 20.2694 15.9765 20.7854C15.735 21.2999 15.618 21.9794 15.618 22.8239V32.7539H10.9215V15.6224L15.3525 15.6179ZM46.734 46.8974V1.10091H43.4385V-0.00158691H48V47.9984H43.4385V46.8959L46.734 46.8974Z" fill="white"/></svg>',
     news: '<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28" fill="none"><g opacity="1"><mask id="mask0_2258_10849" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="28" height="28"><rect width="28" height="28" fill="#D9D9D9"/></mask><g mask="url(#mask0_2258_10849)"><path d="M4.66146 24.5C4.01979 24.5 3.47049 24.2715 3.01354 23.8146C2.5566 23.3576 2.32812 22.8083 2.32812 22.1667V5.83333C2.32812 5.19167 2.5566 4.64236 3.01354 4.18542C3.47049 3.72847 4.01979 3.5 4.66146 3.5H23.3281C23.9698 3.5 24.5191 3.72847 24.976 4.18542C25.433 4.64236 25.6615 5.19167 25.6615 5.83333V22.1667C25.6615 22.8083 25.433 23.3576 24.976 23.8146C24.5191 24.2715 23.9698 24.5 23.3281 24.5H4.66146ZM4.66146 22.1667H23.3281V5.83333H4.66146V22.1667ZM6.99479 19.8333H20.9948V17.5H6.99479V19.8333ZM6.99479 15.1667H11.6615V8.16667H6.99479V15.1667ZM13.9948 15.1667H20.9948V12.8333H13.9948V15.1667ZM13.9948 10.5H20.9948V8.16667H13.9948V10.5Z" fill="white"/></g></g></svg>',
-    solid_arrow_down: '<svg width="10" height="5" viewBox="0 0 10 5" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 5L0 0H10L5 5Z" fill="black"/></svg>',
-    solid_arrow_up: '<svg width="10" height="5" viewBox="0 0 10 5" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 -4.37114e-07L10 5L0 5L5 -4.37114e-07Z" fill="white"/></svg>',
+    arrow_down: '<svg width="10" height="5" viewBox="0 0 10 5" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 5L0 0H10L5 5Z" fill="black"/></svg>',
+    arrow_up: '<svg width="10" height="5" viewBox="0 0 10 5" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 -4.37114e-07L10 5L0 5L5 -4.37114e-07Z" fill="white"/></svg>',
+    thumb_up: '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mask0_308_7787" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="16"><rect width="16" height="16" fill="#D9D9D9"/></mask><g mask="url(#mask0_308_7787)"><path d="M11.9987 14.0013H5.33203V5.33464L9.9987 0.667969L10.832 1.5013C10.9098 1.57908 10.9737 1.68464 11.0237 1.81797C11.0737 1.9513 11.0987 2.07908 11.0987 2.2013V2.43464L10.3654 5.33464H13.9987C14.3543 5.33464 14.6654 5.46797 14.932 5.73463C15.1987 6.0013 15.332 6.31241 15.332 6.66797V8.0013C15.332 8.07908 15.3237 8.16241 15.307 8.2513C15.2904 8.34019 15.2654 8.42352 15.232 8.5013L13.232 13.2013C13.132 13.4235 12.9654 13.6124 12.732 13.768C12.4987 13.9235 12.2543 14.0013 11.9987 14.0013ZM3.9987 5.33464V14.0013H1.33203V5.33464H3.9987Z" fill="white"/></g></svg>',
   },
 }
diff --git a/unocss.config.ts b/unocss.config.ts
index b76e1dc..283af91 100644
--- a/unocss.config.ts
+++ b/unocss.config.ts
@@ -50,9 +50,29 @@ export default defineConfig({
         bg: {
           grey: '#ffffff33',
           dark_grey: '#161616',
+          rating: {
+            default: '#494949',
+            red: '#FF4218',
+            orange: '#FF9900',
+            yellow: '#FFE600',
+            green: '#42FF00',
+            hover: '#202020',
+          },
+          team: {
+            grey: '#404040',
+          },
+          funding: {
+            card: '#101010',
+          },
+          audits: {
+            card: '#191919',
+          },
         },
         text: {
           grey: '#909090',
+          rating: {
+            negative: '#FFB800',
+          },
         },
       },
     },