File size: 3,803 Bytes
65d68f5 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 | "use client";
import Link from "next/link";
import { ChevronRight } from "lucide-react";
import { cn } from "@/lib/utils";
// =============================================================================
// PathCard — Large card for the 3 main paths on the home page
// =============================================================================
export interface PathCardProps {
icon: React.ReactNode;
title: string;
badge?: string;
description: string;
href: string;
className?: string;
}
export function PathCard({ icon, title, badge, description, href, className }: PathCardProps) {
return (
<Link
href={href}
className={cn(
"group relative flex items-start gap-4 rounded-xl border border-[#E5E7EB] bg-white p-5",
"transition-all duration-200",
"hover:border-[#D1D5DB] hover:shadow-[0_4px_12px_rgba(0,0,0,0.06)]",
"active:scale-[0.99]",
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#111]/20",
className,
)}
>
{/* Icon container */}
<div className="flex size-12 shrink-0 items-center justify-center rounded-xl bg-[#F3F4F6] text-[#111] transition-colors group-hover:bg-[#111] group-hover:text-white">
<span className="[&>svg]:size-5">{icon}</span>
</div>
{/* Content */}
<div className="min-w-0 flex-1">
<div className="flex items-center gap-2">
<h3 className="text-[16px] font-semibold text-[#111]">{title}</h3>
{badge && (
<span className="rounded-full bg-[#F3F4F6] px-2 py-0.5 text-[11px] font-medium text-[#6B7280]">
{badge}
</span>
)}
</div>
<p className="mt-1 text-[13px] leading-relaxed text-[#6B7280]">{description}</p>
</div>
{/* Arrow */}
<ChevronRight className="mt-1 size-5 shrink-0 text-[#D1D5DB] transition-all group-hover:translate-x-0.5 group-hover:text-[#111]" />
</Link>
);
}
// =============================================================================
// PathCardLarge — Desktop variant with CTA button (used on home page grid)
// =============================================================================
export interface PathCardLargeProps {
icon: React.ReactNode;
title: string;
subtitle: string;
description: string;
ctaLabel: string;
href: string;
className?: string;
}
export function PathCardLarge({
icon,
title,
subtitle,
description,
ctaLabel,
href,
className,
}: PathCardLargeProps) {
return (
<Link
href={href}
className={cn(
"group flex flex-col rounded-xl border border-[#E5E7EB] bg-white p-6",
"transition-all duration-200",
"hover:border-[#D1D5DB] hover:shadow-[0_4px_12px_rgba(0,0,0,0.06)]",
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#111]/20",
className,
)}
>
{/* Icon */}
<div className="mb-4 flex size-11 items-center justify-center rounded-xl bg-[#F3F4F6] text-[#111] transition-colors group-hover:bg-[#111] group-hover:text-white">
<span className="[&>svg]:size-5">{icon}</span>
</div>
{/* Title + Badge */}
<h3 className="text-[16px] font-semibold text-[#111]">{title}</h3>
<p className="mt-0.5 text-[12px] font-medium text-[#9CA3AF]">{subtitle}</p>
{/* Description */}
<p className="mt-3 flex-1 text-[13px] leading-relaxed text-[#6B7280]">{description}</p>
{/* CTA */}
<div className="mt-5 inline-flex items-center gap-1.5 rounded-lg bg-[#111] px-4 py-2.5 text-[13px] font-semibold text-white transition-colors group-hover:bg-black">
{ctaLabel}
<ChevronRight className="size-4 transition-transform group-hover:translate-x-0.5" />
</div>
</Link>
);
}
|