68 lines
2.4 KiB
JavaScript
68 lines
2.4 KiB
JavaScript
// components/shared/SpecificationsLayout.jsx
|
|
|
|
import Link from 'next/link';
|
|
|
|
const SpecificationsLayout = ({
|
|
title = "Service Specifications",
|
|
specificationItems = [],
|
|
backgroundColor = "#e8f5f3",
|
|
iconBackgroundColor = "bg-orange-100"
|
|
}) => {
|
|
return (
|
|
<section className="w-full min-w-0 py-6 lg:py-8">
|
|
<div className="w-full max-w-none px-4 sm:px-6 lg:px-6">
|
|
{/* Section Header */}
|
|
<div className="text-left mb-6 lg:mb-8">
|
|
<h2 className="text-2xl sm:text-3xl font-bold text-teal-700 mb-4">
|
|
{title}
|
|
</h2>
|
|
</div>
|
|
|
|
{/* Specifications Grid */}
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 w-full max-w-none">
|
|
{specificationItems.map((spec, index) => (
|
|
<div
|
|
key={index}
|
|
className="w-full min-w-0"
|
|
>
|
|
{/* Background Card */}
|
|
<div
|
|
className="rounded-3xl p-6 lg:p-8 h-full min-h-[240px] sm:min-h-[280px] flex flex-col"
|
|
style={{ backgroundColor: backgroundColor }}
|
|
>
|
|
{/* Icon Circle */}
|
|
<div className="flex justify-center mb-4 lg:mb-6">
|
|
<div className={`w-12 h-12 sm:w-16 sm:h-16 ${iconBackgroundColor} rounded-full flex items-center justify-center`}>
|
|
<img
|
|
src={spec.icon}
|
|
className="w-8 h-8 sm:w-10 sm:h-10 object-contain"
|
|
alt={`${spec.title} Icon`}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Title */}
|
|
<h3 className="text-center text-teal-700 text-base sm:text-lg font-semibold mb-3 lg:mb-4">
|
|
{spec.title}
|
|
</h3>
|
|
|
|
{/* Content */}
|
|
<div className="text-gray-700 text-xs sm:text-sm leading-relaxed text-center flex-grow flex items-start justify-center">
|
|
<div className="w-full min-w-0">
|
|
{spec.renderContent ? spec.renderContent() : (
|
|
<div className="text-gray-600 break-words">
|
|
{spec.content}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default SpecificationsLayout; |