File size: 4,084 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";
// =============================================================================
// PathCardDark — Large card for the 3 main paths on the home page (Dark Theme)
// =============================================================================
export interface PathCardDarkProps {
icon: React.ReactNode;
title: string;
badge?: string;
description: string;
href: string;
className?: string;
}
export function PathCardDark({ icon, title, badge, description, href, className }: PathCardDarkProps) {
return (
<Link
href={href}
className={cn(
"group relative flex items-start gap-4 rounded-xl border border-[#242428] bg-[#111113] p-5",
"transition-all duration-200",
"hover:border-[#2A2A30] hover:bg-[#151518] hover:shadow-[0_4px_20px_rgba(0,0,0,0.5)]",
"active:scale-[0.99]",
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#FFFFFF]/20",
className,
)}
>
{/* Icon container */}
<div className="flex size-12 shrink-0 items-center justify-center rounded-xl bg-[#151518] border border-[#2A2A30] text-[#A1A1AA] transition-colors group-hover:bg-[#FFFFFF] group-hover:text-[#0A0A0A]">
<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-[#FFFFFF]">{title}</h3>
{badge && (
<span className="rounded-full bg-[#18181B] border border-[#2A2A30] px-2 py-0.5 text-[11px] font-medium text-[#A1A1AA]">
{badge}
</span>
)}
</div>
<p className="mt-1 text-[13px] leading-relaxed text-[#A1A1AA]">{description}</p>
</div>
{/* Arrow */}
<ChevronRight className="mt-1 size-5 shrink-0 text-[#A1A1AA] transition-all group-hover:translate-x-0.5 group-hover:text-[#FFFFFF]" />
</Link>
);
}
// =============================================================================
// PathCardDarkLarge — Desktop variant with CTA button (used on home page grid)
// =============================================================================
export interface PathCardDarkLargeProps {
icon: React.ReactNode;
title: string;
subtitle: string;
description: string;
ctaLabel: string;
href: string;
className?: string;
}
export function PathCardDarkLarge({
icon,
title,
subtitle,
description,
ctaLabel,
href,
className,
}: PathCardDarkLargeProps) {
return (
<Link
href={href}
className={cn(
"group flex flex-col rounded-xl border border-[#242428] bg-[#111113] p-6",
"transition-all duration-200",
"hover:border-[#2A2A30] hover:bg-[#151518] hover:shadow-[0_4px_20px_rgba(0,0,0,0.5)] hover:-translate-y-0.5",
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#FFFFFF]/20",
className,
)}
>
{/* Icon */}
<div className="mb-4 flex size-11 items-center justify-center rounded-xl bg-[#151518] border border-[#2A2A30] text-[#A1A1AA] transition-colors group-hover:bg-[#FFFFFF] group-hover:text-[#0A0A0A]">
<span className="[&>svg]:size-5">{icon}</span>
</div>
{/* Title + Badge */}
<h3 className="text-[16px] font-semibold text-[#FFFFFF]">{title}</h3>
<p className="mt-0.5 text-[12px] font-medium text-[#A1A1AA]">{subtitle}</p>
{/* Description */}
<p className="mt-3 flex-1 text-[13px] leading-relaxed text-[#E7E7EA]">{description}</p>
{/* CTA */}
<div className="mt-5 inline-flex items-center gap-1.5 rounded-lg bg-[#151518] border border-[#2A2A30] px-4 py-2.5 text-[13px] font-semibold text-[#FFFFFF] transition-colors group-hover:bg-[#FFFFFF] group-hover:text-[#0A0A0A]">
{ctaLabel}
<ChevronRight className="size-4 transition-transform group-hover:translate-x-0.5" />
</div>
</Link>
);
}
|