Hugging Face's logo

Spaces:
arshia-a1
/
deepsite-project
Running

App Files Community
arshia-a1 commited on
Commit
509902e
·
verified ·
1 Parent(s): e131706

Project summary

Browse files

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.

Files changed (3) hide show
  1. about.html +172 -0
  2. index.html +20 -12
  3. services.html +159 -0
about.html ADDED
@@ -0,0 +1,172 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="fa-IR" dir="rtl">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>درباره ما — SuperNova</title>
7
+ <meta name="description" content="استودیو نرم‌افزاری سوپرنوا — تیم متخصص ساخت محصولات دیجیتال مقیاس‌پذیر با فناوری‌های نوین">
8
+ <link rel="icon" type="image/x-icon" href="/favicon.ico">
9
+ <link rel="canonical" href="https://supernova.com/about/">
10
+ <link rel="alternate" hreflang="fa-IR" href="https://supernova.com/about/">
11
+ <link rel="alternate" hreflang="en" href="https://supernova.com/en/about/">
12
+ <link rel="preconnect" href="https://fonts.googleapis.com">
13
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
14
+ <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
15
+ <script src="https://cdn.tailwindcss.com"></script>
16
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
17
+ <script>
18
+ tailwind.config = {
19
+ theme: {
20
+ extend: {
21
+ colors: {
22
+ 'deep-space': '#0B1020',
23
+ 'surface': '#0F1724',
24
+ 'muted': '#1F2937',
25
+ 'text-primary': '#F8FAFC',
26
+ 'text-secondary': '#CBD5E1',
27
+ 'accent': '#FFD166',
28
+ 'accent-secondary': '#7C5CFF',
29
+ },
30
+ fontFamily: {
31
+ 'serif': ['Playfair Display', 'serif'],
32
+ 'sans': ['Inter', 'system-ui', 'sans-serif'],
33
+ },
34
+ }
35
+ }
36
+ }
37
+ </script>
38
+ </head>
39
+ <body class="bg-deep-space text-text-primary">
40
+ <a href="#main" class="sr-only focus:not-sr-only">رفتن به محتوا</a>
41
+
42
+ <header class="fixed top-0 w-full z-50 bg-surface/80 backdrop-blur-md border-b border-muted/30">
43
+ <nav class="container mx-auto px-4 md:px-6 py-4 flex items-center justify-between">
44
+ <a href="/" class="font-serif text-2xl font-bold text-accent">SuperNova</a>
45
+ <ul class="hidden md:flex items-center space-x-8" style="flex-direction: row-reverse;">
46
+ <li><a href="/" class="text-text-secondary hover:text-accent transition">خانه</a></li>
47
+ <li><a href="/services/" class="text-text-secondary hover:text-accent transition">خدمات</a></li>
48
+ <li><a href="/projects/" class="text-text-secondary hover:text-accent transition">پروژه‌ها</a></li>
49
+ <li><a href="/blog/" class="text-text-secondary hover:text-accent transition">بلاگ</a></li>
50
+ <li><a href="/careers/" class="text-text-secondary hover:text-accent transition">همکاری</a></li>
51
+ <li><a href="/contact/" class="bg-accent text-deep-space px-4 py-2 rounded-lg hover:bg-opacity-90 transition">مشاوره</a></li>
52
+ </ul>
53
+ </nav>
54
+ </header>
55
+
56
+ <main id="main" class="pt-20">
57
+ <!-- Hero -->
58
+ <section class="py-20 md:py-32 bg-gradient-to-b from-surface to-deep-space">
59
+ <div class="container mx-auto px-4 text-center">
60
+ <h1 class="font-serif text-5xl md:text-6xl font-bold mb-6">بنیان‌گذاران مقیاس</h1>
61
+ <p class="text-xl text-text-secondary max-w-3xl mx-auto leading-relaxed">
62
+ از سال ۲۰۱۸، سوپرنوا به استارتاپ‌ها و سازمان‌های پیشرو کمک کرده تا محصولات بزرگ بسازند، زیرساخت‌های پایدار داشته باشند و در بازار پیروز شوند.
63
+ </p>
64
+ </div>
65
+ </section>
66
+
67
+ <!-- Mission -->
68
+ <section class="py-20 md:py-32">
69
+ <div class="container mx-auto px-4 grid lg:grid-cols-2 gap-16 items-center">
70
+ <div>
71
+ <h2 class="font-serif text-4xl font-bold mb-6">ماموریت ما</h2>
72
+ <div class="space-y-4 text-text-secondary">
73
+ <p>ما یک تیم سخت‌کوش از مهندسان و توسعه‌دهندگان هستیم که عمیقاً به کیفیت، مقیاس‌پذیری و خوش‌نامی مشتریان‌مان باور داریم.</p>
74
+ <div class="pt-4 border-t border-muted/20">
75
+ <h3 class="text-lg font-semibold text-text-primary mb-3">ارزش‌های ما</h3>
76
+ <ul class="space-y-2">
77
+ <li class="flex items-center"><i data-feather="check-circle" class="w-4 h-4 ml-2 text-accent"></i> مقیاس‌پذیری (Scalability)</li>
78
+ <li class="flex items-center"><i data-feather="shield" class="w-4 h-4 ml-2 text-accent"></i> قابل اطمینان (Reliability)</li>
79
+ <li class="flex items-center"><i data-feather="diamond" class="w-4 h-4 ml-2 text-accent"></i> زیبایی (Elegance)</li>
80
+ <li class="flex items-center"><i data-feather="zap" class="w-4 h-4 ml-2 text-accent"></i> نوآوری (Innovation)</li>
81
+ </ul>
82
+ </div>
83
+ </div>
84
+ </div>
85
+ <div>
86
+ <img src="http://static.photos/office/768x512/42" alt="تیم سوپرنوا در نشست خلاقانه" class="w-full rounded-2xl object-cover">
87
+ </div>
88
+ </div>
89
+ </section>
90
+
91
+ <!-- Stats -->
92
+ <section class="py-20 bg-surface/50">
93
+ <div class="container mx-auto px-4">
94
+ <div class="grid md:grid-cols-4 gap-8 text-center">
95
+ <div>
96
+ <div class="text-4xl font-bold text-accent mb-2">۶۰+</div>
97
+ <div class="text-text-secondary">پروژه دیجیتال</div>
98
+ </div>
99
+ <div>
100
+ <div class="text-4xl font-bold text-accent mb-2">۵M+</div>
101
+ <div class="text-text-secondary">کاربر نهایی</div>
102
+ </div>
103
+ <div>
104
+ <div class="text-4xl font-bold text-accent mb-2">۹۹.۹۹%</div>
105
+ <div class="text-text-secondary">uptime متوسط</div>
106
+ </div>
107
+ <div>
108
+ <div class="text-4xl font-bold text-accent mb-2">۱۲</div>
109
+ <div class="text-text-secondary">عضو اصلی تیم</div>
110
+ </div>
111
+ </div>
112
+ </div>
113
+ </section>
114
+
115
+ <!-- Team -->
116
+ <section class="py-20 md:py-32">
117
+ <div class="container mx-auto px-4">
118
+ <h2 class="font-serif text-4xl font-bold text-center mb-16">ملاقات با تیم ما</h2>
119
+ <div class="grid md:grid-cols-3 gap-8">
120
+ <div class="bg-surface rounded-2xl p-8">
121
+ <img src="http://static.photos/people/320x320/101" alt="سارا حسینی" class="w-32 h-32 rounded-full mx-auto mb-4 object-cover">
122
+ <h3 class="text-xl font-semibold text-center mb-1">سارا حسینی</h3>
123
+ <div class="text-accent text-sm text-center mb-2">مدیر فنی</div>
124
+ <p class="text-text-secondary text-sm text-center">۱۴ سال تجربه در بک‌اند مقیاس، پیش‌تر در Google و Amazon</p>
125
+ </div>
126
+ <div class="bg-surface rounded-2xl p-8">
127
+ <img src="http://static.photos/people/320x320/102" alt="علی رضایی" class="w-32 h-32 rounded-full mx-auto mb-4 object-cover">
128
+ <h3 class="text-xl font-semibold text-center mb-1">علی رضایی</h3>
129
+ <div class="text-accent text-sm text-center mb-2">راهبر محصول</div>
130
+ <p class="text-text-secondary text-sm text-center">کارشناس DevOps و SRE، افتخار ذخیره ۳۰۰k دلار در هزینه‌های ابری</p>
131
+ </div>
132
+ <div class="bg-surface rounded-2xl p-8">
133
+ <img src="http://static.photos/people/320x320/103" alt="مهسا طاهری" class="w-32 h-32 rounded-full mx-auto mb-4 object-cover">
134
+ <h3 class="text-xl font-semibold text-center mb-1">مهسا طاهری</h3>
135
+ <div class="text-accent text-sm text-center mb-2">معمار الگوریتم</div>
136
+ <p class="text-text-secondary text-sm text-center">مؤلف کتاب "طراحی مدل‌های آزمون‌شده در مقیاس بزرگ"</p>
137
+ </div>
138
+ </div>
139
+ </div>
140
+ </section>
141
+
142
+ <!-- CTA -->
143
+ <section class="py-20 md:py-32 bg-gradient-to-r from-accent/10 to-accent-secondary/10">
144
+ <div class="container mx-auto px-4 text-center">
145
+ <h2 class="font-serif text-4xl font-bold mb-6">آماده‌اید شروع کنیم؟</h2>
146
+ <div class="max-w-2xl mx-auto">
147
+ <p class="text-xl text-text-secondary mb-8">بیایید درباره ایده شما صحبت کنیم و نقشه‌ای برای تبدیل آن به واقعیت بچینیم.</p>
148
+ <a href="/contact/" class="inline-flex items-center bg-accent text-deep-space px-8 py-4 rounded-xl text-lg font-semibold hover:bg-opacity-90 transition">
149
+ برنامه‌ریزی تماس exploratory <i data-feather="arrow-left" class="w-5 h-5 mr-2"></i>
150
+ </a>
151
+ </div>
152
+ </div>
153
+ </section>
154
+ </main>
155
+
156
+ <footer class="bg-surface border-t border-muted/30 py-16">
157
+ <div class="container mx-auto px-4 text-center">
158
+ <div class="mt-8 pt-8 border-t border-muted/50 text-text-secondary">
159
+ <p>&copy; 2024 SuperNova Studio - همه حقوق محفوظ است</p>
160
+ <div class="mt-4 space-x-6" style="flex-direction: row-reverse;">
161
+ <a href="/privacy/" class="hover:text-accent transition">حریم‌خصوصی</a>
162
+ <a href="/terms/" class="hover:text-accent transition">شرایط استفاده</a>
163
+ <a href="/accessibility/" class="hover:text-accent transition">دسترس‌پذیری</a>
164
+ <a href="/cookie-policy/" class="hover:text-accent transition">کوکی‌ها</a>
165
+ </div>
166
+ </div>
167
+ </div>
168
+ </footer>
169
+
170
+ <script>feather.replace()</script>
171
+ </body>
172
+ </html>
index.html CHANGED
@@ -71,10 +71,12 @@
71
  <ul class="hidden md:flex items-center space-x-8" style="flex-direction: row-reverse;">
