38 lines
1.1 KiB
TypeScript
38 lines
1.1 KiB
TypeScript
import Image from "next/image"
|
|
import { PublicSurface } from "@/components/public-surface"
|
|
|
|
interface FeatureCardProps {
|
|
image: string
|
|
alt: string
|
|
title: string
|
|
description: string
|
|
imageWidth?: number
|
|
imageHeight?: number
|
|
}
|
|
|
|
export function FeatureCard({
|
|
image,
|
|
alt,
|
|
title,
|
|
description,
|
|
imageWidth = 247,
|
|
imageHeight = 300,
|
|
}: FeatureCardProps) {
|
|
return (
|
|
<PublicSurface className="flex h-full flex-col items-center p-6 text-center transition-all hover:-translate-y-0.5 hover:shadow-[0_24px_60px_rgba(0,0,0,0.12)]">
|
|
<div className="relative mb-4 w-full max-w-[200px] rounded-[1.5rem] bg-[radial-gradient(circle_at_top_left,rgba(196,154,52,0.14),transparent_55%),linear-gradient(180deg,rgba(247,244,236,0.72),rgba(255,255,255,0.96))] p-4">
|
|
<Image
|
|
src={image}
|
|
alt={alt}
|
|
width={imageWidth}
|
|
height={imageHeight}
|
|
className="mx-auto h-auto w-auto object-contain"
|
|
/>
|
|
</div>
|
|
<h3 className="text-xl font-semibold mb-2">{title}</h3>
|
|
<p className="flex-1 text-sm leading-relaxed text-muted-foreground">
|
|
{description}
|
|
</p>
|
|
</PublicSurface>
|
|
)
|
|
}
|