docs: add icons to features

docs/src/components/FeatureItem/index.vue

@@ -1,22 +1,52 @@
 <template>
-  <div class="feature-item text">
+  <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;
+  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>

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>