تطبيق تعليم القرآن للأطفال

import React from 'react';

const App = () => {
  return (
    <div className='min-h-screen bg-gradient-to-br from-blue-50 to-purple-100'>
      {/* Header */}
      <header className='text-center py-6 bg-white shadow-md'>
        <h1 className='text-3xl font-bold text-purple-800'>Quran Learning for Kids</h1>
        <p className='text-gray-600'>Engaging and interactive Quran lessons for children</p>
      </header>

      {/* Hero Section */}
      <section className='flex flex-col items-center justify-center py-12 px-4'>
        <img src='https://placehold.co/600X400' alt='Quran Learning' className='rounded-lg shadow-xl mb-6' />
        <h2 className='text-2xl font-semibold text-gray-800 mb-4'>Start Learning Today!</h2>
        <button className='bg-purple-600 text-white px-6 py-2 rounded-lg hover:bg-purple-700 transition duration-300'>Get Started</button>
      </section>

      {/* Features Section */}
      <section className='py-12 px-4 bg-white'>
        <div className='max-w-4xl mx-auto'>
          <h2 className='text-2xl font-semibold text-gray-800 mb-8 text-center'>Features</h2>
          <div className='grid grid-cols-1 md:grid-cols-3 gap-6'>
            <div className='p-6 bg-purple-50 rounded-lg shadow-md'>
              <h3 className='text-xl font-semibold text-purple-800 mb-2'>Interactive Lessons</h3>
              <p className='text-gray-600'>Engaging lessons designed for children to learn Quran effectively.</p>
            </div>
            <div className='p-6 bg-purple-50 rounded-lg shadow-md'>
              <h3 className='text-xl font-semibold text-purple-800 mb-2'>Progress Tracking</h3>
              <p className='text-gray-600'>Track your child's learning progress with detailed reports.</p>
            </div>
            <div className='p-6 bg-purple-50 rounded-lg shadow-md'>
              <h3 className='text-xl font-semibold text-purple-800 mb-2'>Safe Environment</h3>
              <p className='text-gray-600'>A secure platform ensuring a safe learning experience for your child.</p>
            </div>
          </div>
        </div>
      </section>

      {/* Testimonials Section */}
      <section className='py-12 px-4 bg-purple-100'>
        <div className='max-w-4xl mx-auto'>
          <h2 className='text-2xl font-semibold text-gray-800 mb-8 text-center'>What Parents Are Saying</h2>
          <div className='grid grid-cols-1 md:grid-cols-2 gap-6'>
            <div className='p-6 bg-white rounded-lg shadow-md'>
              <p className='text-gray-600'>'My child loves the lessons and is making great progress. Highly recommend!'</p>
              <p className='text-purple-800 font-semibold mt-4'>- Sarah M.</p>
            </div>
            <div className='p-6 bg-white rounded-lg shadow-md'>
              <p className='text-gray-600'>'The platform is easy to use, and the lessons are very interactive.'</p>
              <p className='text-purple-800 font-semibold mt-4'>- Ahmed R.</p>
            </div>
          </div>
        </div>
      </section>

      {/* Pricing Section */}
      <section className='py-12 px-4 bg-white'>
        <div className='max-w-4xl mx-auto'>
          <h2 className='text-2xl font-semibold text-gray-800 mb-8 text-center'>Pricing Plans</h2>
          <div className='grid grid-cols-1 md:grid-cols-3 gap-6'>
            <div className='p-6 bg-purple-50 rounded-lg shadow-md'>
              <h3 className='text-xl font-semibold text-purple-800 mb-2'>Basic</h3>
              <p className='text-gray-600 mb-4'>Access to basic lessons</p>
              <p className='text-2xl font-bold text-purple-800 mb-4'>$10/month</p>
              <button className='bg-purple-600 text-white px-6 py-2 rounded-lg hover:bg-purple-700 transition duration-300'>Subscribe</button>
            </div>
            <div className='p-6 bg-purple-50 rounded-lg shadow-md'>
              <h3 className='text-xl font-semibold text-purple-800 mb-2'>Standard</h3>
              <p className='text-gray-600 mb-4'>Access to all lessons</p>
              <p className='text-2xl font-bold text-purple-800 mb-4'>$20/month</p>
              <button className='bg-purple-600 text-white px-6 py-2 rounded-lg hover:bg-purple-700 transition duration-300'>Subscribe</button>
            </div>
            <div className='p-6 bg-purple-50 rounded-lg shadow-md'>
              <h3 className='text-xl font-semibold text-purple-800 mb-2'>Premium</h3>
              <p className='text-gray-600 mb-4'>Access to all lessons + progress tracking</p>
              <p className='text-2xl font-bold text-purple-800 mb-4'>$30/month</p>
              <button className='bg-purple-600 text-white px-6 py-2 rounded-lg hover:bg-purple-700 transition duration-300'>Subscribe</button>
            </div>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className='text-center py-6 bg-white shadow-md mt-12'>
        <p className='text-gray-600'>© 2025 Quran Learning for Kids. All rights reserved.</p>
      </footer>
    </div>
  );
};

export default App;