95 lines
4.6 KiB
TypeScript
95 lines
4.6 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from "framer-motion";
|
|
|
|
const customEase: [number, number, number, number] = [0.16, 1, 0.3, 1];
|
|
|
|
export default function CtaBanner() {
|
|
return (
|
|
<section
|
|
className="relative py-32 px-4 md:px-8 bg-gray-950 overflow-hidden"
|
|
onMouseMove={(e) => {
|
|
const { currentTarget, clientX, clientY } = e;
|
|
const { left, top } = currentTarget.getBoundingClientRect();
|
|
currentTarget.style.setProperty("--mouse-x", `${clientX - left}px`);
|
|
currentTarget.style.setProperty("--mouse-y", `${clientY - top}px`);
|
|
}}
|
|
>
|
|
|
|
{/* پس‌زمینه: گرید و افکت Spotlight */}
|
|
<div className="absolute inset-0 z-0">
|
|
{/* گرید با رنگ خاکستری ملایم مطابق با بخش پروژه‌ها */}
|
|
<div className="absolute inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px]" />
|
|
|
|
{/* لایه نورافکن (Spotlight) وابسته به حرکت موس */}
|
|
<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>
|
|
|
|
<div className="relative z-10 max-w-7xl mx-auto">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 50, scale: 0.95 }}
|
|
whileInView={{ opacity: 1, y: 0, scale: 1 }}
|
|
viewport={{ once: true, margin: "-100px" }}
|
|
transition={{ duration: 1.2, ease: customEase }}
|
|
className="relative overflow-hidden rounded-[2.5rem] bg-white shadow-2xl shadow-gray-900/50 border border-gray-200"
|
|
>
|
|
{/* هاله‌های نوری پاستلی کارت */}
|
|
<div className="absolute -top-32 -right-32 w-[30rem] h-[30rem] bg-indigo-50 blur-[100px] rounded-full pointer-events-none" />
|
|
<div className="absolute -bottom-32 -left-32 w-[30rem] h-[30rem] bg-pink-50 blur-[100px] rounded-full pointer-events-none" />
|
|
|
|
<div className="relative z-10 py-20 px-6 md:px-16 flex flex-col items-center text-center">
|
|
<motion.h2
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 1, delay: 0.2, ease: customEase }}
|
|
className="text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight text-gray-900 mb-6"
|
|
>
|
|
آماده خلق یک{" "}
|
|
<span className="bg-clip-text text-transparent bg-gradient-to-r from-indigo-500 to-purple-500">
|
|
شاهکار
|
|
</span>{" "}
|
|
هستید؟
|
|
</motion.h2>
|
|
|
|
<motion.p
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 1, delay: 0.3, ease: customEase }}
|
|
className="text-lg md:text-xl text-gray-500 max-w-2xl mb-10 font-medium leading-relaxed"
|
|
>
|
|
ایده‌های خود را با تکنولوژی‌های روز دنیا و طراحی خیره‌کننده به واقعیت تبدیل کنید. تیم ما برای شروع پروژه بعدی شما آماده است.
|
|
</motion.p>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 1, delay: 0.4, ease: customEase }}
|
|
>
|
|
<button className="group relative inline-flex items-center justify-center gap-3 px-8 py-4 bg-gray-900 text-white rounded-full font-bold text-lg overflow-hidden transition-all duration-300 hover:bg-gray-800 hover:scale-105 hover:shadow-xl hover:shadow-gray-900/20 active:scale-95">
|
|
<span>شروع همکاری</span>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
strokeWidth={2.5}
|
|
stroke="currentColor"
|
|
className="w-5 h-5 transition-transform duration-300 group-hover:-translate-x-1"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</motion.div>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|