a
This commit is contained in:
@@ -2,13 +2,31 @@
|
||||
|
||||
import React from "react";
|
||||
import { motion } from "framer-motion";
|
||||
import { ExternalLink, LucideIcon } from "lucide-react";
|
||||
|
||||
// تنظیمات انیمیشن نرم برای Framer Motion
|
||||
const customEase: [number, number, number, number] = [0.16, 1, 0.3, 1];
|
||||
|
||||
export default function CtaBanner() {
|
||||
// اینترفیس پراپ‌ها
|
||||
interface CallToActionProps {
|
||||
title?: string;
|
||||
description?: string;
|
||||
buttonText?: string;
|
||||
buttonLink?: string;
|
||||
Icon?: LucideIcon;
|
||||
}
|
||||
|
||||
export default function CallToAction({
|
||||
title = "آماده پیاده‌سازی و توسعه سیستم‌های پیچیده",
|
||||
description = "اگر نیاز به مشاوره معماری نرم‌افزار، مقیاس‌پذیری سرویس‌ها یا پیاده‌سازی ماژول‌های اینترانت و سازمانی دارید، در ارتباط باشید.",
|
||||
buttonText = "شروع همکاری فنی",
|
||||
buttonLink = "mailto:contact@example.com",
|
||||
Icon = ExternalLink,
|
||||
}: CallToActionProps) {
|
||||
return (
|
||||
// بخش اصلی با کنترلر موس و افکت Spotlight بدون تغییر باقی می‌ماند
|
||||
<section
|
||||
className="relative py-28 md:py-36 px-4 md:px-8 bg-gray-950 overflow-hidden flex items-center justify-center"
|
||||
className="relative py-20 px-6 bg-gray-950 overflow-hidden flex items-center justify-center"
|
||||
onMouseMove={(e) => {
|
||||
const { currentTarget, clientX, clientY } = e;
|
||||
const { left, top } = currentTarget.getBoundingClientRect();
|
||||
@@ -16,63 +34,42 @@ export default function CtaBanner() {
|
||||
currentTarget.style.setProperty("--mouse-y", `${clientY - top}px`);
|
||||
}}
|
||||
>
|
||||
{/* ========================================================
|
||||
پس‌زمینه کاملاً منطبق با سکشن Projects
|
||||
======================================================== */}
|
||||
{/* افکت Spotlight */}
|
||||
{/* افکت‌های پس‌زمینه (Spotlight و Grid) بدون تغییر */}
|
||||
<div className="pointer-events-none absolute -inset-px opacity-50 before:absolute before:inset-0 before:bg-[radial-gradient(800px_circle_at_var(--mouse-x)_var(--mouse-y),rgba(255,255,255,0.06),transparent_40%)]" />
|
||||
|
||||
{/* پترن گرید ۲۴ پیکسلی خاکستری */}
|
||||
<div className="pointer-events-none absolute inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px]" />
|
||||
|
||||
<div className="relative z-10 max-w-4xl w-full mx-auto">
|
||||
<div className="relative z-10 max-w-5xl w-full mx-auto">
|
||||
{/* کارت اصلی با انیمیشن و استایل رنگ جدید */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 25, scale: 0.98 }}
|
||||
whileInView={{ opacity: 1, y: 0, scale: 1 }}
|
||||
viewport={{ once: true, margin: "-50px" }}
|
||||
transition={{ duration: 0.8, ease: customEase }}
|
||||
className="group relative rounded-3xl bg-neutral-900/50 border border-white/10 overflow-hidden backdrop-blur-md p-8 md:p-16 flex flex-col items-center text-center transition-colors hover:bg-neutral-900/70"
|
||||
// تغییرات اصلی در این خط اعمال شده است
|
||||
className="relative rounded-2xl border border-gray-800 bg-gradient-to-b from-gray-900/80 to-gray-950 p-8 md:p-12 text-center overflow-hidden shadow-2xl"
|
||||
>
|
||||
{/* هاله محو نوری پشت متن */}
|
||||
<div className="pointer-events-none absolute -top-24 left-1/2 -translate-x-1/2 w-96 h-48 bg-white/[0.04] rounded-full blur-3xl" />
|
||||
|
||||
{/* تیتر اصلی با گرادیانت هماهنگ با متون Projects */}
|
||||
<motion.h2
|
||||
initial={{ opacity: 0, y: 15 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.7, delay: 0.1, ease: customEase }}
|
||||
className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight leading-[1.25] text-white max-w-2xl mb-8"
|
||||
>
|
||||
آماده خلق یک{" "}
|
||||
<span className="text-neutral-500">شاهکار دیجیتال</span> هستید؟
|
||||
</motion.h2>
|
||||
|
||||
{/* دکمه اکشن */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.7, delay: 0.2, ease: customEase }}
|
||||
>
|
||||
<button className="relative group/btn inline-flex items-center justify-center gap-3 px-8 py-4 rounded-full font-semibold text-gray-950 text-base md:text-lg bg-white hover:bg-neutral-200 active:scale-[0.98] transition-all duration-300 shadow-[0_0_25px_rgba(255,255,255,0.15)] hover:shadow-[0_0_35px_rgba(255,255,255,0.25)]">
|
||||
<span className="tracking-tight">شروع همکاری</span>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
strokeWidth={2.2}
|
||||
stroke="currentColor"
|
||||
className="w-5 h-5 transition-transform duration-300 group-hover/btn:-translate-x-1.5"
|
||||
{/* افکت نوری جدید جایگزین شده است */}
|
||||
<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"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</motion.div>
|
||||
<span>{buttonText}</span>
|
||||
{Icon && <Icon className="w-3.5 h-3.5" />}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user