إنشاء تطبيق علمي

import React from 'react';

class App extends React.Component {
  render() {
    return (
      <div className="App bg-gradient-to-b from-blue-50 to-blue-100 min-h-screen">
        <header className="text-center py-12 bg-blue-600 text-white">
          <h1 className="text-5xl font-bold">Scientific Explorer</h1>
          <p className="mt-4 text-xl">Discover the wonders of science</p>
        </header>

        <section className="container mx-auto px-4 py-8">
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
            {Array.from({ length: 6 }).map((_, idx) => (
              <div key={idx} className="bg-white rounded-lg shadow-lg overflow-hidden">
                <img src="https://placehold.co/600x400" alt="Placeholder" className="w-full h-48 object-cover" />
                <div className="p-6">
                  <h2 className="font-bold text-xl mb-2">Scientific Topic {idx + 1}</h2>
                  <p className="text-gray-700">Explore the fascinating world of scientific topic {idx + 1}.</p>
                </div>
              </div>
            ))}
          </div>
        </section>

        <footer className="bg-blue-600 text-white text-center py-6 mt-12">
          <p>&copy; 2025 Scientific Explorer. All rights reserved.</p>
        </footer>
      </div>
    );
  }
}

export default App;