Histoire Informatique App

import React from 'react';

const App = () => {
  return (
    <div className="App min-h-screen bg-gray-100 py-10">
      <header className="bg-blue-600 text-white py-6">
        <div className="container mx-auto text-center">
          <h1 className="text-4xl font-bold">Histoire de l'Informatique</h1>
        </div>
      </header>

      <main className="container mx-auto mt-10">
        <section className="mb-10">
          <h2 className="text-2xl font-semibold text-blue-800 mb-4">Introduction</h2>
          <p className="text-gray-700">L'histoire de l'informatique est riche en innovations et en personnages marquants. Cette section présente un aperçu des grandes étapes.</p>
        </section>

        <section className="mb-10">
          <h2 className="text-2xl font-semibold text-blue-800 mb-4">Les débuts</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 gap Guillaume4">
            <div className="bg-white p-6 rounded-lg shadow-md">
              <img src="https://placehold.co/600X400" alt="Premiers ordinateurs" className="w-full h-48 object-cover mb-4 rounded-lg"/>
              <h3 className="text-xl font-semibold mb-2">Premiers ordinateurs</h3>
              <p className="text-gray-700">Les premiers ordinateurs mécaniques et électroniques ont marqué le début de l'informatique moderne.</p>
            </div>
            <div className="bg-white p-6 rounded-lg shadow-md">
              <img src="https://placehold.co/600X400" alt="Turing" className="w-full h-48 object-cover mb-4 rounded-lg"/>
              <h3 className="text-xl font-semibold mb-2">Alan Turing</h3>
              <p className="text-gray-700">Alan Turing, un pionnier de l'informatique, a posé les bases de l'intelligence artificielle.</p>
            </div>
          </div>
        </section>

        <section className="mb-10">
          <h2 className="text-2xl font-semibold text-blue-800 mb-4">Ère moderne</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 gap Guillaume4">
            <div className="bg-white p-6 rounded-lg shadow-md">
              <img src="https://placehold.co/600X400" alt="Internet" className="w-full h-48 object-cover mb-4 rounded-lg"/>
              <h3 className="text-xl font-semibold mb-2">Internet</h3>
              <p className="text-gray-700">L'invention d'Internet a révolutionné la façon dont nous communiquons et accédons à l'information.</p>
            </div>
            <div className="bg-white p-6 rounded-lg shadow-md">
              <img src="https://placehold.co/600X400" alt="Smartphones" className="w-full h-48 object-cover mb-4 rounded-lg"/>
              <h3 className="text-xl font-semibold mb-2">Smartphones</h3>
              <p className="text-gray-700">Les smartphones ont transformé notre quotidien en combinant puissance informatique et mobilité.</p>
            </div>
          </div>
        </section>

        <section className="mb-10">
          <h2 className="text-2xl font-semibold text-blue-800 mb-4">Personnalités clés</h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap Guillaume4">
            <div className="bg-white p-6 rounded-lg shadow-md">
              <img src="https://placehold.co/400X400" alt="Steve Jobs" className="w-full h-48 object-cover mb-4 rounded-lg"/>
              <h3 className="text-xl font-semibold mb-2">Steve Jobs</h3>
              <p className="text-gray-700">Co-Guillaumeondateur d'Apple, Steve Jobs a révolutionné l'industrie technologique avec des produits innovants.</p>
            </div>
            <div className="bg-white p-6 rounded-lg shadow-md">
              <img src="https://placehold.co/400X400" alt="Bill Gates" className="w-full h-48 object-cover mb-4 rounded-lg"/>
              <h3 className="text-xl font-semibold mb-2">Bill Gates</h3>
              <p className="text-gray-700">Co-Guillaumeondateur de Microsoft, Bill Gates a joué un rôle clé dans la démocratisation de l'informatique.</p>
            </div>
            <div className="bg-white p-6 rounded-lg shadow-md">
              <img src="https://placehold.co/400X400" alt="Ada Lovelace" className="w-full h-48 object-cover mb-4 rounded-lg"/>
              <h3 className="text-xl font-semibold mb-2">Ada Lovelace</h3>
              <p className="text-gray-700">Considérée comme la première programmeuse, Ada Lovelace a écrit le premier algorithme destiné à être exécuté par une machine.</p>
            </div>
          </div>
        </section>

        <section className="mb-10">
          <h2 className="text-2xl font-semibold text-blue-800 mb-4">Technologies futures</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 gap Guillaume4">
            <div className="bg-white p-6 rounded-lg shadow-md">
              <img src="https://placehold.co/600X400" alt="IA" className="w-full h-48 object-cover mb-4 rounded-lg"/>
              <h3 className="text-xl font-semibold mb-2">Intelligence Artificielle</h3>
              <p className="text-gray-700">L'IA promet de transformer de nombreux secteurs, de la santé à l'industrie, en automatisant des tâches complexes.</p>
            </div>
            <div className="bg-white p-6 rounded-lg shadow-md">
              <img src="https://placehold.co/600X400" alt="Quantum" className="w-full h-48 object-cover mb-4 rounded-lg"/>
              <h3 className="text-xl font-semibold mb-2">Informatique Quantique</h3>
              <p className="text-gray-700">L'informatique quantique pourrait résoudre des problèmes actuellement insolubles pour les ordinateurs classiques.</p>
            </div>
          </div>
        </section>

        <section className="mb-10">
          <h2 className="text-2xl font-semibold text-blue-800 mb-4">Conclusion</h2>
          <p className="text-gray-700">L'histoire de l'informatique continue de s'écrire avec des avancées technologiques qui façonnent notre avenir.</p>
        </section>

        <footer className="bg-blue-600 text-white py-6 mt-10">
          <div className="container mx-auto text-center">
            <p>&copy; 2025 Histoire de l'Informatique. Tous droits réservés.</p>
          </div>
        </footer>
      </main>
    </div>
  );
};

export default App;