Spaces:
Running
Running
| <html lang="fa-IR" dir="rtl"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>صفحه اصلی — SuperNova</title> | |
| <meta name="description" content="محصولات دیجیتالی مقیاس‌پذیر با فناوری‌های نوین، استودیو نرم‌افزاری سوپرنوا"> | |
| <link rel="icon" type="image/x-icon" href="/favicon.ico"> | |
| <link rel="canonical" href="https://supernova.com/"> | |
| <link rel="alternate" hreflang="fa-IR" href="https://supernova.com/"> | |
| <link rel="alternate" hreflang="en" href="https://supernova.com/en/"> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet"> | |
| <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: { | |
| colors: { | |
| 'deep-space': '#0B1020', | |
| 'surface': '#0F1724', | |
| 'muted': '#1F2937', | |
| 'text-primary': '#F8FAFC', | |
| 'text-secondary': '#CBD5E1', | |
| 'accent': '#FFD166', | |
| 'accent-secondary': '#7C5CFF', | |
| 'neural-blue': '#1e3a8a', | |
| 'cosmic-purple': '#7c3aed', | |
| }, | |
| fontFamily: { | |
| 'serif': ['Playfair Display', 'serif'], | |
| 'sans': ['Inter', 'system-ui', 'sans-serif'], | |
| }, | |
| spacing: { | |
| '4': '4px', | |
| '8': '8px', | |
| '12': '12px', | |
| '16': '16px', | |
| '24': '24px', | |
| '32': '32px', | |
| '48': '48px', | |
| '64': '64px', | |
| }, | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| html { scroll-behavior: smooth; } | |
| body { font-family: Inter, system-ui, sans-serif; } | |
| @supports (font-variation-settings: normal) { | |
| body { font-family: InterVariable, system-ui, sans-serif; } | |
| } | |
| .hero-parallax-bg { | |
| background: radial-gradient(ellipse at center, rgba(124, 92, 255, 0.1) 0%, transparent 50%), | |
| radial-gradient(ellipse at 80% 20%, rgba(255, 209, 102, 0.08) 0%, transparent 30%); | |
| } | |
| .text-gradient { background: linear-gradient(135deg, #FFD166, #7C5CFF); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } | |
| </style> | |
| </head> | |
| <body class="bg-deep-space text-text-primary overflow-x-hidden"> | |
| <a href="#main" class="sr-only focus:not-sr-only">رفتن به محتوا</a> | |
| <header class="fixed top-0 w-full z-50 bg-surface/80 backdrop-blur-md border-b border-muted/30 transition-all duration-300"> | |
| <nav class="container mx-auto px-4 md:px-6 py-4 flex items-center justify-between"> | |
| <a href="/" class="font-serif text-2xl font-bold text-accent">SuperNova</a> | |
| <ul class="hidden md:flex items-center space-x-8" style="flex-direction: row-reverse;"> | |
| <li><a href="/#services" class="text-text-secondary hover:text-accent transition">خدمات</a></li> | |
| <li><a href="/projects/" class="text-text-secondary hover:text-accent transition">پروژه‌ها</a></li> | |
| <li><a href="/blog/" class="text-text-secondary hover:text-accent transition">بلاگ</a></li> | |
| <li><a href="/careers/" class="text-text-secondary hover:text-accent transition">همکاری</a></li> | |
| <li><a href="/about/" class="text-text-secondary hover:text-accent transition">درباره</a></li> | |
| <li><a href="/services/" class="text-text-secondary hover:text-accent transition">خدمات</a></li> | |
| <li><a href="/contact/" class="bg-accent text-deep-space px-4 py-2 rounded-lg hover:bg-opacity-90 transition">مشاوره</a></li> | |
| </ul> | |
| </nav> | |
| </header> | |
| <main id="main"> | |
| <section class="relative min-h-screen flex items-center justify-center overflow-hidden hero-parallax-bg"> | |
| <div class="absolute inset-0 z-0"> | |
| <canvas id="starfield" class="w-full h-full"></canvas> | |
| </div> | |
| <div class="container mx-auto px-4 text-center z-10"> | |
| <h1 class="font-serif text-5xl md:text-7xl font-bold mb-6 leading-tight"> | |
| ما محصولات دیجیتال مقیاس‌پذیر مهندسی می‌کنیم | |
| <br><span class="text-gradient">— SuperNova</span> | |
| </h1> | |
| <p class="text-xl md:text-2xl text-text-secondary mb-10 max-w-3xl mx-auto"> | |
| از استراتژی تا تولید: محصولات فول‌استک، موبایل، زیرساختی با هوش مصنوعی و DevOps باثبات | |
| </p> | |
| <div class="flex flex-col sm:flex-row gap-4 justify-center"> | |
| <a href="/contact/" class="bg-accent text-deep-space px-8 py-4 rounded-xl text-lg font-semibold hover:bg-opacity-90 transition transform hover:scale-105"> | |
| درخواست مشاوره رایگان | |
| </a> | |
| <a href="/projects/" class="border border-accent text-accent px-8 py-4 rounded-xl text-lg hover:bg-accent hover:text-deep-space transition"> | |
| مشاهده نمونه کارها | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="services" class="py-20 md:py-32 bg-surface"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="font-serif text-4xl md:text-5xl font-bold text-center mb-16">خدمات ما برای مقیاس جهانی</h2> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8"> | |
| <div class="glow-card bg-surface border border-muted rounded-2xl p-8 hover:border-accent transition"> | |
| <div class="w-16 h-16 bg-gradient-to-br from-accent to-accent-secondary rounded-xl mb-6"></div> | |
| <h3 class="text-xl font-semibold mb-3">فول‌استک وب</h3> | |
| <p class="text-text-secondary">معماری میکروسرویس، API طراحی و توسعه پایدار</p> | |
| <a href="/services/full-stack" class="inline-flex items-center text-accent mt-4 hover:underline">بیشتر بدانید <i data-feather="arrow-left" class="w-4 h-4 mr-2"></i></a> | |
| </div> | |
| <div class="glow-card bg-surface border border-muted rounded-2xl p-8 hover:border-accent transition"> | |
| <div class="w-16 h-16 bg-gradient-to-br from-cosmic-purple to-blue-500 rounded-xl mb-6"></div> | |
| <h3 class="text-xl font-semibold mb-3">موبایل</h3> | |
| <p class="text-text-secondary">React Native and Flutter for cross-platform products</p> | |
| <a href="/services/mobile" class="inline-flex items-center text-accent mt-4 hover:underline">بیشتر بدانید <i data-feather="arrow-left" class="w-4 h-4 mr-2"></i></a> | |
| </div> | |
| <div class="glow-card bg-surface border border-muted rounded-2xl p-8 hover:border-accent transition"> | |
| <div class="w-16 h-16 bg-gradient-to-br from-neural-blue to-purple-500 rounded-xl mb-6"></div> | |
| <h3 class="text-xl font-semibold mb-3">هوش مصنوعی</h3> | |
| <p class="text-text-secondary">پردازش تصویر، NLP مدل‌سازی و deployment MLOps</p> | |
| <a href="/services/ai-ml" class="inline-flex items-center text-accent mt-4 hover:underline">بیشتر بدانید <i data-feather="arrow-left" class="w-4 h-4 mr-2"></i></a> | |
| </div> | |
| <div class="glow-card bg-surface border border-muted rounded-2xl p-8 hover:border-accent transition"> | |
| <div class="w-16 h-16 bg-gradient-to-br from-green-500 to-teal-500 rounded-xl mb-6"></div> | |
| <h3 class="text-xl font-semibold mb-3">DevOps</h3> | |
| <p class="text-text-secondary">Kubernetes، CI/CD، monitoring و automated backup</p> | |
| <a href="/services/devops" class="inline-flex items-center text-accent mt-4 hover:underline">بیشتر بدانید <i data-feather="arrow-left" class="w-4 h-4 mr-2"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="py-20 md:py-32"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="font-serif text-4xl md:text-5xl font-bold mb-6">موفقیت‌های قابل‌اندازه‌گیری</h2> | |
| <p class="text-xl text-text-secondary max-w-2xl mx-auto">نتایج واقعی برای شرکت‌های پیشرو</p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="text-center"> | |
| <div class="text-5xl font-bold text-accent mb-2" data-animate="counter">×۳۰</div> | |
| <p class="text-text-secondary">بازده عملکرد برای finTech</p> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-5xl font-bold text-accent mb-2" data-animate="counter">۹۹.۹%</div> | |
| <p class="text-text-secondary">uptime DevOps پلتفرم</p> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-5xl font-bold text-accent mb-2" data-animate="counter">۵۰۰K+</div> | |
| <p class="text-text-secondary">کاربر موبایل برای e-commerce</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <footer class="bg-surface border-t border-muted/30 py-16"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center"> | |
| <h3 class="font-serif text-2xl mb-8">آماده برای ساختن چیزی بی‌نظیر؟</h3> | |
| <div class="max-w-md mx-auto"> | |
| <form class="flex gap-4"> | |
| <input type="email" placeholder="your@email.com" class="flex-1 bg-muted rounded-lg px-4 py-3 text-text-secondary focus:outline-none focus:ring-2 focus:ring-accent"> | |
| <button type="submit" class="bg-accent text-deep-space px-6 py-3 rounded-lg hover:bg-opacity-90 transition">عضویت</button> | |
| </form> | |
| </div> | |
| <div class="mt-8 pt-8 border-t border-muted/50 text-text-secondary"> | |
| <p>© 2024 SuperNova Studio - همه حقوق محفوظ است</p> | |
| <div class="mt-4 space-x-6" style="flex-direction: row-reverse;"> | |
| <a href="/privacy/" class="hover:text-accent transition">حریم‌خصوصی</a> | |
| <a href="/terms/" class="hover:text-accent transition">شرایط استفاده</a> | |
| <a href="/accessibility/" class="hover:text-accent transition">دسترس‌پذیری</a> | |
| <a href="/cookie-policy/" class="hover:text-accent transition">کوکی‌ها</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Starfield animation | |
| const canvas = document.getElementById('starfield'); | |
| const ctx = canvas.getContext('2d'); | |
| let stars = []; | |
| function resizeCanvas() { | |
| canvas.width = window.innerWidth; | |
| canvas.height = window.innerHeight; | |
| initStars(); | |
| } | |
| function initStars() { | |
| stars = []; | |
| for (let i = 0; i < 150; i++) { | |
| stars.push({ | |
| x: Math.random() * canvas.width, | |
| y: Math.random() * canvas.height, | |
| size: Math.random() * 1.5 + 0.5, | |
| speed: Math.random() * 0.5 + 0.1 | |
| }); | |
| } | |
| } | |
| function animateStars() { | |
| ctx.clearRect(0, 0, canvas.width, canvas.height); | |
| ctx.fillStyle = 'rgba(255, 255, 255, 0.8)'; | |
| stars.forEach(star => { | |
| ctx.beginPath(); | |
| ctx.arc(star.x, star.y, star.size, 0, Math.PI * 2); | |
| ctx.fill(); | |
| star.y += star.speed; | |
| if (star.y > canvas.height) { | |
| star.y = 0; | |
| star.x = Math.random() * canvas.width; | |
| } | |
| }); | |
| requestAnimationFrame(animateStars); | |
| } | |
| resizeCanvas(); | |
| animateStars(); | |
| window.addEventListener('resize', resizeCanvas); | |
| // Counter animation | |
| const counters = document.querySelectorAll('[data-animate="counter"]'); | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| anime({ | |
| targets: entry.target, | |
| innerHTML: [0, entry.target.innerHTML], | |
| easing: 'easeOutExpo', | |
| duration: 2000, | |
| round: 1 | |
| }); | |
| observer.unobserve(entry.target); | |
| } | |
| }); | |
| }); | |
| counters.forEach(counter => observer.observe(counter)); | |
| // Header scroll effect | |
| window.addEventListener('scroll', () => { | |
| const header = document.querySelector('header'); | |
| if (window.scrollY > 100) { | |
| header.classList.add('py-2'); | |
| } else { | |
| header.classList.remove('py-2'); | |
| } | |
| }); | |
| // Animation toggle | |
| if (localStorage.getItem('supernova_animations') === 'false') { | |
| document.body.classList.add('reduce-motion'); | |
| } | |
| </script> | |
| <script>feather.replace()</script> | |
| </body> | |
| </html> | |