first commit

app/app.tsx

@@ -0,0 +1,33 @@
+import Header from './components/Header';
+import Hero from './components/Hero';
+import DownloadSection from './components/DownloadSection';
+import Features from './components/Features';
+import WhatYouCanDo from './components/WhatYouCanDo';
+import WhyAramland from './components/WhyAramland';
+import FreeTrial from './components/FreeTrial';
+import ScientificBenefits from './components/ScientificBenefits';
+import CallToAction from './components/CallToAction';
+import Footer from './components/Footer';
+
+function App() {
+  return (
+    <div className="min-h-screen bg-gradient-to-b from-blue-50 via-white to-green-50" dir="rtl">
+      <Header />
+      
+      <main className="max-w-4xl mx-auto px-8 py-16">
+        <Hero />
+        <DownloadSection />
+        <Features />
+        <WhatYouCanDo />
+        <WhyAramland />
+        <FreeTrial />
+        <ScientificBenefits />
+        <CallToAction />
+      </main>
+
+      <Footer />
+    </div>
+  );
+}
+
+export default App;

app/components/CallToAction.jsx

@@ -0,0 +1,17 @@
+function CallToAction() {
+  return (
+    <div className="text-center bg-gradient-to-r from-green-100 via-teal-100 to-blue-100 rounded-3xl p-16 animate-fadeInUp delay-200">
+      <h2 className="text-3xl md:text-4xl font-bold text-gray-800 mb-6">
+        آماده برای یک زندگی آرام‌تر؟
+      </h2>
+      <p className="text-xl text-gray-700 mb-8 max-w-2xl mx-auto leading-relaxed">
+        امروز اولین قدم رو بردار و ببین چطور آرام‌لند می‌تونه در تغییر کیفیت زندگی‌ات کمک‌ کنه.
+      </p>
+      <button className="bg-gradient-to-r from-teal-600 to-green-600 text-white font-bold py-4 px-10 rounded-xl hover:shadow-2xl transition-all duration-300 transform hover:scale-105 text-lg">
+        الان شروع کن
+      </button>
+    </div>
+  );
+}
+
+export default CallToAction;

app/components/DownloadSection.jsx

