Initial VTuber Awards implementation

frontend/src/components/ui/Button.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '../../lib/utils'
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center rounded-xl text-sm font-semibold transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-400 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default: 'bg-violet-600 text-white shadow-lg shadow-violet-500/20 hover:bg-violet-500',
+        secondary: 'border border-amber-300/60 bg-white text-amber-600 hover:bg-amber-50',
+        ghost: 'bg-white/70 text-slate-700 hover:bg-white',
+      },
+      size: {
+        default: 'h-11 px-5',
+        lg: 'h-12 px-6',
+        sm: 'h-9 px-4',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
+
+const props = defineProps<{
+  variant?: VariantProps<typeof buttonVariants>['variant']
+  size?: VariantProps<typeof buttonVariants>['size']
+  class?: string
+}>()
+
+const classes = computed(() =>
+  cn(buttonVariants({ variant: props.variant, size: props.size }), props.class),
+)
+</script>
+
+<template>
+  <button :class="classes">
+    <slot />
+  </button>
+</template>

frontend/src/components/ui/Card.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { cn } from '../../lib/utils'
+
+defineProps<{
+  class?: string
+}>()
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'rounded-[28px] border border-violet-200/70 bg-white/80 shadow-[0_24px_60px_rgba(168,145,214,0.12)] backdrop-blur',
+        $props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>