87 lines
3.5 KiB
TypeScript
87 lines
3.5 KiB
TypeScript
import Image from "next/image";
|
|
import { Award, FileText, ShieldCheck, Sparkles } from "lucide-react";
|
|
import { companyDetails } from "@/content/company";
|
|
|
|
export function WhyUs() {
|
|
const advantages = [
|
|
{
|
|
icon: Award,
|
|
title: "Doświadczenie i certyfikaty",
|
|
description: "Posiadamy wszystkie wymagane certyfikaty i autoryzacje. Działamy na rynku od ponad 15 lat.",
|
|
},
|
|
{
|
|
icon: FileText,
|
|
title: "Jasna wycena bez ukrytych kosztów",
|
|
description: "Przed montażem otrzymujesz pełny kosztorys. Ceny podane w ofercie są cenami ostatecznymi.",
|
|
},
|
|
{
|
|
icon: ShieldCheck,
|
|
title: "Gwarancja i wsparcie serwisowe",
|
|
description: "Zapewniamy pełną opiekę pogwarancyjną oraz coroczne przeglądy zachowujące gwarancję producenta.",
|
|
},
|
|
{
|
|
icon: Sparkles,
|
|
title: "Czystość i dbałość o detale",
|
|
description: "Pracujemy z użyciem odkurzaczy przemysłowych. Po montażu zostawiamy pomieszczenia idealnie czyste.",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section className="py-16 md:py-24 bg-slate-50 border-t border-b border-border">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-16 items-center">
|
|
{/* Left Column: Title, Intro and Statistics */}
|
|
<div className="lg:col-span-5 flex flex-col gap-6">
|
|
<div>
|
|
<span className="text-xs md:text-sm font-semibold uppercase tracking-wider text-accent font-heading">
|
|
{`Dlaczego ${companyDetails.shortName}`}
|
|
</span>
|
|
<h2 className="text-3xl md:text-4xl font-bold text-primary font-heading leading-tight mt-2">
|
|
Zaufany partner w instalacjach domowych
|
|
</h2>
|
|
<p className="text-sm md:text-base text-text-muted mt-4 leading-relaxed">
|
|
Stawiamy na najwyższą jakość wykonania, terminowość oraz bezkompromisowe bezpieczeństwo. Pomagamy na każdym kroku — od wyboru odpowiedniego urządzenia, poprzez załatwienie dotacji, aż po finalny montaż i regularny serwis.
|
|
</p>
|
|
<div className="relative w-full h-64 rounded-2xl overflow-hidden mt-6">
|
|
<Image
|
|
src="/images/services/wycena.webp"
|
|
alt="Bezpłatna wycena klimatyzacji ThermCool"
|
|
fill
|
|
className="object-cover"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
{/* Right Column: Advantages Grid */}
|
|
<div className="lg:col-span-7 grid grid-cols-1 sm:grid-cols-2 gap-6">
|
|
{advantages.map((adv, idx) => {
|
|
const Icon = adv.icon;
|
|
return (
|
|
<div
|
|
key={idx}
|
|
className="p-6 rounded-xl bg-white border border-border hover:shadow-md transition-shadow flex flex-col gap-4"
|
|
>
|
|
<div className="size-12 rounded-lg bg-accent-light text-accent flex items-center justify-center shrink-0">
|
|
<Icon className="size-6" />
|
|
</div>
|
|
<div>
|
|
<h3 className="text-base font-bold text-primary font-heading">
|
|
{adv.title}
|
|
</h3>
|
|
<p className="text-xs md:text-sm text-text-muted mt-1.5 leading-relaxed">
|
|
{adv.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|