37 lines
1.5 KiB
TypeScript
37 lines
1.5 KiB
TypeScript
import React from 'react';
|
|
import Image from 'next/image';
|
|
|
|
const brands = [
|
|
{ name: 'Daikin', logo: '/brands/daikin.webp' },
|
|
{ name: 'Mitsubishi Electric', logo: '/brands/mitsubishi.webp' },
|
|
{ name: 'Gree', logo: '/brands/gree.webp' },
|
|
{ name: 'Rotenso', logo: '/brands/rotenso.webp' },
|
|
{ name: 'LG', logo: '/brands/lg.webp' },
|
|
{ name: 'Samsung', logo: '/brands/samsung.webp' },
|
|
{ name: 'Haier', logo: '/brands/haier.webp' },
|
|
{ name: 'CHV', logo: '/brands/chv.webp' },
|
|
{ name: 'Toshiba', logo: '/brands/toshiba.webp' },
|
|
{ name: 'Fuji Electric', logo: '/brands/fuji.webp' },
|
|
];
|
|
|
|
export const BrandsGrid = () => {
|
|
return (
|
|
<section className="py-16 bg-white border-t border-gray-100">
|
|
<div className="container mx-auto px-4 md:px-8 max-w-7xl text-center">
|
|
<h3 className="text-xl font-semibold text-gray-500 mb-8 uppercase tracking-wider text-sm">
|
|
Autoryzowany partner czołowych producentów
|
|
</h3>
|
|
|
|
<div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-8 gap-6 items-center opacity-60 grayscale hover:grayscale-0 transition-all duration-500">
|
|
{brands.map((brand, idx) => (
|
|
<div key={idx} className="flex justify-center items-center h-16 bg-gray-50 rounded-lg p-3 hover:bg-gray-100 transition-colors">
|
|
{/* Fallback to text for placeholder since we don't have images */}
|
|
<span className="font-bold text-gray-600 text-lg tracking-tight">{brand.name}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|