44 lines
1.4 KiB
TypeScript
44 lines
1.4 KiB
TypeScript
import Link from "next/link";
|
||
import { ArrowUpRight } from "lucide-react";
|
||
|
||
interface CTASectionProps {
|
||
title?: string;
|
||
subtitle?: string;
|
||
accent?: "blue" | "green";
|
||
}
|
||
|
||
export default function CTASection({
|
||
title = "Готовы обсудить проект?",
|
||
subtitle = "Расскажите, что нужно — предложим решение и сроки в течение рабочего дня.",
|
||
accent = "blue",
|
||
}: CTASectionProps) {
|
||
const isGreen = accent === "green";
|
||
return (
|
||
<section className="px-6 py-20">
|
||
<div
|
||
className={`mx-auto flex max-w-4xl flex-col items-start justify-between gap-6 rounded-3xl border p-10 sm:flex-row sm:items-center ${
|
||
isGreen
|
||
? "border-green-500/20 bg-green-500/[0.04]"
|
||
: "border-blue-500/20 bg-blue-500/[0.04]"
|
||
}`}
|
||
>
|
||
<div>
|
||
<h2 className="font-display text-2xl font-medium text-ink-100">
|
||
{title}
|
||
</h2>
|
||
<p className="mt-2 max-w-md text-ink-500">{subtitle}</p>
|
||
</div>
|
||
<Link
|
||
href="/contacts"
|
||
className={`inline-flex shrink-0 items-center gap-1.5 rounded-full px-6 py-3 font-medium text-base-950 transition-transform hover:scale-[1.03] ${
|
||
isGreen ? "bg-green-400" : "bg-blue-400"
|
||
}`}
|
||
>
|
||
Связаться с нами
|
||
<ArrowUpRight size={18} />
|
||
</Link>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|