إسلامي وثقافة عامة

import React from 'react';

const App = () => {
  return (
    <div className="bg-gray-100 min-h-screen p-8">
      <div className="max-w-7xl mx-auto">
        <h1 className="text-4xl font-bold text-center mb-12 text-blue-900">Islamic Knowledge Hub</h1>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          <Section title="Quran" image="https://placehold.co/300X300" />
          <Section title="Language & Literature" image="https://placehold.co/300X300" />
          <Section title="World of Poetry" image="https://placehold.co/300X300" />
          <Section title="History" image="https://placehold.co/300X300" />
          <Section title="Geography" image="https://placehold.co/300X300" />
          <Section title="General Knowledge" image="https://placehold.co/300X300" />
          <Section title="Countries & Capitals" image="https://placehold.co/300X300" />
          <Section title="Currencies" image="https://placehold.co/300X300" />
          <Section title="World of Aviation" image="https://placehold.co/300X300" />
          <Section title="Logos" image="https://placehold.co/300X300" />
          <Section title="Global Logos" image="https://placehold.co/300X300" />
          <Section title="Proverbs & Riddles" image="https://placehold.co/300X300" />
          <Section title="Riddle & Proverb" image="https://placehold.co/300X300" />
        </div>
      </div>
    </div>
  );
};

const Section = ({ title, image }) => {
  return (
    <div className="bg-white rounded-lg shadow-md overflow-hidden transform transition-all hover:scale-105 hover:shadow-lg">
      <img src={image} alt={title} className="w-full h-48 object-cover" />
      <div className="p-6">
        <h2 className="text-2xl font-semibold text-gray-800 mb-4">{title}</h2>
        <button className="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600 transition-all">Explore</button>
      </div>
    </div>
  );
};

export default App;