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

feat: primary color from tailwind

Browse Source
This commit is contained in:
Amirmahdi
2025-11-07 13:27:36 +03:30
parent a6980bc35b
commit 81a10f6269
15 changed files with 340 additions and 279 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/app.tsx
+3 -2
View File
@@ -5,7 +5,7 @@ import Features from './components/Features';
import WhatYouCanDo from './components/WhatYouCanDo'; import WhatYouCanDo from './components/WhatYouCanDo';
import WhyAramland from './components/WhyAramland'; import WhyAramland from './components/WhyAramland';
import FreeTrial from './components/FreeTrial'; import FreeTrial from './components/FreeTrial';
import ScientificBenefits from './components/ScientificBenefits'; // import ScientificBenefits from './components/ScientificBenefits';
import CallToAction from './components/CallToAction'; import CallToAction from './components/CallToAction';
import Footer from './components/Footer'; import Footer from './components/Footer';
@@ -15,13 +15,14 @@ function App() {
<Header /> <Header />
<main className="max-w-5xl mx-auto px-6 sm:px-8 lg:px-10 py-24 space-y-32"> <main className="max-w-5xl mx-auto px-6 sm:px-8 lg:px-10 py-24 space-y-32">
<Hero /> <Hero />
<DownloadSection /> <DownloadSection />
<Features /> <Features />
<WhatYouCanDo /> <WhatYouCanDo />
<WhyAramland /> <WhyAramland />
<FreeTrial /> <FreeTrial />
<ScientificBenefits /> {/* <ScientificBenefits /> */}
<CallToAction /> <CallToAction />
</main> </main>
app/components/CallToAction.jsx
+5 -5
View File
@@ -2,25 +2,25 @@ function CallToAction() {
return ( return (
<div className="relative text-center rounded-3xl p-16 animate-fadeInUp overflow-hidden"> <div className="relative text-center rounded-3xl p-16 animate-fadeInUp overflow-hidden">
{/* Background with gradient */} {/* Background with gradient */}
<div className="absolute inset-0 bg-gradient-to-r from-[#C3C7FF] via-[#A8B1FF] to-[#C3C7FF] opacity-10"></div> <div className="absolute inset-0 bg-gradient-to-r from-primary-500 via-primary-600 to-primary-500 opacity-10"></div>
{/* Animated border */} {/* Animated border */}
<div className="absolute inset-0 rounded-3xl border-2 border-[#C3C7FF]/20 animate-pulse"></div> <div className="absolute inset-0 rounded-3xl border-2 border-primary-500/20 animate-pulse"></div>
<div className="relative"> <div className="relative">
<h2 className="text-3xl md:text-5xl font-bold text-gray-900 mb-6"> <h2 className="text-3xl md:text-5xl font-bold text-gray-900 mb-6">
آماده برای <span className="text-[#C3C7FF]">تغییر</span> زندگی؟ آماده برای <span className="text-primary-500">تغییر</span> زندگی؟
</h2> </h2>
<p className="text-xl text-gray-700 mb-8 max-w-2xl mx-auto leading-relaxed"> <p className="text-xl text-gray-700 mb-8 max-w-2xl mx-auto leading-relaxed">
امروز اولین قدم رو بردار و ببین چطور آرام‌لند می‌تونه کیفیت زندگی‌ات رو متحول کنه امروز اولین قدم رو بردار و ببین چطور آرام‌لند می‌تونه کیفیت زندگی‌ات رو متحول کنه
</p> </p>
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center"> <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
<button className="bg-gradient-to-r from-[#C3C7FF] to-[#A8B1FF] 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-[#C3C7FF]/40 relative overflow-hidden group"> <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/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> <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> <span className="relative">شروع سفر آرامش</span>
</button> </button>
<button className="border-2 border-gray-300 text-gray-700 font-bold py-4 px-8 rounded-2xl hover:border-[#C3C7FF] hover:text-[#C3C7FF] transition-all duration-300"> <button 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> </button>
</div> </div>
app/components/DownloadSection.jsx
+9 -9
View File
@@ -7,22 +7,22 @@ function DownloadSection() {
title: "کافه بازار", title: "کافه بازار",
description: "دانلود برای اندروید", description: "دانلود برای اندروید",
badge: "پرطرفدار", badge: "پرطرفدار",
gradient: "from-[#C3C7FF] to-[#A8B1FF]", gradient: "from-primary-500 to-primary-600",
animation: "animate-slideInLeft delay-100" animation: "animate-slideInLeft delay-100"
}, },
{ {
icon: PlayCircle, icon: PlayCircle,
title: "گوگل پلی", title: "مایکت",
description: "دانلود برای اندروید", description: "دانلود برای اندروید",
gradient: "from-[#C3C7FF] to-[#A8B1FF]", gradient: "from-primary-500 to-primary-600",
animation: "animate-fadeInUp delay-200" animation: "animate-fadeInUp delay-200"
}, },
{ {
icon: Globe, icon: Globe,
title: "وب اپلیکیشن", title: "وب سایت",
description: "استفاده آنلاین", description: "نسخه وب برای تمام دستگاه‌ها",
badge: "جدید", badge: "جدید",
gradient: "from-[#C3C7FF] to-[#A8B1FF]", gradient: "from-primary-500 to-primary-600",
animation: "animate-slideInRight delay-300" animation: "animate-slideInRight delay-300"
} }
]; ];
@@ -31,13 +31,13 @@ function DownloadSection() {
<div className="relative bg-white rounded-3xl shadow-2xl p-12 mb-20 animate-fadeInUp overflow-hidden"> <div className="relative bg-white rounded-3xl shadow-2xl p-12 mb-20 animate-fadeInUp overflow-hidden">
{/* Background pattern */} {/* Background pattern */}
<div className="absolute inset-0 opacity-5"> <div className="absolute inset-0 opacity-5">
<div className="absolute inset-0 bg-gradient-to-r from-[#C3C7FF] to-[#A8B1FF]"></div> <div className="absolute inset-0 bg-gradient-to-r from-primary-500 to-primary-600"></div>
</div> </div>
<div className="relative"> <div className="relative">
<div className="text-center mb-12"> <div className="text-center mb-12">
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4"> <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
همین حالا <span className="text-[#C3C7FF]">شروع کنید</span> همین حالا <span className="text-primary-500">شروع کنید</span>
</h2> </h2>
<p className="text-xl text-gray-600 max-w-2xl mx-auto"> <p className="text-xl text-gray-600 max-w-2xl mx-auto">
آرام‌لند را روی دستگاه مورد علاقه‌تان نصب کنید آرام‌لند را روی دستگاه مورد علاقه‌تان نصب کنید
@@ -55,7 +55,7 @@ function DownloadSection() {
<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-1000"></div> <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-1000"></div>
{option.badge && ( {option.badge && (
<div className="absolute -top-2 -right-2 bg-white text-[#C3C7FF] px-3 py-1 rounded-full text-xs font-bold shadow-lg"> <div className="absolute -top-2 -right-2 bg-white text-primary-500 px-3 py-1 rounded-full text-xs font-bold shadow-lg">
{option.badge} {option.badge}
</div> </div>
)} )}
app/components/Features.jsx
+9 -9
View File
@@ -4,24 +4,24 @@ function Features() {
emoji: "💨", emoji: "💨",
title: "تمرین تنفسی هوشمند", title: "تمرین تنفسی هوشمند",
description: "الگوریتم هوشمند برای هر لحظه، یک تنفس عمیق و استرس‌ات نابود شه", description: "الگوریتم هوشمند برای هر لحظه، یک تنفس عمیق و استرس‌ات نابود شه",
gradient: "from-[#C3C7FF]/10 to-[#A8B1FF]/10", gradient: "from-primary-500/10 to-primary-600/10",
border: "border-[#C3C7FF]/20", border: "border-primary-500/20",
delay: "delay-100" delay: "delay-100"
}, },
{ {
emoji: "🎛️", emoji: "🎛️",
title: "الگوی تنفسی انتخابی", title: "الگوی تنفسی انتخابی",
description: "تمرین‌های تنفسی خود را طراحی کنید و تمام خاصیت‌ها را کنترل کنید", description: "تمرین‌های تنفسی خود را طراحی کنید و تمام خاصیت‌ها را کنترل کنید",
gradient: "from-[#C3C7FF]/10 to-[#A8B1FF]/10", gradient: "from-primary-500/10 to-primary-600/10",
border: "border-[#C3C7FF]/20", border: "border-primary-500/20",
delay: "delay-200" delay: "delay-200"
}, },
{ {
emoji: "📦", emoji: "📦",
title: "صندوق دغدغه‌ها", title: "صندوق دغدغه‌ها",
description: "دغدغه‌هایت رو در یک صندوق خیالی بگذار و ذهنت رو سبک‌تر کن", description: "دغدغه‌هایت رو در یک صندوق خیالی بگذار و ذهنت رو سبک‌تر کن",
gradient: "from-[#C3C7FF]/10 to-[#A8B1FF]/10", gradient: "from-primary-500/10 to-primary-600/10",
border: "border-[#C3C7FF]/20", border: "border-primary-500/20",
delay: "delay-300" delay: "delay-300"
} }
]; ];
@@ -29,12 +29,12 @@ function Features() {
return ( return (
<div className="my-24"> <div className="my-24">
<div className="text-center mb-16"> <div className="text-center mb-16">
<div className="inline-flex items-center gap-2 bg-[#C3C7FF]/10 text-[#C3C7FF] px-4 py-2 rounded-full text-sm font-medium mb-4"> <div className="inline-flex items-center gap-2 bg-primary-500/10 text-primary-500 px-4 py-2 rounded-full text-sm font-medium mb-4">
<span>✨</span> <span>✨</span>
ویژگی‌های منحصر بفرد ویژگی‌های منحصر بفرد
</div> </div>
<h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4"> <h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
هر آنچه برای <span className="text-[#C3C7FF]">آرامش</span> نیاز دارید هر آنچه برای <span className="text-primary-500">آرامش</span> نیاز دارید
</h2> </h2>
<p className="text-xl text-gray-600 max-w-2xl mx-auto"> <p className="text-xl text-gray-600 max-w-2xl mx-auto">
تمام ابزارهای لازم برای رسیدن به آرامش درونی در یک پلتفرم تمام ابزارهای لازم برای رسیدن به آرامش درونی در یک پلتفرم
@@ -45,7 +45,7 @@ function Features() {
{features.map((feature, index) => ( {features.map((feature, index) => (
<div <div
key={index} key={index}
className={`bg-gradient-to-br ${feature.gradient} border ${feature.border} rounded-3xl p-8 hover:shadow-2xl transition-all duration-500 animate-fadeInUp ${feature.delay} group hover:border-[#C3C7FF]/40`} className={`bg-gradient-to-br ${feature.gradient} border ${feature.border} rounded-3xl p-8 hover:shadow-2xl transition-all duration-500 animate-fadeInUp ${feature.delay} group hover:border-primary-500/40`}
> >
<div className="flex items-start mb-6"> <div className="flex items-start mb-6">
<div className="bg-white p-3 rounded-2xl shadow-lg group-hover:scale-110 transition-transform duration-300 ml-4"> <div className="bg-white p-3 rounded-2xl shadow-lg group-hover:scale-110 transition-transform duration-300 ml-4">
app/components/FreeTrial.jsx
+2 -2
View File
@@ -1,6 +1,6 @@
function FreeTrial() { function FreeTrial() {
return ( return (
<div className="relative bg-gradient-to-r from-[#C3C7FF] via-[#A8B1FF] to-[#C3C7FF] rounded-3xl p-12 text-white text-center mb-20 animate-fadeInUp overflow-hidden"> <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 */} {/* Background Pattern */}
<div className="absolute inset-0 opacity-10"> <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 top-0 right-0 w-32 h-32 bg-white rounded-full -translate-y-16 translate-x-16"></div>
@@ -47,7 +47,7 @@ function FreeTrial() {
</div> </div>
{/* CTA Button */} {/* CTA Button */}
<button className="bg-white text-[#C3C7FF] 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"> <button 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> <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> <span className="relative">شروع دوره آزمایشی رایگان</span>
</button> </button>
app/components/Header.jsx
+5 -5
View File
@@ -4,10 +4,10 @@ function Header() {
<div className="max-w-6xl mx-auto flex justify-between items-center"> <div className="max-w-6xl mx-auto flex justify-between items-center">
{/* Logo */} {/* Logo */}
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="bg-gradient-to-r from-[#C3C7FF] to-[#A8B1FF] w-8 h-8 rounded-xl flex items-center justify-center"> <div className="bg-gradient-to-r from-primary-500 to-primary-600 w-8 h-8 rounded-xl flex items-center justify-center">
<span className="text-white font-bold text-sm">آ</span> <span className="text-white font-bold text-sm">آ</span>
</div> </div>
<div className="text-2xl font-bold bg-gradient-to-r from-[#C3C7FF] to-[#A8B1FF] bg-clip-text text-transparent"> <div className="text-2xl font-bold bg-gradient-to-r from-primary-500 to-primary-600 bg-clip-text text-transparent">
آرام‌لند آرام‌لند
</div> </div>
</div> </div>
@@ -18,16 +18,16 @@ function Header() {
<a <a
key={item} key={item}
href="#" href="#"
className="text-gray-600 hover:text-[#C3C7FF] font-medium transition-colors duration-200 relative group" className="text-gray-600 hover:text-primary-500 font-medium transition-colors duration-200 relative group"
> >
{item} {item}
<span className="absolute bottom-0 left-0 w-0 h-0.5 bg-[#C3C7FF] group-hover:w-full transition-all duration-300"></span> <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-primary-500 group-hover:w-full transition-all duration-300"></span>
</a> </a>
))} ))}
</div> </div>
{/* CTA Button */} {/* CTA Button */}
<button className="bg-gradient-to-r from-[#C3C7FF] to-[#A8B1FF] text-white font-medium py-2 px-6 rounded-xl hover:shadow-lg transition-all duration-300 transform hover:scale-105"> <button className="bg-gradient-to-r from-primary-500 to-primary-600 text-white font-medium py-2 px-6 rounded-xl hover:shadow-lg transition-all duration-300 transform hover:scale-105">
شروع رایگان شروع رایگان
</button> </button>
</div> </div>
app/components/Hero.jsx
+6 -6
View File
@@ -4,21 +4,21 @@ function Hero() {
<div className="text-center mb-20 relative"> <div className="text-center mb-20 relative">
{/* Background decoration */} {/* Background decoration */}
<div className="absolute inset-0 overflow-hidden pointer-events-none"> <div className="absolute inset-0 overflow-hidden pointer-events-none">
<div className="absolute -top-20 -right-20 w-72 h-72 bg-[#C3C7FF] opacity-10 rounded-full blur-3xl"></div> <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-[#C3C7FF] 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>
<div className="relative"> <div className="relative">
<div className="mb-8 animate-float"> <div className="mb-8 animate-float">
<div className="relative inline-block"> <div className="relative inline-block">
<span className="text-6xl">✨</span> <span className="text-6xl">✨</span>
<div className="absolute inset-0 bg-gradient-to-r from-[#C3C7FF] to-[#A8B1FF] opacity-20 blur-xl rounded-full"></div> <div className="absolute inset-0 bg-gradient-to-r from-primary-500 to-primary-600 opacity-20 blur-xl rounded-full"></div>
</div> </div>
</div> </div>
<h1 className="text-5xl md:text-7xl font-bold text-gray-900 mb-6 leading-tight animate-fadeInUp"> <h1 className="text-5xl md:text-7xl font-bold text-gray-900 mb-6 leading-tight animate-fadeInUp">
آرامش را در آرامش را در
<span className="bg-gradient-to-r from-[#C3C7FF] to-[#A8B1FF] bg-clip-text text-transparent"> هر لحظه </span> <span className="bg-gradient-to-r from-primary-500 to-primary-600 bg-clip-text text-transparent"> هر لحظه </span>
تجربه کنید تجربه کنید
</h1> </h1>
@@ -28,10 +28,10 @@ function Hero() {
</p> </p>
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center animate-fadeInUp delay-200"> <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-[#C3C7FF] to-[#A8B1FF] 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-[#C3C7FF]/25"> <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>
<button className="border-2 border-gray-300 text-gray-700 font-bold py-4 px-8 rounded-2xl hover:border-[#C3C7FF] hover:text-[#C3C7FF] transition-all duration-300"> <button 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> </button>
</div> </div>
app/components/ScientificBenefits.jsx
+152 -152
View File
@@ -1,161 +1,161 @@
function ScientificBenefits() { // function ScientificBenefits() {
const benefits = [ // const benefits = [
{ // {
title: "تکنیک‌های مبتنی بر علم اعصاب", // title: "تکنیک‌های مبتنی بر علم اعصاب",
description: "آرام‌لند از روش‌های اثبات‌شده علمی برای کاهش استرس و افزایش آرامش استفاده می‌کند", // description: "آرام‌لند از روش‌های اثبات‌شده علمی برای کاهش استرس و افزایش آرامش استفاده می‌کند",
icon: "🧠", // icon: "🧠",
items: [ // items: [
"بهبود خلق و خو در کمتر از ۵ دقیقه", // "بهبود خلق و خو در کمتر از ۵ دقیقه",
"کاهش ۴۰٪ی سطح کورتیزول (هورمون استرس)", // "کاهش ۴۰٪ی سطح کورتیزول (هورمون استرس)",
"افزایش امواج آلفای مغز برای آرامش", // "افزایش امواج آلفای مغز برای آرامش",
"بهبود کیفیت خواب تا ۶۰٪" // "بهبود کیفیت خواب تا ۶۰٪"
], // ],
stats: "۸۷٪ موفقیت", // stats: "۸۷٪ موفقیت",
color: "from-[#C3C7FF] to-[#A8B1FF]", // color: "from-primary-500 to-primary-600",
delay: "delay-100" // delay: "delay-100"
}, // },
{ // {
title: "طراحی کاربری مبتنی بر روانشناسی", // title: "طراحی کاربری مبتنی بر روانشناسی",
description: "رابط کاربری طراحی شده بر اساس اصول روانشناسی برای حداکثر تأثیرگذاری", // description: "رابط کاربری طراحی شده بر اساس اصول روانشناسی برای حداکثر تأثیرگذاری",
icon: "🎨", // icon: "🎨",
items: [ // items: [
"رابط ساده و شهودی برای کاهش بار ذهنی", // "رابط ساده و شهودی برای کاهش بار ذهنی",
"طراحی مینیمال برای تمرکز بهتر", // "طراحی مینیمال برای تمرکز بهتر",
"هدایت گام‌به‌گام فارسی", // "هدایت گام‌به‌گام فارسی",
"فیدبک لحظه‌ای از پیشرفت" // "فیدبک لحظه‌ای از پیشرفت"
], // ],
stats: "۹۴٪ رضایت", // stats: "۹۴٪ رضایت",
color: "from-[#C3C7FF] to-[#A8B1FF]", // color: "from-primary-500 to-primary-600",
delay: "delay-200" // delay: "delay-200"
} // }
]; // ];
const researchStats = [ // const researchStats = [
{ number: "۴۰٪", label: "کاهش استرس", description: "پس از ۲ هفته استفاده منظم" }, // { number: "۴۰٪", label: "کاهش استرس", description: "پس از ۲ هفته استفاده منظم" },
{ number: "۳۵٪", label: "افزایش تمرکز", description: "در کارهای روزمره" }, // { number: "۳۵٪", label: "افزایش تمرکز", description: "در کارهای روزمره" },
{ number: "۵۰٪", label: "بهبود خواب", description: "کیفیت خواب بهتر" }, // { number: "۵۰٪", label: "بهبود خواب", description: "کیفیت خواب بهتر" },
{ number: "۲۵٪", label: "افزایش انرژی", description: "در طول روز" } // { number: "۲۵٪", label: "افزایش انرژی", description: "در طول روز" }
]; // ];
return ( // return (
<div className="my-24"> // <div className="my-24">
{/* Section Header */} // {/* Section Header */}
<div className="text-center mb-16"> // <div className="text-center mb-16">
<div className="inline-flex items-center gap-2 bg-[#C3C7FF]/10 text-[#C3C7FF] px-4 py-2 rounded-full text-sm font-medium mb-4"> // <div className="inline-flex items-center gap-2 bg-primary-500/10 text-primary-500 px-4 py-2 rounded-full text-sm font-medium mb-4">
<span className="text-lg">🔬</span> // <span className="text-lg">🔬</span>
پشتیبانی علمی // پشتیبانی علمی
</div> // </div>
<h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4"> // <h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
چرا <span className="text-[#C3C7FF]">فقط چند دقیقه</span> کافی است؟ // چرا <span className="text-primary-500">فقط چند دقیقه</span> کافی است؟
</h2> // </h2>
<p className="text-xl text-gray-600 max-w-2xl mx-auto"> // <p className="text-xl text-gray-600 max-w-2xl mx-auto">
بر اساس تحقیقات علمی در زمینه روانشناسی و علوم اعصاب // بر اساس تحقیقات علمی در زمینه روانشناسی و علوم اعصاب
</p> // </p>
</div> // </div>
{/* Research Statistics */} // {/* Research Statistics */}
<div className="grid grid-cols-2 md:grid-cols-4 gap-6 mb-12"> // <div className="grid grid-cols-2 md:grid-cols-4 gap-6 mb-12">
{researchStats.map((stat, index) => ( // {researchStats.map((stat, index) => (
<div // <div
key={index} // key={index}
className="bg-white rounded-2xl p-6 text-center shadow-lg border border-gray-100 hover:shadow-xl transition-all duration-300 animate-fadeInUp" // className="bg-white rounded-2xl p-6 text-center shadow-lg border border-gray-100 hover:shadow-xl transition-all duration-300 animate-fadeInUp"
style={{ animationDelay: `${index * 100}ms` }} // style={{ animationDelay: `${index * 100}ms` }}
> // >
<div className="text-2xl md:text-3xl font-bold text-[#C3C7FF] mb-2"> // <div className="text-2xl md:text-3xl font-bold text-primary-500 mb-2">
{stat.number} // {stat.number}
</div> // </div>
<div className="text-gray-900 font-medium mb-1">{stat.label}</div> // <div className="text-gray-900 font-medium mb-1">{stat.label}</div>
<div className="text-gray-500 text-sm">{stat.description}</div> // <div className="text-gray-500 text-sm">{stat.description}</div>
</div> // </div>
))} // ))}
</div> // </div>
{/* Main Benefits Grid */} // {/* Main Benefits Grid */}
<div className="grid lg:grid-cols-2 gap-8 mb-12"> // <div className="grid lg:grid-cols-2 gap-8 mb-12">
{benefits.map((benefit, index) => ( // {benefits.map((benefit, index) => (
<div // <div
key={index} // key={index}
className="bg-white rounded-3xl shadow-xl border border-gray-100 overflow-hidden animate-fadeInUp hover:shadow-2xl transition-all duration-500" // className="bg-white rounded-3xl shadow-xl border border-gray-100 overflow-hidden animate-fadeInUp hover:shadow-2xl transition-all duration-500"
> // >
{/* Header */} // {/* Header */}
<div className={`bg-gradient-to-r ${benefit.color} p-6 text-white`}> // <div className={`bg-gradient-to-r ${benefit.color} p-6 text-white`}>
<div className="flex items-center justify-between"> // <div className="flex items-center justify-between">
<div className="flex items-center gap-3"> // <div className="flex items-center gap-3">
<span className="text-2xl">{benefit.icon}</span> // <span className="text-2xl">{benefit.icon}</span>
<h3 className="text-xl font-bold">{benefit.title}</h3> // <h3 className="text-xl font-bold">{benefit.title}</h3>
</div> // </div>
<div className="bg-white/20 backdrop-blur-sm px-3 py-1 rounded-full text-sm font-medium"> // <div className="bg-white/20 backdrop-blur-sm px-3 py-1 rounded-full text-sm font-medium">
{benefit.stats} // {benefit.stats}
</div> // </div>
</div> // </div>
</div> // </div>
{/* Content */} // {/* Content */}
<div className="p-8"> // <div className="p-8">
<p className="text-gray-700 text-lg leading-relaxed mb-6"> // <p className="text-gray-700 text-lg leading-relaxed mb-6">
{benefit.description} // {benefit.description}
</p> // </p>
<ul className="space-y-4"> // <ul className="space-y-4">
{benefit.items.map((item, itemIndex) => ( // {benefit.items.map((item, itemIndex) => (
<li // <li
key={itemIndex} // key={itemIndex}
className="flex items-start text-gray-700 group hover:text-[#C3C7FF] transition-colors duration-200" // className="flex items-start text-gray-700 group hover:text-primary-500 transition-colors duration-200"
> // >
<div className="flex-shrink-0 w-6 h-6 bg-[#C3C7FF]/10 rounded-full flex items-center justify-center ml-3 mt-1 group-hover:bg-[#C3C7FF] transition-colors duration-200"> // <div className="flex-shrink-0 w-6 h-6 bg-primary-500/10 rounded-full flex items-center justify-center ml-3 mt-1 group-hover:bg-primary-500 transition-colors duration-200">
<svg className="w-3 h-3 text-[#C3C7FF] group-hover:text-white transition-colors duration-200" fill="currentColor" viewBox="0 0 20 20"> // <svg className="w-3 h-3 text-primary-500 group-hover:text-white transition-colors duration-200" 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" /> // <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> // </svg>
</div> // </div>
<span className="text-right leading-relaxed">{item}</span> // <span className="text-right leading-relaxed">{item}</span>
</li> // </li>
))} // ))}
</ul> // </ul>
</div> // </div>
</div> // </div>
))} // ))}
</div> // </div>
{/* Scientific Evidence Section */} // {/* Scientific Evidence Section */}
<div className="bg-gradient-to-r from-[#C3C7FF]/5 to-[#A8B1FF]/5 rounded-3xl p-8 border border-[#C3C7FF]/20"> // <div className="bg-gradient-to-r from-primary-500/5 to-primary-600/5 rounded-3xl p-8 border border-primary-500/20">
<div className="flex flex-col md:flex-row items-center justify-between gap-6"> // <div className="flex flex-col md:flex-row items-center justify-between gap-6">
<div className="flex-1"> // <div className="flex-1">
<h4 className="text-2xl font-bold text-gray-900 mb-3"> // <h4 className="text-2xl font-bold text-gray-900 mb-3">
📊 پشتیبانی شده توسط تحقیقات // 📊 پشتیبانی شده توسط تحقیقات
</h4> // </h4>
<p className="text-gray-700 leading-relaxed"> // <p className="text-gray-700 leading-relaxed">
تمام تکنیک‌های استفاده شده در آرام‌لند بر اساس مطالعات علمی معتبر در زمینه‌های // تمام تکنیک‌های استفاده شده در آرام‌لند بر اساس مطالعات علمی معتبر در زمینه‌های
روانشناسی، علوم اعصاب و پزشکی رفتاری طراحی شده‌اند. // روانشناسی، علوم اعصاب و پزشکی رفتاری طراحی شده‌اند.
</p> // </p>
</div> // </div>
<div className="flex gap-4"> // <div className="flex gap-4">
{/* {[ // {[
{ name: "Harvard", color: "bg-red-100 text-red-600" }, // { name: "Harvard", color: "bg-red-100 text-red-600" },
{ name: "Stanford", color: "bg-blue-100 text-blue-600" }, // { name: "Stanford", color: "bg-blue-100 text-blue-600" },
{ name: "NIH", color: "bg-green-100 text-green-600" } // { name: "NIH", color: "bg-green-100 text-green-600" }
].map((org, index) => ( // ].map((org, index) => (
<div // <div
key={index} // key={index}
={`${org.color} px-4 py-2 rounded-lg font-medium text-sm backdrop-blur-sm`} // className={`${org.color} px-4 py-2 rounded-lg font-medium text-sm backdrop-blur-sm`}
> // >
{org.name} // {org.name}
</div> // </div>
))} */} // ))}
</div> // </div>
</div> // </div>
</div> // </div>
{/* Bottom CTA */} // {/* Bottom CTA */}
<div className="text-center mt-12"> // <div className="text-center mt-12">
<button className="bg-gradient-to-r from-[#C3C7FF] to-[#A8B1FF] text-white font-bold py-4 px-8 rounded-2xl hover:shadow-2xl transition-all duration-300 transform hover:scale-105 shadow-lg"> // <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 shadow-lg">
مطالعه تحقیقات کامل // مطالعه تحقیقات کامل
</button> // </button>
<p className="text-gray-500 text-sm mt-4"> // <p className="text-gray-500 text-sm mt-4">
مبتنی بر بیش از ۵۰ مطالعه علمی معتبر // مبتنی بر بیش از ۵۰ مطالعه علمی معتبر
</p> // </p>
</div> // </div>
</div> // </div>
); // );
} // }
export default ScientificBenefits; // export default ScientificBenefits;
app/components/WhatYouCanDo.jsx
+22 -22
View File
@@ -6,10 +6,10 @@ function WhatYouCanDo() {
icon: Wind, icon: Wind,
title: "تمرین‌های تنفسی", title: "تمرین‌های تنفسی",
description: "با تمرین‌های ساده و مؤثر تنفسی، اضطراب‌ات رو کاهش بده و ذهنت رو آرام کن.", description: "با تمرین‌های ساده و مؤثر تنفسی، اضطراب‌ات رو کاهش بده و ذهنت رو آرام کن.",
gradient: "from-[#C3C7FF]/10 to-[#A8B1FF]/10", gradient: "from-primary-500/10 to-primary-600/10",
border: "border-[#C3C7FF]/20", border: "border-primary-500/20",
items: ["روش تنفس ۴-۷-۸", "تنفس باکس‌شکل برای تمرکز", "تنفس برای خواب بهتر"], items: ["روش تنفس ۴-۷-۸", "تنفس باکس‌شکل برای تمرکز", "تنفس برای خواب بهتر"],
color: "[#C3C7FF]", color: "primary-500",
delay: "delay-100", delay: "delay-100",
stats: "۱۰+ تمرین مختلف" stats: "۱۰+ تمرین مختلف"
}, },
@@ -17,10 +17,10 @@ function WhatYouCanDo() {
icon: Brain, icon: Brain,
title: "مدیتیشن و ذهن‌آگاهی", title: "مدیتیشن و ذهن‌آگاهی",
description: "مدیتیشن‌های هدایت‌شده فارسی برای تمام سطح‌ها.", description: "مدیتیشن‌های هدایت‌شده فارسی برای تمام سطح‌ها.",
gradient: "from-[#C3C7FF]/10 to-[#A8B1FF]/10", gradient: "from-primary-500/10 to-primary-600/10",
border: "border-[#C3C7FF]/20", border: "border-primary-500/20",
items: ["مدیتیشن برای مبتدی‌ها (۵ دقیقه‌ای)", "ذهن‌آگاهی در زندگی روزمره", "مدیتیشن خواب عمیق"], items: ["مدیتیشن برای مبتدی‌ها (۵ دقیقه‌ای)", "ذهن‌آگاهی در زندگی روزمره", "مدیتیشن خواب عمیق"],
color: "[#C3C7FF]", color: "primary-500",
delay: "delay-200", delay: "delay-200",
stats: "۵۰+ جلسه" stats: "۵۰+ جلسه"
}, },
@@ -28,10 +28,10 @@ function WhatYouCanDo() {
icon: Heart, icon: Heart,
title: "صلح درونی و خودقبولی", title: "صلح درونی و خودقبولی",
description: "جلسات هدایت‌شده برای پذیرش خود و رفع احساسات منفی.", description: "جلسات هدایت‌شده برای پذیرش خود و رفع احساسات منفی.",
gradient: "from-[#C3C7FF]/10 to-[#A8B1FF]/10", gradient: "from-primary-500/10 to-primary-600/10",
border: "border-[#C3C7FF]/20", border: "border-primary-500/20",
items: ["درمان فشار روانی و اضطراب", "افزایش اعتماد به نفس", "مدیتیشن محبت و مهربانی"], items: ["درمان فشار روانی و اضطراب", "افزایش اعتماد به نفس", "مدیتیشن محبت و مهربانی"],
color: "[#C3C7FF]", color: "primary-500",
delay: "delay-300", delay: "delay-300",
stats: "۲۵+ برنامه" stats: "۲۵+ برنامه"
}, },
@@ -39,10 +39,10 @@ function WhatYouCanDo() {
icon: Sparkles, icon: Sparkles,
title: "موسیقی آرام‌بخش", title: "موسیقی آرام‌بخش",
description: "آهنگ‌های طبیعت و موسیقی آرام‌بخش برای یوگا، کار و خواب.", description: "آهنگ‌های طبیعت و موسیقی آرام‌بخش برای یوگا، کار و خواب.",
gradient: "from-[#C3C7FF]/10 to-[#A8B1FF]/10", gradient: "from-primary-500/10 to-primary-600/10",
border: "border-[#C3C7FF]/20", border: "border-primary-500/20",
items: ["آرام برای فوکس و تمرکز", "موسیقی طبیعت و اقیانوس", "پس‌زمینه برای یوگا"], items: ["آرام برای فوکس و تمرکز", "موسیقی طبیعت و اقیانوس", "پس‌زمینه برای یوگا"],
color: "[#C3C7FF]", color: "primary-500",
delay: "delay-400", delay: "delay-400",
stats: "۱۰۰+ آهنگ" stats: "۱۰۰+ آهنگ"
} }
@@ -52,12 +52,12 @@ function WhatYouCanDo() {
<div className="my-24"> <div className="my-24">
{/* Section Header */} {/* Section Header */}
<div className="text-center mb-16"> <div className="text-center mb-16">
<div className="inline-flex items-center gap-2 bg-[#C3C7FF]/10 text-[#C3C7FF] px-4 py-2 rounded-full text-sm font-medium mb-4"> <div className="inline-flex items-center gap-2 bg-primary-500/10 text-primary-500 px-4 py-2 rounded-full text-sm font-medium mb-4">
<Sparkles className="w-4 h-4" /> <Sparkles className="w-4 h-4" />
قابلیت‌های اصلی قابلیت‌های اصلی
</div> </div>
<h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4"> <h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
هر آنچه برای <span className="text-[#C3C7FF]">آرامش</span> نیاز داری هر آنچه برای <span className="text-primary-500">آرامش</span> نیاز داری
</h2> </h2>
<p className="text-xl text-gray-600 max-w-2xl mx-auto"> <p className="text-xl text-gray-600 max-w-2xl mx-auto">
ابزارهای متنوع و تخصصی برای رسیدن به آرامش در هر شرایطی ابزارهای متنوع و تخصصی برای رسیدن به آرامش در هر شرایطی
@@ -69,17 +69,17 @@ function WhatYouCanDo() {
{activities.map((activity, index) => ( {activities.map((activity, index) => (
<div <div
key={index} key={index}
className={`bg-gradient-to-br ${activity.gradient} border ${activity.border} rounded-3xl p-8 hover:shadow-2xl transition-all duration-500 animate-fadeInUp ${activity.delay} group hover:border-[#C3C7FF]/40 hover:translate-y-[-8px]`} className={`bg-gradient-to-br ${activity.gradient} border ${activity.border} rounded-3xl p-8 hover:shadow-2xl transition-all duration-500 animate-fadeInUp ${activity.delay} group hover:border-primary-500/40 hover:translate-y-[-8px]`}
> >
{/* Header with Icon and Stats */} {/* Header with Icon and Stats */}
<div className="flex items-start justify-between mb-6"> <div className="flex items-start justify-between mb-6">
<div className="flex items-center"> <div className="flex items-center">
<div className="bg-gradient-to-r from-[#C3C7FF] to-[#A8B1FF] rounded-2xl p-3 ml-4 group-hover:scale-110 transition-transform duration-300 shadow-lg"> <div className="bg-gradient-to-r from-primary-500 to-primary-600 rounded-2xl p-3 ml-4 group-hover:scale-110 transition-transform duration-300 shadow-lg">
<activity.icon className="w-6 h-6 text-white" /> <activity.icon className="w-6 h-6 text-white" />
</div> </div>
<div> <div>
<h3 className="text-xl font-bold text-gray-900">{activity.title}</h3> <h3 className="text-xl font-bold text-gray-900">{activity.title}</h3>
<p className="text-sm text-[#C3C7FF] font-medium mt-1">{activity.stats}</p> <p className="text-sm text-primary-500 font-medium mt-1">{activity.stats}</p>
</div> </div>
</div> </div>
</div> </div>
@@ -94,16 +94,16 @@ function WhatYouCanDo() {
{activity.items.map((item, itemIndex) => ( {activity.items.map((item, itemIndex) => (
<li <li
key={itemIndex} key={itemIndex}
className="flex items-center text-gray-700 group/item hover:text-[#C3C7FF] transition-colors duration-200" className="flex items-center text-gray-700 group/item hover:text-primary-500 transition-colors duration-200"
> >
<div className="w-2 h-2 bg-[#C3C7FF] rounded-full ml-3 group-hover/item:scale-125 transition-transform duration-200"></div> <div className="w-2 h-2 bg-primary-500 rounded-full ml-3 group-hover/item:scale-125 transition-transform duration-200"></div>
<span>{item}</span> <span>{item}</span>
</li> </li>
))} ))}
</ul> </ul>
{/* Hover Effect Overlay */} {/* Hover Effect Overlay */}
<div className="absolute inset-0 rounded-3xl border-2 border-[#C3C7FF] opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div> <div className="absolute inset-0 rounded-3xl border-2 border-primary-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
</div> </div>
))} ))}
</div> </div>
@@ -111,9 +111,9 @@ function WhatYouCanDo() {
{/* Bottom CTA */} {/* Bottom CTA */}
<div className="text-center"> <div className="text-center">
<p className="text-gray-600 text-lg mb-6"> <p className="text-gray-600 text-lg mb-6">
بیش از <span className="text-[#C3C7FF] font-bold">۱۰۰۰</span> کاربر از این ویژگی‌ها استفاده می‌کنند بیش از <span className="text-primary-500 font-bold">۱۰۰۰</span> کاربر از این ویژگی‌ها استفاده می‌کنند
</p> </p>
<button className="bg-gradient-to-r from-[#C3C7FF] to-[#A8B1FF] text-white font-bold py-3 px-6 rounded-2xl hover:shadow-lg transition-all duration-300 transform hover:scale-105"> <button className="bg-gradient-to-r from-primary-500 to-primary-600 text-white font-bold py-3 px-6 rounded-2xl hover:shadow-lg transition-all duration-300 transform hover:scale-105">
کشف همه قابلیت‌ها کشف همه قابلیت‌ها
</button> </button>
</div> </div>
app/components/WhyAramland.jsx
+17 -17
View File
@@ -5,7 +5,7 @@ function WhyAramland() {
text: "مدیتیشن و تمرین تنفسی", text: "مدیتیشن و تمرین تنفسی",
description: "تمرین‌های متنوع برای هر سلیقه و نیاز", description: "تمرین‌های متنوع برای هر سلیقه و نیاز",
icon: "🧘‍♀️", icon: "🧘‍♀️",
gradient: "from-[#C3C7FF] to-[#A8B1FF]", gradient: "from-primary-500 to-primary-600",
delay: "delay-100" delay: "delay-100"
}, },
{ {
@@ -13,7 +13,7 @@ function WhyAramland() {
text: "ساعت محتوای صوتی فارسی", text: "ساعت محتوای صوتی فارسی",
description: "هدایت‌شده توسط متخصصان ایرانی", description: "هدایت‌شده توسط متخصصان ایرانی",
icon: "🎧", icon: "🎧",
gradient: "from-[#C3C7FF] to-[#A8B1FF]", gradient: "from-primary-500 to-primary-600",
delay: "delay-200" delay: "delay-200"
}, },
{ {
@@ -21,7 +21,7 @@ function WhyAramland() {
text: "دسترسی همیشه و همه جا", text: "دسترسی همیشه و همه جا",
description: "در هر زمان و مکان به آرامش برسید", description: "در هر زمان و مکان به آرامش برسید",
icon: "🌙", icon: "🌙",
gradient: "from-[#C3C7FF] to-[#A8B1FF]", gradient: "from-primary-500 to-primary-600",
delay: "delay-300" delay: "delay-300"
}, },
{ {
@@ -29,7 +29,7 @@ function WhyAramland() {
text: "رضایت کاربران", text: "رضایت کاربران",
description: "تجربه‌ای که کاربران عاشقش هستند", description: "تجربه‌ای که کاربران عاشقش هستند",
icon: "⭐", icon: "⭐",
gradient: "from-[#C3C7FF] to-[#A8B1FF]", gradient: "from-primary-500 to-primary-600",
delay: "delay-400" delay: "delay-400"
} }
]; ];
@@ -58,12 +58,12 @@ function WhyAramland() {
<div className="bg-white rounded-3xl shadow-2xl border border-gray-100 p-12 mb-12 animate-fadeInUp hover:shadow-3xl transition-all duration-500"> <div className="bg-white rounded-3xl shadow-2xl border border-gray-100 p-12 mb-12 animate-fadeInUp hover:shadow-3xl transition-all duration-500">
{/* Section Header */} {/* Section Header */}
<div className="text-center mb-16"> <div className="text-center mb-16">
<div className="inline-flex items-center gap-2 bg-[#C3C7FF]/10 text-[#C3C7FF] px-4 py-2 rounded-full text-sm font-medium mb-4"> <div className="inline-flex items-center gap-2 bg-primary-500/10 text-primary-500 px-4 py-2 rounded-full text-sm font-medium mb-4">
<span className="text-lg">🚀</span> <span className="text-lg">🚀</span>
برتری آرام‌لند برتری آرام‌لند
</div> </div>
<h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4"> <h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
چرا <span className="text-[#C3C7FF]">هزاران نفر</span> آرام‌لند را انتخاب می‌کنند؟ چرا <span className="text-primary-500">هزاران نفر</span> آرام‌لند را انتخاب می‌کنند؟
</h2> </h2>
<p className="text-xl text-gray-600 max-w-2xl mx-auto"> <p className="text-xl text-gray-600 max-w-2xl mx-auto">
تجربه‌ای متفاوت از آرامش، طراحی شده مخصوص فارسی‌زبانان تجربه‌ای متفاوت از آرامش، طراحی شده مخصوص فارسی‌زبانان
@@ -83,7 +83,7 @@ function WhyAramland() {
</div> </div>
{/* Number */} {/* Number */}
<div className="text-4xl font-bold bg-gradient-to-r from-[#C3C7FF] to-[#A8B1FF] bg-clip-text text-transparent mb-2"> <div className="text-4xl font-bold bg-gradient-to-r from-primary-500 to-primary-600 bg-clip-text text-transparent mb-2">
{stat.number} {stat.number}
</div> </div>
@@ -100,9 +100,9 @@ function WhyAramland() {
{/* Divider */} {/* Divider */}
<div className="flex items-center justify-center mb-12"> <div className="flex items-center justify-center mb-12">
<div className="h-px bg-gradient-to-r from-transparent via-[#C3C7FF] to-transparent w-32"></div> <div className="h-px bg-gradient-to-r from-transparent via-primary-500 to-transparent w-32"></div>
<div className="mx-4 text-[#C3C7FF] text-lg">✨</div> <div className="mx-4 text-primary-500 text-lg">✨</div>
<div className="h-px bg-gradient-to-r from-transparent via-[#C3C7FF] to-transparent w-32"></div> <div className="h-px bg-gradient-to-r from-transparent via-primary-500 to-transparent w-32"></div>
</div> </div>
{/* Features Grid */} {/* Features Grid */}
@@ -112,7 +112,7 @@ function WhyAramland() {
key={index} key={index}
className="text-center group hover:transform hover:translate-y-[-8px] transition-all duration-300" className="text-center group hover:transform hover:translate-y-[-8px] transition-all duration-300"
> >
<div className="bg-[#C3C7FF]/10 w-16 h-16 rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:bg-[#C3C7FF]/20 transition-colors duration-300"> <div className="bg-primary-500/10 w-16 h-16 rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:bg-primary-500/20 transition-colors duration-300">
<span className="text-2xl">{feature.icon}</span> <span className="text-2xl">{feature.icon}</span>
</div> </div>
<h3 className="text-lg font-bold text-gray-900 mb-3">{feature.title}</h3> <h3 className="text-lg font-bold text-gray-900 mb-3">{feature.title}</h3>
@@ -125,7 +125,7 @@ function WhyAramland() {
</div> </div>
{/* Social Proof Section */} {/* Social Proof Section */}
<div className="bg-gradient-to-r from-[#C3C7FF]/5 to-[#A8B1FF]/5 rounded-3xl p-8 border border-[#C3C7FF]/20"> <div className="bg-gradient-to-r from-primary-500/5 to-primary-600/5 rounded-3xl p-8 border border-primary-500/20">
<div className="flex flex-col md:flex-row items-center justify-between gap-6"> <div className="flex flex-col md:flex-row items-center justify-between gap-6">
<div className="flex-1"> <div className="flex-1">
<h4 className="text-2xl font-bold text-gray-900 mb-3"> <h4 className="text-2xl font-bold text-gray-900 mb-3">
@@ -140,7 +140,7 @@ function WhyAramland() {
{[1, 2, 3, 4].map((item) => ( {[1, 2, 3, 4].map((item) => (
<div <div
key={item} key={item}
className="w-12 h-12 bg-gradient-to-r from-[#C3C7FF] to-[#A8B1FF] rounded-full border-2 border-white flex items-center justify-center text-white font-bold text-sm" className="w-12 h-12 bg-gradient-to-r from-primary-500 to-primary-600 rounded-full border-2 border-white flex items-center justify-center text-white font-bold text-sm"
> >
{item} {item}
</div> </div>
@@ -156,15 +156,15 @@ function WhyAramland() {
{/* Bottom CTA */} {/* Bottom CTA */}
<div className="text-center mt-8"> <div className="text-center mt-8">
<button className="bg-gradient-to-r from-[#C3C7FF] to-[#A8B1FF] text-white font-bold py-4 px-8 rounded-2xl hover:shadow-2xl transition-all duration-300 transform hover:scale-105 shadow-lg inline-flex items-center gap-2"> {/* <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 shadow-lg inline-flex items-center gap-2">
<span>شروع سفر آرامش</span> <span>شروع سفر آرامش</span>
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" />
</svg> </svg>
</button> </button> */}
<p className="text-gray-500 text-sm mt-4"> {/* <p className="text-gray-500 text-sm mt-4">
هیچ کارت اعتباری نیاز نیست • تضمین بازگشت وجه ۷ روزه هیچ کارت اعتباری نیاز نیست • تضمین بازگشت وجه ۷ روزه
</p> </p> */}
</div> </div>
</div> </div>
); );
app/globals.css
+18 -1
View File
@@ -1,7 +1,24 @@
@import "tailwindcss"; @import "tailwindcss";
@tailwind base;
@tailwind components;
@tailwind utilities;
/* @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); */ /* @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); */
@theme {
--color-primary-50: #f0f1ff;
--color-primary-100: #e4e6ff;
--color-primary-200: #c3c7ff;
--color-primary-300: #a8b1ff;
--color-primary-400: #8d9aff;
--color-primary-500: #727dfd;
--color-primary-600: #5d68e0;
--color-primary-700: #4853c4;
--color-primary-800: #343ea8;
--color-primary-900: #1f298;
}
/* Dana Font Faces */ /* Dana Font Faces */
@font-face { @font-face {
font-family: 'Dana'; font-family: 'Dana';
package-lock.json
Generated
+71
View File
@@ -19,6 +19,7 @@
"@types/node": "^20", "@types/node": "^20",
"@types/react": "^19", "@types/react": "^19",
"@types/react-dom": "^19", "@types/react-dom": "^19",
"autoprefixer": "^10.4.21",
"eslint": "^9", "eslint": "^9",
"eslint-config-next": "16.0.1", "eslint-config-next": "16.0.1",
"tailwindcss": "^4", "tailwindcss": "^4",
@@ -2363,6 +2364,44 @@
"node": ">= 0.4" "node": ">= 0.4"
} }
}, },
"node_modules/autoprefixer": {
"version": "10.4.21",
"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.21.tgz",
"integrity": "sha512-O+A6LWV5LDHSJD3LjHYoNi4VLsj/Whi7k6zG12xTYaU4cQ8oxQGckXNX8cRHK5yOZ/ppVHe0ZBXGzSV9jXdVbQ==",
"dev": true,
"funding": [
{
"type": "opencollective",
"url": "https://opencollective.com/postcss/"
},
{
"type": "tidelift",
"url": "https://tidelift.com/funding/github/npm/autoprefixer"
},
{
"type": "github",
"url": "https://github.com/sponsors/ai"
}
],
"license": "MIT",
"dependencies": {
"browserslist": "^4.24.4",
"caniuse-lite": "^1.0.30001702",
"fraction.js": "^4.3.7",
"normalize-range": "^0.1.2",
"picocolors": "^1.1.1",
"postcss-value-parser": "^4.2.0"
},
"bin": {
"autoprefixer": "bin/autoprefixer"
},
"engines": {
"node": "^10 || ^12 || >=14"
},
"peerDependencies": {
"postcss": "^8.1.0"
}
},
"node_modules/available-typed-arrays": { "node_modules/available-typed-arrays": {
"version": "1.0.7", "version": "1.0.7",
"resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz", "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
@@ -3589,6 +3628,20 @@
"url": "https://github.com/sponsors/ljharb" "url": "https://github.com/sponsors/ljharb"
} }
}, },
"node_modules/fraction.js": {
"version": "4.3.7",
"resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
"integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==",
"dev": true,
"license": "MIT",
"engines": {
"node": "*"
},
"funding": {
"type": "patreon",
"url": "https://github.com/sponsors/rawify"
}
},
"node_modules/framer-motion": { "node_modules/framer-motion": {
"version": "12.23.24", "version": "12.23.24",
"resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.23.24.tgz", "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.23.24.tgz",
@@ -5097,6 +5150,16 @@
"dev": true, "dev": true,
"license": "MIT" "license": "MIT"
}, },
"node_modules/normalize-range": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
"integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/object-assign": { "node_modules/object-assign": {
"version": "4.1.1", "version": "4.1.1",
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -5377,6 +5440,7 @@
} }
], ],
"license": "MIT", "license": "MIT",
"peer": true,
"dependencies": { "dependencies": {
"nanoid": "^3.3.11", "nanoid": "^3.3.11",
"picocolors": "^1.1.1", "picocolors": "^1.1.1",
@@ -5386,6 +5450,13 @@
"node": "^10 || ^12 || >=14" "node": "^10 || ^12 || >=14"
} }
}, },
"node_modules/postcss-value-parser": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
"dev": true,
"license": "MIT"
},
"node_modules/prelude-ls": { "node_modules/prelude-ls": {
"version": "1.2.1", "version": "1.2.1",
"resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz", "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
package.json
+1
View File
@@ -20,6 +20,7 @@
"@types/node": "^20", "@types/node": "^20",
"@types/react": "^19", "@types/react": "^19",
"@types/react-dom": "^19", "@types/react-dom": "^19",
"autoprefixer": "^10.4.21",
"eslint": "^9", "eslint": "^9",
"eslint-config-next": "16.0.1", "eslint-config-next": "16.0.1",
"tailwindcss": "^4", "tailwindcss": "^4",
postcss.config.mjs
+3 -1
View File
@@ -1,6 +1,8 @@
// postcss.config.mjs
const config = { const config = {
plugins: { plugins: {
"@tailwindcss/postcss": {}, "@tailwindcss/postcss": {}, // ✅ correct for Tailwind 4
autoprefixer: {},
}, },
}; };
tailwind.config.ts
+15 -46
View File
@@ -1,63 +1,32 @@
import type { Config } from 'tailwindcss'; import type { Config } from "tailwindcss";
const config: Config = { const config: Config = {
content: [
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",
"./app/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: { theme: {
extend: { extend: {
fontFamily: { fontFamily: {
sans: [ sans: [
'Dana', "Dana",
'Inter', "Inter",
'var(--font-geist-sans)', "var(--font-geist-sans)",
'system-ui', "system-ui",
'sans-serif', "sans-serif",
], ],
}, },
direction: {
'rtl': 'rtl',
},
colors: {
primary: {
50: '#f0f1ff',
100: '#e0e2ff',
200: '#c3c7ff',
300: '#a8b1ff',
400: '#8d9aff',
500: '#C3C7FF', // Your main color
600: '#a8b1ff',
700: '#8d9aff',
800: '#7283ff',
900: '#576cff',
}
},
animation: { animation: {
'fadeInUp': 'fadeInUp 0.6s ease-out', fadeInUp: "fadeInUp 0.6s ease-out",
'float': 'float 6s ease-in-out infinite',
'pulse-glow': 'pulse-glow 2s ease-in-out infinite alternate',
'slideInLeft': 'slideInLeft 0.6s ease-out',
'slideInRight': 'slideInRight 0.6s ease-out',
}, },
keyframes: { keyframes: {
fadeInUp: { fadeInUp: {
'0%': { opacity: '0', transform: 'translateY(30px)' }, "0%": { opacity: "0", transform: "translateY(30px)" },
'100%': { opacity: '1', transform: 'translateY(0)' }, "100%": { opacity: "1", transform: "translateY(0)" },
}, },
float: {
'0%, 100%': { transform: 'translateY(0px)' },
'50%': { transform: 'translateY(-20px)' },
}, },
'pulse-glow': {
'0%': { boxShadow: '0 0 20px rgb(195 199 255 / 0.4)' },
'100%': { boxShadow: '0 0 30px rgb(195 199 255 / 0.8)' },
},
slideInLeft: {
'0%': { opacity: '0', transform: 'translateX(-30px)' },
'100%': { opacity: '1', transform: 'translateX(0)' },
},
slideInRight: {
'0%': { opacity: '0', transform: 'translateX(30px)' },
'100%': { opacity: '1', transform: 'translateX(0)' },
},
}
}, },
}, },
plugins: [], plugins: [],