51 lines
1.8 KiB
TypeScript
51 lines
1.8 KiB
TypeScript
interface ProductItem {
|
|
id: string;
|
|
title: string;
|
|
desc: string;
|
|
}
|
|
|
|
interface ProductsSectionProps {
|
|
title: string;
|
|
items: ProductItem[];
|
|
}
|
|
|
|
export default function ProductsSection({ title, items }: ProductsSectionProps) {
|
|
return (
|
|
<section className="py-8 sm:py-12 md:py-16 bg-gray-50">
|
|
<div className="max-w-6xl mx-auto px-4">
|
|
<div className="text-center mb-8 sm:mb-12">
|
|
<h2 className="text-2xl sm:text-3xl font-bold">{title}</h2>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6">
|
|
{items.map((product, index) => (
|
|
<div
|
|
key={index}
|
|
className="bg-white rounded-lg shadow-lg overflow-hidden"
|
|
>
|
|
<div className="h-24 sm:h-32 bg-gray-400 relative">
|
|
<div className="absolute top-2 sm:top-4 left-2 sm:left-4 bg-blue-600 text-white px-2 sm:px-3 py-1 rounded text-xs sm:text-sm">
|
|
AWS
|
|
</div>
|
|
</div>
|
|
<div className="p-4 sm:p-6">
|
|
<div className="text-orange-500 font-bold text-base sm:text-lg mb-2">
|
|
{product.id}
|
|
</div>
|
|
<h3 className="font-bold text-base sm:text-lg mb-2 sm:mb-3">
|
|
{product.title}
|
|
</h3>
|
|
<p className="text-gray-600 text-xs sm:text-sm mb-3 sm:mb-4 leading-relaxed">
|
|
{product.desc}
|
|
</p>
|
|
<button className="bg-orange-500 text-white px-3 sm:px-4 py-2 rounded text-xs sm:text-sm hover:bg-orange-600 w-full sm:w-auto">
|
|
立即咨询
|
|
</button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|