72
  <li><a href="/#services" class="text-text-secondary hover:text-accent transition">خدمات</a></li>
73
  <li><a href="/projects/" class="text-text-secondary hover:text-accent transition">پروژه‌ها</a></li>
74
- <li><a href="/blog/" class="text-text-secondary hover:text-accent transition">بلاگ</a></li>
75
- <li><a href="/careers/" class="text-text-secondary hover:text-accent transition">همکاری</a></li>
76
- <li><a href="/contact/" class="bg-accent text-deep-space px-4 py-2 rounded-lg hover:bg-opacity-90 transition">مشاوره</a></li>
77
- </ul>
 
 
78
  </nav>
79
  </header>
80
 
@@ -111,23 +113,27 @@
111
  <div class="w-16 h-16 bg-gradient-to-br from-accent to-accent-secondary rounded-xl mb-6"></div>
112
  <h3 class="text-xl font-semibold mb-3">فول‌استک وب</h3>
113
  <p class="text-text-secondary">معماری میکروسرویس، API طراحی و توسعه پایدار</p>
 
114
  </div>
115
  <div class="glow-card bg-surface border border-muted rounded-2xl p-8 hover:border-accent transition">
116
  <div class="w-16 h-16 bg-gradient-to-br from-cosmic-purple to-blue-500 rounded-xl mb-6"></div>
