90 lines
3.8 KiB
TypeScript
90 lines
3.8 KiB
TypeScript
import { Award, FileText, ShieldCheck, Sparkles } from "lucide-react";
|
|
import { companyDetails } from "@/content/company";
|
|
|
|
export function WhyUs() {
|
|
const advantages = [
|
|
{
|
|
icon: Award,
|
|
title: "Uprawnienia F-Gaz i certyfikaty",
|
|
description: "Posiadamy wszystkie wymagane certyfikaty UDT oraz autoryzacje wiodących producentów klimatyzacji.",
|
|
},
|
|
{
|
|
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-cta font-heading">
|
|
Dlaczego ThermCool
|
|
</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>
|
|
|
|
{/* Stats Counters Grid */}
|
|
<div className="grid grid-cols-2 gap-6 mt-6 border-t border-border pt-8">
|
|
{companyDetails.stats.map((stat, idx) => (
|
|
<div key={idx} className="flex flex-col">
|
|
<span className="text-3xl md:text-4xl font-extrabold text-primary font-heading">
|
|
{stat.value}
|
|
</span>
|
|
<span className="text-xs md:text-sm text-text-muted mt-1 leading-snug">
|
|
{stat.label}
|
|
</span>
|
|
</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>
|
|
);
|
|
}
|