65 lines
2.5 KiB
TypeScript
65 lines
2.5 KiB
TypeScript
import React from 'react';
|
|
import { ThermometerSnowflake, VolumeX, Droplets, Snowflake, PowerOff } from 'lucide-react';
|
|
|
|
const symptoms = [
|
|
{
|
|
icon: ThermometerSnowflake,
|
|
title: 'Lodówka nie chłodzi',
|
|
description: 'Najczęstsza usterka. Może oznaczać problem z termostatem, wyciek czynnika chłodniczego lub uszkodzenie sprężarki.',
|
|
},
|
|
{
|
|
icon: VolumeX,
|
|
title: 'Głośna praca / Dziwne dźwięki',
|
|
description: 'Buczenie, stukanie lub piszczenie często wskazuje na zużycie wentylatora, agregatu lub problem z ułożeniem urządzenia.',
|
|
},
|
|
{
|
|
icon: Droplets,
|
|
title: 'Zbieranie się wody na dnie',
|
|
description: 'Zazwyczaj spowodowane zatkanym odpływem skroplin w chłodziarce lub problemem z systemem No Frost.',
|
|
},
|
|
{
|
|
icon: Snowflake,
|
|
title: 'Nadmierne oszranianie',
|
|
description: 'Brak uszczelnienia drzwi, uszkodzona grzałka odszraniania lub awaria czujnika temperatury.',
|
|
},
|
|
{
|
|
icon: PowerOff,
|
|
title: 'Urządzenie nie włącza się',
|
|
description: 'Problemy z zasilaniem, uszkodzony moduł sterujący (płyta główna) lub całkowita awaria agregatu.',
|
|
},
|
|
];
|
|
|
|
export const SymptomsList = () => {
|
|
return (
|
|
<section className="py-16 bg-white">
|
|
<div className="container mx-auto px-4 md:px-8 max-w-6xl">
|
|
<div className="text-center max-w-2xl mx-auto mb-12">
|
|
<h2 className="text-3xl font-bold text-primary mb-4">Typowe usterki — kiedy wezwać serwis?</h2>
|
|
<p className="text-gray-600">
|
|
Jeśli zauważysz którykolwiek z poniższych objawów, nie zwlekaj. Szybka reakcja może zapobiec poważniejszej awarii i uchronić żywność przed zepsuciem.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{symptoms.map((symptom, idx) => {
|
|
const Icon = symptom.icon;
|
|
return (
|
|
<div key={idx} className="bg-gray-50 p-6 rounded-xl border border-gray-100 flex gap-4 items-start hover:shadow-md transition-shadow">
|
|
<div className="w-12 h-12 shrink-0 bg-accent/10 rounded-lg flex items-center justify-center text-accent mt-1">
|
|
<Icon className="w-6 h-6" />
|
|
</div>
|
|
<div>
|
|
<h3 className="font-bold text-primary mb-2">{symptom.title}</h3>
|
|
<p className="text-gray-600 text-sm leading-relaxed">
|
|
{symptom.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|