117
  <h3 class="text-xl font-semibold mb-3">موبایل</h3>
118
  <p class="text-text-secondary">React Native and Flutter for cross-platform products</p>
 
119
  </div>
120
  <div class="glow-card bg-surface border border-muted rounded-2xl p-8 hover:border-accent transition">
121
  <div class="w-16 h-16 bg-gradient-to-br from-neural-blue to-purple-500 rounded-xl mb-6"></div>
122
  <h3 class="text-xl font-semibold mb-3">هوش مصنوعی</h3>
123
  <p class="text-text-secondary">پردازش تصویر، NLP مدل‌سازی و deployment MLOps</p>
 
124
  </div>
125
  <div class="glow-card bg-surface border border-muted rounded-2xl p-8 hover:border-accent transition">
126
  <div class="w-16 h-16 bg-gradient-to-br from-green-500 to-teal-500 rounded-xl mb-6"></div>
127
  <h3 class="text-xl font-semibold mb-3">DevOps</h3>
128
  <p class="text-text-secondary">Kubernetes، CI/CD، monitoring و automated backup</p>
 
129
  </div>
130
- </div>
131
  </div>
132
  </section>
133
 
@@ -165,15 +171,17 @@
165
  <button type="submit" class="bg-accent text-deep-space px-6 py-3 rounded-lg hover:bg-opacity-90 transition">عضویت</button>
