61 lines
2.9 KiB
TypeScript
61 lines
2.9 KiB
TypeScript
import Link from "next/link";
|
|
import { ArrowRight, Home } from "lucide-react";
|
|
import { buttonClasses } from "@/components/ui/Button";
|
|
|
|
export function CalculatorTeaser() {
|
|
return (
|
|
<section className="py-16 md:py-24 bg-white border-b border-border">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="bg-slate-50 p-8 md:p-12 lg:p-16 border-y border-border flex flex-col lg:grid lg:grid-cols-[45%_55%] items-center gap-12 lg:gap-16">
|
|
|
|
<div className="flex flex-col gap-6 w-full">
|
|
<h2 className="text-3xl md:text-4xl lg:text-5xl font-extrabold text-primary font-heading leading-tight">
|
|
Nie wiesz, jakiej mocy potrzebujesz?
|
|
</h2>
|
|
<p className="text-base md:text-lg text-text-muted leading-relaxed max-w-xl">
|
|
Skorzystaj z naszego inteligentnego kalkulatora. Wystarczy podać metraż pomieszczenia, a my wskażemy optymalną moc klimatyzatora i przybliżony koszt instalacji.
|
|
</p>
|
|
|
|
<div className="mt-4">
|
|
<Link href="/kalkulator" className={buttonClasses({ variant: 'primary', size: 'lg', className: 'group w-fit' })}>
|
|
<span>Uruchom kalkulator</span>
|
|
<ArrowRight className="size-5 group-hover:translate-x-1 transition-transform" />
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="w-full">
|
|
<div className="bg-white rounded-xl p-8 border border-border shadow-md">
|
|
<div className="flex flex-col gap-8">
|
|
<div className="flex justify-between items-end border-b border-border pb-4">
|
|
<div>
|
|
<p className="text-sm font-semibold text-text-muted mb-1">Powierzchnia</p>
|
|
<p className="text-3xl font-bold text-primary font-heading">35 <span className="text-xl text-text-muted">m²</span></p>
|
|
</div>
|
|
<Home className="size-8 text-accent opacity-50" />
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
<div className="h-2 w-full bg-slate-100 rounded-full overflow-hidden">
|
|
<div className="h-full bg-accent rounded-full w-1/2"></div>
|
|
</div>
|
|
<div className="flex justify-between text-xs font-semibold text-text-muted">
|
|
<span>10 m²</span>
|
|
<span>100 m²</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-accent/5 rounded-xl p-6 border border-accent/10 flex flex-col items-center text-center">
|
|
<p className="text-sm font-semibold text-primary mb-1">Sugerowana moc</p>
|
|
<p className="text-4xl font-extrabold text-accent font-heading">3.5 <span className="text-2xl text-accent/70">kW</span></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|