@@ -0,0 +1,51 @@
+import { Download, Globe, PlayCircle } from 'lucide-react';
+
+function DownloadSection() {
+  const downloadOptions = [
+    {
+      icon: Download,
+      title: "کافه بازار",
+      description: "دانلود برای اندروید",
+      gradient: "from-teal-500 to-teal-600",
+      animation: "animate-slideInLeft delay-100"
+    },
+    {
+      icon: PlayCircle,
+      title: "گوگل پلی",
+      description: "دانلود برای اندروید",
+      gradient: "from-green-500 to-green-600",
+      animation: "animate-fadeInUp delay-200"
+    },
+    {
+      icon: Globe,
+      title: "وب اپلیکیشن",
+      description: "استفاده آنلاین",
+      gradient: "from-blue-500 to-blue-600",
+      animation: "animate-slideInRight delay-300"
+    }
+  ];
+
+  return (
+    <div className="bg-white rounded-3xl shadow-xl p-12 mb-12 animate-fadeInUp delay-300">
+      <h2 className="text-3xl font-bold text-gray-800 mb-8 text-center">
+        آرام‌لند رو از کجا دانلود کنم؟
+      </h2>
+
+      <div className="grid md:grid-cols-3 gap-6">
+        {downloadOptions.map((option, index) => (
+          <a
+            key={index}
+            href="#"
+            className={`flex flex-col items-center justify-center p-8 bg-gradient-to-br ${option.gradient} rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 text-white group ${option.animation}`}
+          >
+            <option.icon className="w-12 h-12 mb-4 group-hover:scale-110 transition-transform" />
+            <h3 className="text-xl font-bold mb-2">{option.title}</h3>
+            <p className="text-sm text-opacity-90">{option.description}</p>
+          </a>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default DownloadSection;

app/components/Features.jsx

@@ -0,0 +1,79 @@
+function Features() {
+  const features = [
+    {
+      emoji: "💨",
+      title: "تمرین تنفسی هوشمند",
+      description: "یک تنفس عمیق و استرس‌ات نابود شه. الگوریتم هوشمند برای هر لحظه.",
+      gradient: "from-teal-50 to-teal-100",
+      delay: "delay-100"
+    },
+    {
+      emoji: "🎛️",
+      title: "الگوی تنفسی انتخابی",
+      description: "تمرین‌های تنفسی خود را طراحی کنید و تمام خاصیت‌ها را کنترل کنید.",
+      gradient: "from-green-50 to-green-100",
+      delay: "delay-200"
+    },
+    {
+      emoji: "📦",
+      title: "صندوق دغدغه‌ها",
+      description: "دغدغه‌هایت رو در یک صندوق خیالی بگذار و ذهنت رو سبک‌تر کن.",
+      gradient: "from-blue-50 to-blue-100",
+      delay: "delay-300"
+    },
+    {
+      emoji: "🤖",
+      title: "مشاور هوش مصنوعی",
+      description: "همراه هوشمندی که همیشه کنار توست برای پاسخ‌گویی به سوالات.",
+      gradient: "from-purple-50 to-purple-100",
+      delay: "delay-400"
+    },
+    {
+      emoji: "💬",
+      title: "چت بدون حد",
+      description: "هر وقت، هر‌قدر که بخواهی صحبت کن. با خرید اشتراک نامحدود.",
+      gradient: "from-pink-50 to-pink-100",
+      delay: "delay-100"
+    },
+    {
+      emoji: "🎶",
+      title: "موسیقی آرام‌بخش انحصاری",
+      description: "موسیقی‌ای که مستقیم بر روی آرامش‌ت تأثیر می‌گذاره.",
+      gradient: "from-yellow-50 to-yellow-100",
+      delay: "delay-200"
+    }
+  ];
+
+  return (
+    <div className="my-20">
+      <h2 className="text-4xl md:text-5xl font-bold text-gray-800 text-center mb-16 animate-fadeInUp">
+        ✨ ویژگی‌های خاص آرام‌لند
+      </h2>
+
+      <div className="grid md:grid-cols-2 gap-6 mb-16">
+        {features.map((feature, index) => (
+          <div
+            key={index}
+            className={`bg-gradient-to-br ${feature.gradient} rounded-2xl p-8 hover:shadow-2xl transition-all duration-300 animate-fadeInUp ${feature.delay}`}
+          >
+            <div className="flex items-center mb-4">
+              <span className="text-3xl ml-3">{feature.emoji}</span>
+              <h3 className="text-xl font-bold text-gray-800">{feature.title}</h3>
+            </div>
+            <p className="text-gray-700">{feature.description}</p>
+          </div>
+        ))}
+      </div>
+
+      <div className="text-center bg-gradient-to-r from-teal-50 to-green-50 rounded-3xl p-12 animate-fadeInUp delay-300">
+        <p className="text-2xl md:text-3xl font-medium text-gray-700 leading-relaxed">
+          سفر به سمت آرامش از همین امروز شروع می‌شه.
+          <br />
+          <span className="text-teal-700 font-bold">آماده‌ای؟</span>
+        </p>
+      </div>
+    </div>
+  );
+}
+
+export default Features;

app/components/Footer.jsx

@@ -0,0 +1,10 @@
+function Footer() {
+  return (
+    <footer className="py-12 text-center text-gray-500 border-t border-gray-200">
+      <p className="mb-4">© ۱۴۰۳ آرام‌لند - همراه تو برای یک زندگی آرام‌تر</p>
+      <p className="text-sm">ساخته شده با عشق برای مردم ایران</p>
+    </footer>
+  );
+}
+
+export default Footer;

app/components/FreeTrial.jsx

@@ -0,0 +1,15 @@
+function FreeTrial() {
+  return (
+    <div className="bg-gradient-to-r from-teal-500 to-green-600 rounded-3xl p-12 text-white text-center mb-16 animate-fadeInUp animate-pulse-glow">
+      <h2 className="text-3xl md:text-4xl font-bold mb-4 animate-fadeInUp delay-100">شروع یک هفته رایگان</h2>
+      <p className="text-lg mb-8 text-teal-50 animate-fadeInUp delay-200">
+        تمام ویژگی‌های پریمیوم رو برای یک هفته کامل تجربه کن، بدون هیچ‌گونه ایراد.
+      </p>
+      <button className="bg-white text-teal-600 font-bold py-4 px-8 rounded-xl hover:bg-gray-100 transition-all duration-300 transform hover:scale-105 animate-fadeInUp delay-300">
+        دانلود و شروع
+      </button>
+    </div>
+  );
+}
+
+export default FreeTrial;

app/components/Header.jsx

@@ -0,0 +1,11 @@
+function Header() {
+  return (
+    <nav className="py-6 px-8">
+      <div className="max-w-6xl mx-auto flex justify-between items-center">
+        <div className="text-2xl font-bold text-teal-700">آرام‌لند</div>
+      </div>
+    </nav>
+  );
+}
+
+export default Header;

app/components/Hero.jsx

@@ -0,0 +1,22 @@
+function Hero() {
+  return (
+    <div className="text-center mb-16">
+      <div className="mb-6 animate-float">
+        <span className="text-6xl">✨</span>
+      </div>
+      <h1 className="text-5xl md:text-6xl font-bold text-gray-800 mb-6 leading-tight animate-fadeInUp">
+        لحظه‌ای آرام بگیر، زندگی را حس کن
+      </h1>
+
+      <p className="text-xl md:text-2xl text-gray-600 max-w-3xl mx-auto leading-relaxed mb-4 animate-fadeInUp delay-100">
+        آرام‌لند دستیار مهربان توست برای یافتن آرامش درونی. با مدیتیشن‌های فارسی، موسیقی دلنشین و راهنمایی‌های گام‌به‌گام، هر روز کمی به خودت نزدیک‌تر شو.
+      </p>
+
+      <p className="text-lg text-gray-500 max-w-2xl mx-auto leading-relaxed animate-fadeInUp delay-200">
+        چه در خانه باشی، چه سر کار، چه در مسیر؛ همیشه می‌تونی یک لحظه آرامش رو با خودت داشته باشی.
+      </p>
+    </div>
+  );
+}
+
+export default Hero;

app/components/ScientificBenefits.jsx

@@ -0,0 +1,45 @@
+function ScientificBenefits() {
+  return (
+    <div className="my-20">
+      <h2 className="text-4xl md:text-5xl font-bold text-gray-800 text-center mb-16 animate-fadeInUp">
+        چرا فقط چند دقیقه کافی است؟
+      </h2>
+
+      <div className="bg-white rounded-3xl shadow-xl p-12 animate-fadeInUp delay-100">
+        <div className="grid md:grid-cols-2 gap-10">
+          <div className="animate-slideInLeft delay-200">
+            <h3 className="text-2xl font-bold text-gray-800 mb-6">تکنیک‌های علمی و عملی</h3>
+            <p className="text-gray-700 text-lg leading-relaxed mb-6">
+              آرام‌لند از جدیدترین و مؤثرترین تکنیک‌های مدیریت استرس و آرامش درونی استفاده می‌کند.
+            </p>
+            <ul className="space-y-3">
+              {["بهتری کردن خلق و خو در چند دقیقه", "کاهش استرس و اضطراب", "بهتری کردن کیفیت خواب"].map((item, index) => (
+                <li key={index} className="flex items-center text-gray-700">
+                  <span className="w-2 h-2 bg-teal-500 rounded-full ml-3"></span>
+                  {item}
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          <div className="animate-slideInRight delay-200">
+            <h3 className="text-2xl font-bold text-gray-800 mb-6">طراحی جذاب و کاربر‌پسند</h3>
+            <p className="text-gray-700 text-lg leading-relaxed mb-6">
+              رابط کاربری آرام‌لند برای راحتی و تمرکز شما طراحی شده است.
+            </p>
+            <ul className="space-y-3">
+              {["رابط ساده و شهودی", "طراحی بدون انجام‌پذیری", "محتوای هدایت‌شده فارسی"].map((item, index) => (
+                <li key={index} className="flex items-center text-gray-700">
+                  <span className="w-2 h-2 bg-green-500 rounded-full ml-3"></span>
+                  {item}
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default ScientificBenefits;

app/components/WhatYouCanDo.jsx

@@ -0,0 +1,79 @@
+import { Wind, Brain, Heart, Sparkles } from 'lucide-react';
+
+function WhatYouCanDo() {
+  const activities = [
+    {
+      icon: Wind,
+      title: "تمرین‌های تنفسی",
+      description: "با تمرین‌های ساده و مؤثر تنفسی، اضطراب‌ات رو کاهش بده و ذهنت رو آرام کن.",
+      gradient: "from-teal-50 to-teal-100",
+      items: ["روش تنفس ۴-۷-۸", "تنفس باکس‌شکل برای تمرکز", "تنفس برای خواب بهتر"],
+      color: "teal",
+      delay: "delay-100"
+    },
+    {
+      icon: Brain,
+      title: "مدیتیشن و ذهن‌آگاهی",
+      description: "مدیتیشن‌های هدایت‌شده فارسی برای تمام سطح‌ها.",
+      gradient: "from-green-50 to-green-100",
+      items: ["مدیتیشن برای مبتدی‌ها (۵ دقیقه‌ای)", "ذهن‌آگاهی در زندگی روزمره", "مدیتیشن خواب عمیق"],
+      color: "green",
+      delay: "delay-200"
+    },
+    {
+      icon: Heart,
+      title: "صلح‌ دروني و خودقبولی",
+      description: "جلسات هدایت‌شده برای پذیرش خود و رفع احساسات منفی.",
+      gradient: "from-blue-50 to-blue-100",
+      items: ["درمان فشار روانی و اضطراب", "افزایش اعتماد به نفس", "مدیتیشن محبت و مهربانی"],
+      color: "blue",
+      delay: "delay-300"
+    },
+    {
+      icon: Sparkles,
+      title: "موسیقی آرام‌بخش",
+      description: "آهنگ‌های طبیعت و موسیقی آرام‌بخش برای یوگا، کار و خواب.",
+      gradient: "from-purple-50 to-purple-100",
+      items: ["آرام برای فوکس و تمرکز", "موسیقی طبیعت و اقیانوس", "پس‌زمینه برای یوگا"],
+      color: "purple",
+      delay: "delay-400"
+    }
+  ];
+
+  return (
+    <div className="my-20">
+      <h2 className="text-4xl md:text-5xl font-bold text-gray-800 text-center mb-16 animate-fadeInUp">
+        چه کاری می‌تونی با آرام‌لند انجام بدی؟
+      </h2>
+
+      <div className="grid md:grid-cols-2 gap-8 mb-16">
+        {activities.map((activity, index) => (
+          <div
+            key={index}
+            className={`bg-gradient-to-br ${activity.gradient} rounded-3xl p-10 hover:shadow-2xl transition-all duration-300 animate-fadeInUp ${activity.delay}`}
+          >
+            <div className="flex items-center mb-6">
+              <div className={`bg-${activity.color}-500 rounded-full p-4 ml-4`}>
+                <activity.icon className="w-8 h-8 text-white" />
+              </div>
+              <h3 className="text-2xl font-bold text-gray-800">{activity.title}</h3>
+            </div>
+            <p className="text-gray-700 leading-relaxed text-lg mb-6">
+              {activity.description}
+            </p>
+            <ul className="space-y-3">
+              {activity.items.map((item, itemIndex) => (
+                <li key={itemIndex} className="flex items-center text-gray-700">
+                  <span className={`w-2 h-2 bg-${activity.color}-500 rounded-full ml-3`}></span>
+                  {item}
+                </li>
+              ))}
+            </ul>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default WhatYouCanDo;

app/components/WhyAramland.jsx

@@ -0,0 +1,26 @@
+function WhyAramland() {
+  const stats = [
+    { number: "۲۰۰+", text: "مدیتیشن و تمرین‌های تنفسی", color: "text-teal-600", delay: "delay-100" },
+    { number: "۱۵+", text: "ساعت محتوای صوتی فارسی", color: "text-green-600", delay: "delay-200" },
+    { number: "۲۴/۷", text: "دسترسی بدون محدود", color: "text-blue-600", delay: "delay-300" }
+  ];
+
+  return (
+    <div className="bg-white rounded-3xl shadow-xl p-12 mb-16 animate-fadeInUp">
+      <h2 className="text-3xl md:text-4xl font-bold text-gray-800 text-center mb-12">
+        چرا آرام‌لند؟
+      </h2>
+
+      <div className="grid md:grid-cols-3 gap-8">
+        {stats.map((stat, index) => (
+          <div key={index} className={`text-center animate-fadeInUp ${stat.delay}`}>
+            <div className={`text-5xl font-bold ${stat.color} mb-3`}>{stat.number}</div>
+            <p className="text-gray-700 text-lg">{stat.text}</p>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default WhyAramland;

app/page.tsx

@@ -1,65 +1,9 @@
+
 import Image from "next/image";
+import App from "./app";
 
 export default function Home() {
-  return (
+    return (
-    <div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
+        <App />
-      <main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
+    )
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={100}
-          height={20}
-          priority
-        />
-        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
-          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
-            To get started, edit the page.tsx file.
-          </h1>
-          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
-            Looking for a starting point or more instructions? Head over to{" "}
-            <a
-              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Templates
-            </a>{" "}
-            or the{" "}
-            <a
-              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Learning
-            </a>{" "}
-            center.
-          </p>
-        </div>
-        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
-          <a
-            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={16}
-              height={16}
-            />
-            Deploy Now
-          </a>
-          <a
-            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Documentation
-          </a>
-        </div>
-      </main>
-    </div>
-  );
 }

package-lock.json

@@ -8,6 +8,7 @@
       "name": "aramlan",
       "version": "0.1.0",
       "dependencies": {
+        "lucide-react": "^0.552.0",
         "next": "16.0.1",
         "react": "19.2.0",
         "react-dom": "19.2.0"
@@ -3212,6 +3213,7 @@
       "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@rtsao/scc": "^1.1.0",
         "array-includes": "^3.1.9",
@@ -4841,6 +4843,15 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "0.552.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.552.0.tgz",
+      "integrity": "sha512-g9WCjmfwqbexSnZE+2cl21PCfXOcqnGeWeMTNAOGEfpPbm/ZF4YIq77Z8qWrxbu660EKuLB4nSLggoKnCb+isw==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.21",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",

package.json

@@ -9,18 +9,19 @@
     "lint": "eslint"
   },
   "dependencies": {
+    "lucide-react": "^0.552.0",
+    "next": "16.0.1",
     "react": "19.2.0",
-    "react-dom": "19.2.0",
+    "react-dom": "19.2.0"
-    "next": "16.0.1"
   },
   "devDependencies": {
-    "typescript": "^5",
+    "@tailwindcss/postcss": "^4",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
-    "@tailwindcss/postcss": "^4",
-    "tailwindcss": "^4",
     "eslint": "^9",
-    "eslint-config-next": "16.0.1"
+    "eslint-config-next": "16.0.1",
+    "tailwindcss": "^4",
+    "typescript": "^5"
   }
 }