feat: landing page + smart components

assets/js/getLinkTag.js

@@ -0,0 +1,18 @@
+const DEFAULT_TAG = "button"
+const ANCHOR_TAG = "a"
+const FRAMEWORK_LINK = "NuxtLink" // or "router-link", "g-link"...
+
+const getLinkTag = ({ to, blank }) => {
+  if (!to) {
+    return DEFAULT_TAG
+  } else if (blank) {
+    return ANCHOR_TAG
+  } else if (/^\/(?!\/).*$/.test(to)) {
+    // regex101.com/r/LU1iFL/1
+    return FRAMEWORK_LINK
+  } else {
+    return ANCHOR_TAG
+  }
+}
+
+export { getLinkTag as default, ANCHOR_TAG, FRAMEWORK_LINK }

assets/scss/styles.scss

@@ -149,6 +149,46 @@ hr {
   @apply my-4;
 }
 
+.tippy-popper {
+  .tooltip-theme {
+    @apply bg-secondary;
+    @apply text-primaryLight;
+    @apply text-xs;
+    @apply font-semibold;
+    @apply px-2;
+    @apply px-4;
+    @apply shadow;
+  }
+
+  .popover-theme {
+    @apply bg-primaryLight;
+    @apply text-secondary;
+    @apply p-2;
+    @apply shadow-md;
+  }
+
+  &[x-placement^="top"] .tippy-tooltip .tippy-arrow {
+    border-top-color: var(--color-primary-light);
+  }
+
+  &[x-placement^="bottom"] .tippy-tooltip .tippy-arrow {
+    border-bottom-color: var(--color-primary-light);
+  }
+
+  &[x-placement^="left"] .tippy-tooltip .tippy-arrow {
+    border-left-color: var(--color-primary-light);
+  }
+
+  &[x-placement^="right"] .tippy-tooltip .tippy-arrow {
+    border-right-color: var(--color-primary-light);
+  }
+}
+
+[arrow] > div {
+  @apply flex;
+  @apply w-full;
+}
+
 .tooltip {
   @apply z-50;
   @apply outline-none;

assets/scss/themes.scss

@@ -29,11 +29,11 @@
 
 @mixin lightTheme {
   // Background color
-  --primary-color: rgba(255, 255, 255, 1);
+  --primary-color: theme("colors.white");
   // Light Background color
-  --primary-light-color: theme("colors.gray.200");
+  --primary-light-color: theme("colors.gray.50");
   // Dark Background color
-  --primary-dark-color: rgba(0, 0, 0, 0.02);
+  --primary-dark-color: theme("colors.gray.100");
   // Text color
   --secondary-color: theme("colors.gray.600");
   // Light Text color