Refactor events page

.eslintrc

@@ -2,6 +2,7 @@
   "extends": "@antfu",
   "ignorePatterns": ["*.code-workspace"],
   "rules": {
-    "antfu/top-level-function": "off" 
+    "antfu/top-level-function": "off",
+    "vue/singleline-html-element-content-newline": "off"
   }
 }

package.json

@@ -6,6 +6,7 @@
     "node": ">=19.4.0",
     "npm": ">=9.2.0"
   },
+  "type": "module",
   "scripts": {
     "build": "vite build",
     "cy:o": "cypress open",
@@ -33,9 +34,10 @@
   },
   "devDependencies": {
     "@antfu/eslint-config": "^0.40.2",
+    "@iconify/vue": "^4.1.1",
     "@types/node": "^20.4.8",
     "@unocss/preset-attributify": "^0.54.2",
-    "@unocss/preset-icons": "^0.54.2",
+    "@unocss/preset-icons": "^0.54.3",
     "@unocss/preset-uno": "^0.54.2",
     "@unocss/preset-web-fonts": "^0.54.2",
     "@vitejs/plugin-vue": "^4.0.0",

src/components/buttons/CtaComponent.vue

@@ -5,19 +5,20 @@ import { useCtaComponent } from '@/functions/useCtaComponent'
 defineProps<{
   secondary?: boolean
   ariaText?: string
+  tertiary?: boolean
+  quaternary?: boolean
 }>()
 
 const { component, bindings } = useCtaComponent(useAttrs())
 </script>
 
 <template>
-  <component
-    :is="component"
-    v-bind="bindings"
-    :aria-label="ariaText"
-    class="cta"
-    :class="{ 'secondary py-1 px-1.5 rounded-1': secondary }"
-  >
+  <component :is="component" v-bind="bindings" :aria-label="ariaText" class="cta" :class="{
+    'py-1 px-1.5 rounded-1': secondary || tertiary || quaternary,
+    'secondary': secondary,
+    'tertiary': tertiary,
+    'quaternary': quaternary,
+  }">
     <slot />
   </component>
 </template>
@@ -46,11 +47,32 @@ const { component, bindings } = useCtaComponent(useAttrs())
 
   @include breakpoint(md) {
     &:hover {
-     background: $bg-secondary;
+      background: $bg-secondary;
     }
   }
 }
 
+.tertiary {
+  border: none;
+  background: rgb(238 0 0) !important;
+  background: linear-gradient(90deg, rgb(238 0 0 / 100%) 0%, rgb(190 30 45 / 100%) 100%) !important;
+  color: #fff !important;
+  transition: transform 0.3s ease-in;
+
+  @include breakpoint(md) {
+    &:hover {
+      transform: scale(1.08);
+    }
+  }
+}
+
+.quaternary {
+  border: none;
+  background-color: $nord10 !important;
+  color: #fff !important;
+  transition: transform 0.3s ease-in;
+}
+
 .#{$dark-mode-class} {
   .cta {
     border: none;