| "use client"; |
|
|
| import Link from "next/link"; |
| import { ChevronRight } from "lucide-react"; |
| import { cn } from "@/lib/utils"; |
|
|
| |
| |
| |
|
|
| 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> |
| ); |
| } |
|
|
| |
| |
| |
|
|
| 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> |
| ); |
| } |
|
|
