53 lines
2.7 KiB
React
53 lines
2.7 KiB
React
"use client";
|
||
import DownloadSection from "./DownloadSection";
|
||
import { useScroll } from '../hooks/useScroll';
|
||
function Hero() {
|
||
const { scrollToSectionWithHeader } = useScroll();
|
||
return (
|
||
<div className="text-center mb-10 relative">
|
||
{/* Background decoration */}
|
||
<div className="absolute inset-0 overflow-hidden pointer-events-none rounded-3xl">
|
||
<div className="absolute -top-20 -right-20 w-72 h-72 bg-primary-500 opacity-10 rounded-full blur-3xl"></div>
|
||
<div className="absolute -bottom-20 -left-20 w-72 h-72 bg-primary-500 opacity-10 rounded-full blur-3xl"></div>
|
||
</div>
|
||
|
||
<div className="relative">
|
||
<div className="mb-8 animate-float">
|
||
<div className="relative inline-block">
|
||
|
||
<div className="absolute inset-0 bg-gradient-to-r from-primary-500 to-primary-600 opacity-20 blur-xl rounded-full"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<h1 className="text-5xl md:text-7xl font-bold text-gray-900 mb-1 leading-tight animate-fadeInUp">
|
||
آرامش را در
|
||
<span className="bg-gradient-to-r from-primary-500 to-primary-600 bg-clip-text text-transparent"> هر لحظه </span>
|
||
تجربه کنید
|
||
</h1>
|
||
<DownloadSection />
|
||
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center animate-fadeInUp delay-200">
|
||
{/* <button 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/25">
|
||
شروع کنید رایگان
|
||
</button> */}
|
||
<button onClick={() => scrollToSectionWithHeader('what-you-can-do')} className=" bg-gradient-to-r from-primary-500 to-primary-600 border-2 text-white font-bold py-4 px-8 rounded-2xl hover:border-primary-200 hover:text-primary-50 transition-all duration-300">
|
||
مشاهده ویژگیها
|
||
</button>
|
||
</div>
|
||
|
||
{/* Trust indicators */}
|
||
<div className="mt-12 animate-fadeInUp delay-300">
|
||
<p className="text-gray-500 text-sm mb-4">مورد اعتماد هزاران کاربر</p>
|
||
<div className="flex justify-center items-center gap-8 opacity-60">
|
||
<div className="text-2xl font-bold text-primary-500">★ ۴.۹</div>
|
||
<div className="h-4 w-px bg-primary-500"></div>
|
||
<div className="text-primary-500 font-bold">+۱۰۰۰ دانلود</div>
|
||
<div className="h-4 w-px bg-primary-500"></div>
|
||
<div className="text-primary-500 font-bold ">۹۸٪ رضایت</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default Hero; |