166
  </form>
167
  </div>
168
- <div class="mt-8 pt-8 border-t border-muted/50 text-text-secondary">
169
- <p>&copy; 2024 SuperNova Studio - همه حقوق محفوظ است</p>
170
- <div class="mt-4 space-x-4" style="flex-direction: row-reverse;">
171
- <a href="/privacy/" class="hover:text-accent transition">حریم‌خصوصی</a>
172
- <a href="/terms/" class="hover:text-accent transition">شرایط استفاده</a>
173
- </div>
174
- </div>
175
  </div>
176
  </div>
 
 
177
  </footer>
178
 
179
  <script>
 
71
  <ul class="hidden md:flex items-center space-x-8" style="flex-direction: row-reverse;">
72
  <li><a href="/#services" class="text-text-secondary hover:text-accent transition">خدمات</a></li>
73
  <li><a href="/projects/" class="text-text-secondary hover:text-accent transition">پروژه‌ها</a></li>
74
+ <li><a href="/blog/" class="text-text-secondary hover:text-accent transition">بلاگ</a></li>
75
+ <li><a href="/careers/" class="text-text-secondary hover:text-accent transition">همکاری</a></li>
76
+ <li><a href="/about/" class="text-text-secondary hover:text-accent transition">درباره</a></li>
77
+ <li><a href="/services/" class="text-text-secondary hover:text-accent transition">خدمات</a></li>
78
+ <li><a href="/contact/" class="bg-accent text-deep-space px-4 py-2 rounded-lg hover:bg-opacity-90 transition">مشاوره</a></li>
79
+ </ul>
80
  </nav>
