61 lines
1.6 KiB
TypeScript
61 lines
1.6 KiB
TypeScript
// app/components/InfoCard.tsx
|
|
|
|
import { HiOutlineArrowNarrowRight } from "react-icons/hi";
|
|
|
|
interface InfoCardProps {
|
|
title: string;
|
|
description: string;
|
|
actionLabel: string;
|
|
href?: string;
|
|
onClick?: () => void;
|
|
}
|
|
|
|
export default function InfoCard({ title, description, actionLabel, href, onClick }: InfoCardProps) {
|
|
const actionClasses = `
|
|
group inline-flex items-center gap-2
|
|
text-[#f1c50e] font-bold uppercase text-[1rem]
|
|
tracking-wider transition-all duration-300
|
|
relative pb-1
|
|
`;
|
|
|
|
const content = (
|
|
<>
|
|
<span>{actionLabel}</span>
|
|
<HiOutlineArrowNarrowRight
|
|
className="text-[1.2rem] transition-transform duration-300 group-hover:translate-x-2"
|
|
/>
|
|
<span className="absolute bottom-0 left-0 w-full h-0.5 bg-[#f1c50e] transform scale-x-0 transition-transform duration-300 origin-left group-hover:scale-x-100" />
|
|
</>
|
|
);
|
|
|
|
return (
|
|
<div className="bg-[#406185] text-white w-full max-w-180 py-8 px-6 text-center shadow-lg rounded-sm">
|
|
<h2 className="uppercase text-[clamp(1.5rem,8vw,2.25rem)] font-bold leading-tight mb-2">
|
|
{title}
|
|
</h2>
|
|
<p className="mb-6 text-[1rem] leading-[1.4] opacity-90">
|
|
{description}
|
|
</p>
|
|
|
|
<div className="flex justify-center">
|
|
{href ? (
|
|
<a
|
|
href={href}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
className={actionClasses}
|
|
>
|
|
{content}
|
|
</a>
|
|
) : (
|
|
<button
|
|
onClick={onClick}
|
|
className={actionClasses}
|
|
>
|
|
{content}
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
} |