3 files changed, 95 insertions, 28 deletions
diff --git a/docs/showcases/Showcase.vue b/docs/showcases/Showcase.vue
index a5a1e01..8ee7b5e 100644
--- a/docs/showcases/Showcase.vue
+++ b/docs/showcases/Showcase.vue
@@ -1,38 +1,92 @@
 <script setup>
-const props = defineProps({
+defineProps({
     src: { type: String, required: true },
     label: { type: String, required: true },
-    url: { type: String, required: true }
-});
+    url: { type: String, required: true },
+    icon: { type: String, required: false, default: "" },
+})
 </script>
 
 <template>
-    <figure>
-        <a :href="url">
-            <img :src="src" :alt="label" />
-        </a>
+    <figure class="showcase">
+        <div>
+            <a :href="url" target="_blank">
+                <img :src="src" :alt="label">
+            </a>
+            <i :class="icon" class="language-icon" />
+        </div>
         <figcaption>
-            <span>{{ label }}</span>
+            <a
+                :href="url"
+                class="label-link"
+                target="_blank"
+            >
+                {{ label }}
+            </a>
         </figcaption>
     </figure>
 </template>
 
 <style scoped>
-img {
-    border-radius: 4px;
+.showcase {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 1rem;
+    border-radius: 15px;
+    background-color: var(--vp-c-bg-soft);
+    transition:
+        transform 0.3s ease,
+        box-shadow 0.3s ease;
 }
 
-/* same as VPFeature */
-figure {
-    padding: 0.8rem;
-    padding-bottom: 0;
-    border-radius: 12px;
-    background-color: var(--vp-c-bg-soft);
+.showcase:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+}
+
+.showcase:hover img {
+    transform: scale(1.05);
+}
+
+.showcase div {
+    position: relative;
+    display: inline-block;
+    width: 100%;
+    border-radius: 5px;
+    overflow: hidden;
+}
+
+.showcase img {
+    width: 100%;
+    border-radius: 5px;
+    transition: transform 0.3s ease;
+}
+
+.showcase i {
+    position: absolute;
+    bottom: 5px;
+    right: 5px;
+    padding: 0.5rem;
+    background: var(--vp-c-bg-soft);
+    border-radius: 100%;
+    font-size: 1rem;
 }
 
 figcaption {
+    margin-top: 0.8rem;
     text-align: center;
-    padding-top: .4em;
-    padding-bottom: .6em;
+}
+
+.label-link {
+    text-decoration: none;
+    color: var(--vp-c-text-primary);
+    font-weight: semibold;
+    font-size: 1rem;
+    transition: color 0.3s ease;
+}
+
+.label-link:hover {
+    color: var(--vp-c-brand);
 }
 </style>
diff --git a/docs/showcases/Showcases.vue b/docs/showcases/Showcases.vue
index 86a17bf..acdf601 100644
--- a/docs/showcases/Showcases.vue
+++ b/docs/showcases/Showcases.vue
@@ -1,14 +1,18 @@
 <script setup lang="ts">
-import showcases from './showcases'
-import Showcase from './Showcase.vue'
+import showcases from "./showcases"
+import Showcase from "./Showcase.vue"
 </script>
 
 <template>
     <div class="Showcases">
         <template v-for="(showcase, index) in showcases" :key="index">
             <div v-if="Array.isArray(showcase)" class="row">
-                <div v-for="(elem, elemIndex) in showcase" :key="elemIndex" class="item"
-                    :class="`grid-${showcase.length}`">
+                <div
+                    v-for="(elem, elemIndex) in showcase"
+                    :key="elemIndex"
+                    class="item"
+                    :class="`grid-${showcase.length}`"
+                >
                     <Showcase v-bind="elem" />
                 </div>
             </div>
diff --git a/docs/showcases/showcases.ts b/docs/showcases/showcases.ts
index 138ae7f..053b628 100644
--- a/docs/showcases/showcases.ts
+++ b/docs/showcases/showcases.ts
@@ -2,14 +2,23 @@ type Showcase = {
     label: string
     src: string
     url: string
+    icon: string // https://devicon.dev/
 }
 
-type Grid<T> = T
-    | [T, T]
-    | [T, T, T]
-    | [T, T, T, T]
+type Grid<T> = T | [T, T] | [T, T, T] | [T, T, T, T]
 
 export default [
-    { label: "Placeholder (this is an ags v1 screenshot)", src: "/astal/showcase/aylur1.png", url: "https://github.com/Aylur/dotfiles" },
-    // add more showcases here
+    {
+        label: "Placeholder (this is an ags v1 screenshot)",
+        src: "/astal/showcase/aylur.png",
+        url: "https://github.com/Aylur/dotfiles",
+        icon: "devicon-javascript-plain",
+    },
+    {
+        label: "Idk I just love oxocarbon",
+        src: "/astal/showcase/contrib1.webp",
+        url: "https://github.com/tokyob0t/dotfiles",
+        icon: "devicon-lua-plain",
+    },
+    // add mowe shuwucases hewe~
 ] satisfies Array<Grid<Showcase>>