| <!doctype html> |
| <html lang="ar" dir="rtl"> |
| <head> |
| <meta charset="utf-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" /> |
| <title>إيفاء | نُمكّن الإنسان ليصنع أثره</title> |
| <meta name="description" content="تصور حديث Mobile First للواجهة الرقمية لإيفاء يبرز التمكين والتأهيل وجودة الحياة والأثر الإنساني." /> |
| <meta name="theme-color" content="#512667" /> |
|
|
|
|
| <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=IBM+Plex+Sans+Arabic:wght@400;500;600;700;800&display=swap" rel="stylesheet" /> |
| <link rel="stylesheet" href="style.css" /> |
|
|
| <meta property="og:type" content="website"> |
| <meta property="og:locale" content="ar_SA"> |
| <meta property="og:title" content="إيفاء | نُمكّن الإنسان ليصنع أثره"> |
| <meta property="og:description" content="تصور رقمي حديث لتجربة إيفاء في التأهيل والتمكين وجودة الحياة."> |
| <meta property="og:image" content="assets/images/og-preview.svg"> |
| <meta property="og:image:alt" content="إيفاء - نُمكّن الإنسان ليصنع أثره"> |
| <meta name="twitter:card" content="summary_large_image"> |
| <meta name="twitter:title" content="إيفاء | نُمكّن الإنسان ليصنع أثره"> |
| <meta name="twitter:description" content="تصور رقمي حديث لتجربة إيفاء في التأهيل والتمكين وجودة الحياة."> |
| <meta name="twitter:image" content="assets/images/og-preview.svg"> |
|
|
| </head> |
| <body> |
| <a class="skip-link" href="#main">تجاوز إلى المحتوى</a> |
| <div class="scroll-progress" id="scrollProgress" aria-hidden="true"></div> |
|
|
| <header class="site-header" id="siteHeader"> |
| <nav class="nav container" aria-label="التنقل الرئيسي"> |
| <a class="brand" href="#hero" aria-label="إيفاء - الرئيسية"> |
| <span class="brand-logo-wrap" aria-hidden="true"> |
| <img src="https://psrc.org.sa/wp-content/uploads/sites/3740/2026/08/IMG_1690.png" alt="" class="brand-logo" /> |
| </span> |
| <span class="brand-copy"><strong>إيفاء</strong><small>مجمع الأمير سلطان للتأهيل</small></span> |
| </a> |
|
|
| <div class="nav-links" aria-label="روابط الصفحة"> |
| <a href="#about">عن إيفاء</a> |
| <a href="#centers">مراكزنا</a> |
| <a href="#impact">أثرنا</a> |
| <a href="#projects">المشاريع</a> |
| <a href="#contact">تواصل</a> |
| </div> |
|
|
| <div class="nav-actions"> |
| <button class="icon-btn access-open" aria-label="خيارات إمكانية الوصول"> |
| <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 4.25a1.9 1.9 0 1 0 0-3.8 1.9 1.9 0 0 0 0 3.8Zm8.25 2.2c-4.5.9-7.7.9-12.5 0a1.25 1.25 0 1 0-.46 2.46c1.38.26 2.68.43 3.96.52v3.02l-2.7 7.7a1.25 1.25 0 1 0 2.36.83L12 17.86l1.1 3.12a1.25 1.25 0 1 0 2.35-.83l-2.7-7.7V9.43c1.28-.09 2.58-.26 3.96-.52a1.25 1.25 0 1 0-.46-2.46Z"/></svg> |
| </button> |
| <a class="nav-cta" href="#cta">كن جزءًا من الأثر</a> |
| <button class="menu-toggle" id="menuToggle" aria-label="فتح القائمة" aria-expanded="false"><span></span><span></span><span></span></button> |
| </div> |
| </nav> |
| </header> |
|
|
| <div class="mobile-menu" id="mobileMenu" aria-hidden="true"> |
| <div class="mobile-menu-panel" role="dialog" aria-modal="true" aria-label="قائمة التنقل"> |
| <div class="mobile-menu-top"><strong>استكشف إيفاء</strong><button class="icon-btn" id="closeMenu" aria-label="إغلاق القائمة">×</button></div> |
| <a href="#about">عن إيفاء</a> |
| <a href="#centers">مراكز الأعمال المتخصصة</a> |
| <a href="#impact">الأثر</a> |
| <a href="#values">قيمنا</a> |
| <a href="#projects">المشاريع الاستراتيجية</a> |
| <a href="#contact">تواصل معنا</a> |
| <a class="mobile-cta" href="#cta">كن جزءًا من الأثر</a> |
| </div> |
| </div> |
|
|
| <main id="main"> |
| <section class="hero" id="hero"> |
| <div class="hero-glow glow-a" aria-hidden="true"></div> |
| <div class="hero-glow glow-b" aria-hidden="true"></div> |
| <div class="hero-bg-word" aria-hidden="true">أثر</div> |
|
|
| <div class="container hero-grid"> |
| <div class="hero-content reveal"> |
| <span class="eyebrow"><span class="eyebrow-dot"></span>تمكين • تأهيل • جودة حياة</span> |
| <h1>نُمكّن الإنسان<br><span>ليصنع أثره</span></h1> |
| <p>منظومة وطنية غير ربحية تعمل في قطاع إعادة التأهيل، وتقدم خدمات متكاملة للأشخاص من ذوي الإعاقة عبر مراكز أعمال متخصصة.</p> |
| <div class="hero-actions"> |
| <a class="btn btn-primary" href="#about">اكتشف إيفاء <span aria-hidden="true">←</span></a> |
| <a class="btn btn-secondary" href="#impact">شاهد أثرنا</a> |
| </div> |
| <div class="hero-trust" aria-label="محاور التجربة"><span>حلول مبتكرة</span><span>كفاءات مهنية</span><span>شراكات فاعلة</span></div> |
| </div> |
|
|
| <div class="hero-visual reveal"> |
| <div class="photo-shell"> |
| <img class="hero-photo" src="https://psrc.org.sa/wp-content/uploads/sites/3740/2026/04/1-2.webp" alt="طفل في نشاط تأهيلي ورياضي ضمن بيئة داعمة" fetchpriority="high" /> |
| <div class="photo-overlay" aria-hidden="true"></div> |
| <div class="photo-caption"><small>من الخدمة إلى الأثر</small><strong>تأهيل يصنع استقلالية</strong></div> |
| </div> |
| <div class="floating-chip chip-one"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3a6 6 0 0 0-6 6c0 2.2 1.2 4.16 3 5.2V21l3-2 3 2v-6.8A6 6 0 0 0 12 3Zm0 9.5A3.5 3.5 0 1 1 12 5a3.5 3.5 0 0 1 0 7.5Z"/></svg><span>تمكين</span></div> |
| <div class="floating-chip chip-two"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2 3 6v6c0 5.4 3.8 9.9 9 11 5.2-1.1 9-5.6 9-11V6l-9-4Zm4.2 8.2-5 5a1 1 0 0 1-1.4 0l-2-2 1.4-1.4 1.3 1.3 4.3-4.3 1.4 1.4Z"/></svg><span>جودة حياة</span></div> |
| </div> |
| </div> |
|
|
| <a class="scroll-hint" href="#about" aria-label="انتقل للقسم التالي"><span></span></a> |
| </section> |
|
|
| <section class="impact-strip" aria-label="مسارات الأثر"> |
| <div class="container strip-scroll"> |
| <div><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm0 2c-4.4 0-8 2.2-8 5v1h16v-1c0-2.8-3.6-5-8-5Z"/></svg><span><strong>المستفيد</strong><small>في قلب التجربة</small></span></div> |
| <div><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20 8h-3V5a2 2 0 0 0-2-2H9a2 2 0 0 0-2 2v3H4a2 2 0 0 0-2 2v9h20v-9a2 2 0 0 0-2-2Zm-6 7h-1v1h-2v-1h-1v-2h1v-1h2v1h1v2Z"/></svg><span><strong>التأهيل</strong><small>تخصصات متكاملة</small></span></div> |
| <div><svg viewBox="0 0 24 24" aria-hidden="true"><path d="m12 2 2.1 5.2L20 9l-4.4 3.7.2 5.8L12 15.3l-3.8 3.2.2-5.8L4 9l5.9-1.8L12 2Z"/></svg><span><strong>التمكين</strong><small>فرص واستقلالية</small></span></div> |
| <div><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 11a4 4 0 1 1 3.9-5H13a4 4 0 1 1 4 5h-2v3h2a4 4 0 1 1-3.9 5H11A4 4 0 1 1 7 14h2v-3H7Zm4-3v8h2V8h-2Z"/></svg><span><strong>الشراكات</strong><small>تكامل يصنع الفرق</small></span></div> |
| </div> |
| </section> |
|
|
| <section class="section about" id="about"> |
| <div class="container"> |
| <div class="section-head reveal"> |
| <span class="eyebrow">عن إيفاء</span> |
| <h2>أكثر من خدمة..<br>منظومة تصنع جودة الحياة</h2> |
| <p>تقدم إيفاء خدمات متكاملة للأشخاص من ذوي الإعاقة عبر مراكز أعمال متخصصة وفق منهجيات علمية حديثة ومعايير عالمية معتمدة وكفاءات متعددة التخصصات.</p> |
| </div> |
| <div class="vision-grid"> |
| <article class="vision-card reveal"><span class="card-kicker">الرؤية</span><h3>الشريك الأول في تمكين ذوي الإعاقة</h3><div class="vision-line" aria-hidden="true"></div></article> |
| <article class="vision-card dark reveal"><span class="card-kicker">الرسالة</span><h3>تحسين جودة حياة الأشخاص ذوي الإعاقة وتمكينهم في المجتمع عبر حلول مبتكرة وكفاءات مهنية وشراكات فاعلة.</h3></article> |
| </div> |
| </div> |
| </section> |
|
|
| <section class="section centers" id="centers"> |
| <div class="container"> |
| <div class="section-head reveal"><span class="eyebrow">مراكز الأعمال المتخصصة</span><h2>رحلة واحدة..<br>وخدمات متكاملة</h2></div> |
| <div class="bento centers-grid"> |
| <article class="center-card featured reveal"> |
| <span class="icon"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M10 3h4v5h5v4h-5v5h-4v-5H5V8h5V3Zm-5 17h14v2H5v-2Z"/></svg></span> |
| <span class="card-no">01</span><h3>مركز التأهيل الطبي</h3><p>برامج تأهيل طبي متقدمة تعتمد على تكامل التخصصات والتقنيات الحديثة لتحسين جودة الحياة وتعزيز الصحة.</p><a href="https://psrc.org.sa/" target="_blank" rel="noopener">اكتشف المركز <span aria-hidden="true">←</span></a> |
| </article> |
| <article class="center-card reveal"><span class="icon"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3a5 5 0 1 1 0 10 5 5 0 0 1 0-10Zm-8 18c.4-4 3.8-6 8-6s7.6 2 8 6H4Z"/></svg></span><span class="card-no">02</span><h3>مركز الرعاية النهارية</h3><p>رعاية متكاملة تدعم تنمية المهارات الحياتية وتعزز الاعتماد على النفس ضمن بيئة آمنة.</p></article> |
| <article class="center-card reveal"><span class="icon"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 19h16v2H4v-2Zm1-2V9l7-5 7 5v8h-4v-5H9v5H5Z"/></svg></span><span class="card-no">03</span><h3>مركز الاستثمار الاجتماعي</h3><p>تحويل المهارات والقدرات إلى فرص إنتاج وتمكين مستدام داخل المجتمع.</p></article> |
| <article class="center-card reveal"><span class="icon"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 4h16v14H7l-3 3V4Zm3 4v2h10V8H7Zm0 4v2h7v-2H7Z"/></svg></span><span class="card-no">04</span><h3>معهد إيفاء للتدريب</h3><p>برامج تدريبية نوعية تصنع الكفاءة وتدعم الاستدامة المؤسسية.</p></article> |
| <article class="center-card reveal"><span class="icon"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 4 1.5 3 3.3.5-2.4 2.3.6 3.2-3-1.5-3 1.5.6-3.2-2.4-2.3 3.3-.5L12 6Z"/></svg></span><span class="card-no">05</span><h3>نادي إيفاء الأولمبياد الخاص</h3><p>برامج رياضية متخصصة تعزز الصحة البدنية والنفسية وتبني نمط حياة نشطًا ومتوازنًا.</p></article> |
| </div> |
| </div> |
| </section> |
|
|
| <section class="section impact" id="impact"> |
| <div class="container impact-grid"> |
| <div class="impact-copy reveal"><span class="eyebrow light">أثر يُقاس</span><h2>الأرقام تتغير..<br>والأثر يبقى</h2><p>تعرض إيفاء في موقعها الرسمي مؤشرات للمستفيدين والجلسات التأهيلية والأطراف الصناعية والشراكات والبرامج. في هذا النموذج نُبرز مجالات القياس دون استخدام قيم غير موثقة.</p></div> |
| <div class="metric-board reveal" aria-label="مجالات قياس الأثر"> |
| <div><span class="metric-icon"><svg viewBox="0 0 24 24"><path d="M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm-7 8c.4-3.7 3.4-6 7-6s6.6 2.3 7 6H5Z"/></svg></span><strong>المستفيدون</strong><small>قياس وصول الخدمة</small></div> |
| <div><span class="metric-icon"><svg viewBox="0 0 24 24"><path d="M4 5h16v14H4V5Zm3 3v2h10V8H7Zm0 4v4h3v-4H7Zm5 0v4h5v-4h-5Z"/></svg></span><strong>الجلسات التأهيلية</strong><small>قياس كثافة الخدمة</small></div> |
| <div><span class="metric-icon"><svg viewBox="0 0 24 24"><path d="M5 3h14v4H5V3Zm1 6h12v12H6V9Zm3 3v6h6v-6H9Z"/></svg></span><strong>الأطراف الصناعية</strong><small>حلول مساندة متخصصة</small></div> |
| <div><span class="metric-icon"><svg viewBox="0 0 24 24"><path d="M6 7a3 3 0 1 1 6 0v2h2V7a3 3 0 1 1 6 0v4h-3V9h-3v4h-4V9H9v2H6V7Zm0 8h12v6H6v-6Z"/></svg></span><strong>الشراكات والبرامج</strong><small>تكامل واستدامة</small></div> |
| </div> |
| </div> |
| </section> |
|
|
| <section class="section values" id="values"> |
| <div class="container"> |
| <div class="section-head reveal"><span class="eyebrow">قيمنا</span><h2>قيم تبدأ من<br>الإنسان أولًا</h2></div> |
| <div class="values-flow"> |
| <article class="value-main reveal"><span class="value-index">01</span><h3>الإنسان أولًا</h3><p>القيمة التي تقود كل خدمة وشراكة وقرار.</p><div class="value-orbit" aria-hidden="true"></div></article> |
| <div class="value-list reveal"><span>العدالة</span><span>الرفق</span><span>حماية الخصوصية</span><span>التكامل</span><span>التعلم المستمر</span></div> |
| </div> |
| </div> |
| </section> |
|
|
| <section class="section story"> |
| <div class="container story-grid"> |
| <div class="story-photo reveal"><img src="https://psrc.org.sa/wp-content/uploads/sites/3740/2026/04/1-2.webp" alt="نشاط إنساني ضمن بيئة تأهيلية داعمة" loading="lazy" /></div> |
| <div class="story-copy reveal"><span class="eyebrow">خلف كل رقم.. قصة</span><h2>حين تتحول الخدمة إلى استقلالية وثقة وحياة أكثر جودة.</h2><p>تضع إيفاء الإنسان في قلب التجربة؛ لتكون رحلة التأهيل دعمًا متكاملًا يمتد من الخدمة المتخصصة إلى الأثر المجتمعي.</p><a class="text-link" href="https://psrc.org.sa/" target="_blank" rel="noopener">اكتشف إيفاء <span aria-hidden="true">←</span></a></div> |
| </div> |
| </section> |
|
|
| <section class="section projects" id="projects"> |
| <div class="container"> |
| <div class="section-head reveal"><span class="eyebrow">المشاريع الاستراتيجية</span><h2>مشاريع تصنع<br>أثرًا مستدامًا</h2></div> |
| <div class="projects-grid"> |
| <article class="project-card large reveal"><span class="project-tag">مشروع استراتيجي</span><h3>خطوط إنتاج إيفاء</h3><p>تحويل مهارات وقدرات الأشخاص من ذوي الإعاقة إلى منتجات احترافية تشمل الدروع والهدايا واللوحات وغيرها.</p><a href="https://psrc.org.sa/" target="_blank" rel="noopener">اعرف أكثر <span aria-hidden="true">←</span></a></article> |
| <article class="project-card reveal"><span class="project-tag">تمكين مهني</span><h3>مشروع إيفاء كافيه</h3><p>مشروع يوظف الأشخاص من ذوي الإعاقة في قطاع الأطعمة والمشروبات.</p></article> |
| <article class="project-card reveal"><span class="project-tag">معرفة</span><h3>ملتقى إيفاء العلمي</h3><p>ملتقى طبي يناقش أحدث المستجدات والمنهجيات في قطاع التأهيل.</p></article> |
| <article class="project-card reveal"><span class="project-tag">تأهيل</span><h3>برنامج الخدمات الطبية التأهيلية</h3><p>برنامج متكامل للحصول على خدمات المركز الطبي ومركز الأطراف الصناعية والجبائر.</p></article> |
| </div> |
| </div> |
| </section> |
|
|
| <section class="section cta" id="cta"> |
| <div class="container cta-box reveal"><span class="eyebrow light">الأثر يبدأ بخطوة</span><h2>كن جزءًا من قصة الأثر</h2><p>شارك في رحلة التمكين من خلال التبرع أو التطوع أو بناء شراكة تصنع فرقًا مستدامًا.</p><div class="cta-actions"><a class="btn btn-gold" href="https://store.psrc.org.sa/" target="_blank" rel="noopener">تبرع الآن</a><a class="btn btn-ghost" href="https://psrc.org.sa/" target="_blank" rel="noopener">تطوع أو كن شريكًا</a></div></div> |
| </section> |
| </main> |
|
|
| <footer class="footer" id="contact"> |
| <div class="container footer-grid"> |
| <div class="footer-brand"><div class="footer-logo-wrap"><img src="https://psrc.org.sa/wp-content/uploads/sites/3740/2026/08/IMG_1690.png" alt="شعار إيفاء" /></div><p>منظومة وطنية غير ربحية تعمل في قطاع إعادة التأهيل وتمكين الأشخاص ذوي الإعاقة.</p></div> |
| <div><strong>بيانات التواصل</strong><p>0138681306</p><p>الدمام – حي البساتين</p><p>الأحد إلى الخميس، 8 ص – 4 م</p></div> |
| <div><strong>روابط سريعة</strong><a href="#about">عن إيفاء</a><a href="#centers">مراكزنا</a><a href="#projects">المشاريع</a><a href="https://psrc.org.sa/" target="_blank" rel="noopener">الموقع الرسمي</a></div> |
| </div> |
| <div class="container copyright">© 2026 إيفاء — نموذج تصوري للواجهة الرقمية</div> |
| </footer> |
|
|
| <aside class="access-panel" id="accessPanel" aria-hidden="true"> |
| <div class="access-card" role="dialog" aria-modal="true" aria-label="إمكانية الوصول"> |
| <div class="access-head"><div><small>تخصيص التجربة</small><strong>إمكانية الوصول</strong></div><button class="icon-btn" id="closeAccess" aria-label="إغلاق">×</button></div> |
| <button data-access="fontPlus">تكبير الخط</button><button data-access="fontMinus">تصغير الخط</button><button data-access="contrast">تباين مرتفع</button><button data-access="motion">إيقاف الحركة</button><button data-access="reset">إعادة الإعدادات</button> |
| </div> |
| </aside> |
|
|
| <a class="bottom-cta" id="bottomCta" href="#cta">كن جزءًا من الأثر <span aria-hidden="true">←</span></a> |
| <button class="to-top" id="toTop" aria-label="العودة إلى الأعلى"><svg viewBox="0 0 24 24"><path d="m6 14 6-6 6 6-1.5 1.5L12 11l-4.5 4.5L6 14Z"/></svg></button> |
| <script src="script.js"></script> |
| </body> |
| </html> |
|
|
