| <!DOCTYPE html> |
| <html lang="fa" dir="rtl"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>PersianAI - دستیار هوشمند فارسی</title> |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script> |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| fontFamily: { |
| 'vazir': ['Vazir', 'system-ui'], |
| }, |
| colors: { |
| primary: { |
| 50: '#f0f9ff', |
| 500: '#0ea5e9', |
| 600: '#0284c7', |
| 700: '#0369a1', |
| } |
| } |
| } |
| } |
| } |
| </script> |
| <style> |
| @import url('https://cdn.jsdelivr.net/gh/rastikerdar/vazir-font@v30.1.0/dist/font-face.css'); |
| * { |
| font-family: 'Vazir', sans-serif; |
| } |
| .rtl { |
| direction: rtl; |
| } |
| .chat-bubble-user { |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| color: white; |
| border-radius: 20px 20px 0 20px; |
| } |
| .chat-bubble-ai { |
| background: #f8fafc; |
| color: #1e293b; |
| border-radius: 20px 20px 20px 0; |
| border: 1px solid #e2e8f0; |
| } |
| .dark .chat-bubble-ai { |
| background: #1e293b; |
| color: #f1f5f9; |
| border-color: #334155; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50 dark:bg-gray-900 font-vazir transition-colors duration-300"> |
| |
| <nav class="bg-white dark:bg-gray-800 shadow-lg border-b border-gray-200 dark:border-gray-700"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="flex justify-between items-center h-16"> |
| <div class="flex items-center space-x-4 space-x-reverse"> |
| <div class="flex-shrink-0"> |
| <h1 class="text-2xl font-bold text-primary-600 dark:text-primary-400">PersianAI 🧠</h1> |
| </div> |
| <div class="hidden md:block"> |
| <div class="flex items-center space-x-4 space-x-reverse"> |
| <a href="/chat.html" class="text-gray-700 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 transition-colors">چت</a> |
| <a href="/history.html" class="text-gray-700 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 transition-colors">تاریخچه</a> |
| <a href="/personas.html" class="text-gray-700 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 transition-colors">شخصیت‌ها</a> |
| </div> |
| </div> |
| </div> |
| <div class="flex items-center space-x-4 space-x-reverse"> |
| <button id="themeToggle" class="p-2 rounded-lg bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300"> |
| <i data-feather="moon"></i> |
| </button> |
| <div class="flex items-center space-x-2 space-x-reverse"> |
| <a href="/login.html" class="bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-lg transition-colors">ورود</a> |
| <a href="/register.html" class="border border-primary-500 text-primary-500 hover:bg-primary-50 dark:hover:bg-gray-700 px-4 py-2 rounded-lg transition-colors">ثبت‌نام</a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <section class="py-20 bg-gradient-to-l from-primary-50 to-blue-100 dark:from-gray-800 dark:to-gray-900"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="text-center"> |
| <h1 class="text-5xl font-bold text-gray-900 dark:text-white mb-6"> |
| دستیار هوشمند فارسی |
| <span class="text-primary-600">پیشرفته‌تر از ChatGPT</span> |
| </h1> |
| <p class="text-xl text-gray-600 dark:text-gray-300 mb-8 max-w-3xl mx-auto leading-relaxed"> |
| اولین دستیار هوشمند فارسی با قابلیت‌های کامل گفتاری، پشتیبانی از فایل‌ها، و رابط کاربری کاملاً راست‌چین. تجربه‌ای بی‌نظیر در گفتگو با هوش مصنوعی! |
| </p> |
| <div class="flex justify-center space-x-4 space-x-reverse"> |
| <a href="/register.html" class="bg-primary-500 hover:bg-primary-600 text-white px-8 py-4 rounded-lg text-lg font-semibold transition-all transform hover:scale-105 shadow-lg"> |
| شروع رایگان |
| </a> |
| <a href="/chat.html" class="border border-primary-500 text-primary-500 hover:bg-primary-50 dark:hover:bg-gray-700 px-8 py-4 rounded-lg text-lg font-semibold transition-colors"> |
| امتحان دمو |
| </a> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-20 bg-white dark:bg-gray-800"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <h2 class="text-3xl font-bold text-center text-gray-900 dark:text-white mb-12">ویژگی‌های منحصر به فرد</h2> |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| |
| <div class="bg-gray-50 dark:bg-gray-700 p-6 rounded-xl shadow-sm"> |
| <div class="w-12 h-12 bg-primary-100 dark:bg-primary-900 rounded-lg flex items-center justify-center mb-4"> |
| <i data-feather="message-circle" class="text-primary-600"></i> |
| </div> |
| <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">گفتگوی فارسی روان</h3> |
| <p class="text-gray-600 dark:text-gray-300">پشتیبانی کامل از زبان فارسی با درک عمیق از فرهنگ و اصطلاحات ایرانی</p> |
| </div> |
| |
| <div class="bg-gray-50 dark:bg-gray-700 p-6 rounded-xl shadow-sm"> |
| <div class="w-12 h-12 bg-primary-100 dark:bg-primary-900 rounded-lg flex items-center justify-center mb-4"> |
| <i data-feather="mic" class="text-primary-600"></i> |
| </div> |
| <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">گفتار به متن و متن به گفتار</h3> |
| <p class="text-gray-600 dark:text-gray-300">قابلیت صحبت کردن و گوش دادن به فارسی با تکنولوژی پیشرفته تشخیص صوت</p> |
| </div> |
| |
| <div class="bg-gray-50 dark:bg-gray-700 p-6 rounded-xl shadow-sm"> |
| <div class="w-12 h-12 bg-primary-100 dark:bg-primary-900 rounded-lg flex items-center justify-center mb-4"> |
| <i data-feather="users" class="text-primary-600"></i> |
| </div> |
| <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">شخصیت‌های مختلف</h3> |
| <p class="text-gray-600 dark:text-gray-300">انتخاب از بین شخصیت‌های مختلف مانند معلم، دکتر، برنامه‌نویس و ...</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-20 bg-primary-600"> |
| <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> |
| <h2 class="text-3xl font-bold text-white mb-4">آماده تجربه آینده هستید؟</h2> |
| <p class="text-primary-100 text-lg mb-8">همین حالا به جامعه PersianAI بپیوندید و قدرت واقعی هوش مصنوعی فارسی را کشف کنید</p> |
| <a href="/register.html" class="bg-white text-primary-600 hover:bg-gray-100 px-8 py-4 rounded-lg text-lg font-semibold transition-all transform hover:scale-105 inline-block"> |
| ساخت حساب رایگان |
| </a> |
| </div> |
| </section> |
|
|
| |
| <footer class="bg-gray-800 text-white py-12"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
| <div> |
| <h3 class="text-lg font-semibold mb-4">PersianAI</h3> |
| <p class="text-gray-400">پیشرفته‌ترین دستیار هوشمند فارسی با قابلیت‌های کامل</p> |
| </div> |
| <div> |
| <h3 class="text-lg font-semibold mb-4">لینک‌های مفید</h3> |
| <ul class="space-y-2 text-gray-400"> |
| <li><a href="/chat.html" class="hover:text-white transition-colors">چت</a></li> |
| <li><a href="/history.html" class="hover:text-white transition-colors">تاریخچه</a></li> |
| <li><a href="/personas.html" class="hover:text-white transition-colors">شخصیت‌ها</a></li> |
| </ul> |
| </div> |
| <div> |
| <h3 class="text-lg font-semibold mb-4">پشتیبانی</h3> |
| <ul class="space-y-2 text-gray-400"> |
| <li><a href="/help.html" class="hover:text-white transition-colors">راهنما</a></li> |
| <li><a href="/contact.html" class="hover:text-white transition-colors">تماس با ما</a></li> |
| </ul> |
| </div> |
| <div> |
| <h3 class="text-lg font-semibold mb-4">حقوقی</h3> |
| <ul class="space-y-2 text-gray-400"> |
| <li><a href="/privacy.html" class="hover:text-white transition-colors">حریم خصوصی</a></li> |
| <li><a href="/terms.html" class="hover:text-white transition-colors">قوانین</a></li> |
| </ul> |
| </div> |
| </div> |
| <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400"> |
| <p>© 2024 PersianAI. تمام حقوق محفوظ است.</p> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| const themeToggle = document.getElementById('themeToggle'); |
| const themeIcon = themeToggle.querySelector('i'); |
| |
| themeToggle.addEventListener('click', () => { |
| document.documentElement.classList.toggle('dark'); |
| const isDark = document.documentElement.classList.contains('dark'); |
| themeIcon.setAttribute('data-feather', isDark ? 'sun' : 'moon'); |
| feather.replace(); |
| }); |
| |
| |
| feather.replace(); |
| |
| |
| const observerOptions = { |
| threshold: 0.1, |
| rootMargin: '0px 0px -50px 0px' |
| }; |
| |
| const observer = new IntersectionObserver((entries) => { |
| entries.forEach(entry => { |
| if (entry.isIntersecting) { |
| entry.target.style.opacity = '1'; |
| entry.target.style.transform = 'translateY(0)'; |
| } |
| }); |
| }, observerOptions); |
| |
| |
| document.querySelectorAll('.bg-gray-50').forEach(card => { |
| card.style.opacity = '0'; |
| card.style.transform = 'translateY(20px)'; |
| card.style.transition = 'opacity 0.6s ease, transform 0.6s ease'; |
| observer.observe(card); |
| }); |
| </script> |
| </body> |
| </html> |
