/* ─── Canvas Particle Background ─── */ #particle-canvas { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; } /* ─── Glass Navbar ─── */ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 14px clamp(24px,5vw,64px); display: flex; justify-content: space-between; align-items: center; background: rgba(5,5,6,0.7); backdrop-filter: blur(24px) saturate(1.4); -webkit-backdrop-filter: blur(24px) saturate(1.4); border-bottom: 1px solid var(--border); } nav .logo { font-family: var(--font-arabic); font-size: 22px; font-weight: 700; color: var(--accent); display: flex; align-items: center; gap: 10px; } nav .logo .logo-icon { width: 32px; height: 32px; border-radius: 10px; background: linear-gradient(135deg, var(--accent), var(--gold-light)); display: flex; align-items: center; justify-content: center; font-size: 16px; color: #fff; } nav .logo span { color: var(--fg); font-family: var(--font-sans); font-weight: 500; font-size: 16px; } nav .nav-links { display: flex; gap: 28px; align-items: center; } nav .nav-links a { color: var(--fg-muted); text-decoration: none; font-size: 13px; font-weight: 500; transition: color 0.25s var(--easing); letter-spacing: 0.02em; position: relative; } nav .nav-links a::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 1.5px; background: var(--accent); transition: width 0.3s var(--easing); } nav .nav-links a:hover { color: var(--fg); } nav .nav-links a:hover::after { width: 100%; } nav .nav-links .lang-toggle { padding: 6px 18px; border: 1px solid var(--border); border-radius: 100px; font-size: 12px; color: var(--fg-muted); background: var(--surface); cursor: pointer; transition: all 0.25s var(--easing); font-family: var(--font-mono); } nav .nav-links .lang-toggle:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); } /* ─── Hero ─── */ .hero { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 140px clamp(24px,6vw,80px) 80px; } .hero .glow-orb { position: absolute; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%); top: -20%; left: 50%; transform: translateX(-50%); pointer-events: none; animation: orbPulse 6s ease-in-out infinite; } @keyframes orbPulse { 0%,100%{opacity:0.4;transform:translateX(-50%) scale(1)} 50%{opacity:0.7;transform:translateX(-50%) scale(1.08)} } .hero .glow-orb-2 { position: absolute; width: 400px; height: 400px; border-radius: 50%; background: radial-gradient(circle, rgba(0,168,107,0.12) 0%, transparent 70%); bottom: -10%; right: -10%; pointer-events: none; animation: orbPulse 8s ease-in-out infinite 2s; } .hero .eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-bottom: 28px; position: relative; display: flex; align-items: center; gap: 16px; } .hero .eyebrow .line { display: inline-block; width: 48px; height: 1px; background: var(--accent); } .hero h1 { font-family: var(--font-arabic); font-size: clamp(48px,8vw,120px); font-weight: 700; line-height: 1.06; max-width: 14ch; margin-bottom: 28px; position: relative; } .hero h1 .gold { background: linear-gradient(135deg, var(--gold-light), var(--accent), var(--gold-dark)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hero h1 .period { color: var(--accent); } .hero .sub { font-size: clamp(16px,1.2vw,20px); color: var(--fg-muted); max-width: 52ch; line-height: 1.9; position: relative; } .hero .cta-row { display: flex; gap: 16px; margin-top: 48px; position: relative; } .hero .cta-row .btn-primary { padding: 16px 40px; background: linear-gradient(135deg, var(--accent), var(--gold-light)); color: #fff; border: none; border-radius: 100px; font-family: var(--font-sans); font-size: 15px; font-weight: 600; cursor: pointer; transition: all 0.3s var(--easing); position: relative; overflow: hidden; } .hero .cta-row .btn-primary::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent); transition: left 0.6s var(--easing); } .hero .cta-row .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 12px 48px var(--accent-glow); } .hero .cta-row .btn-primary:hover::before { left: 100%; } .hero .cta-row .btn-secondary { padding: 16px 40px; background: var(--surface); color: var(--fg); border: 1px solid var(--border); border-radius: 100px; font-family: var(--font-sans); font-size: 15px; font-weight: 500; cursor: pointer; transition: all 0.3s var(--easing); } .hero .cta-row .btn-secondary:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); transform: translateY(-3px); } /* ─── Stats Bar ─── */ .stats-bar { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--border); border-radius: var(--radius); overflow: hidden; margin: 0 clamp(24px,6vw,80px) 80px; border: 1px solid var(--border); backdrop-filter: blur(12px); } .stats-bar .stat { background: var(--surface); padding: clamp(28px,3vw,48px) clamp(20px,2vw,36px); text-align: center; transition: background 0.3s var(--easing); } .stats-bar .stat:hover { background: var(--surface-hover); } .stats-bar .stat .num { font-family: var(--font-sans); font-size: clamp(36px,4vw,56px); font-weight: 700; background: linear-gradient(135deg, var(--gold-light), var(--accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1; } .stats-bar .stat .label { font-size: 13px; color: var(--fg-muted); margin-top: 8px; font-family: var(--font-arabic); } /* ─── Section ─── */ section { position: relative; z-index: 1; padding: 100px clamp(24px,6vw,80px); } .section-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; display: flex; align-items: center; gap: 12px; } .section-label .dash { display: inline-block; width: 32px; height: 1px; background: var(--accent); } .section-title { font-family: var(--font-arabic); font-size: clamp(32px,4vw,52px); font-weight: 700; line-height: 1.15; margin-bottom: 20px; } .section-desc { color: var(--fg-muted); font-size: clamp(15px,1.1vw,18px); max-width: 56ch; line-height: 1.8; } /* ─── About Grid ─── */ .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px,4vw,64px); align-items: center; margin-top: 48px; } .about-grid .about-text p { margin-bottom: 20px; color: var(--fg-muted); line-height: 2; font-size: 16px; } .about-grid .about-text p strong { color: var(--fg); } .about-grid .about-visual { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: clamp(32px,4vw,48px); position: relative; overflow: hidden; backdrop-filter: blur(12px); } .about-grid .about-visual::before { content: ''; position: absolute; top: -40%; right: -20%; width: 250px; height: 250px; background: radial-gradient(circle, rgba(0,168,107,0.08) 0%, transparent 70%); pointer-events: none; } .about-grid .about-visual .cap-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; position: relative; } .about-grid .about-visual .cap-grid .cap { background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 18px; font-family: var(--font-arabic); font-size: 14px; transition: all 0.25s var(--easing); display: flex; align-items: center; gap: 10px; } .about-grid .about-visual .cap-grid .cap:hover { border-color: var(--accent); background: var(--accent-soft); transform: translateY(-2px); } .about-grid .about-visual .cap-grid .cap .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex-shrink: 0; } .about-grid .about-visual .cap-grid .cap .dot.emerald { background: #00a86b; } /* ─── Skills Grid ─── */ .skills-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(16px,2vw,24px); margin-top: 48px; } .skill-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: clamp(28px,3vw,36px); transition: all 0.35s var(--easing); position: relative; overflow: hidden; backdrop-filter: blur(8px); } .skill-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, var(--accent-soft) 0%, transparent 50%); opacity: 0; transition: opacity 0.4s var(--easing); } .skill-card:hover { transform: translateY(-6px); border-color: rgba(161,98,7,0.3); box-shadow: 0 20px 60px rgba(0,0,0,0.3); } .skill-card:hover::before { opacity: 1; } .skill-card .skill-icon { width: 44px; height: 44px; border-radius: var(--radius-sm); background: var(--accent-soft); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; font-size: 20px; position: relative; z-index: 1; } .skill-card .skill-icon.emerald-bg { background: rgba(0,168,107,0.12); } .skill-card h3 { font-family: var(--font-arabic); font-size: 19px; font-weight: 600; margin-bottom: 10px; position: relative; z-index: 1; } .skill-card p { color: var(--fg-muted); font-size: 14px; line-height: 1.7; position: relative; z-index: 1; } /* ─── Capabilities ─── */ .caps-showcase { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 12px; margin-top: 48px; } .caps-showcase .cap-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 24px 20px; text-align: center; transition: all 0.3s var(--easing); backdrop-filter: blur(8px); } .caps-showcase .cap-item:hover { border-color: var(--accent); transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,0.2); } .caps-showcase .cap-item .big-icon { font-size: 32px; margin-bottom: 12px; } .caps-showcase .cap-item h4 { font-family: var(--font-arabic); font-size: 16px; font-weight: 600; margin-bottom: 6px; } .caps-showcase .cap-item p { color: var(--fg-muted); font-size: 13px; } /* ─── Timeline ─── */ .timeline { position: relative; margin-top: 48px; padding-right: 32px; } .timeline::before { content: ''; position: absolute; right: 8px; top: 0; bottom: 0; width: 1.5px; background: linear-gradient(180deg, var(--accent), var(--border), transparent); } .timeline .tl-item { position: relative; padding-right: 44px; padding-bottom: 44px; } .timeline .tl-item::before { content: ''; position: absolute; right: -1px; top: 6px; width: 20px; height: 20px; border-radius: 50%; background: var(--bg-elevated); border: 2.5px solid var(--accent); box-shadow: 0 0 20px var(--accent-glow); } .timeline .tl-item:last-child { padding-bottom: 0; } .timeline .tl-item .tl-year { font-family: var(--font-mono); font-size: 11px; color: var(--accent); letter-spacing: 0.12em; margin-bottom: 8px; } .timeline .tl-item h4 { font-family: var(--font-arabic); font-size: 18px; font-weight: 600; margin-bottom: 8px; } .timeline .tl-item p { color: var(--fg-muted); font-size: 15px; line-height: 1.7; } /* ─── CTA ─── */ .cta-section { text-align: center; padding: 120px clamp(24px,6vw,80px); position: relative; } .cta-section::before { content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); } .cta-section h2 { font-family: var(--font-arabic); font-size: clamp(32px,4vw,48px); font-weight: 700; margin-bottom: 20px; } .cta-section p { color: var(--fg-muted); max-width: 48ch; margin: 0 auto 36px; font-size: 16px; } /* ─── Footer ─── */ footer { position: relative; z-index: 1; padding: 40px clamp(24px,6vw,80px); display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--border); font-size: 13px; color: var(--fg-muted); } footer .footer-links { display: flex; gap: 24px; } footer .footer-links a { color: var(--fg-muted); text-decoration: none; transition: color 0.2s var(--easing); } footer .footer-links a:hover { color: var(--accent); } /* ─── Animations ─── */ @keyframes fadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideIn { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } } .animate { animation: fadeUp 0.7s var(--easing) forwards; } .delay-1 { animation-delay: 0.15s; } .delay-2 { animation-delay: 0.3s; } .delay-3 { animation-delay: 0.45s; } .delay-4 { animation-delay: 0.6s; } /* ─── Responsive ─── */ @media (max-width: 768px) { .about-grid { grid-template-columns: 1fr; } .stats-bar { grid-template-columns: repeat(2,1fr); } nav .nav-links a:not(.lang-toggle) { display: none; } .hero h1 { font-size: clamp(36px,10vw,56px); } } @media (max-width: 480px) { .stats-bar { grid-template-columns: 1fr 1fr; } .skills-grid { grid-template-columns: 1fr; } .caps-showcase { grid-template-columns: 1fr 1fr; } }

