From d860220f4d48d21fd31fe86568847d96a55ef2e6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Sun, 18 Apr 2021 22:54:53 +0200
Subject: [PATCH] docs: add icons to features

---
 docs/src/components/FeatureItem/index.vue | 42 +++++++++++++++++++----
 docs/src/pages/index.vue                  | 10 +++---
 2 files changed, 41 insertions(+), 11 deletions(-)

diff --git a/docs/src/components/FeatureItem/index.vue b/docs/src/components/FeatureItem/index.vue
index debe7fa3..38a3de45 100644
--- a/docs/src/components/FeatureItem/index.vue
+++ b/docs/src/components/FeatureItem/index.vue
@@ -1,22 +1,52 @@
 <template>
-  <div class="feature-item text">
-    <slot />
+  <div class="feature-item">
+    <div class="feature-item__inner">
+      <svg class="feature-item__icon" v-if="icon">
+        <use :xlink:href="require('remixicon/fonts/remixicon.symbol.svg') + `#ri-${icon}`" />
+      </svg>
+      <div class="feature-item__content text">
+        <slot />
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
   props: {
+    icon: {
+      type: String,
+      default: null,
+    },
   },
 }
 </script>
 
 <style lang="scss" scoped>
 .feature-item {
+  -webkit-column-break-inside: avoid;
   break-inside: avoid-column;
-  background-color: rgba($colorBlack, 0.03);
-  border-radius: 0.75rem;
-  padding: 1.5rem;
-  margin-bottom: 1rem;
+  page-break-inside: avoid;
+  padding-bottom: 1rem;
+
+  &__inner {
+    background-color: rgba($colorBlack, 0.03);
+    border-radius: 0.75rem;
+    padding: 1.5rem;
+    transition: box-shadow 0.2s ease;
+
+    &:hover {
+      box-shadow: 0 0 0 0.25rem rgba($colorBlack, 0.03);
+    }
+  }
+
+  &__icon {
+    width: 3rem;
+    height: 3rem;
+    margin-bottom: 1rem;
+    background-color: rgba($colorBlack, 0.05);
+    padding: 0.5rem;
+    border-radius: 50%;
+  }
 }
 </style>
diff --git a/docs/src/pages/index.vue b/docs/src/pages/index.vue
index ae5e0359..a4318f20 100644
--- a/docs/src/pages/index.vue
+++ b/docs/src/pages/index.vue
@@ -30,7 +30,7 @@
 
     <app-section>
       <feature-list>
-        <feature-item>
+        <feature-item icon="contrast-fill">
           <h3 class="is-h2">
             Headless
           </h3>
@@ -44,7 +44,7 @@
           </div>
         </feature-item>
 
-        <feature-item>
+        <feature-item icon="file-copy-fill">
           <h3 class="is-h2">
             Framework-agnostic
           </h3>
@@ -58,7 +58,7 @@
           </div>
         </feature-item>
 
-        <feature-item>
+        <feature-item icon="terminal-box-fill">
           <h3 class="is-h2">
             TypeScript
           </h3>
@@ -72,7 +72,7 @@
           </div>
         </feature-item>
 
-        <feature-item>
+        <feature-item icon="cursor-fill">
           <h3 class="is-h2">
             Collaborative
           </h3>
@@ -86,7 +86,7 @@
           </div>
         </feature-item>
 
-        <feature-item>
+        <feature-item icon="chat-smile-2-fill">
           <h3 class="is-h2">
             Community
           </h3>