Project summary

Build a production-grade corporate website for SuperNova — an elite software studio delivering full-stack, mobile, AI/ML and DevOps solutions. The website’s primary goals are to convert visitors into qualified leads and to showcase measurable, high-impact case studies. Default locale: fa-IR (Persian) with English /en/ as an additional language. Timezone: Asia/Baku.

Brand & tone
Voice: confident, concise, expert, result-focused. Brand values: Scalability, Reliability, Elegance, Innovation. All messaging should be tightly focused on outcomes, trust, and technical credibility.

Visual design (palette left to builder)
Theme direction: Classic-Modern Luxury — dark-leaning base and subtle accent options are acceptable, but exact colors are NOT prescribed here.

Instruction to designer/builder: Choose a refined, cohesive color palette that fits the Classic-Modern Luxury brief. Ensure all text and UI foregrounds meet WCAG contrast requirements (body text ≥ 4.5:1). Use accent color(s) sparingly for CTAs and micro-accents. Provide the final palette as design tokens and include accessible variants.

Provide a responsive design system (Figma + tokens). Typography: headings use a serif for elegance; body use a modern sans for readability. font-display: swap. Type scale: H1 desktop 56 / mobile 32, H2 desktop 40 / mobile 24, body 16px base, line-height 1.6. Spacing scale and radii should be included in tokens.

Imagery: hero background option = particle/starfield (SVG/canvas/WebGL). Provide images in AVIF/WebP/JPEG; responsive widths: [320,480,768,1024,1280,1600,1920]. OG image size: 1200×630.

Layout & responsiveness
Mobile-first approach. 12-column grid on desktop. Breakpoints: xs 320, sm 640, md 768, lg 1024, xl 1280, 2xl 1536. All elements must be customizable per breakpoint (font size, spacing, grid span, animation overrides). Provide a visual responsive editor in the builder with device previews for xs/sm/md/lg/xl/2xl and per-element property editors.

Pages & components
Deliver pages: Home, About, Services (Full-Stack, Mobile, AI/ML, DevOps), Projects / Case Studies (filterable), Blog, Careers, Contact, Docs (optional), Privacy, Terms, Accessibility. Components/patterns: sticky header (shrink-on-scroll), compact footer (newsletter), hero (headline, subheadline, 2 CTAs), services grid, project cards, case study template (Problem → Approach → Architecture → Tech Stack → Metrics → Screenshots → Testimonial → CTA), blog list & article template, forms (contact & job apply), Storybook UI kit.

Hero microcopy (example)
Headline: We engineer digital products that scale — SuperNova
Subheadline: From strategy to production: full-stack, mobile, AI-driven products, and rock-solid DevOps.
CTAs: Primary = Request a free consultation → /contact/ ; Secondary = See our work → /projects/

Animations & advanced graphics (FULL REQUIREMENT)
Provide a comprehensive animation system with per-element controls and presets. Multi-tech approach: Framer Motion (primary), GSAP (optional advanced sequences), Lottie / Rive (vector animations), Three.js / WebGL (hero/interactive visualizations). Key points:

Global settings: animations enabled on mobile by default, but respect prefers-reduced-motion; include a site control and cookie toggle (supernova_animations) allowing users to enable/disable animations. Provide a reduced-motion fallback (fade-only) and lightweight fallbacks for low-power devices.

Performance goal: target 60fps for interactions. If average FPS < 45 for 3s, automatically switch to low mode (opacity-only). Max concurrently animated elements on mobile: 3 (configurable). Hero WebGL only enabled if device passes hardware & FPS checks; otherwise use Lottie or static image fallback.

Animation types: entrance (fade/slide/scale on inView/onLoad), scroll-driven parallax/timeline, hover/focus microinteractions, looping decorative animations (subtle), SVG path draw/morph, Lottie interactive (seekable by scroll/input), optional WebGL shaders for hero only.

Presets library (include examples): fade-up, swipe-left, micro-bounce, parallax-slow, glow-pulse. Document exact easing/duration defaults and allow override.

Component animation schema: for each component allow fields: preset, trigger (onLoad, inView, scroll, hover, focus, manual), duration_ms, delay_ms, easing, intensity (0..1), loop, mobile_enabled, responsive_overrides (breakpoint map), performance_mode (auto/high/low), fallback_strategy.

Expose per-component/per-element animation controls in the builder UI and document presets in an Animation Guide.

Microinteraction default: hover scale ~1.02 with ~180ms duration and accessible touch equivalents (touch ripple). Provide reduced-motion toggle in settings and cookie panel.

Responsive customization
Every element must support per-breakpoint overrides for font_size, line_height, margin, padding, width, height, grid_span, and animation_override. Use CSS clamp/fluid spacing and responsive type scale tokens. Provide a UI that allows tuning duration, delay, easing, intensity, and enable/disable per breakpoint.

