You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
116 lines
2.3 KiB
116 lines
2.3 KiB
<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) - Safrangold (#f59d24) */
|
|
.card-accent-border {
|
|
border-left: 6px solid #f59d24;
|
|
@apply rounded-l-lg;
|
|
}
|
|
|
|
/* 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>
|
|
|