70 lines
3.5 KiB
React
70 lines
3.5 KiB
React
"use client";
|
||
import { useScroll } from '../hooks/useScroll';
|
||
function FreeTrial() {
|
||
const { scrollToSectionWithHeader } = useScroll();
|
||
return (
|
||
<div className="relative bg-gradient-to-r from-primary-500 via-primary-600 to-primary-500 rounded-3xl p-12 text-white text-center mb-20 animate-fadeInUp overflow-hidden">
|
||
{/* Background Pattern */}
|
||
<div className="absolute inset-0 opacity-10">
|
||
<div className="absolute top-0 right-0 w-32 h-32 bg-white rounded-full -translate-y-16 translate-x-16"></div>
|
||
<div className="absolute bottom-0 left-0 w-32 h-32 bg-white rounded-full translate-y-16 -translate-x-16"></div>
|
||
</div>
|
||
|
||
{/* Animated Border */}
|
||
<div className="absolute inset-0 rounded-3xl border-2 border-white/20 animate-pulse"></div>
|
||
|
||
{/* Content */}
|
||
<div className="relative">
|
||
{/* Badge */}
|
||
<div className="inline-flex items-center gap-2 bg-white/20 backdrop-blur-sm px-4 py-2 rounded-full text-sm font-medium mb-6 animate-fadeInUp delay-100">
|
||
<span className="w-2 h-2 bg-white rounded-full animate-pulse"></span>
|
||
پیشنهاد ویژه
|
||
</div>
|
||
|
||
{/* Heading */}
|
||
<h2 className="text-3xl md:text-5xl font-bold mb-6 animate-fadeInUp delay-200">
|
||
<span className="block">یک هفته <span className="text-yellow-300">رایگان</span></span>
|
||
<span className="block">تجربه تمام ویژگیها</span>
|
||
</h2>
|
||
|
||
{/* Description */}
|
||
<p className="text-lg md:text-xl text-white/90 mb-8 max-w-2xl mx-auto leading-relaxed animate-fadeInUp delay-300">
|
||
تمام ویژگیهای پریمیوم رو میتونی به طور محدود تجربه کنی
|
||
<span className="font-bold text-yellow-300"></span>
|
||
</p>
|
||
|
||
{/* Features */}
|
||
<div className="grid md:grid-cols-3 gap-4 mb-8 max-w-2xl mx-auto animate-fadeInUp delay-400">
|
||
{[
|
||
"تمامی مدیتیشنها",
|
||
"موسیقیهای انحصاری",
|
||
"مشاوره هوش مصنوعی",
|
||
"تمرین تنفسی دلخواه",
|
||
"اطلاعات آموزشی",
|
||
"رابط کاربری ساده",
|
||
].map((feature, index) => (
|
||
<div key={index} className="flex items-center justify-center gap-2 bg-white/10 backdrop-blur-sm py-3 px-4 rounded-xl">
|
||
<svg className="w-4 h-4 text-yellow-300" fill="currentColor" viewBox="0 0 20 20">
|
||
<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
|
||
</svg>
|
||
<span>{feature}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{/* CTA Button */}
|
||
<button onClick={() => scrollToSectionWithHeader('download')} className="bg-white text-primary-500 font-bold py-4 px-12 rounded-2xl hover:shadow-2xl transition-all duration-300 transform hover:scale-105 animate-fadeInUp delay-500 relative overflow-hidden group">
|
||
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-700"></div>
|
||
<span className="relative">شروع سفر آرامش</span>
|
||
</button>
|
||
|
||
{/* Footer Note */}
|
||
<p className="text-white/70 text-sm mt-6 animate-fadeInUp delay-600">
|
||
میتونی روی گوشیت همیشه داشته باشی
|
||
</p>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default FreeTrial; |