45 lines
2.0 KiB
TypeScript
45 lines
2.0 KiB
TypeScript
import React from "react";
|
|
import { ExternalLink, LucideIcon } from "lucide-react";
|
|
|
|
// تعریف تایپها برای انعطافپذیری کامپوننت (پراپهای اختیاری)
|
|
interface CallToActionProps {
|
|
title?: string;
|
|
description?: string;
|
|
buttonText?: string;
|
|
buttonLink?: string;
|
|
Icon?: LucideIcon;
|
|
}
|
|
|
|
export default function Sectionbanner({
|
|
title = "آماده پیادهسازی و توسعه سیستمهای پیچیده",
|
|
description = "اگر نیاز به مشاوره معماری نرمافزار، مقیاسپذیری سرویسها یا پیادهسازی ماژولهای اینترانت و سازمانی دارید، در ارتباط باشید.",
|
|
buttonText = "شروع همکاری فنی",
|
|
buttonLink = "mailto:contact@example.com",
|
|
Icon = ExternalLink,
|
|
}: CallToActionProps) {
|
|
return (
|
|
<section className="relative px-6 pb-20">
|
|
<div className="mx-auto max-w-5xl rounded-2xl border border-gray-800 bg-gradient-to-b from-gray-900/80 to-gray-950 p-8 md:p-12 text-center relative overflow-hidden shadow-2xl">
|
|
<div className="absolute top-0 right-0 w-64 h-64 bg-indigo-500/10 rounded-full blur-3xl pointer-events-none" />
|
|
<div className="relative z-10 max-w-2xl mx-auto space-y-4">
|
|
<h3 className="text-2xl md:text-3xl font-bold text-white">
|
|
{title}
|
|
</h3>
|
|
<p className="text-xs md:text-sm text-gray-400 leading-relaxed">
|
|
{description}
|
|
</p>
|
|
<div className="pt-2">
|
|
<a
|
|
href={buttonLink}
|
|
className="inline-flex items-center gap-2 px-6 py-2.5 rounded-lg bg-indigo-600 hover:bg-indigo-500 text-white text-xs font-semibold shadow-lg shadow-indigo-600/30 transition-all hover:scale-105"
|
|
>
|
|
<span>{buttonText}</span>
|
|
{Icon && <Icon className="w-3.5 h-3.5" />}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|