38 lines
1.1 KiB
Svelte
38 lines
1.1 KiB
Svelte
<script lang="ts">
|
|
interface Props {
|
|
href: string;
|
|
title: string;
|
|
description: string;
|
|
icon: string;
|
|
color: string;
|
|
}
|
|
|
|
let { href, title, description, icon, color }: Props = $props();
|
|
</script>
|
|
|
|
<a
|
|
{href}
|
|
class="group block p-6 bg-white rounded-2xl border border-gray-100 card-hover"
|
|
>
|
|
<div
|
|
class="w-12 h-12 rounded-xl flex items-center justify-center mb-4 transition-transform group-hover:scale-110"
|
|
style="background: {color}15;"
|
|
>
|
|
<span class="text-2xl">{icon}</span>
|
|
</div>
|
|
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-2 group-hover:text-primary-600 transition-colors">
|
|
{title}
|
|
</h3>
|
|
|
|
<p class="text-gray-600 text-sm leading-relaxed">
|
|
{description}
|
|
</p>
|
|
|
|
<div class="mt-4 flex items-center text-primary-600 text-sm font-medium">
|
|
<span>Learn more</span>
|
|
<svg class="w-4 h-4 ml-1 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
|
</svg>
|
|
</div>
|
|
</a>
|