Added hover effects to Showcases

2 files changed, 67 insertions, 16 deletions

diff --git a/docs/showcases/Showcase.vue b/docs/showcases/Showcase.vue
index a5a1e01..f790fbf 100644
--- a/docs/showcases/Showcase.vue
+++ b/docs/showcases/Showcase.vue
@@ -2,37 +2,85 @@
 const props = 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 },
 });
 </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"></i>
+        </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.ts b/docs/showcases/showcases.ts
index 2b23aca..f4899c2 100644
--- a/docs/showcases/showcases.ts
+++ b/docs/showcases/showcases.ts
@@ -2,6 +2,7 @@ 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];
@@ -11,11 +12,13 @@ export default [
     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>>;