add featured blockchains

src/layouts/components/DefaultLayout.vue

@@ -229,6 +229,21 @@ function selected(route: any, nav: NavLink) {
             Osmosis
           </div>
         </a>
+        <a
+          href="https://celestia.org"
+          target="_blank"
+          class="py-2 px-4 flex items-center cursor-pointer rounded-lg hover:bg-gray-100 dark:hover:bg-[#373f59]"
+        >
+          <img
+            src="https://ping.pub/logos/celestia.png"
+            class="w-6 h-6 rounded-full mr-3"
+          />
+          <div
+            class="text-sm capitalize flex-1 text-gray-600 dark:text-gray-200"
+          >
+            Celestia
+          </div>
+        </a>
         <a
           href="https://becole.com"
           target="_blank"

src/pages/index.vue

@@ -21,6 +21,12 @@ const chains = computed(() => {
     return Object.values(dashboard.chains);
   }
 });
+
+const featured = computed(() => {
+  const names = ["cosmos", "osmosis", "akash", "celestia", "evmos"];
+  return chains.value.filter(x => names.includes(x.chainName))
+})
+
 const chainStore = useBlockchain()
 </script>
 <template>
@@ -67,6 +73,18 @@ const chainStore = useBlockchain()
       <progress class="progress progress-info w-80 h-1"></progress>
     </div>
 
+    <div class="text-center font-bold h4 text-primary">Featured Blockchains</div>
+
+    <div
+      class="grid grid-cols-1 gap-4 mt-6 md:!grid-cols-3 lg:!grid-cols-4 2xl:!grid-cols-5"
+    >
+    <ChainSummary
+        v-for="(chain, index) in featured"
+        :key="index"
+        :name="chain.chainName"
+      />
+    </div>
+
     <div class="flex items-center rounded-lg bg-base-100  border border-gray-200 dark:border-gray-700 mt-10">
       <Icon icon="mdi:magnify" class="text-2xl text-gray-400 ml-3"/>
       <input :placeholder="$t('pages.search_placeholder')" class="px-4 h-10 bg-transparent flex-1 outline-none text-base" v-model="keywords" />