Spaces:
Running
Running
| <html lang="fa" dir="rtl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>هوش برتر | پلتفرم هوش مصنوعی و API</title> | |
| <meta name="description" content="دسترسی به قدرتمندترین مدل‌های هوش مصنوعی با یکپارچه‌سازی آسان. قیمت‌گذاری شفاف و سرعت بالا."> | |
| <!-- Tailwind CSS --> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <!-- Feather Icons --> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <!-- Google Fonts: Vazirmatn --> | |
| <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;700&display=swap" rel="stylesheet"> | |
| <!-- Tailwind Config --> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| fontFamily: { | |
| sans: ['Vazirmatn', 'sans-serif'], | |
| }, | |
| colors: { | |
| primary: '#4F46E5', // Indigo 600 | |
| secondary: '#10B981', // Emerald 500 | |
| dark: '#0F172A', // Slate 900 | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| /* Custom Animations */ | |
| .fade-in-up { | |
| animation: fadeInUp 0.8s ease-out forwards; | |
| opacity: 0; | |
| transform: translateY(20px); | |
| } | |
| @keyframes fadeInUp { | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .glass-effect { | |
| background: rgba(255, 255, 255, 0.7); | |
| backdrop-filter: blur(10px); | |
| } | |
| .code-block-gradient { | |
| background: linear-gradient(135deg, rgba(79, 70, 229, 0.1) 0%, rgba(16, 185, 129, 0.1) 100%); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-slate-50 text-slate-800 font-sans selection:bg-primary selection:text-white"> | |
| <!-- Navbar --> | |
| <nav class="fixed w-full z-50 glass-effect border-b border-slate-200 transition-all duration-300" id="navbar"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between items-center h-16"> | |
| <!-- Logo --> | |
| <div class="flex-shrink-0 flex items-center gap-2 cursor-pointer" onclick="window.scrollTo(0,0)"> | |
| <div class="w-8 h-8 bg-primary rounded-lg flex items-center justify-center text-white"> | |
| <i data-feather="cpu"></i> | |
| </div> | |
| <span class="font-bold text-xl tracking-tight text-dark">هوش<span class="text-primary">برتر</span></span> | |
| </div> | |
| <!-- Desktop Menu --> | |
| <div class="hidden md:flex space-x-8 space-x-reverse items-center"> | |
| <a href="#features" class="text-slate-600 hover:text-primary font-medium transition">قابلیت‌ها</a> | |
| <a href="#pricing" class="text-slate-600 hover:text-primary font-medium transition">تعرفه‌ها</a> | |
| <a href="#docs" class="text-slate-600 hover:text-primary font-medium transition">مستندات</a> | |
| <a href="#contact" class="text-slate-600 hover:text-primary font-medium transition">تماس با ما</a> | |
| <a href="#" class="bg-primary hover:bg-indigo-700 text-white px-5 py-2 rounded-full font-medium transition shadow-lg shadow-indigo-500/30"> | |
| ورود / ثبت‌نام | |
| </a> | |
| </div> | |
| <!-- Mobile Menu Button --> | |
| <div class="md:hidden flex items-center"> | |
| <button id="mobile-menu-btn" class="text-slate-600 hover:text-dark focus:outline-none"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile Menu Panel --> | |
| <div id="mobile-menu" class="hidden md:hidden bg-white border-t border-slate-100 absolute w-full"> | |
| <div class="px-4 pt-2 pb-4 space-y-1 shadow-lg"> | |
| <a href="#features" class="block px-3 py-2 rounded-md text-base font-medium text-slate-600 hover:bg-slate-50 hover:text-primary">قابلیت‌ها</a> | |
| <a href="#pricing" class="block px-3 py-2 rounded-md text-base font-medium text-slate-600 hover:bg-slate-50 hover:text-primary">تعرفه‌ها</a> | |
| <a href="#docs" class="block px-3 py-2 rounded-md text-base font-medium text-slate-600 hover:bg-slate-50 hover:text-primary">مستندات</a> | |
| <a href="#" class="block mt-4 text-center bg-primary text-white px-3 py-2 rounded-md text-base font-medium">ورود به پنل</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="relative pt-32 pb-20 lg:pt-48 lg:pb-32 overflow-hidden"> | |
| <!-- Background Decoration --> | |
| <div class="absolute top-0 right-0 -mr-20 -mt-20 w-96 h-96 rounded-full bg-primary opacity-10 blur-3xl"></div> | |
| <div class="absolute bottom-0 left-0 -ml-20 -mb-20 w-72 h-72 rounded-full bg-secondary opacity-10 blur-3xl"></div> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center relative z-10"> | |
| <div class="fade-in-up" style="animation-delay: 0.1s;"> | |
| <span class="inline-block py-1 px-3 rounded-full bg-indigo-50 text-primary text-sm font-bold mb-4 border border-indigo-100"> | |
| نسل جدید API های هوش مصنوعی | |
| </span> | |
| </div> | |
| <h1 class="fade-in-up text-4xl md:text-6xl font-bold text-dark tracking-tight mb-6" style="animation-delay: 0.2s;"> | |
| قدرت هوش مصنوعی در <span class="text-transparent bg-clip-text bg-gradient-to-r from-primary to-secondary">کد</span> شما | |
| </h1> | |
| <p class="fade-in-up mt-4 max-w-2xl mx-auto text-xl text-slate-500" style="animation-delay: 0.3s;"> | |
| با استفاده از APIهای ما، متن، تصویر و صدا را با بالاترین کیفیت و سرعت تولید کنید. یکپارچه‌سازی آسان برای توسعه‌دهندگان. | |
| </p> | |
| <div class="fade-in-up mt-8 flex flex-col sm:flex-row justify-center gap-4" style="animation-delay: 0.4s;"> | |
| <a href="#pricing" class="flex items-center justify-center gap-2 bg-primary hover:bg-indigo-700 text-white px-8 py-3.5 rounded-lg font-bold transition shadow-xl shadow-indigo-500/20"> | |
| شروع رایگان <i data-feather="arrow-left" class="w-5 h-5"></i> | |
| </a> | |
| <a href="#docs" class="flex items-center justify-center gap-2 bg-white text-slate-700 border border-slate-200 hover:border-primary hover:text-primary px-8 py-3.5 rounded-lg font-bold transition"> | |
| مستندات فنی <i data-feather="book"></i> | |
| </a> | |
| </div> | |
| <!-- Code Preview --> | |
| <div class="fade-in-up mt-16 max-w-3xl mx-auto text-right bg-dark rounded-xl shadow-2xl overflow-hidden border border-slate-800" style="animation-delay: 0.5s;"> | |
| <div class="flex items-center justify-between px-4 py-2 bg-slate-800"> | |
| <div class="flex gap-2"> | |
| <div class="w-3 h-3 rounded-full bg-red-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-yellow-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-green-500"></div> | |
| </div> | |
| <span class="text-xs text-slate-400 font-mono">JavaScript SDK</span> | |
| </div> | |
| <div class="p-6 overflow-x-auto"> | |
| <pre class="font-mono text-sm text-slate-300"><code><span class="text-purple-400">const</span> ai = <span class="text-purple-400">require</span>(<span class="text-green-400">'ai-hub'</span>); | |
| <span class="text-slate-500">// Generate text with 1 line of code</span> | |
| <span class="text-purple-400">const</span> response = <span class="text-purple-400">await</span> ai.<span class="text-blue-400">generate</span>({ | |
| prompt: <span class="text-green-400">'یک شعر کوتاه در مورد برنامه نویسی'</span>, | |
| model: <span class="text-green-400">'gpt-4-farsi'</span> | |
| }); | |
| <span class="text-slate-500">// Result:</span> | |
| console.<span class="text-blue-400">log</span>(response.text); | |
| <span class="text-slate-500">// Output: کدنویسی هنر من است...</span></code></pre> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section id="features" class="py-20 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-primary font-semibold tracking-wide uppercase text-sm">قابلیت‌ها</h2> | |
| <h3 class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-slate-900 sm:text-4xl"> | |
| همه چیز برای توسعه هوشمند | |
| </h3> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Feature 1 --> | |
| <div class="p-8 rounded-2xl bg-slate-50 border border-slate-100 hover:shadow-xl transition duration-300 group"> | |
| <div class="w-14 h-14 bg-blue-100 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition"> | |
| <i data-feather="message-square" class="text-blue-600 w-7 h-7"></i> | |
| </div> | |
| <h4 class="text-xl font-bold text-slate-900 mb-3">پردازش متن (NLP)</h4> | |
| <p class="text-slate-600 leading-relaxed"> | |
| تولید متن، خلاصه‌سازی، ترجمه و تحلیل احساسات با مدل‌های زبانی پیشرفته فارسی. | |
| </p> | |
| </div> | |
| <!-- Feature 2 --> | |
| <div class="p-8 rounded-2xl bg-slate-50 border border-slate-100 hover:shadow-xl transition duration-300 group"> | |
| <div class="w-14 h-14 bg-purple-100 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition"> | |
| <i data-feather="image" class="text-purple-600 w-7 h-7"></i> | |
| </div> | |
| <h4 class="text-xl font-bold text-slate-900 mb-3">تولید تصویر</h4> | |
| <p class="text-slate-600 leading-relaxed"> | |
| تبدیل متن به تصویر (Text-to-Image) با کیفیت بالا و سبک‌های هنری متنوع. | |
| </p> | |
| </div> | |
| <!-- Feature 3 --> | |
| <div class="p-8 rounded-2xl bg-slate-50 border border-slate-100 hover:shadow-xl transition duration-300 group"> | |
| <div class="w-14 h-14 bg-green-100 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition"> | |
| <i data-feather="mic" class="text-green-600 w-7 h-7"></i> | |
| </div> | |
| <h4 class="text-xl font-bold text-slate-900 mb-3">صوت و گفتار</h4> | |
| <p class="text-slate-600 leading-relaxed"> | |
| تبدیل گفتار به متن (Speech-to-Text) و متن به گفتار (TTS) با صدای طبیعی. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Stats Section --> | |
| <section class="bg-dark py-12"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-2 gap-8 md:grid-cols-4 text-center"> | |
| <div> | |
| <div class="text-4xl font-bold text-white mb-2">+1M</div> | |
| <div class="text-slate-400">درخواست روزانه</div> | |
| </div> | |
| <div> | |
| <div class="text-4xl font-bold text-white mb-2">99.9%</div> | |
| <div class="text-slate-400">آپتایم سرور</div> | |
| </div> | |
| <div> | |
| <div class="text-4xl font-bold text-white mb-2">50+</div> | |
| <div class="text-slate-400">مدل هوشمند</div> | |
| </div> | |
| <div> | |
| <div class="text-4xl font-bold text-white mb-2">12k+</div> | |
| <div class="text-slate-400">توسعه‌دهنده فعال</div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Pricing Section --> | |
| <section id="pricing" class="py-20 bg-slate-50 relative"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-extrabold text-slate-900 sm:text-4xl">قیمت‌گذاری ساده</h2> | |
| <p class="mt-4 text-xl text-slate-500">برنامه‌ای را انتخاب کنید که متناسب با نیاز شماست.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto items-center"> | |
| <!-- Starter Plan --> | |
| <div class="bg-white rounded-2xl shadow-lg border border-slate-100 p-8 transform hover:-translate-y-2 transition duration-300"> | |
| <h3 class="text-xl font-semibold text-slate-900">مبتدی</h3> | |
| <p class="mt-4 text-slate-500 text-sm">مناسب برای تست و پروژه‌های کوچک</p> | |
| <div class="mt-8"> | |
| <span class="text-4xl font-bold text-slate-900">رایگان</span> | |
| <span class="text-slate-500">/ ماهانه</span> | |
| </div> | |
| <ul class="mt-8 space-y-4"> | |
| <li class="flex items-center text-slate-600"><i data-feather="check" class="w-5 h-5 text-green-500 ml-2"></i> ۱۰۰,۰۰۰ کاراکتر</li> | |
| <li class="flex items-center text-slate-600"><i data-feather="check" class="w-5 h-5 text-green-500 ml-2"></i> دسترسی به مدل پایه</li> | |
| <li class="flex items-center text-slate-600"><i data-feather="check" class="w-5 h-5 text-green-500 ml-2"></i> پشتیبانی ایمیلی</li> | |
| </ul> | |
| <a href="#" class="mt-8 block w-full py-3 px-6 border border-primary rounded-lg text-center text-primary hover:bg-primary hover:text-white font-medium transition">شروع رایگان</a> | |
| </div> | |
| <!-- Pro Plan (Popular) --> | |
| <div class="bg-white rounded-2xl shadow-2xl border-2 border-primary p-8 relative scale-105 z-10"> | |
| <div class="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-primary text-white px-4 py-1 rounded-full text-sm font-bold">پرفروش‌ترین</div> | |
| <h3 class="text-xl font-semibold text-slate-900">حرفه‌ای</h3> | |
| <p class="mt-4 text-slate-500 text-sm">برای استارتاپ‌ها و تیم‌های در حال رشد</p> | |
| <div class="mt-8"> | |
| <span class="text-4xl font-bold text-slate-900">۵۹۰,۰۰۰</span> | |
| <span class="text-slate-500">تومان / ماهانه</span> | |
| </div> | |
| <ul class="mt-8 space-y-4"> | |
| <li class="flex items-center text-slate-600"><i data-feather="check" class="w-5 h-5 text-primary ml-2"></i> ۲,۰۰۰,۰۰۰ کاراکتر</li> | |
| <li class="flex items-center text-slate-600"><i data-feather="check" class="w-5 h-5 text-primary ml-2"></i> دسترسی به مدل پیشرفته</li> | |
| <li class="flex items-center text-slate-600"><i data-feather="check" class="w-5 h-5 text-primary ml-2"></i> سرعت بالا (Low Latency)</li> | |
| <li class="flex items-center text-slate-600"><i data-feather="check" class="w-5 h-5 text-primary ml-2"></i> پشتیبانی ۲۴/۷</li> | |
| </ul> | |
| <a href="#" class="mt-8 block w-full py-3 px-6 bg-primary rounded-lg text-center text-white hover:bg-indigo-700 font-bold transition shadow-lg">خرید اشتراک</a> | |
| </div> | |
| <!-- Enterprise Plan --> | |
| <div class="bg-white rounded-2xl shadow-lg border border-slate-100 p-8 transform hover:-translate-y-2 transition duration-300"> | |
| <h3 class="text-xl font-semibold text-slate-900">سازمانی</h3> | |
| <p class="mt-4 text-slate-500 text-sm">برای شرکت‌ها و پروژه‌های بزرگ</p> | |
| <div class="mt-8"> | |
| <span class="text-4xl font-bold text-slate-900">تماس بگیرید</span> | |
| </div> | |
| <ul class="mt-8 space-y-4"> | |
| <li class="flex items-center text-slate-600"><i data-feather="check" class="w-5 h-5 text-green-500 ml-2"></i> نامحدود</li> | |
| <li class="flex items-center text-slate-600"><i data-feather="check" class="w-5 h-5 text-green-500 ml-2"></i> مدل‌های اختصاصی (Fine-tune)</li> | |
| <li class="flex items-center text-slate-600"><i data-feather="check" class="w-5 h-5 text-green-500 ml-2"></i> قرارداد SLA</li> | |
| <li class="flex items-center text-slate-600"><i data-feather="check" class="w-5 h-5 text-green-500 ml-2"></i> استقرار محلی (On-premise)</li> | |
| </ul> | |
| <a href="#" class="mt-8 block w-full py-3 px-6 border border-slate-300 rounded-lg text-center text-slate-700 hover:border-slate-900 hover:text-slate-900 font-medium transition">تماس با فروش</a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact / CTA Section --> | |
| <section id="contact" class="py-20 bg-white"> | |
| <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> | |
| <h2 class="text-3xl font-bold text-slate-900 mb-6">آماده قدرتمند کردن اپلیکیشن خود هستید؟</h2> | |
| <p class="text-xl text-slate-500 mb-8">همین امروز کلید API خود را دریافت کنید و هوش مصنوعی را تجربه کنید.</p> | |
| <form class="flex flex-col sm:flex-row gap-4 justify-center max-w-lg mx-auto"> | |
| <input type="email" placeholder="ایمیل خود را وارد کنید" class="flex-1 px-5 py-3 rounded-lg border border-slate-300 focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary text-right"> | |
| <button type="submit" class="bg-secondary hover:bg-emerald-600 text-white px-8 py-3 rounded-lg font-bold transition shadow-lg shadow-emerald-500/30"> | |
| دریافت کلید | |
| </button> | |
| </form> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-dark text-slate-300 py-12 border-t border-slate-800"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8 mb-8"> | |
| <div class="col-span-2 md:col-span-1"> | |
| <div class="flex items-center gap-2 mb-4"> | |
| <div class="w-6 h-6 bg-primary rounded flex items-center justify-center text-white"> | |
| <i data-feather="cpu" class="w-4 h-4"></i> | |
| </div> | |
| <span class="font-bold text-lg text-white">هوش برتر</span> | |
| </div> | |
| <p class="text-sm text-slate-400">پیشگام در ارائه سرویس‌های هوش مصنوعی برای توسعه‌دهندگان ایرانی.</p> | |
| </div> | |
| <div> | |
| <h4 class="text-white font-bold mb-4">محصول</h4> | |
| <ul class="space-y-2 text-sm"> | |
| <li><a href="#" class="hover:text-white transition">قابلیت‌ها</a></li> | |
| <li><a href="#" class="hover:text-white transition">یکپارچه‌سازی</a></li> | |
| <li><a href="#" class="hover:text-white transition">مستندات</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-white font-bold mb-4">شرکت</h4> | |
| <ul class="space-y-2 text-sm"> | |
| <li><a href="#" class="hover:text-white transition">درباره ما</a></li> | |
| <li><a href="#" class="hover:text-white transition">قیمت‌ها</a></li> | |
| <li><a href="#" class="hover:text-white transition">وبلاگ</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-white font-bold mb-4">پشتیبانی</h4> | |
| <ul class="space-y-2 text-sm"> | |
| <li><a href="#" class="hover:text-white transition">تماس</a></li> | |
| <li><a href="#" class="hover:text-white transition">حریم خصوصی</a></li> | |
| <li><a href="#" class="hover:text-white transition">قوانین</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-slate-800 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-sm text-slate-500">© ۱۴۰۳ تمام حقوق محفوظ است.</p> | |
| <div class="flex space-x-4 space-x-reverse mt-4 md:mt-0"> | |
| <a href="#" class="text-slate-400 hover:text-white"><i data-feather="twitter"></i></a> | |
| <a href="#" class="text-slate-400 hover:text-white"><i data-feather="github"></i></a> | |
| <a href="#" class="text-slate-400 hover:text-white"><i data-feather="instagram"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script src="script.js"></script> | |
| <script>feather.replace();</script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |