3 files changed, 100 insertions, 0 deletions
diff --git a/docs/showcases/Showcase.vue b/docs/showcases/Showcase.vue
new file mode 100644
index 0000000..46d2138
--- /dev/null
+++ b/docs/showcases/Showcase.vue
@@ -0,0 +1,40 @@
+<script setup>
+import { defineProps } from 'vue';
+
+const props = defineProps({
+    src: { type: String, required: true },
+    author: { type: String, required: true },
+    url: { type: String, required: true }
+});
+</script>
+
+<template>
+    <figure>
+        <a :href="url">
+            <img :src="src" :alt="author" />
+        </a>
+        <figcaption>
+            <span>Author: {{ author }}</span>
+        </figcaption>
+    </figure>
+</template>
+
+<style scoped>
+img {
+    border-radius: 4px;
+}
+
+/* same as VPFeature */
+figure {
+    padding: 0.8rem;
+    padding-bottom: 0;
+    border-radius: 12px;
+    background-color: var(--vp-c-bg-soft);
+}
+
+figcaption {
+    text-align: center;
+    padding-top: .4em;
+    padding-bottom: .6em;
+}
+</style>
diff --git a/docs/showcases/Showcases.vue b/docs/showcases/Showcases.vue
new file mode 100644
index 0000000..86a17bf
--- /dev/null
+++ b/docs/showcases/Showcases.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+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}`">
+                    <Showcase v-bind="elem" />
+                </div>
+            </div>
+            <Showcase v-else v-bind="showcase" />
+        </template>
+    </div>
+</template>
+
+<style scoped>
+.Showcases {
+    margin-top: 24px;
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+}
+
+.row {
+    display: flex;
+    gap: 24px;
+}
+
+/* TODO: responsiveness on mobile */
+.item.grid-2 {
+    width: calc(100% / 2);
+}
+
+.item.grid-3 {
+    width: calc(100% / 3);
+}
+
+.item.grid-4 {
+    width: calc(100% / 4);
+}
+</style>
diff --git a/docs/showcases/showcases.ts b/docs/showcases/showcases.ts
new file mode 100644
index 0000000..fa0a7bb
--- /dev/null
+++ b/docs/showcases/showcases.ts
@@ -0,0 +1,15 @@
+type Showcase = {
+    author: string
+    src: string
+    url: string
+}
+
+type Grid<T> = T
+    | [T, T]
+    | [T, T, T]
+    | [T, T, T, T]
+
+export default [
+    { author: "Aylur", src: "/astal/showcase/aylur1.png", url: "https://github.com/Aylur/dotfiles" },
+    // add more showcases here
+] satisfies Array<Grid<Showcase>>