feat: adopt main website styles

assets/styles/components/button.css

@@ -1,16 +1,44 @@
-.btn {
-    @apply inline-flex space-x-1 justify-center rounded-lg text-sm uppercase font-semibold py-2.5 px-4;
-    @apply bg-primary text-white hover:bg-primary/80 shadow-md;
+.button {
+    @apply inline-flex items-center justify-center space-x-2 px-4 py-2 md:px-8 cursor-pointer;
+    @apply uppercase leading-none text-center;
+    @apply transition-colors outline-none focus:outline-none;
 }
 
-.btn--small {
-    @apply text-xs py-1 px-2 rounded-md;
+.button--small {
+    @apply px-2 py-1 md:px-4 text-xs sm:text-sm;
 }
 
-.btn--secondary {
-    @apply bg-secondary text-gray-800 hover:bg-secondary/80;
+.button--full {
+    @apply block w-full;
 }
 
-.btn--active {
-    @apply shadow-none;
+.bg-button {
+    @apply bg-primary-light text-white;
+    @apply hover:bg-secondary;
+}
+
+
+.bg-button--active,
+.bg-button--secondary {
+    @apply bg-secondary;
+}
+
+.bg-button--muted {
+    @apply bg-zinc-300 hover:bg-zinc-300;
+}
+
+.bg-button--dark {
+    @apply bg-primary-dark;
+}
+
+.bg-button--light {
+    @apply bg-white border-2;
+    @apply font-bold;
+    @apply border-primary-light text-primary;
+}
+
+.bg-button--light:hover,
+.bg-button--light.button--active {
+    @apply bg-white;
+    @apply border-secondary text-secondary;
 }