Merge pull request #146 from UniqueNetwork/reassemble-docs

Reassemble docs
UniqueNetwork · Mar 29, 2024 · 0723882 · 0723882
2 parents 1c8d847 + 148ada6
commit 0723882
Show file tree

Hide file tree

Showing 103 changed files with 462 additions and 637 deletions.
diff --git a/docs/.vuepress/components/HomePageSections.vue b/docs/.vuepress/components/HomePageSections.vue
@@ -1,9 +1,13 @@
 <template>
+  <div :class="$style.welcome">
+    <h1>Welcome to the <span style="white-space: nowrap">Unique Network</span><br>documentation</h1>
+    <p>Take the first step by choosing your path</p>
+  </div>
   <div :class="$style.root">
     <div v-for="item in menu" :class="$style.item">
       <RouterLink :to="item.path">
         <img :src="withBase(`/images/icons/${item.iconName}.svg`)" :class="$style.icon"/>
-        <div :class="$style.hint" v-html="item.hint"/>
+        <div :class="$style.icon" v-html="item.icon"/>
         <div :class="$style.title" v-html="item.title"/>
         <div :class="$style.subtitle" v-html="item.subtitle"/>
       </RouterLink>
@@ -15,7 +19,6 @@
 import {withBase} from '@vuepress/client';
 
 interface MenuItem {
-  hint: string
   title: string
   path: string
   subtitle: string
@@ -24,46 +27,22 @@ interface MenuItem {
 
 const menu: MenuItem[] = [
   {
-    hint: 'Best place to start',
-    title: 'SDK',
-    path: '/sdk',
-    subtitle: 'For Javascript, Mobile and Games.<br/> And the best place to start for a rookie Web3 developer',
-    iconName: 'pencil',
-  },
-  {
-    hint: 'For designers and media enthusiasts',
-    title: 'NFT Design & Concepts',
-    path: '/concepts',
-    subtitle: 'Media content, audio, video, nesting, fractionalization, permissions, royalties, POAPs all the tidbits in one place',
-    iconName: 'paint',
-  },
-  {
-    hint: 'If you prefer to start with Solidity',
-    title: 'EVM',
-    path: '/evm',
-    subtitle: 'For advanced Web3 developers and projects based on Solidity or Metamask',
-    iconName: 'calculator',
+    title: 'Learn',
+    path: '/about',
+    subtitle: 'The basic concepts and what can you do',
+    iconName: 'Palette',
   },
   {
-    hint: 'Why Unique?',
-    title: 'Business',
-    path: '/business',
-    subtitle: 'Things that make it wortwhile',
-    iconName: 'rocket',
+    title: 'Build',
+    path: '/build',
+    subtitle: 'Build applications using JavaScript SDK and EVM tools',
+    iconName: 'Monitor',
   },
   {
-    hint: 'When things need to be done',
-    title: 'Tutorials & How-To’s',
+    title: 'Tutorials',
     path: '/tutorials',
-    subtitle: 'Who doesn’t like a video?<br/>And yup, code explained.',
-    iconName: 'television',
-  },
-  {
-    hint: 'True bare-metal docs',
-    title: 'Our Networks',
-    path: '/networks',
-    subtitle: 'Technical specs',
-    iconName: 'server',
+    subtitle: 'Learn with Real-life Examples',
+    iconName: 'MonitorPlay',
   },
 ];
 </script>
@@ -72,51 +51,78 @@ const menu: MenuItem[] = [
 .root {
   display: flex;
   flex-wrap: wrap;
+  justify-content: center;
   padding: 2rem 2.5rem 0;
+  height: 40vh;
 }
 
-.item {
+a {
+  color: var(--c-brand);
+
+  &:hover {
+    color: var(--c-text-hover);
+  }
+}
+
+.welcome {
   display: flex;
-  width: 50%;
   flex-direction: column;
+  justify-content: center;
   align-items: center;
+  min-height: 35vh;
+}
+
+
+.welcome h1 {
+  font-size: 48px;
+  font-weight: bold;
+  text-align: center;
+}
+
+.welcome p {
+  font-size: 20px;
+  padding: 0px 10px;
   text-align: center;
+}
+
+.item {
+  display: flex;
+  width: 50%;
+  flex-direction: column;
+  min-height: 250px;
+  max-height: 30vh;
+  align-items: flex-start;
+  background-color: var(--c-bg-dark);
+  border-radius: 10px;
+  padding: 20px;
+  margin: 20px;
+  box-sizing: border-box;
+  transition: var(--t-transform);
 
-  @media screen and (min-width: 1000px) {
-    width: 33.33%;
+  @media screen and (min-width: 1024px) {
+    width: 20%;
   }
-  @media screen and (max-width: 719px) {
+  @media screen and (max-width: 1023px) {
     width: 100%;
+    margin: 10px;
   }
 }
 
-.icon {
-  width: 170px;
-  padding-bottom: 5px;
+.item:hover {
+  background-color: var(--c-bg-lighter);
+  color: #333;
 }
 
-.hint {
-  // color: #333333;
-  font-weight: 300;
-  font-size: 16px;
-  line-height: 36px;
-  letter-spacing: -0.015em;
-  padding-bottom: 5px;
+.icon {
+  width: 80px;
 }
 
 .title {
   font-weight: 700;
-  font-size: 32px;
-  line-height: 36px;
+  font-size: 24px;
+  line-height: 30px;
   padding-bottom: 10px;
-}
-
-a {
-  color: var(--c-text-accent);
-
-  &:hover {
-    color: var(--c-text-hover);
-  }
+  color: var(--c-text);
 }
 
 .subtitle {
@@ -125,6 +131,7 @@ a {
   font-size: 20px;
   line-height: 30px;
   letter-spacing: -0.015em;
-  padding: 5px 15px 40px;
+  padding: 5px 0px 40px;
+  color: var(--c-text);
 }
 </style>
diff --git a/docs/.vuepress/config.ts b/docs/.vuepress/config.ts
@@ -33,6 +33,7 @@ export default defineUserConfig({
         sidebar: sidebar.en,
       }
     },
+    sidebarDepth: 0,
   }),
   // extendsMarkdown: (md: any) => {md.set({breaks: true})},
   plugins: [

diff --git a/docs/.vuepress/configs/navbar.ts b/docs/.vuepress/configs/navbar.ts
@@ -3,28 +3,20 @@ import {NavbarConfig} from '@vuepress/theme-default'
 export const navbar: Record<string, NavbarConfig> = {
   en: [
     {
-      text: 'Why Unique',
-      link: '/business/',
+      text: 'Learn',
+      link: '/about',
     },
     {
-      text: 'Concepts',
-      link: '/concepts/',
-    },
-    {
-      text: 'SDK',
-      link: '/sdk/'
-    },
-    {
-      text: 'EVM',
-      link: '/evm/'
+      text: 'Build',
+      link: '/build'
     },
     {
       text: 'Tutorials',
-      link: '/tutorials/',
+      link: '/tutorials',
     },
     {
-      text: 'Networks',
-      link: '/networks/'
+      text: 'Reference',
+      link: '/reference'
     },
   ]
 }