VitalsHub | منصة رقمية لدعم متابعة الحالات المزمنة — بدءًا بالسكري <meta name="description" content="VitalsHub منصة عربية لمنصة رقمية لدعم متابعة الحالات المزمنة — بدءًا بالسكري <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=Noto+Kufi+Arabic:wght@500;600;700;800&family=Noto+Sans+Arabic:wght@400;500;600&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="assets/css/base.css"/> <link rel="stylesheet" href="assets/css/typography.css"/> <link rel="stylesheet" href="assets/css/components.css"/> <link rel="stylesheet" href="assets/css/desktop.css"/> </head> <body> <header class="header"> <div class="container header-inner"> <a class="brand" href="index.html"><span class="logo" aria-hidden="true"></span><span>VitalsHub</span></a> <nav class="nav" aria-label="Primary"> <a href="product.html">المنصة</a> <a href="diabetes.html">السكري</a> <a href="providers.html">للمقدّمين الصحيين</a> <a href="trust.html">الثقة</a> <a href="privacy.html">الخصوصية</a> <a href="terms.html">الشروط</a> <a href="about.html">من نحن</a> <a class="btn ghost" href="en/index.html">English</a> </nav> </div> </header> <main> <section class="hero"> <div class="container hero-grid"> <div> <span class="kicker">منصة رقمية لدعم متابعة الحالات المزمنة — بدءًا بالسكري <h1>منصة رقمية لدعم متابعة الحالات المزمنة — بدءًا بالسكري <p class="hero-lead"> VitalsHub منصة مؤسسية تنظّم البيانات الصحية اليومية وتعرض الاتجاهات بوضوح لدعم المتابعة المستمرة بالتعاون مع فرق الرعاية. </p> <div class="cta-row"> <a class="btn primary" href="#" data-open="early-access">احصل على وصول مبكر</a> <a class="btn" href="#patients">للمرضى</a> <a class="btn" href="#providers">للمقدّمين الصحيين</a> </div> <p class="disclaimer">معلومات للمتابعة فقط — لا تشخيص ولا توصيات علاجية.</p> <div class="trust-strip" aria-label="Trust"> <div class="trust-chip"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V8a4 4 0 018 0v3"/></svg><div><strong>خصوصية وأمان</strong><br/><small>أساس التصميم</small></div></div> <div class="trust-chip"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M4 19V5"/><path d="M4 19h16"/><path d="M7 15l3-3 3 2 5-6"/></svg><div><strong>اتجاهات طويلة المدى</strong><br/><small>وضوح بدل الضجيج</small></div></div> <div class="trust-chip"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M16 11a4 4 0 10-8 0"/><path d="M4 20c1.6-3 4.5-5 8-5s6.4 2 8 5"/><path d="M17.5 8.5a3 3 0 10-5.5-2"/></svg><div><strong>يدعم فرق الرعاية</strong><br/><small>قبل الزيارة وبعدها</small></div></div> <div class="trust-chip"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 2l8 4v6c0 6-3.4 9.7-8 10-4.6-.3-8-4-8-10V6l8-4z"/><path d="M9 12l2 2 4-5"/></svg><div><strong>غير تشخيصي</strong><br/><small>لا يستبدل الطبيب</small></div></div> </div> </div> <div class="hero-media"> <img src="assets/img/hero_bilingual.png" alt="VitalsHub visual"/> </div> </div> </section> <section class="section white" id="get-started"> <div class="container"> <span class="kicker">ابدأ الآن</span> <h2>اختر المسار المناسب لك</h2> <p class="hero-lead">هل أنت مريض/مستخدم أم جهة صحية؟ اختر المسار لتجربة أكثر وضوحًا.</p> <div class="paths"> <div class="path-card" id="patients"> <div class="pill">للأفراد</div> <h3 style="margin-top:10px">للمرضى والمستخدمين</h3> <p class="small">احصل على وصول مبكر، وشاهد كيفية تنظيم البيانات والاتجاهات ومشاركة ملخص مع الطبيب.</p> <div class="cta-row"> <a class="btn primary" href="#" data-open="early-access">احصل على وصول مبكر</a> <a class="btn" href="diabetes.html">ابدأ بصفحة السكري</a> <a class="btn" href="assets/downloads/diabetes-trends-guide.pdf">دليل مجاني (PDF)</a> </div> <form class="form" id="patientLeadForm" aria-label="Patient early access"> <input class="input" id="patientEmail" type="email" placeholder="بريدك الإلكتروني" autocomplete="email" required> <button class="btn primary" type="submit">أرسل طلب الوصول</button> <div class="helper">سيتم فتح بريدك لإرسال الطلب إلى contact@vitalshub.net</div> </form> </div> <div class="path-card" id="providers"> <div class="pill">للجهات الصحية</div> <h3 style="margin-top:10px">للمقدّمين الصحيين والعيادات</h3> <p class="small">ابدأ تجربة/طيّار مجاني داخل السعودية ودول الخليج. نوفّر ملخصات واتجاهات غير تشخيصية للمراجعة السريرية.</p> <div class="cta-row"> <a class="btn primary" href="providers.html">ابدأ طيّار مجاني</a> <a class="btn" href="trust.html">الثقة والمسؤولية</a> </div> <form class="form" id="providerLeadForm" aria-label="Provider الإصدار الحالي lead"> <input class="input" id="providerEmail" type="email" placeholder="بريد العمل" autocomplete="email" required> <button class="btn primary" type="submit">اطلب الطيّار</button> <div class="helper">سيتم فتح بريدك لإرسال الطلب إلى contact@vitalshub.net</div> </form> </div> </div> </div> </section> <section class="section" id="demo"> <div class="container"> <span class="kicker">عرض سريع</span> <h2>شاهد تدفقًا واضحًا داخل التطبيق</h2> <p class="hero-lead">مثال عملي: سجّل البيانات → شاهد الاتجاهات → شارك ملخصًا مع الطبيب.</p> <div class="screens"> <figure class="screen"><img src="assets/screens/app-daily-view.png" alt="Daily view"/><figcaption>1) عرض اليوم</figcaption></figure> <figure class="screen"><img src="assets/screens/app-trends.png" alt="Trends"/><figcaption>2) الاتجاهات طويلة المدى</figcaption></figure> <figure class="screen"><img src="assets/screens/app-dashboard.png" alt="Summary"/><figcaption>3) ملخص قابل للمشاركة</figcaption></figure> </div> <div class="wide"><img src="assets/screens/pre_visit_flow.png" alt="Pre-visit flow"/></div> <p class="disclaimer">معلومات للمتابعة فقط — لا تشخيص ولا توصيات علاجية.</p> </div> </section> <section class="section white" id="trust-signals"> <div class="container"> <span class="kicker">إثبات وثقة</span> <h2>إشارات ثقة (يمكن تحديثها مع الطيّار)</h2> <p class="hero-lead">في الرعاية الصحية، الثقة هي محرك التحويل. ابدأ بإثباتات بسيطة ثم عززها بالنتائج.</p> <div class="testimonials"> <div class="quote"> <div>“ساعدتني الملخصات على تجهيز نقاط واضحة قبل موعد الطبيب.”</div> <div class="by">— مستخدم (تجربة مبكرة)</div> </div> <div class="quote"> <div>“الاتجاهات غير التشخيصية مفيدة للمراجعة السريعة دون ادّعاءات.”</div> <div class="by">— مقدم رعاية (صياغة أولية)</div> </div> <div class="quote"> <div>“واجهة مرتبة تساعد على تقليل التشتت أثناء مراجعة البيانات.”</div> <div class="by">— عيادة/مركز (Placeholder)</div> </div> </div> <div class="logo-row" aria-label="Partner logos placeholders"> <div class="logo-box">LOGO</div> <div class="logo-box">LOGO</div> <div class="logo-box">LOGO</div> <div class="logo-box">LOGO</div> </div> <div class="card" style="margin-top:14px"> <h3>مقاييس أولية يمكنك عرضها لاحقًا</h3> <p class="small">ضع هنا أرقامًا حقيقية بعد الطيّار (مثال: عدد المستخدمين النشطين، عدد الملخصات المشتركة، معدل العودة الأسبوعي). تجنب أي ادّعاءات علاجية.</p> </div> </div> </section> <section class="section soft"> <div class="container split"> <div class="media"><img src="assets/img/story.png" alt="GCC lifestyle"/></div> <div> <h2>المشكلة التي نحلّها</h2> <p>تعتمد الأمراض المزمنة على بيانات مستمرة، لكن هذه البيانات غالبًا ما تكون متفرقة، ويصعب تحويلها إلى صورة طويلة المدى تساعد على المتابعة المنظمة بين الزيارات الطبية.</p> <div class="grid-3"> <div class="card"><h3>البيانات متفرقة</h3><p class="small">مصادر متعددة… وعرض غير موحّد.</p></div> <div class="card"><h3>الصورة غير واضحة</h3><p class="small">قراءات فردية دون سياق زمني.</p></div> <div class="card"><h3>فجوة بين الزيارات</h3><p class="small">المتابعة تنقطع بين المراجعات.</p></div> </div> </div> </div> </section> <section class="section"> <div class="container"> <h2>كيف تدعم VitalsHub منصة رقمية لدعم متابعة الحالات المزمنة — بدءًا بالسكري <p class="hero-lead">ثلاث خطوات واضحة: تنظيم → اتجاهات → ملخصات قابلة للمراجعة.</p> <div class="grid-3"> <div class="card"><h3>تنظيم البيانات</h3><p class="small">تجميع وعرض موحّد للبيانات اليومية.</p></div> <div class="card"><h3>اتجاهات طويلة المدى</h3><p class="small">مؤشرات ورسوم غير تشخيصية لدعم المتابعة.</p></div> <div class="card"><h3>ملخصات قبل الزيارة</h3><p class="small">ملخص للفترة يساعد على حوار سريري أوضح.</p></div> </div> <div class="wide"><img src="assets/img/platform.png" alt="Platform"/></div> </div> </section> <section class="section white"> <div class="container"> <h2>لقطات من التطبيق</h2> <p class="hero-lead">نماذج توضيحية لكيفية عرض البيانات داخل التطبيق.</p> <div class="screens"> <figure class="screen"><img src="assets/screens/app-dashboard.png" alt="Dashboard"/><figcaption>المتابعة اليومية</figcaption></figure> <figure class="screen"><img src="assets/screens/app-daily-view.png" alt="Daily"/><figcaption>القراءات اليومية</figcaption></figure> <figure class="screen"><img src="assets/screens/app-trends.png" alt="Trends"/><figcaption>الاتجاهات طويلة المدى</figcaption></figure> </div> <div class="wide"><img src="assets/screens/pre_visit_flow.png" alt="Pre-visit flow"/></div> </div> </section> <section class="section"> <div class="container split"> <div> <h2>قيمة عملية بدون ادّعاءات</h2> <p class="hero-lead">نركّز على الوضوح والاستمرارية لدعم المتابعة والحوار السريري.</p> <div class="grid-3"> <div class="card"><h3>وضوح أكثر</h3><p class="small">فهم الاتجاه العام عبر الزمن.</p></div> <div class="card"><h3>تحضير أفضل</h3><p class="small">ملخصات تدعم مراجعة سريعة قبل الزيارة.</p></div> <div class="card"><h3>استمرارية</h3><p class="small">متابعة منظمة بين الزيارات.</p></div> </div> <div class="wide"><img src="assets/img/badges.png" alt="Badges"/></div> </div> <div class="media"><img src="assets/img/providers.png" alt="Providers"/></div> </div> </section> <section class="section soft"> <div class="container"> <h2>لمقدّمي الرعاية الصحية</h2> <p class="hero-lead">ملخصات واتجاهات قابلة للمراجعة — مع قابلية للتوسع والتكامل عند التوسع.</p> <div class="grid-3"> <div class="card"><h3>مراجعة مركزة</h3><p class="small">بدلًا من التشتت بين قراءات متعددة.</p></div> <div class="card"><h3>لغة مسؤولة</h3><p class="small">لا توصيات علاجية ولا إنذارات طبية.</p></div> <div class="card"><h3>قابل للتوسع</h3><p class="small">السكري أولاً، ثم حالات مزمنة أخرى.</p></div> </div> <div class="cta-row"> <a class="btn primary" href="providers.html">تفاصيل للمقدّمين الصحيين</a> <a class="btn" href="trust.html">الثقة والمسؤولية</a> </div> </div> </section> <section class="section white"> <div class="container"> <h2>الثقة والمسؤولية</h2> <p class="hero-lead">VitalsHub منصة معلوماتية لمنصة رقمية لدعم متابعة الحالات المزمنة — بدءًا بالسكري <div class="grid-3"> <div class="card"><h3>غير تشخيصي</h3><p class="small">يدعم المتابعة ولا يستبدل الطبيب.</p></div> <div class="card"><h3>خصوصية أولاً</h3><p class="small">نهج واضح لتقليل البيانات.</p></div> <div class="card"><h3>مناسب للمراجعة</h3><p class="small">ملخصات واتجاهات قابلة للمناقشة داخل العيادة.</p></div> </div> </div> </section> <section class="section"> <div class="container"> <h2>جاهزون للتعاون داخل السعودية ودول الخليج</h2> <p class="hero-lead">للاستفسارات أو التعاون مع جهات صحية، تواصل معنا.</p> <div class="cta-row"> <a class="btn primary" href="mailto:contact@vitalshub.net">راسلنا</a> <a class="btn" href="about.html">من نحن</a> </div> </div> </section> <div class="sticky-cta" role="region" aria-label="Primary call to action"> <div class="container bar"> <a class="btn primary" href="#" data-open="early-access">احصل على وصول مبكر</a> <a class="btn" href="#get-started">اختر المسار</a> </div> </div> <div class="modal-overlay" data-modal-overlay="early-access" aria-hidden="true"></div> <div class="modal" data-modal="early-access" role="dialog" aria-modal="true" aria-label="Early access"> <div class="top"> <div style="font-weight:900">احصل على وصول مبكر</div> <button class="close" type="button" aria-label="Close" data-close="early-access">✕</button> </div> <p class="small">اترك بريدك لنرسل لك خطوات الوصول المبكر (TestFlight / Android) عند جاهزيتها.</p> <form class="form" id="earlyAccessForm"> <input class="input" id="earlyEmail" type="email" placeholder="بريدك الإلكتروني" autocomplete="email" required> <button class="btn primary" type="submit">أرسل الطلب</button> <div class="helper">سيتم فتح بريدك لإرسال الطلب إلى contact@vitalshub.net</div> </form> <div class="card" style="margin-top:12px"> <h3>روابط الوصول المبكر</h3> <p class="small">ضع روابطك هنا عند توفرها:</p> <ul class="small"> <li>TestFlight (iOS): <span style="color:var(--muted)">متاح الآن</span></li> <li>Android (internal testing): <span style="color:var(--muted)">متاح الآن</span></li> </ul> </div> </div> </main> <footer class="footer"> <div class="container"> <div style="display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;"> <div>© 2026 VitalsHub</div> <div class="small">معلومات للمتابعة فقط — لا تشخيص ولا توصيات علاجية.</div> <div><a href="mailto:contact@vitalshub.net">contact@vitalshub.net</a></div> </div> </div> </footer> <script src="assets/js/cta.js"></script> </body> </html>