إدارة التعليم الإسلامي

import React from 'react';
import './App.css';

const App = () => {
 return (
 <div className="App">
 <header className="bg-blue-600 text-white p-6 text-center">
 <h1 className="text-3xl font-bold">إدارة المؤسسات التعليمية الإسلامية</h1>
 <p className="mt-2">تطبيق ذكي لإدارة المؤسسات التعليمية الإسلامية</p>
 </header>

 <section className="py-12 px-4">
 <div className="max-w-4xl mx-auto">
 <h2 className="text-2xl font-bold text-gray-800 mb-8">الميزات الرئيسية</h2>
 <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
 <div className="bg-white p-6 rounded-lg shadow-md">
 <h3 className="text-xl font-bold mb-4">لوحة تحكم المالك</h3>
 <p className="text-gray-600">إدارة أكواد التسجيل، تحديد الصلاحيات، وعرض سجل الأنشطة.</p>
 </div>
 <div className="bg-white p-6 rounded-lg shadow-md">
 <h3 className="text-xl font-bold mb-4">لوحة المشرف</h3>
 <p className="text-gray-600">إدارة بيانات الطلاب، تسجيل العلامات، وتحديد برامج الامتحانات.</p>
 </div>
 <div className="bg-white p-6 rounded-lg shadow-md">
 <h3 className="text-xl font-bold mb-4">بوابة الطالب</h3>
 <p className="text-gray-600">العلامات، جدول الامتحانات، وملاحظات المشرفين.</p>
 </div>
 </div>
 </div>
 </animated.section>

 <section className="py-12 px-4 bg-gray-100">
 <div className="max-w-4xl mx-auto">
 <h2 className="text-2xl font-bold text-gray-800 mb-8">الأمان والمصادقة</h2>
 <div className="grid gap-8 md:grid-cols-2">
 <div className="bg-white p-6 rounded-lg shadow-md">
 <h3 className="text-xl font-bold mb-4">نظام دخول قائم على الأدوار</h3>
 <p className="text-gray-600">استخدام أكواد فريدة لدخول المستخدمين.</p>
 </div>
 <div className="bg-white p-6 rounded-lg shadow-md">
 <h3 className="text-xl font-bold mb-4">تتبع سجلات الدخول والأنشطة</h3>
 <p className="text-gray-600">ضمان الشفافية والمحاسبة عبر تتبع الأنشطة.</animated.p>
 </div>
 </div>
 </div>
 </section>

 <section className="py-12 px-4">
 <div className="max-w-4xl mx-auto">
 <h2 className="text-2xl font-bold text-gray-800 mb-8">التقنيات المستخدمة</h2>
 <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
 <div className="bg-white p-6 rounded-lg shadow-md">
 <h3 className="text-xl font-bold mb-4">HTML5, CSS3 + Bootstrap 5</h3>
 <p className="text-gray-600">تصميم متجاوب وحديث.</p>
 </div>
 <div className="bg-white p-6 rounded-lg shadow-md">
 <h3 className="text-xl font-bold mb-4">Vanilla JavaScript</h3>
 <p className="text-gray-600">منطق التطبيق والتفاعلات.</p>
 </div>
 <div className="bg-white p-6 rounded-lg shadow-md">
 <h3 className="text-xl font-bold mb-4">Firebase</h3>
 <p className="text-gray-600">استضافة، مصادقة، وقاعدة بيانات حيّة.</p>
 </div>
 </div>
 </div>
 </section>

 <section className="py-12 px-4 bg-gray-100">
 <div className="max-w-4xl mx-auto">
 <h2 className="text-2xl font-bold text-gray-800 mb-8">التحسينات المدمجة</h2>
 <div className="grid gap-8 md:grid-cols-2">
 <div className="bg-white p-6 rounded-lg shadow-md">
 <h3 className="text-xl font-bold mb-4">إشعارات وتنبيهات فورية</h3>
 <p className="text-gray-600">تلقي التحديثات والمهام الجديدة فورًا.</p>
 </div>
 <div className="bg-white p-6 rounded-lg shadow-md">
 <h3 className="text-xl font-bold mb-4">لوحة إحصائية ديناميكية</h3>
 <p className="text-gray-600">تتبع الأداء والأنشطة بشكل ديناميكي.</p>
 </div>
 </div>
 </div>
 </section>

 <footer className="bg-blue-600 text-white p-6 text-center">
 <p>© 2025 إدارة المؤسسات التعليمية الإسلامية. جميع الحقوق محفوظة.</p>
 </footer>
 </div>
 );
};

export default App;