add explore page

assets/descriptions.ts

@@ -0,0 +1,4 @@
+export const winmb =
+    'WinMB.js is a library that enables developers to create Windows-style message boxes directly on their websites. This tool provides a way to integrate familiar dialog boxes by mimicking the native Windows interface.'
+export const memz =
+    'Memz.js is a JavaScript library I created with the aim of mimicking the virus behavior on a website, all within a web browser. Rest assured, it\'s completely harmless and its unique purpose is to have fun.'

components/BoxFancy.vue

@@ -1,7 +1,7 @@
 <template>
     <div
         class="box-fancy border-[1px] border-white/25 transition duration-75 hover:border-white/30 bg-black/50 rounded-md md:rounded-xl overflow-hidden">
-        <div class="fancy sm:p-10 p-4 bg-gradient-to-tl from-violet-500/20 to-accent/20">
+        <div class="h-full fancy sm:p-10 p-4 bg-gradient-to-tl from-violet-500/20 to-accent/20">
             <slot />
         </div>
     </div>

components/Tile.vue

@@ -0,0 +1,23 @@
+<template>
+    <BoxFancy class="h-full min-w-[480px]">
+        <div class="flex flex-col justify-between h-full">
+            <div>
+                <h1>
+                    <Icon v-if="icon !== undefined" :name="icon" />
+                    {{ title }}
+                </h1>
+                <p>{{ text }}</p>
+            </div>
+            <img class="border-[1px] border-white/20 rounded-xl mt-3 w-full" :src="image" alt="Tile banner" />
+        </div>
+    </BoxFancy>
+</template>
+
+<script setup lang="ts">
+const {title, text, image, icon} = defineProps<{
+    title: string
+    text: string
+    image: string
+    icon?: string
+}>()
+</script>

pages/explore.vue

@@ -0,0 +1,28 @@
+<template>
+    <div class="mt-16 flex gap-5 flex-wrap-reverse">
+        <a href="/winmb" class="tile">
+            <Tile
+                title="WinMB.js"
+                :text="winmb"
+                icon="openmoji:windows"
+                image="https://raw.githubusercontent.com/SkwalExe/WinMB.js/main/assets/banner.png" />
+        </a>
+        <a href="/memz" class="tile">
+            <Tile
+                title="Memz.js"
+                :text="memz"
+                image="https://raw.githubusercontent.com/SkwalExe/Memz.js/main/assets/banner.png" />
+        </a>
+    </div>
+</template>
+
+<script setup lang="ts">
+import {winmb, memz} from '~/assets/descriptions'
+import Tile from '~/components/Tile.vue'
+</script>
+
+<style scoped>
+.tile {
+    @apply basis-0 grow;
+}
+</style>

pages/memz.vue

@@ -14,11 +14,7 @@
     <div class="flex gap-5 flex-col sm:flex-row">
         <Box>
             <h1 class="group-hover:text-accent">📚 Memz.js</h1>
-            <p>
-                Memz.js is a JavaScript library I created with the aim of mimicking the virus behavior on a website, all
-                within a web browser. Rest assured, it's completely harmless and its unique purpose is to have fun. You
-                can find the library on GitHub, as well as the documentation.
-            </p>
+            <p>{{ description }}</p>
             <div class="mt-5">
                 <Lnk :new-tab="true" href="https://github.com/Skwalexe/memz.js">
                     <ButtonFancy class="w-full">Github & Documentation</ButtonFancy>
@@ -45,6 +41,7 @@
 </template>
 
 <script setup lang="ts">
+import {memz as description} from '~/assets/descriptions'
 import Memz from '@skwalexe/memz'
 const mmz: Ref<null | Memz> = ref(null)
 onMounted(() => {

pages/winmb.vue

@@ -2,9 +2,7 @@
     <BoxFancy>
         <h1>🪟 WinMB.js</h1>
         <p>
-            WinMB.js is a library that enables developers to create Windows-style message boxes directly on their
-            websites. This tool provides a way to integrate familiar dialog boxes by mimicking the native Windows
-            interface. You can find this library on GitHub, as well as its documentation.
+            {{ description }}. You can find this library on GitHub, as well as its documentation.
         </p>
         <div class="mt-5">
             <Lnk :new-tab="true" href="https://github.com/Skwalexe/WinMB.js">
@@ -33,7 +31,7 @@
 
 <script setup lang="ts">
 import WinMB from '@skwalexe/winmb'
-import Error from '~/error.vue'
+import { winmb as description } from '~/assets/descriptions'
 const returnValue: Ref<string> = ref('')
 
 const randomPosition: Ref<boolean> = ref(false)

stores/navbar.ts

@@ -3,7 +3,7 @@ import type NavBtnInfo from '~/classes/NavBtnInfo'
 
 const defaultButtons: NavBtnInfo[] = [
     {title: 'Home', path: '/', icon: 'ic:round-home', newTab: false},
-    {title: 'Memz Demo', path: '/memz', icon: 'ph:virus-fill', newTab: false},
+    {title: 'Explore', path: '/explore', icon: 'fluent-emoji:sparkles', newTab: false},
     {title: 'Blog', path: 'https://blog.skwal.net', icon: 'material-symbols:article', newTab: true},
     {title: 'Projects', path: 'https://projects.skwal.net', icon: 'solar:star-bold', newTab: true},
     {title: 'GitHub', path: 'https://github.com/SkwalExe', icon: 'mdi:github', newTab: true}