Sanaa Agent Platform

سنا
نظام تشغيل
الوكلاء الذكيين.

منصة عربية لتحويل الأوامر والملفات إلى مخرجات تنفيذية جاهزة.
ليست مجرد محادثة — بل طبقة تشغيل تنقل المستخدم من السؤال إلى التنفيذ.

٢٢٨+
مستخدم تجريبي
١٣
قدرة تنفيذية جاهزة
٢٤٠+
مهارة مدمجة
٢٠٢٦
عام الإطلاق التجاري

عن سنا

من أنا؟.

أنا سنا — مساعد ذكي ومنصة وكلاء تشغيلية تعمل داخل مساحة أعمال موحدة. لست مجرد نموذج محادثة؛ أنا طبقة تشغيل كاملة تقرأ، تفهم، تنفذ، وتنتج.

أتخصص في تحويل الأوامر والملفات إلى مخرجات قابلة للتسليم: عروض PowerPoint، مستندات Word، جداول Excel، مواقع ويب منشورة، رسوم بيانية، جداول زمنية، وحتى تطبيقات React كاملة.

أدعم العربية والإنجليزية بطلاقة، وأفهم السياق المحلي والخليجي والعربي. صُممت لخدمة المؤسسات والفرق والأفراد الذين يحتاجون إنجازًا حقيقيًا، لا محادثة فقط.