81
  </header>
82
 
 
113
  <div class="w-16 h-16 bg-gradient-to-br from-accent to-accent-secondary rounded-xl mb-6"></div>
114
  <h3 class="text-xl font-semibold mb-3">فول‌استک وب</h3>
115
  <p class="text-text-secondary">معماری میکروسرویس، API طراحی و توسعه پایدار</p>
116
+ <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>
117
  </div>
118
  <div class="glow-card bg-surface border border-muted rounded-2xl p-8 hover:border-accent transition">
119
  <div class="w-16 h-16 bg-gradient-to-br from-cosmic-purple to-blue-500 rounded-xl mb-6"></div>
120
  <h3 class="text-xl font-semibold mb-3">موبایل</h3>
121
  <p class="text-text-secondary">React Native and Flutter for cross-platform products</p>
122
+ <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>
123
  </div>
124
  <div class="glow-card bg-surface border border-muted rounded-2xl p-8 hover:border-accent transition">
125
  <div class="w-16 h-16 bg-gradient-to-br from-neural-blue to-purple-500 rounded-xl mb-6"></div>
126
  <h3 class="text-xl font-semibold mb-3">هوش مصنوعی</h3>
127
  <p class="text-text-secondary">پردازش تصویر، NLP مدل‌سازی و deployment MLOps</p>
128
+ <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>
129
  </div>
130
  <div class="glow-card bg-surface border border-muted rounded-2xl p-8 hover:border-accent transition">
131
  <div class="w-16 h-16 bg-gradient-to-br from-green-500 to-teal-500 rounded-xl mb-6"></div>
132
  <h3 class="text-xl font-semibold mb-3">DevOps</h3>
133
  <p class="text-text-secondary">Kubernetes، CI/CD، monitoring و automated backup</p>
134
+ <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>
135
  </div>
136
+ </div>
137
  </div>
138
  </section>
139
 
 
171
  <button type="submit" class="bg-accent text-deep-space px-6 py-3 rounded-lg hover:bg-opacity-90 transition">عضویت</button>
172
  </form>
173
  </div>
174
+ <div class="mt-8 pt-8 border-t border-muted/50 text-text-secondary">
175
+ <p>&copy; 2024 SuperNova Studio - همه حقوق محفوظ است</p>
176
+ <div class="mt-4 space-x-6" style="flex-direction: row-reverse;">
177
+ <a href="/privacy/" class="hover:text-accent transition">حریم‌خصوصی</a>
178
+ <a href="/terms/" class="hover:text-accent transition">شرایط استفاده</a>
179
+ <a href="/accessibility/" class="hover:text-accent transition">دسترس‌پذیری</a>
180
+ <a href="/cookie-policy/" class="hover:text-accent transition">کوکی‌ها</a>
181
  </div>
182
  </div>
183
+ </div>
184
+ </div>
185
  </footer>
186
 
187
  <script>
