89 lines
2.0 KiB
TypeScript
89 lines
2.0 KiB
TypeScript
"use client";
|
|
|
|
import { cn } from "@/shared/lib/utils";
|
|
import { motion } from "framer-motion";
|
|
import { ArrowRight, LucideIcon } from "lucide-react";
|
|
import Link from "next/link";
|
|
|
|
export interface FeatureCardProps {
|
|
icon: LucideIcon;
|
|
title: string;
|
|
description: string;
|
|
variant?: "default" | "bordered" | "filled";
|
|
link?: {
|
|
href: string;
|
|
label: string;
|
|
};
|
|
className?: string;
|
|
}
|
|
|
|
const variantClasses = {
|
|
default: "bg-card hover:bg-accent/50",
|
|
bordered: "bg-transparent border-2 border-border hover:border-[var(--feature-accent)]",
|
|
filled: "bg-gradient-primary border border-border/50",
|
|
};
|
|
|
|
/**
|
|
* Карточка фичи/преимущества
|
|
* Используется в Features Section
|
|
*/
|
|
export function FeatureCard({
|
|
icon: Icon,
|
|
title,
|
|
description,
|
|
variant = "default",
|
|
link,
|
|
className,
|
|
}: FeatureCardProps) {
|
|
const content = (
|
|
<>
|
|
<div className="mb-4 inline-flex p-3 rounded-lg bg-[var(--feature-accent)]/10">
|
|
<Icon className="w-6 h-6 text-[var(--feature-accent)]" />
|
|
</div>
|
|
|
|
<h3 className="text-xl font-semibold mb-2">{title}</h3>
|
|
|
|
<p className="text-muted-foreground leading-relaxed">{description}</p>
|
|
|
|
{link && (
|
|
<div className="mt-4 inline-flex items-center gap-2 text-sm font-medium text-[var(--feature-accent)] group-hover:gap-3 transition-all">
|
|
{link.label}
|
|
<ArrowRight className="w-4 h-4" />
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
|
|
const card = (
|
|
<motion.div
|
|
initial="rest"
|
|
whileHover="hover"
|
|
variants={{
|
|
rest: { scale: 1, y: 0 },
|
|
hover: { scale: 1.02, y: -5 },
|
|
}}
|
|
transition={{ type: "spring", stiffness: 300, damping: 20 }}
|
|
className={cn(
|
|
"group relative p-6 rounded-xl transition-all duration-300",
|
|
variantClasses[variant],
|
|
className
|
|
)}
|
|
>
|
|
{content}
|
|
</motion.div>
|
|
);
|
|
|
|
if (link) {
|
|
return (
|
|
<Link href={link.href} className="block">
|
|
{card}
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
return card;
|
|
}
|
|
|
|
|
|
|