initial commit

components/ButtonCTA.vue

@@ -0,0 +1,53 @@
+<template>
+  <button type="button" class="flex items-center justify-center cursor-pointer"
+    :disabled="disabled" :class="buttonClasses" @click="handleClick">
+    <slot></slot>
+  </button>
+</template>
+
+<script>
+export default {
+  props: {
+    color: {
+      type: String,
+      default: "transparent",
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    }
+  },
+  computed: {
+    buttonClasses() {
+      return {
+        "transparent": this.color === "transparent",
+      };
+    }
+  },
+  methods: {
+    handleClick($ev) {
+      if (this.disabled) {
+        $ev.stopPropagation();
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+
+.transparent {
+  background: transparent;
+  padding: 1rem;
+  border: 1px solid $color-button;
+  border-radius: 12px;
+  color: $color-button;
+  width: fit-content;
+  text-transform: uppercase;
+  &:hover {
+    background: $color-button;
+    color: white;
+  }
+}
+
+</style>