feat: add steps component

chore: rename breadcrumb-delimiter to chevron-right

assets/css/components/cards.css

@@ -0,0 +1,29 @@
+.hextra-cards {
+  grid-template-columns: repeat(auto-fill, minmax(max(250px, calc((100% - 1rem * 2) / var(--rows))), 1fr));
+}
+
+.hextra-card img {
+  user-select: none;
+}
+
+.hextra-card:hover svg {
+  color: currentColor;
+}
+
+.hextra-card svg {
+  width: 1.5rem;
+  color: #00000033;
+  transition: color 0.3s ease;
+}
+
+.hextra-card p {
+  margin-top: 0.5rem;
+}
+
+.dark .hextra-card svg {
+  color: #ffffff66;
+}
+
+.dark .hextra-card:hover svg {
+  color: currentColor;
+}

assets/css/components/steps.css

@@ -0,0 +1,11 @@
+.steps h3 {
+  counter-increment: step;
+
+  &:before {
+    @apply absolute w-[33px] h-[33px];
+    @apply border-4 border-white bg-gray-100 dark:border-dark dark:bg-neutral-800;
+    @apply rounded-full text-neutral-400 text-base font-normal text-center -indent-px;
+    @apply mt-[3px] ml-[-41px];
+    content: counter(step);
+  }
+}