31 lines
1.2 KiB
TypeScript
31 lines
1.2 KiB
TypeScript
// app/components/ui/ActionLinkCard.tsx
|
|
|
|
import { ArrowRight } from 'lucide-react';
|
|
import Link from 'next/link';
|
|
|
|
interface ActionLinkCardProps {
|
|
href: string;
|
|
title: string;
|
|
description: string;
|
|
}
|
|
|
|
export function ActionLinkCard({ href, title, description }: ActionLinkCardProps) {
|
|
return (
|
|
<Link
|
|
href={href}
|
|
className="group bg-white/40 backdrop-blur-md border border-white/40 p-5 rounded-3xl shadow-sm hover:shadow-md hover:bg-white/50 transition-all duration-300 flex flex-col gap-2"
|
|
>
|
|
<div className="flex items-center gap-3">
|
|
<div className="bg-white w-10 h-10 rounded-xl flex items-center justify-center shrink-0 text-slate-teal group-hover:bg-seafoam group-hover:text-eggshell transition-colors shadow-sm">
|
|
<ArrowRight size={20} className="group-hover:rotate-45 transition-transform" />
|
|
</div>
|
|
<h3 className="font-black text-ebony text-lg uppercase tracking-wide leading-tight">
|
|
{title}
|
|
</h3>
|
|
</div>
|
|
<p className="text-sm text-ebony/70 font-medium leading-relaxed w-full m-0 pl-1">
|
|
{description}
|
|
</p>
|
|
</Link>
|
|
);
|
|
} |