90 lines
3.0 KiB
TypeScript
90 lines
3.0 KiB
TypeScript
import Link from "next/link";
|
|
import { Phone, ArrowRight } from "lucide-react";
|
|
import { companyDetails } from "@/content/company";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface CtaBannerProps {
|
|
title?: string;
|
|
subtitle?: string;
|
|
ctaText?: string;
|
|
ctaLink?: string;
|
|
bgVariant?: "primary" | "accent-light";
|
|
}
|
|
|
|
export function CtaBanner({
|
|
title = "Masz pytania? Umów darmową konsultację",
|
|
subtitle = "Skontaktuj się z nami! Doradzimy najlepsze rozwiązania, dobierzemy moc urządzeń i przygotujemy bezpłatną wycenę.",
|
|
ctaText = "Zamów bezpłatną konsultację",
|
|
ctaLink = "/kontakt",
|
|
bgVariant = "primary",
|
|
}: CtaBannerProps) {
|
|
const isPrimary = bgVariant === "primary";
|
|
|
|
return (
|
|
<section className="relative overflow-hidden py-16 md:py-20">
|
|
{/* Background and overlays */}
|
|
<div
|
|
className={cn(
|
|
"absolute inset-0 z-0",
|
|
isPrimary
|
|
? "bg-[#0F2A47] text-white"
|
|
: "bg-accent-light text-primary"
|
|
)}
|
|
/>
|
|
|
|
{isPrimary && (
|
|
<div className="absolute inset-0 bg-[radial-gradient(circle_at_bottom_left,rgba(43,168,224,0.12),transparent_40%)] z-0" />
|
|
)}
|
|
|
|
<div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="flex flex-col lg:flex-row items-center justify-between gap-10">
|
|
{/* Text Area */}
|
|
<div className="max-w-2xl text-center lg:text-left flex flex-col gap-3">
|
|
<h2
|
|
className={cn(
|
|
"text-2xl sm:text-3xl md:text-4xl font-extrabold font-heading leading-tight",
|
|
isPrimary ? "text-white" : "text-primary"
|
|
)}
|
|
>
|
|
{title}
|
|
</h2>
|
|
<p
|
|
className={cn(
|
|
"text-sm sm:text-base leading-relaxed max-w-xl",
|
|
isPrimary ? "text-slate-300" : "text-text-muted"
|
|
)}
|
|
>
|
|
{subtitle}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Action buttons */}
|
|
<div className="flex flex-col sm:flex-row items-center gap-4 mt-8 w-full sm:w-auto shrink-0 justify-center">
|
|
<Link href={ctaLink} className="w-fit sm:w-auto btn btn-primary font-bold text-white px-6">
|
|
<span>{ctaText}</span>
|
|
<ArrowRight className="size-5" />
|
|
</Link>
|
|
|
|
<a
|
|
href={`tel:${companyDetails.phoneRaw}`}
|
|
className="w-fit sm:w-auto"
|
|
>
|
|
<button
|
|
className={cn(
|
|
"btn btn-outline btn-primary bg-white w-fit sm:w-auto font-bold flex items-center gap-2 px-6",
|
|
isPrimary
|
|
? "text-white hover:bg-white/20 hover:text-white border-white/30"
|
|
: "text-primary hover:bg-primary/10 border-primary/20"
|
|
)}
|
|
>
|
|
<Phone className="size-5" />
|
|
<span>{companyDetails.phone}</span>
|
|
</button>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|