86 lines
3.6 KiB
TypeScript
86 lines
3.6 KiB
TypeScript
import React from 'react';
|
|
import Link from 'next/link';
|
|
import Image from 'next/image';
|
|
import { Wind, LayoutGrid, ArrowRight } from 'lucide-react';
|
|
|
|
import { cn } from '@/lib/utils';
|
|
|
|
const acTypes = [
|
|
{
|
|
title: 'Klimatyzatory SPLIT',
|
|
image: '/images/services/split.webp',
|
|
description: 'Najpopularniejsze rozwiązanie do jednego pomieszczenia. Składa się z jednej jednostki wewnętrznej i jednej zewnętrznej.',
|
|
icon: Wind,
|
|
subtypes: ['Ścienne', 'Konsolowe', 'Kanałowe'],
|
|
link: '/sklep?category=scienne',
|
|
},
|
|
{
|
|
title: 'Systemy MULTISPLIT',
|
|
image: '/images/services/split.webp',
|
|
description: 'Idealne do chłodzenia całego domu. Do jednej jednostki zewnętrznej można podłączyć od 2 do 5 jednostek wewnętrznych.',
|
|
icon: LayoutGrid,
|
|
subtypes: ['Dla 2 pomieszczeń', 'Dla 3 pomieszczeń', 'Dla 4-5 pomieszczeń', 'Mieszane typy jednostek'],
|
|
link: '/sklep?category=multisplit',
|
|
},
|
|
/* {
|
|
title: 'Pozostałe rozwiązania',
|
|
image: '/images/services/kasetonowe.webp',
|
|
description: 'Specjalistyczne urządzenia łączące funkcje chłodzenia z zaawansowanym grzaniem lub oczyszczaniem powietrza.',
|
|
icon: Sparkles,
|
|
subtypes: ['Z funkcją ogrzewania (do -25°C)', 'Z zaawansowanym oczyszczaczem', 'Klimatyzatory przenośne', 'Klimatyzatory bez jednostki zewn.'],
|
|
link: '/sklep',
|
|
}, */
|
|
];
|
|
|
|
export const AcTypesSection = () => {
|
|
return (
|
|
<section className="py-16 bg-gray-50">
|
|
<div className="container mx-auto px-4 md:px-8 max-w-7xl">
|
|
<div className="text-center max-w-2xl mx-auto mb-12">
|
|
<h2 className="text-3xl font-bold text-primary mb-4">Rodzaje klimatyzatorów</h2>
|
|
<p className="text-gray-600">
|
|
Dobierzemy rozwiązanie idealnie dopasowane do Twoich potrzeb, niezależnie od tego czy chłodzisz jedno pomieszczenie, czy cały dom.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
|
{acTypes.map((type, idx) => {
|
|
const Icon = type.icon;
|
|
return (
|
|
<div key={idx} className="bg-white rounded-xl shadow-sm border border-gray-100 p-8 flex flex-col h-full hover:shadow-md transition-shadow">
|
|
<div className="relative w-full h-44 rounded-xl overflow-hidden mb-4">
|
|
<Image src={type.image} alt={type.title} fill className="object-cover" />
|
|
</div>
|
|
<div className="w-14 h-14 bg-accent/10 rounded-xl flex items-center justify-center mb-6 text-accent">
|
|
<Icon className="w-7 h-7" />
|
|
</div>
|
|
<h3 className="text-xl font-bold text-primary mb-3">{type.title}</h3>
|
|
<p className="text-gray-600 mb-6 text-sm flex-grow">
|
|
{type.description}
|
|
</p>
|
|
|
|
<ul className="space-y-2 mb-8">
|
|
{type.subtypes.map((subtype, sIdx) => (
|
|
<li key={sIdx} className="flex items-center text-sm text-gray-700">
|
|
<div className="w-1.5 h-1.5 rounded-full bg-accent mr-3"></div>
|
|
{subtype}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
|
|
<Link
|
|
href={type.link}
|
|
className={cn("btn btn-outline btn-primary bg-white w-full justify-between group mt-auto")}
|
|
>
|
|
Sprawdź modele
|
|
<ArrowRight className="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform" />
|
|
</Link>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|