تطبيق 'أدعيتي الصغيرة' - مرجع شامل لأدعية الأطفال

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

const App = () => {
  return (
    <div className="App bg-gradient-to-b from-blue-100 to-green-100 min-h-screen">
      <header className="bg-blue-500 text-white p-4">
        <h1 className="text-3xl font-bold">أدعيتي الصغيرة</h1>
      </header>
      <main className="p-4">
        <section className="mb-8">
          <h2 className="text-2xl font-semibold mb-4">أدعية الصباح والمساء</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            <div className="bg-white p-4 rounded-lg shadow-md">
              <img src="https://placehold.co/300x200" alt="دعاء الاستيقاظ من النوم" className="w-full h-48 object-cover rounded-md" />
              <h3 className="text-xl font-medium mt-2">دعاء الاستيقاظ من النوم</h3>
              <p className="text-gray-600">الحمد لله الذي أحيانا بعد ما أماتنا وإليه النشور.</p>
            </div>
            <div className="bg-white p-4 rounded-lg shadow-md">
              <img src="https://placehold.co/300x200" alt="دعاء الخروج من المنزل" className="w-full h-48 object-cover rounded-md" />
              <h3 className="text-xl font-medium mt-2">دعاء الخروج من المنزل</h3>
              <p className="text-gray-600">بسم الله، توكلت على الله، ولا حول ولا قوة إلا بالله.</p>
            </div>
            <div className="bg-white p-4 rounded-lg shadow-md">
              <img src="https://placehold.co/300x200" alt="دعاء الذهاب إلى المدرسة" className="w-full h-48 object-cover rounded-md" />
              <h3 className="text-xl font-medium mt-2">دعاء الذهاب إلى المدرسة</h3>
              <p className="text-gray-600">اللهم إني أسألك علماً نافعاً، ورزقاً طيباً، وعملاً متقبلاً.</p>
            </div>
          </div>
        </section>
        <section className="mb-8">
          <h2 className="text-2xl font-semibold mb-4">أدعية العبادات</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            <div className="bg-white p-4 rounded-lg shadow-md">
              <img src="https://placehold.co/300x200" alt="دعاء قبل الوضوء" className="w-full h-48 object-cover rounded-md" />
              <h3 className="text-xl font-medium mt-2">دعاء قبل الوضوء</h3>
              <p className="text-gray-600">بسم الله، اللهم اجعلني من التوابين واجعلني من المتطهرين.</p>
            </div>
            <div className="bg-white p-4 rounded-lg shadow-md">
              <img src="https://placehold.co/300x200" alt="دعاء لبس الثوب الجديد" className="w-full h-48 object-cover rounded-md" />
              <h3 className="text-xl font-medium mt-2">دعاء لبس الثوب الجديد</h3>
              <p className="text-gray-600">الحمد لله الذي كساني هذا الثوب ورزقنيه من غير حول مني ولا قوة.</p>
            </div>
            <div className="bg-white p-4 rounded-lg shadow-md">
              <img src="https://placehold.co/300x200" alt="دعاء دخول الخلاء" className="w-full h-48 object-cover rounded-md" />
              <h3 className="text-xl font-medium mt-2">دعاء دخول الخلاء</h3>
              <p className="text-gray-600">اللهم إني أعوذ بك من الخبث والخبائث.</p>
            </div>
          </div>
        </section>
        <section className="mb-8">
          <h2 className="text-2xl font-semibold mb-4">أدعية الأكل والشرب</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            <div className="bg-white p-4 rounded-lg shadow-md">
              <img src="https://placehold.co/300x200" alt="دعاء قبل الطعام" className="w-full h-48 object-cover rounded-md" />
              <h3 className="text-xl font-medium mt-2">دعاء قبل الطعام</h3>
              <p className="text-gray-600">بسم الله، اللهم بارك لنا فيما رزقتنا وقنا عذاب النار.</p>
            </div>
            <div className="bg-white p-4 rounded-lg shadow-md">
              <img src="https://placehold.co/300x200" alt="دعاء بعد الطعام" className="w-full h-48 object-cover rounded-md" />
              <h3 className="text-xl font-medium mt-2">دعاء بعد الطعام</h3>
              <p className="text-gray-600">الحمد لله الذي أطعمنا وسقانا وجعلنا مسلمين.</p>
            </div>
            <div className="bg-white p-4 rounded-lg shadow-md">
              <img src="https://placehold.co/300x200" alt="دعاء الضيف للمضيف" className="w-full h-48 object-cover rounded-md" />
              <h3 className="text-xl font-medium mt-2">دعاء الضيف للمضيف</h3>
              <p className="text-gray-600">اللهم بارك لهم فيما رزقتهم واغفر لهم وارحمهم.</p>
            </div>
          </div>
        </section>
        <section className="mb-8">
          <h2 className="text-2xl font-semibold mb-4">أدعية خاصة</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            <div className="bg-white p-4 rounded-lg shadow-md">
              <img src="https://placehold.co/300x200" alt="دعاء الخوف من الظلام" className="w-full h-48 object-cover rounded-md" />
              <h3 className="text-xl font-medium mt-2">دعاء الخوف من الظلام</h3>
              <p className="text-gray-600">أعوذ بكلمات الله التامات من شر ما خلق.</p>
            </div>
            <div className="bg-white p-4 rounded-lg shadow-md">
              <img src="https://placehold.co/300x200" alt="دعاء عند رؤية الأحلام المفزعة" className="w-full h-48 object-cover rounded-md" />
              <h3 className="text-xl font-medium mt-2">دعاء عند رؤية الأحلام المفزعة</h3>
              <p className="text-gray-600">أعوذ بكلمات الله التامات من غضبه وعقابه وشر عباده.</p>
            </div>
            <div className="bg-white p-4 rounded-lg shadow-md">
              <img src="https://placehold.co/300x200" alt="دعاء زيارة المريض" className="w-full h-48 object-cover rounded-md" />
              <h3 className="text-xl font-medium mt-2">دعاء زيارة المريض</h3>
              <p className="text-gray-600">اللهم رب الناس، أذهب البأس، اشف أنت الشافي.</p>
            </div>
          </div>
        </section>
      </main>
      <footer className="bg-blue-500 text-white p-4 mt-8">
        <p className="text-center">© 2025 أدعيتي الصغيرة. جميع الحقوق محفوظة.</p>
      </footer>
    </div>
  );
};

export default App;