services.html ADDED
@@ -0,0 +1,159 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="fa-IR" dir="rtl">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>خدمات — SuperNova</title>
7
+ <meta name="description" content="خدمات تخصصی سوپرنوا: فول‌استک وب، موبایل، هوش مصنوعی، و DevOps - طراحی و توسعه محصولات دیجیتال مقیاس‌پذیر">
8
+ <link rel="icon" type="image/x-icon" href="/favicon.ico">
9
+ <link rel="canonical" href="https://supernova.com/services/">
10
+ <link rel="alternate" hreflang="fa-IR" href="https://supernova.com/services/">
11
+ <link rel="alternate" hreflang="en" href="https://supernova.com/en/services/">
12
+ <link rel="preconnect" href="https://fonts.googleapis.com">
13
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
14
+ <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
15
+ <script src="https://cdn.tailwindcss.com"></script>
16
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
17
+ </head>
18
+ <body class="bg-deep-space text-text-primary">
19
+ <a href="#main" class="sr-only focus:not-sr-only">رفتن به محتوا</a>
20
+
21
+ <header class="fixed top-0 w-full z-50 bg-surface/80 backdrop-blur-md border-b border-muted/30">
22
+ <nav class="container mx-auto px-4 md:px-6 py-4 flex items-center justify-between">
23
+ <a href="/" class="font-serif text-2xl font-bold text-accent">SuperNova</a>
24
+ <ul class="hidden md:flex items-center space-x-8" style="flex-direction: row-reverse;">
25
+ <li><a href="/" class="text-text-secondary hover:text-accent transition">خانه</a></li>
26
+ <li><a href="/about/" class="text-text-secondary hover:text-accent transition">درباره</a></li>
27
+ <li><a href="/projects/" class="text-text-secondary hover:text-accent transition">پروژه‌ها</a></li>
28
+ <li><a href="/blog/" class="text-text-secondary hover:text-accent transition">بلاگ</a></li>
29
+ <li><a href="/careers/" class="text-text-secondary hover:text-accent transition">همکاری</a></li>
30
+ <li><a href="/contact/" class="bg-accent text-deep-space px-4 py-2 rounded-lg hover:bg-opacity-90 transition">مشاوره</a></li>
31
+ </ul>
32
+ </nav>
33
+ </header>
34
+
35
+ <main id="main" class="pt-20">
36
+ <!-- Hero -->
37
+ <section class="py-20 md:py-32 bg-gradient-to-b from-surface to-deep-space">
38
+ <div class="container mx-auto px-4 text-center">
39
+ <h1 class="font-serif text-5xl md:text-6xl font-bold mb-6">طراحی‌شده برای دامنه جهانی</h1>
40
+ <p class="text-xl text-text-secondary max-w-3xl mx-auto leading-relaxed">
41
+ چهار سرویس تخصصی که به‌صورت هدفمند برای پیاده‌سازی ایده‌های بزرگ شما ساخته شده‌اند.
42
+ </p>
43
+ </div>
44
+ </section>
45
+
46
+ <!-- Services Grid (Full-Stack) -->
47
+ <section class="py-20 md:py-32">
48
+ <div class="container mx-auto px-4">
49
+ <div class="grid lg:grid-cols-2 gap-16 items-center">
50
+ <div>
51
+ <h2 class="font-serif text-4xl font-bold mb-6">فول‌استک وب</h2>
52
+ <h3 class="text-xl text-accent mb-4">توسعه جامع سمت سرور و کلاینت</h3>
53
+ <ul class="space-y-3 text-text-secondary">
54
+ <li class="flex items-start"><i data-feather="check-circle" class="w-5 h-5 ml-3 mt-1 text-accent flex-shrink-0"></i><span>معماری میکروسرویس و مدولار با Docker و Kubernetes</span></li>
55
+ <li class="flex items-start"><i data-feather="check-circle" class="w-5 h-5 ml-3 mt-1 text-accent flex-shrink-0"></i><span>‌API GraphQL و REST مستند و آزمون‌شده</span></li>
56
+ <li class="flex items-start"><i data-feather="check-circle" class="w-5 h-5 ml-3 mt-1 text-accent flex-shrink-0"></i><span>CI/CD چندمرحل‌ای با فلپری</span></li>
57
+ <li class="flex items-start"><i data-feather="check-circle" class="w-5 h-5 ml-3 mt-1 text-accent flex-shrink-0"></i><span>‌Monitoring و Observability با Datadog & Sentry</span></li>
58
+ </ul>
59
+ </div>
60
+ <div>
61
+ <img src="http://static.photos/technology/1024x576/200" alt="سرور در محیط دیتا-سنتر" class="w-full rounded-2xl">
62
+ </div>
63
+ </div>
64
+ </div>
65
+ </section>
66
+
67
+ <!-- Services Grid (Mobile) -->
68
+ <section class="py-20 md:py-32 bg-surface/70">
69
+ <div class="container mx-auto px-4">
70
+ <div class="grid lg:grid-cols-2 gap-16 items-center">
71
+ <div>
72
+ <img src="http://static.photos/mobile/1024x576/201" alt="آیفون در دست" class="w-full rounded-2xl">
73
+ </div>
74
+ <div>
75
+ <h2 class="font-serif text-4xl font-bold mb-6">موبایل کراس‌پلتفرم</h2>
76
+ <h3 class="text-xl text-accent mb-4">React Native و Flutter برای iOS و Android</h3>
77
+ <ul class="space-y-3 text-text-secondary">
78
+ <li class="flex items-start"><i data-feather="smartphone" class="w-5 h-5 ml-3 mt-1 text-accent flex-shrink-0"></i><span>اکوسیستم React Native TypeScript بهینه برای عملکرد</span></li>
79
+ <li class="flex items-start"><i data-feather="smartphone" class="w-5 h-5 ml-3 mt-1 text-accent flex-shrink-0"></i><span>برنامه رسمی Flutter با Call native modules (ETC.)</span></li>
80
+ <li class="flex items-start"><i data-feather="layout" class="w-5 h-5 ml-3 mt-1 text-accent flex-shrink-0"></i><span>UI/UX مقیاس‌پذیر با طراحی اتمی و ری‌یوز</span></li>
81
+ <li class="flex items-start"><i data-feather="upload" class="w-5 h-5 ml-3 mt-1 text-accent flex-shrink-0"></i><span>‌Deployment مخفی برای فروشگاه‌های Apple و Google (Beta)</span></li>
82
+ </ul>
83
+ </div>
84
+ </div>
85
+ </div>
86
+ </section>
87
+
88
+ <!-- Services Grid (AI/ML) -->
89
+ <section class="py-20 md:py-32">
90
+ <div class="container mx-auto px-4">
91
+ <div class="grid lg:grid-cols-2 gap-16 items-center">
92
+ <div>
93
+ <h2 class="font-serif text-4xl font-bold mb-6">AI/ML</h2>
94
+ <h3 class="text-xl text-accent mb-4">مدل‌سازی، وب سرویس و MLOps</h3>
95
+ <ul class="space-y-3 text-text-secondary">
96
+ <li class="flex items-start"><i data-feather="cpu" class="w-5 h-5 ml-3 mt-1 text-accent flex-shrink-0"></i><span>Deep Learning و عکس‌برداری پردازش تصویر با PyTorch</span></li>
97
+ <li class="flex items-start"><i data-feather="message-square" class="w-5 h-5 ml-3 mt-1 text-accent flex-shrink-0"></i><span>‌NLP‌های متن پشتیبانی با OpenAI & Hugging Face</span></li>
98
+ <li class="flex items-start"><i data-feather="git-branch" class="w-5 h-5 ml-3 mt-1 text-accent flex-shrink-0"></i><span>流水线 CI/CD مدل‌های آینده با Kubeflow و MLflow</span></li>
99
+ <li class="flex items-start"><i data-feather="play" class="w-5 h-5 ml-3 mt-1 text-accent flex-shrink-0"></i><span>A/B تستینگ مدل با Canary & Rollback automatik</span></li>
100
+ </ul>
101
+ </div>
102
+ <div>
103
+ <img src="http://static.photos/science/1024x576/202" alt="شبکه‌ی عصبی نمایشی" class="w-full rounded-2xl">
104
+ </div>
105
+ </div>
106
+ </div>
107
+ </section>
108
+
109
+ <!-- Services Grid (DevOps) -->
110
+ <section class="py-20 md:py-32 bg-surface/70">
111
+ <div class="container mx-auto px-4">
112
+ <div class="grid lg:grid-cols-2 gap-16 items-center">
113
+ <div>
114
+ <img src="http://static.photos/industry/1024x576/203" alt="کنسول نرم‌افزار DevOps" class="w-full rounded-2xl">
115
+ </div>
116
+ <div>
117
+ <h2 class="font-serif text-4xl font-bold mb-6">DevOps & SRE</h2>
118
+ <h3 class="text-xl text-accent mb-4">زیرساخت‌های بهینه و سریع برای ماژول‌های جدید</h3>
119
+ <ul class="space-y-3 text-text-secondary">
120
+ <li class="flex items-start"><i data-feather="server" class="w-5 h-5 ml-3 mt-1 text-accent flex-shrink-0"></i><span>ساخت و راه‌اندازی Kubernetes EKS/GKE و self-hosted مدیریت شده</span></li>
121
+ <li class="flex items-start"><i data-feather="layers" class="w-5 h-5 ml-3 mt-1 text-accent flex-shrink-0"></i><span>Platform Engineering IaC با Terraform & Pulumi</span></li>
122
+ <li class="flex items-start"><i data-feather="activity" class="w-5 h-5 ml-3 mt-1 text-accent flex-shrink-0"></i><span>Incident Response و SLO مانیتور شدن با Prometheus/Grafana</span></li>
123
+ <li class="flex items-start"><i data-feather="dollar-sign" class="w-5 h-5 ml-3 mt-1 text-accent flex-shrink-0"></i><span>Cost Optimization با تقسیم‌کننده workload & retention policy</span></li>
124
+ </ul>
125
+ </div>
126
+ </div>
127
+ </div>
128
+ </section>
129
+
130
+ <!-- CTA -->
131
+ <section class="py-20 md:py-32 bg-gradient-to-r from-accent/10 to-accent-secondary/10">
132
+ <div class="container mx-auto px-4 text-center">
133
+ <h2 class="font-serif text-4xl font-bold mb-6">چه مناسب حضور شماست؟</h2>
134
+ <p class="text-xl text-text-secondary mb-8 max-w-2xl mx-auto">بیایید با هم انتخاب بهترین مسیر را برای ایده‌تان بچینیم. کافی‌ست درددل فنی‌ها را بازگو کنید و ما حل می‌کنیم.</p>
135
+ <div class="flex flex-col sm:flex-row gap-4 justify-center">
136
+ <a href="/contact/" class="bg-accent text-deep-space px-8 py-4 rounded-xl text-lg font-semibold hover:bg-opacity-90 transition">مشاوره رایگان رزرو کنید</a>
137
+ <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">مشاهده portoliو واقعی ما</a>
138
+ </div>
139
+ </div>
140
+ </section>
141
+ </main>
142
+
143
+ <footer class="bg-surface border-t border-muted/30 py-16">
144
+ <div class="container mx-auto px-4 text-center">
145
+ <div class="mt-8 pt-8 border-t border-muted/50 text-text-secondary">
146
+ <p>&copy; 2024 SuperNova Studio - همه حقوق محفوظ است</p>
147
+ <div class="mt-4 space-x-6" style="flex-direction: row-reverse;">
148
+ <a href="/privacy/" class="hover:text-accent transition">حریم‌خصوصی</a>
149
+ <a href="/terms/" class="hover:text-accent transition">شرایط استفاده</a>
150
+ <a href="/accessibility/" class="hover:text-accent transition">دسترس‌پذیری</a>
151
+ <a href="/cookie-policy/" class="hover:text-accent transition">کوکی‌ها</a>
152
+ </div>
153
+ </div>
154
+ </div>
155
+ </footer>
156
+
157
+ <script>feather.replace()</script>
158
+ </body>
159
+ </html>