应用展示计算机史

import React from 'react';

class App extends React.Component {
  render() {
    return (
      <div className="bg-gray-100 min-h-screen">
        <header className="bg-blue-600 text-white p-6">
          <h1 className="text-4xl font-bold text-center">Histoire de l'Informatique</h1>
        </header>

        <section className="container mx-auto px-4 py-8">
          <h2 className="text-2xl font-semibold mb-4">Introduction</h2>
          <p className="text-gray-700 leading-relaxed">
            L'histoire de l'informatique est riche et variée, marquée par des innovations technologiques qui ont transformé le monde.
          </p>
        </section>

        <section className="bg-white py-8">
          <div className="container mx-auto px-4">
            <h2 className="text-2xl font-semibold mb-4">Les Origines</h2>
            <p className="text-gray-700 leading-relaxed">
              Les premiers outils de calcul, comme l'abaque, remontent à l'antiquité.
            </p>
            <img src="https://placehold.co/600x400" alt="Abacus" className="my invasions and advancements.
          </p>
        </section>

        <section className="bg-blue-50 py-8">
          <div className="container mx-auto px-4">
            <h2 className="text-2xl font-semibold mb-4">L'Ère Moderne</h2>
            <p className="text-gray-700 leading-relaxed">
              Les ordinateurs personnels et Internet ont révolutionné notre façon de vivre et de travailler.
            </p>
            <img src="https://placehold.co/600x400" alt="Modern Computers" className="my-4 rounded-lg shadow-lg" />
          </div>
        </section>

        <section className="container mx-auto px-4 py-8">
          <h2 className="text-2xl font-semibold mb-4">L'Intelligence Artificielle</h2>
          <p className="text-gray-700 leading-relaxed">
            L'IA est aujourd'hui au cœur de nombreuses innovations, de la médecine à l'automobile.
          </p>
        </section>

        <section className="bg-gray-200 py-8">
          <div className="container mx-auto px-4">
            <h2 className="text-2xl font-semibold mb-4">Le Futur de l'Informatique</h2>
            <p className="text-gray-700 leading-relaxed">
              Les développements futurs promettent des avancées encore plus spectaculaires.
            </p>
            <img src="https://placehold.co/600x400" alt="Future of Computing" className="my-4 rounded-lg shadow-lg" />
          </div>
        </section>

        <footer className="bg-blue-600 text-white p-6 mt-8">
          <p className="text-center">&copy; 2025 Histoire de l'Informatique. Tous droits réservés.</p>
        </footer>
      </div>