37 lines
2.0 KiB
React
37 lines
2.0 KiB
React
"use client";
|
||
import { useScroll } from '../hooks/useScroll';
|
||
function CallToAction() {
|
||
const { scrollToSectionWithHeader } = useScroll();
|
||
return (
|
||
<div className="relative text-center rounded-3xl p-16 animate-fadeInUp overflow-hidden">
|
||
{/* Background with gradient */}
|
||
<div className="absolute inset-0 bg-gradient-to-r from-primary-500 via-primary-600 to-primary-500 opacity-10"></div>
|
||
|
||
{/* Animated border */}
|
||
<div className="absolute inset-0 rounded-3xl border-2 border-primary-500/20 animate-pulse"></div>
|
||
|
||
<div className="relative">
|
||
<h2 className="text-3xl md:text-5xl font-bold text-gray-900 mb-6">
|
||
آماده برای <span className="text-primary-500">تغییر</span> زندگی؟
|
||
</h2>
|
||
<p className="text-xl text-gray-700 mb-8 max-w-2xl mx-auto leading-relaxed">
|
||
امروز اولین قدم رو بردار و ببین چطور آرام جان میتونه کیفیت زندگیات رو متحول کنه
|
||
</p>
|
||
|
||
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
|
||
<button onClick={() => scrollToSectionWithHeader('download')} className="bg-gradient-to-r from-primary-500 to-primary-600 text-white font-bold py-4 px-8 rounded-2xl hover:shadow-2xl transition-all duration-300 transform hover:scale-105 text-lg shadow-lg hover:shadow-primary-500/40 relative overflow-hidden group">
|
||
<div className="absolute inset-0 bg-white/20 -translate-x-full group-hover:translate-x-full transition-transform duration-700"></div>
|
||
<span className="relative">شروع سفر آرامش</span>
|
||
</button>
|
||
<button onClick={() => scrollToSectionWithHeader('features')} className="border-2 border-gray-300 text-gray-700 font-bold py-4 px-8 rounded-2xl hover:border-primary-500 hover:text-primary-500 transition-all duration-300">
|
||
بیشتر بدانید
|
||
</button>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default CallToAction; |