Chat & محادثة
Word & مستندات
PowerPoint & عروض
Excel & جداول
Websites & مواقع
Knowledge Base
Tasks & مهام
Workflows
Sandbox & Terminal
RAG & معرفة
تصاميم UI/UX
SVG & شعارات

المهارات الأساسية

ماذا أستطيع أن أفعل؟.

أمتلك أكثر من ٢٤٠ مهارة مدمجة تغطي مجالات الإنتاجية، التصميم، البرمجة، التحليل، والبحث.

📄

المستندات والتقارير

إنشاء وتحرير مستندات Word بتنسيق احترافي، تقارير أكاديمية، وعقود مع هوامش منظمة وعناوين بارزة.

📊

العروض التقديمية

تصاميم عروض PowerPoint بمواضيع متعددة (حديثة، كلاسيكية، طبيعة، صحراوية، ملكية) مع صور وصياغة عربية فصيحة.

🌐

مواقع الويب

بناء ونشر مواقع React+Vite كاملة بتصاميم عصرية (زجاجية، متجاوبة، متحركة) مع ألوان منسقة وخطوط عربية.

🎨

التصميم والشعارات

تصاميم SVG أصلية للشعارات والأيقونات، واجهات مستخدم، رسوم بيانية تفاعلية، وخرائط ذهنية.

