Init

docs/design-examples/components/ExperimentaCard.vue

@@ -0,0 +1,115 @@
+<script setup lang="ts">
+/**
+ * ExperimentaCard Component
+ *
+ * Glass-morphism card component based on the experimenta Design System.
+ *
+ * @example
+ * <ExperimentaCard>Content here</ExperimentaCard>
+ * <ExperimentaCard variant="info">Info section</ExperimentaCard>
+ * <ExperimentaCard title="Card Title">Content</ExperimentaCard>
+ */
+
+interface Props {
+  /** Card variant */
+  variant?: 'glass' | 'info' | 'contact' | 'progress'
+  /** Card title (optional) */
+  title?: string
+  /** Title color (only for info/contact variants) */
+  titleColor?: 'accent' | 'primary'
+  /** Show left accent border */
+  accentBorder?: boolean
+}
+
+withDefaults(defineProps<Props>(), {
+  variant: 'glass',
+  titleColor: 'accent',
+  accentBorder: false,
+})
+</script>
+
+<template>
+  <div
+    :class="[
+      'card-experimenta',
+      `card-${variant}`,
+      {
+        'card-accent-border': accentBorder || variant !== 'glass',
+      },
+    ]"
+  >
+    <!-- Title Slot or Prop -->
+    <h3 v-if="title || $slots.title" :class="['card-title', `title-${titleColor}`]">
+      <slot name="title">{{ title }}</slot>
+    </h3>
+
+    <!-- Main Content -->
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+/* Base Card Styles */
+.card-experimenta {
+  @apply rounded-xl;
+  @apply p-8 md:p-6 sm:p-5;
+  @apply transition-all duration-300;
+}
+
+/* Glass-morphism Variant (Main Card) */
+.card-glass {
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
+  backdrop-filter: blur(15px);
+  @apply border border-white/20;
+  @apply shadow-glass;
+  @apply rounded-2xl;
+  @apply p-15 md:p-10 sm:p-8;
+}
+
+@media (max-width: 768px) {
+  .card-glass {
+    @apply rounded-lg;
+  }
+}
+
+/* Info Variant */
+.card-info {
+  @apply bg-white/8;
+}
+
+/* Contact Variant */
+.card-contact {
+  @apply bg-white/8;
+  @apply text-center;
+}
+
+/* Progress Variant */
+.card-progress {
+  @apply bg-white/8;
+  @apply rounded-2xl md:rounded-lg;
+}
+
+/* Accent Border (Left) */
+.card-accent-border {
+  @apply border-l-4 border-accent;
+}
+
+/* Card Title */
+.card-title {
+  @apply font-medium mb-4;
+  @apply text-lg md:text-base;
+}
+
+.title-accent {
+  @apply text-accent;
+}
+
+.title-primary {
+  @apply text-primary;
+}
+
+/* Hover Effect (Optional) */
+.card-experimenta:hover {
+  @apply shadow-2xl;
+}
+</style>