67 lines
3.5 KiB
TypeScript
67 lines
3.5 KiB
TypeScript
import Link from "next/link";
|
|
import { ThermometerSun, Home, ChevronRight, Wrench, ShieldCheck, ArrowRight } from "lucide-react";
|
|
|
|
export function PillarsSection() {
|
|
return (
|
|
<section className="py-16 md:py-24 bg-white">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
|
{/* Pillar 1: Chłód i Ogrzewanie */}
|
|
<div className="group relative rounded-2xl border border-border p-8 md:p-12 bg-slate-50 hover:bg-white hover:border-accent hover:shadow-xl transition-all duration-300 flex flex-col justify-between overflow-hidden">
|
|
{/* Visual background gradient glow on hover */}
|
|
<div className="absolute right-0 top-0 size-48 rounded-full bg-accent/5 filter blur-3xl opacity-0 group-hover:opacity-100 transition-opacity" />
|
|
|
|
<div>
|
|
<div className="inline-flex p-4 rounded-xl bg-accent-light text-accent mb-6 group-hover:scale-110 transition-transform duration-300">
|
|
<ThermometerSun className="size-8" />
|
|
</div>
|
|
<h3 className="text-2xl md:text-3xl font-bold text-primary font-heading mb-4">
|
|
Chłód i Ogrzewanie
|
|
</h3>
|
|
<p className="text-text-muted text-base leading-relaxed mb-8 max-w-md">
|
|
Klimatyzacja i pompy ciepła dla Twojego domu lub biura. Oferujemy profesjonalny audyt, dobór optymalnej mocy, autoryzowany montaż i stałą opiekę serwisową.
|
|
</p>
|
|
</div>
|
|
|
|
<div>
|
|
<Link href="/klimatyzacja">
|
|
<button className="btn btn-primary text-white flex items-center gap-2">
|
|
<span>Przejdź do oferty HVAC</span>
|
|
<ChevronRight className="size-5 group-hover:translate-x-1 transition-transform" />
|
|
</button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Pillar 2: Twój Dom */}
|
|
<div className="group relative rounded-2xl border border-border p-8 md:p-12 bg-slate-50 hover:bg-white hover:border-cta hover:shadow-xl transition-all duration-300 flex flex-col justify-between overflow-hidden">
|
|
{/* Visual background gradient glow on hover */}
|
|
<div className="absolute right-0 top-0 size-48 rounded-full bg-cta/5 filter blur-3xl opacity-0 group-hover:opacity-100 transition-opacity" />
|
|
|
|
<div>
|
|
<div className="inline-flex p-4 rounded-xl bg-cta/10 text-cta mb-6 group-hover:scale-110 transition-transform duration-300">
|
|
<Home className="size-8" />
|
|
</div>
|
|
<h3 className="text-2xl md:text-3xl font-bold text-primary font-heading mb-4">
|
|
Twój Dom
|
|
</h3>
|
|
<p className="text-text-muted text-base leading-relaxed mb-8 max-w-md">
|
|
Usługi remontowo-budowlane, prace wykończeniowe łazienek i kuchni, instalacje hydrauliczne oraz kompleksowy serwis sprzętu chłodniczego i AGD.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="mt-12 text-center">
|
|
<Link href="/uslugi-domowe">
|
|
<button className="btn btn-outline btn-primary bg-white font-bold flex items-center gap-2 mx-auto group">
|
|
<span>Pełna oferta usług</span>
|
|
<ArrowRight className="size-4 group-hover:translate-x-1 transition-transform" />
|
|
</button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|