1 files changed, 72 insertions, 18 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>