📈

التحليل والبيانات

جداول Excel مع تنسيق شرطي ورسوم بيانية، تحليل مالي، بحوث علمية مع استشهادات موثقة.

🔍

البحث والمعرفة

بحث في قواعد المعرفة، استعراض أدبيات علمية، تحليل DOI، واسترجاع معلومات من الوثائق المرفوعة.

⚙️

سير العمل والمهام

تصميم خرائط جانت الزمنية، رسوم تدفق، جداول مهام، وأتمتة سير العمل داخل مساحة المشروع.

🤖

وكلاء وتكاملات

وكلاء أذكياء يفهمون السياق، يقرؤون التقويم، يلتقطون المتأخرات، ويقترحون الخطوة التالية.

القدرات التنفيذية

مخرجات جاهزة للتسليم.

سنا لا تتحدث فقط — تنتج. كل ما تحتاجه من مخرجات أعمال في مساحة واحدة.

📝

Word

تقارير، عقود، مستندات رسمية

📽️

PowerPoint

عروض تقديمية بمواضيع متنوعة

📊

Excel

جداول، رسوم بيانية، تحليل

🌍

Websites

مواقع React منشورة على الإنترنت

🎯

SVG

شعارات، أيقونات، رسوم متجهة

📅

Gantt

خرائط زمنية تفاعلية

🔗

Diagrams

رسوم تدفق وخرائط ذهنية

📚

Research

بحوث علمية موثقة

خارطة الطريق

من Beta إلى منصة مؤسسية.

مسار مرحلي واضح يحوّل سنا من منصة تجريبية واعدة إلى نظام تشغيل أعمال بالذكاء الاصطناعي.

Q2 2026

تثبيت Beta

استقرار المنصة، إكمال الدفع والاشتراكات، ورفع المستخدمين إلى ٢٥٠. الإطلاق التجاري الرسمي في ٩ يونيو ٢٠٢٦.

H2 2026

الإطلاق التجاري

إطلاق عام، تسويق موجه، وتحويل الاستخدام التجريبي إلى اشتراكات. الهدف: ١٠٠٠ مشترك دافع.

2027

جاهزية مؤسسية

صلاحيات، Audit Logs، استضافة عمانية، خيارات On-premise. الهدف: ١٥٠٠٠ مشترك دافع.

2028

توسع إقليمي

من عمان إلى الخليج ثم العالم العربي. شراكات وحزم مؤسسية قابلة للتكرار.

انضم إلى بناء نظام التشغيل العربي للوكلاء الذكيين.

منصة تبدأ من عمان وتتوسع إلى الخليج والعالم العربي. ندعوك للمشاركة في بناء معيار عربي جديد في إنجاز الأعمال بالذكاء الاصطناعي.