38 lines
1.6 KiB
TypeScript
38 lines
1.6 KiB
TypeScript
import React from 'react';
|
|
|
|
import { SectionHeading } from '../common/SectionHeading';
|
|
import { companyDetails } from '@/content/company';
|
|
|
|
export function CertificatesSection() {
|
|
return (
|
|
<section className="py-16 md:py-24 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<SectionHeading
|
|
eyebrow="Uprawnienia"
|
|
title="Nasze certyfikaty"
|
|
subtitle="Zaufaj wykwalifikowanym specjalistom. Posiadamy wszystkie licencje wymagane do profesjonalnego montażu urządzeń HVAC."
|
|
align="center"
|
|
/>
|
|
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-6 md:gap-10 mt-16">
|
|
{companyDetails.certificates.map((cert, idx) => (
|
|
<div
|
|
key={idx}
|
|
className="group flex flex-col items-center text-center gap-4 p-6 bg-slate-50 rounded-2xl border border-border hover:border-accent/50 transition-colors"
|
|
>
|
|
{/* W rzeczywistości użylibyśmy obrazków. Tutaj dajemy szary prostokąt jako placeholder wg wytycznych */}
|
|
<div className="relative w-full aspect-[4/3] bg-white rounded-lg border border-border flex items-center justify-center p-4 overflow-hidden group-hover:shadow-md transition-shadow">
|
|
{/* Jeśli cert.image istnieje realnie, można by użyć Image, na razie tekstowy placeholder */}
|
|
<div className="text-sm font-bold text-slate-300 font-heading">
|
|
LOGO / CERTYFIKAT
|
|
</div>
|
|
</div>
|
|
<p className="font-semibold text-primary text-sm leading-tight group-hover:text-accent transition-colors">
|
|
{cert.name}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|