50 lines
1.7 KiB
JavaScript
50 lines
1.7 KiB
JavaScript
import Image from "next/image";
|
|
|
|
export default function SampleRequirements({ title, items }) {
|
|
const requirements = [
|
|
{
|
|
icon: "/images/icons/clock.png", // Replace with your actual icon path
|
|
title: "Turnaround Time",
|
|
description: "21 Days"
|
|
},
|
|
{
|
|
icon: "/images/icons/sample.png", // Replace with your actual icon path
|
|
title: "Sample Requirement",
|
|
description: "Blood/Saliva/Cheek Swab/Genomic DNA/Dry Blood Spot"
|
|
}
|
|
];
|
|
|
|
return (
|
|
<section className="mx-auto px-8 pt-8 pb-12">
|
|
<h3 className="text-3xl font-bold text-teal-700 mb-6">{title} Sample Requirements</h3>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-6 max-w-none mx-auto">
|
|
{requirements.map((req, idx) => (
|
|
<div
|
|
key={idx}
|
|
className="rounded-2xl p-4 hover:shadow-sm transition-shadow cursor-pointer"
|
|
style={{backgroundColor: '#f2fcfc'}}
|
|
>
|
|
<div className="flex items-start gap-4">
|
|
<div className="flex-shrink-0 mt-1 rounded-full bg-orange-100 w-14 h-14 flex items-center justify-center">
|
|
<Image
|
|
src={req.icon}
|
|
alt={req.title}
|
|
width={36}
|
|
height={36}
|
|
className="object-contain"
|
|
/>
|
|
</div>
|
|
<div className="flex-1">
|
|
<h4 className="text-lg font-semibold text-teal-700 mb-2">{req.title}</h4>
|
|
<p className="text-gray-600 text-sm leading-relaxed">
|
|
{req.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
} |