initial: bootstrap from BukidBountyApp base

resources/js/Components/Core/CardSimple.vue

@@ -0,0 +1,104 @@
+<template>
+  <div 
+    class="card-custom" 
+    :id="id" 
+    :style="cardStyle"
+    :class="[
+      `shadow-${shadow}`,
+      { 'is-premium': isPremium, 'no-padding': noPadding }
+    ]"
+  >
+    <div v-if="title" class="card-header-custom">
+      <h4 class="card-title">{{ title }}</h4>
+      <div v-if="$slots.headerAction" class="header-action">
+        <slot name="headerAction" />
+      </div>
+    </div>
+    <div class="card-body-custom">
+      <slot />
+    </div>
+    <div v-if="$slots.footer" class="card-footer-custom">
+      <slot name="footer" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  title:      { type: String, default: '' },
+  id:         { type: String, default: '' },
+  cardStyle:  { type: String, default: '' },
+  isPremium:  { type: Boolean, default: true },
+  noPadding:  { type: Boolean, default: false },
+  shadow:     { type: String, default: 'md', validator: (v) => ['none', 'sm', 'md', 'lg'].includes(v) },
+})
+</script>
+
+<style scoped>
+.card-custom {
+  background: var(--bg-card, #ffffff);
+  border: 1px solid var(--border-color, rgba(0, 0, 0, 0.08));
+  border-radius: 16px;
+  overflow: hidden;
+  transition: all 0.3s ease;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.card-header-custom {
+  padding: 1.5rem;
+  border-bottom: 1px solid var(--border-color, rgba(0, 0, 0, 0.05));
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.card-title {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: var(--text-primary, #1e1e1e);
+}
+
+.card-body-custom {
+  padding: 1.5rem;
+  flex-grow: 1;
+}
+
+.no-padding .card-body-custom {
+  padding: 0;
+}
+
+.card-footer-custom {
+  padding: 1.25rem 1.5rem;
+  border-top: 1px solid var(--border-color, rgba(0, 0, 0, 0.05));
+  background: var(--bg-secondary, rgba(0, 0, 0, 0.02));
+}
+
+/* Premium / Glassmorphism */
+.is-premium {
+  background: rgba(255, 255, 255, 0.6);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
+}
+
+:global(.dark-mode) .is-premium {
+  background: rgba(30, 41, 59, 0.7);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
+}
+
+.is-premium:hover {
+  border-color: var(--accent-color, rgba(83, 61, 234, 0.3));
+  transform: translateY(-2px);
+}
+
+/* Shadows */
+.shadow-none { box-shadow: none; }
+.shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
+.shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); }
+.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }
+</style>