Zastosowanie wszystkich poprawek UI i logiki kalkulatora
This commit is contained in:
@@ -0,0 +1,41 @@
|
||||
import React from 'react';
|
||||
|
||||
import Link from 'next/link';
|
||||
|
||||
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-border">
|
||||
<div className="container mx-auto px-4 md:px-8 max-w-5xl text-center">
|
||||
<h3 className="text-xl font-semibold text-text-muted mb-8 uppercase tracking-wider text-sm">
|
||||
Autoryzowany partner czołowych producentów
|
||||
</h3>
|
||||
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-4 lg:gap-6 items-center">
|
||||
{brands.map((brand, idx) => (
|
||||
<Link
|
||||
key={idx}
|
||||
href={`/sklep?brand=${encodeURIComponent(brand.name)}`}
|
||||
className="group flex justify-center items-center h-16 bg-slate-50 rounded-xl p-3 border border-border hover:border-accent hover:bg-accent/5 hover:shadow-sm transition-all duration-300"
|
||||
>
|
||||
{/* Tutaj docelowo można dać tag Image */}
|
||||
<span className="font-bold text-primary text-sm md:text-base tracking-tight opacity-70 group-hover:opacity-100 group-hover:text-accent transition-all">{brand.name}</span>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user