59 lines
2.1 KiB
TypeScript
59 lines
2.1 KiB
TypeScript
import React from "react";
|
|
import { ArrowUpRightIcon } from "@heroicons/react/24/outline";
|
|
|
|
interface FeatureItem {
|
|
title: string;
|
|
description: string;
|
|
icon: React.ReactNode;
|
|
link?: { label: string; href: string };
|
|
}
|
|
|
|
interface FeatureGridProps {
|
|
features: FeatureItem[];
|
|
}
|
|
|
|
const FeatureGrid: React.FC<FeatureGridProps> = ({ features }) => {
|
|
const iconColors = [
|
|
"from-[var(--color-primary)] to-[var(--color-primary-dark)]", // Blue
|
|
"from-[var(--color-success)] to-[var(--color-success-dark)]", // Green
|
|
"from-[var(--color-warning)] to-[var(--color-warning-dark)]", // Amber
|
|
"from-[var(--color-purple)] to-[var(--color-purple-dark)]", // Purple
|
|
];
|
|
|
|
return (
|
|
<div className="max-w-6xl mx-auto px-6 py-24">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
{features.map((feature, index) => {
|
|
const gradient = iconColors[index % iconColors.length];
|
|
return (
|
|
<div
|
|
key={feature.title}
|
|
className="relative rounded-3xl border-2 border-gray-200 bg-gradient-to-br from-white to-gray-50/50 p-8 flex flex-col gap-4 group hover:border-[var(--color-primary)]/50 transition-all shadow-sm hover:shadow-xl hover:-translate-y-1"
|
|
>
|
|
<div className={`size-12 rounded-2xl bg-gradient-to-br ${gradient} flex items-center justify-center text-white shadow-lg`}>
|
|
{feature.icon}
|
|
</div>
|
|
<h3 className="text-xl font-semibold text-gray-900">{feature.title}</h3>
|
|
<p className="text-sm text-gray-600 leading-relaxed">
|
|
{feature.description}
|
|
</p>
|
|
{feature.link && (
|
|
<a
|
|
href={feature.link.href}
|
|
className="inline-flex items-center gap-2 text-sm font-semibold text-[var(--color-primary)] hover:text-[var(--color-brand-700)] group-hover:gap-3 transition-all"
|
|
>
|
|
{feature.link.label}
|
|
<ArrowUpRightIcon className="h-4 w-4" />
|
|
</a>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default FeatureGrid;
|
|
|