Tech stack & architecture
Frontend: Next.js (React) + TypeScript + TailwindCSS + Framer Motion (GSAP/Three.js optional). CMS: Sanity or Strapi or MDX for blog. Hosting: Vercel preferred (Netlify alternative). Image CDN: Cloudflare Images or Imgix. Search: Algolia or Elasticsearch. Email: SendGrid or Mailgun. Captcha: reCAPTCHA v3 or hCaptcha. Analytics: GA4 (server-side optional) and Plausible as privacy-friendly alternative.

SEO, metadata & structured data

Title template: {pageTitle} — SuperNova. Unique meta descriptions (≤160 chars) per page. OG + Twitter card (summary_large_image). Dynamic OG images generated for blog/projects (overlay title+slug).

JSON-LD: include Organization, WebSite (SearchAction), BreadcrumbList, Article/BlogPosting, and Project structured data (include measurable metrics).

URL slug pattern: /{type}/{slug}/. Enable canonical tags, hreflang for multilingual. Auto-generate sitemap.xml (weekly changefreq) and robots.txt (allow /, disallow /admin & /private).

Performance & acceptance metrics
Lighthouse targets (desktop & mobile): Performance ≥ 90, Accessibility ≥ 90, Best Practices ≥ 90, SEO ≥ 90. Budgets: initial JS ≤ 200 KB gzipped, total CSS ≤ 100 KB, font load ≤ 50 KB. Metrics targets: LCP < 2500 ms (mobile), FCP < 1500 ms, TBT < 200 ms, CLS < 0.1. Critical CSS for hero must be inlined. Use responsive images, AVIF/WebP, lazy loading, http2/QUIC, preconnect for fonts/CDN. Implement ISR for projects/blog and dynamic rendering for heavy interactive pages.

Accessibility (WCAG 2.1 AA)

lang attribute, skip-to-content link, visible focus styles, semantic HTML5 landmarks, ARIA only where necessary.

Color contrast: ensure body text meets ≥ 4.5:1. Touch targets ≥ 44px. Forms with labels and clear error messages. Keyboard navigation for all interactive elements. Default respects reduced-motion; allow user opt-in for richer animations.

Security & privacy
Security headers: HSTS (max-age=63072000; includeSubDomains; preload), initial CSP report-only then tighten, X-Frame-Options DENY, X-Content-Type-Options nosniff. GDPR cookie consent with granular analytics opt-out and animation consent toggle. Provide clear privacy & cookie policies and data retention info in admin.

DevOps, testing & observability

CI/CD: GitHub Actions (lint, test, build, preview, deploy). Preview deploys for PRs.

Tests: Unit (Jest + React Testing Library), E2E (Playwright) covering critical flows and animation toggles. Coverage target ≥ 80%. Include animation-specific tests: verify mobile_enabled flags, fallback triggers, FPS sampling behavior.

Monitoring: Sentry for errors; session replay opt-in (LogRocket or similar); external uptime checks.

Content & CMS models
Provide content schemas for Project, Blog, Team Member and deliver a sample set of entries. Project model must include metrics (label, value, unit) to enable structured data.

Deliverables

Figma design system with tokens and responsive components.

Production-ready Next.js repo in TypeScript with Tailwind, Storybook, tests, and README.

Animation Guide + presets doc.

SEO checklist, deployment runbook, and editor how-to.

Dynamic OG generator for blog/projects.

Acceptance criteria

Lighthouse targets met.

WCAG AA checks for key pages pass.

Animations active on mobile by default but user can opt-out; reduced-motion respected unless user explicitly opts-in.

System adaptively falls back to low-cost animations on low-performance devices.

Per-element responsive overrides available and functional in builder preview.

Hero WebGL only enabled after hardware checks; otherwise use Lottie/image fallback.

Animation presets documented and available in CMS/UI editor.

Notes for the builder

Provide reduced-motion toggle in the site settings and cookie panel.

Implement FPS sampling and adaptive animation complexity (auto mode).

Expose per-component animation controls in visual editor for fine-grain tuning per breakpoint.

Generate dynamic OG images with title+slug overlay for blog/projects.

Use ISR for projects/blog and dynamic rendering for heavy interactive pages.

Add A/B testing hooks for hero headline and CTA variations to measure conversion uplift.

index.html

@@ -1,19 +1,262 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
+
+<!DOCTYPE html>
+<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="/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>
+					</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>
+					</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>
+					</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>
+					</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>&copy; 2024 SuperNova Studio - همه حقوق محفوظ است</p>
+					<div class="mt-4 space-x-4" style="flex-direction: row-reverse;">
+						<a href="/privacy/" class="hover:text-accent transition">حریم‌خصوصی</a>
+						<a href="/terms/" class="hover:text-accent transition">شرایط استفاده</a>
+					</div>
+				</div>
+			</div>
 		</div>
-	</body>
+	</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>