Amirmahdi/aramejan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: logo

Browse Source
This commit is contained in:
Amirmahdi
2026-06-21 19:04:29 +03:30
parent 3c6a9c79df
commit fc30597835
15 changed files with 237 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/Hero.jsx
+26 -16
View File
@@ -1,6 +1,7 @@
"use client";
import DownloadSection from "./DownloadSection";
import { useScroll } from '../hooks/useScroll';
import LotusLogo from "./LotusLogo";
function Hero() {
const { scrollToSectionWithHeader } = useScroll();
return (
@@ -8,28 +9,37 @@ function Hero() {
{/* 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 className="absolute -bottom-20 -left-20 w-72 h-72 bg-primary-400 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>
{/* App logo */}
<div className="mb-6 flex justify-center">
<div className="relative inline-block animate-float">
<div className="absolute inset-0 bg-gradient-to-r from-primary-500 to-primary-600 blur-2xl rounded-full animate-pulseGlow"></div>
<div className="relative w-24 h-24 sm:w-28 sm:h-28 rounded-[26px] overflow-hidden shadow-2xl shadow-primary-500/40">
<LotusLogo className="w-full h-full" />
</div>
</div>
</div>
<h1 className="text-5xl md:text-7xl font-bold text-gray-900 mb-1 leading-tight animate-fadeInUp">
آرامش را در
{/* Badge */}
<div className="inline-flex items-center gap-2 bg-primary-500/10 text-primary-600 px-4 py-2 rounded-full text-sm font-medium mb-6 animate-fadeInUp">
<span>🌿</span>
مدیتیشن، تمرین تنفسی و آرامش فارسی
</div>
<h1 className="text-5xl md:text-7xl font-bold text-gray-900 mb-4 leading-tight animate-fadeInUp">
آرامش را در
<span className="bg-gradient-to-r from-primary-500 to-primary-600 bg-clip-text text-transparent"> هر لحظه </span>
تجربه کنید
</h1>
<p className="text-lg md:text-xl text-gray-600 max-w-2xl mx-auto animate-fadeInUp delay-100">
با آرام جان هر روز چند دقیقه برای خودت وقت بگذار؛ ذهنی آرام‌تر، خوابی عمیق‌تر و انرژی‌ای تازه.
</p>
<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 onClick={() => scrollToSectionWithHeader('what-you-can-do')} className="bg-gradient-to-r from-primary-500 to-primary-600 border-2 border-transparent text-white font-bold py-4 px-8 rounded-2xl hover:shadow-2xl hover:shadow-primary-500/30 transition-all duration-300 transform hover:scale-105">
مشاهده ویژگی‌ها
</button>
</div>
@@ -37,11 +47,11 @@ function Hero() {
{/* 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="flex justify-center items-center gap-8 opacity-80">
<div className="text-2xl font-bold text-primary-500">★ ۴.۹</div>
<div className="h-4 w-px bg-primary-500"></div>
<div className="h-4 w-px bg-primary-300"></div>
<div className="text-primary-500 font-bold">+۱۰۰۰ دانلود</div>
<div className="h-4 w-px bg-primary-500"></div>
<div className="h-4 w-px bg-primary-300"></div>
<div className="text-primary-500 font-bold ">۹۸٪ رضایت</div>
</div>
</div>