44 lines
1.5 KiB
TypeScript
44 lines
1.5 KiB
TypeScript
import React from 'react';
|
|
import Scribble from '@/components/Scribble';
|
|
|
|
interface TechnicalGridItem {
|
|
label: string;
|
|
value: string;
|
|
}
|
|
|
|
interface TechnicalGridProps {
|
|
title?: string;
|
|
items: TechnicalGridItem[];
|
|
}
|
|
|
|
export default function TechnicalGrid({ title, items }: TechnicalGridProps) {
|
|
return (
|
|
<div className="my-16 not-prose">
|
|
{title && (
|
|
<h3 className="text-2xl font-bold text-text-primary mb-8 flex items-center gap-4 relative">
|
|
<span className="relative inline-block">
|
|
{title}
|
|
<Scribble
|
|
variant="underline"
|
|
className="absolute -bottom-2 left-0 w-full h-3 text-accent/40"
|
|
/>
|
|
</span>
|
|
</h3>
|
|
)}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
{items.map((item, index) => (
|
|
<div key={index} className="bg-white p-8 rounded-2xl border border-neutral-200 shadow-sm hover:shadow-md transition-all duration-300 group relative overflow-hidden">
|
|
<div className="absolute top-0 right-0 w-16 h-16 bg-primary/5 -mr-8 -mt-8 rotate-45 transition-transform group-hover:scale-110" />
|
|
<span className="block text-xs font-bold text-primary uppercase tracking-[0.2em] mb-3 opacity-70">
|
|
{item.label}
|
|
</span>
|
|
<span className="text-lg text-text-secondary leading-relaxed group-hover:text-text-primary transition-colors">
|
|
{item.value}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|