56 lines
2.1 KiB
Vue
56 lines
2.1 KiB
Vue
<template>
|
|
<div class="tile-card group relative overflow-hidden rounded-2xl shadow-xl transition-all duration-300 hover:shadow-2xl hover:scale-[1.02]">
|
|
<!-- Background image with blur -->
|
|
<div class="absolute inset-0 z-0">
|
|
<img src="/sf_card.png" alt="Card background" class="w-full h-full object-cover opacity-20" />
|
|
<div class="absolute inset-0 backdrop-blur-lg bg-white/10"></div>
|
|
</div>
|
|
|
|
<!-- Header with dark blue background -->
|
|
<div class="relative z-10 bg-sf-blue text-white p-6 rounded-t-2xl">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<h3 class="text-xl font-bold">
|
|
<slot name="title">Card Title</slot>
|
|
</h3>
|
|
<p class="text-sf-green-light text-sm mt-1">
|
|
<slot name="subtitle">Subtitle</slot>
|
|
</p>
|
|
</div>
|
|
<div class="w-12 h-12 rounded-full bg-white/20 flex items-center justify-center">
|
|
<slot name="icon">
|
|
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
|
|
</svg>
|
|
</slot>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Content area with strong backdrop blur -->
|
|
<div class="relative z-10 p-6 backdrop-blur-lg bg-white/5 rounded-b-2xl">
|
|
<div class="text-gray-800">
|
|
<slot>Card content goes here. This area has a strong backdrop blur effect to let the wall texture show through.</slot>
|
|
</div>
|
|
<!-- Optional footer -->
|
|
<div class="mt-6 pt-4 border-t border-white/20">
|
|
<slot name="footer">
|
|
<button class="btn-primary text-sm px-4 py-2">Action</button>
|
|
</slot>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Decorative corner accent -->
|
|
<div class="absolute top-0 right-0 w-16 h-16 bg-sf-green/20 rounded-full -translate-y-8 translate-x-8 group-hover:scale-125 transition-transform"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
// No props needed for basic tile
|
|
</script>
|
|
|
|
<style scoped>
|
|
.tile-card {
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
}
|
|
</style> |