57 lines
1.7 KiB
TypeScript
57 lines
1.7 KiB
TypeScript
import Link from "next/link";
|
|
import { Globe, Bot, Workflow, Server, LifeBuoy, ArrowUpRight } from "lucide-react";
|
|
import type { ServiceMeta } from "@/config/services";
|
|
|
|
const iconMap = {
|
|
Globe,
|
|
Bot,
|
|
Workflow,
|
|
Server,
|
|
LifeBuoy,
|
|
};
|
|
|
|
interface ServiceCardProps {
|
|
service: ServiceMeta;
|
|
}
|
|
|
|
export default function ServiceCard({ service }: ServiceCardProps) {
|
|
const Icon = iconMap[service.icon];
|
|
const isGreen = service.accent === "green";
|
|
|
|
return (
|
|
<Link
|
|
href={service.href}
|
|
className={`group relative flex flex-col justify-between rounded-2xl border border-white/[0.06] bg-base-900/60 p-6 transition-all hover:-translate-y-1 clip-corner ${
|
|
isGreen
|
|
? "hover:border-green-500/30 hover:shadow-glow-green"
|
|
: "hover:border-blue-500/30 hover:shadow-glow"
|
|
}`}
|
|
>
|
|
<div>
|
|
<div
|
|
className={`mb-5 flex h-11 w-11 items-center justify-center rounded-xl border ${
|
|
isGreen
|
|
? "border-green-500/25 bg-green-500/10 text-green-400"
|
|
: "border-blue-500/25 bg-blue-500/10 text-blue-400"
|
|
}`}
|
|
>
|
|
<Icon size={20} strokeWidth={1.75} />
|
|
</div>
|
|
<h3 className="mb-2 font-display text-lg font-medium text-ink-100">
|
|
{service.title}
|
|
</h3>
|
|
<p className="text-sm leading-relaxed text-ink-500">
|
|
{service.description}
|
|
</p>
|
|
</div>
|
|
<div className="mt-6 flex items-center gap-1.5 text-sm font-medium text-ink-300 group-hover:text-ink-100">
|
|
Подробнее
|
|
<ArrowUpRight
|
|
size={16}
|
|
className="transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5"
|
|
/>
|
|
</div>
|
|
</Link>
|
|
);
|
|
}
|