zkt26/Front-end/src/pages/About.jsx

import React from "react";

function About() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-50">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <div className="mb-5">
          {/* Grille principale */}
          <div className="grid md:grid-cols-2 gap-10 lg:gap-20 mb-5">
            {/* Section Notre mission */}
            <div className="order-1 md:order-1">
              <h1 className="text-2xl font-bold text-gray-900 mb-6">
                Notre mission
              </h1>
              <p className="text-gray-700 leading-relaxed">
                Notre mission est de fournir une solution complète et innovante
                pour la surveillance climatique et environnementale du
                territoire français. En combinant des prévisions météorologiques
                de haute qualité avec une gestion efficace des objets connectés,
                nous visons à offrir une plateforme centralisée permettant de
                surveiller en temps réel les conditions météorologiques locales,
                tout en facilitant l'analyse des données collectées par des
                objets connectés déployés à travers le pays.
              </p>
            </div>
            <img
              className="rounded-lg h-64 w-full object-cover order-2 md:order-2"
              src="./src/img/NotreMission.png"
              alt="Notre mission"
            />

            {/* Section Qui sommes-nous */}
            <img
              className="rounded-lg h-64 w-full object-cover order-4 md:order-3"
              src="./src/img/iotmeteo.jpg"
              alt="IoT et météo"
            />
            <div className="order-3 md:order-4">
              <h1 className="text-2xl font-bold text-gray-900 mb-6">
                Qui sommes-nous ?
              </h1>
              <p className="text-gray-700 leading-relaxed">
                Nous sommes une équipe de passionnés de technologie,
                d’innovation et d’environnement. Nous croyons fermement que la
                combinaison de la donnée météorologique en temps réel et de
                l’Internet des Objets (IoT) peut avoir un impact majeur sur la
                gestion des territoires. Que ce soit pour les collectivités
                locales, les entreprises ou les acteurs publics, notre
                plateforme offre les outils nécessaires pour une gestion
                proactive et réactive de l’environnement.
              </p>
            </div>

            {/* Section Notre Vision */}
            <div className="order-5 md:order-5">
              <h1 className="text-2xl font-bold text-gray-900 mb-6">
                Notre Vision
              </h1>
              <p className="text-gray-700 leading-relaxed">
                Dans un monde où les conditions climatiques évoluent rapidement,
                il est essentiel de pouvoir anticiper et réagir efficacement
                face aux phénomènes météorologiques. Grâce à nos objets
                connectés et à notre interface intuitive, nous permettons aux
                utilisateurs de suivre les conditions en temps réel et d’agir en
                conséquence. De la gestion des risques climatiques à la
                planification urbaine, notre plateforme aide les décideurs à
                prendre des décisions éclairées basées sur des données fiables
                et locales.
              </p>
            </div>
            <img
              className="rounded-lg h-64 w-full object-cover order-6 md:order-6"
              src="./src/img/surveillancemeteo.webp"
              alt="Surveillance météo"
            />
          </div>

          {/* Section Objectifs */}
          <div className="text-center col-span-2 order-7">
            <h1 className="text-2xl font-bold text-gray-900 mb-10 mt-20">
              Les Objectifs de Notre Plateforme
            </h1>
            <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-10">
              {/* Objectif 1 */}
              <div className="relative group w-full h-80 mb-7">
                <img
                  src="./src/img/surveillancetempsreel.jpg"
                  alt="Surveillance en temps réel"
                  className="w-full h-full object-cover rounded-xl"
                />
                <div className="absolute inset-0 bg-blue-600 opacity-0 group-hover:opacity-100 transition-opacity duration-500 rounded-xl flex items-center justify-center">
                  <p className="text-white text-lg font-bold px-4">
                    Grâce à nos objets connectés, nous collectons des données
                    météorologiques locales, permettant une surveillance
                    continue des conditions climatiques sur tout le territoire
                    français.
                  </p>
                </div>
                <h1 className="text-xl font-bold mt-4 ">
                  Surveillance en temps réel
                </h1>
              </div>

              {/* Objectif 2 */}
              <div className="relative group w-full h-80 mb-7">
                <img
                  src="./src/img/precisionfiable.jpg"
                  alt="Précision fiable"
                  className="w-full h-full object-cover rounded-xl"
                />
                <div className="absolute inset-0 bg-blue-600 opacity-0 group-hover:opacity-100 transition-opacity duration-500 rounded-xl flex items-center justify-center">
                  <p className="text-white text-lg font-bold px-4">
                    En utilisant les meilleures technologies de prévision
                    météorologique, nous vous fournissons des prévisions
                    précises, qu’il s’agisse de la température, de la vitesse du
                    vent ou de la qualité de l’air.
                  </p>
                </div>
                <h1 className="text-xl font-bold mt-4 mb-6">Prédiction fiable</h1>
              </div>

              {/* Objectif 3 */}
              <div className="relative group w-full h-80 mb-7 border-2 rounded-xl">
                <img
                  src="./src/img/gestioniot.png"
                  alt="Gestion IoT"
                  className="w-full h-full object-cover rounded-xl"
                />
                <div className="absolute inset-0 bg-blue-600 opacity-0 group-hover:opacity-100 transition-opacity duration-500 rounded-xl flex items-center justify-center">
                  <p className="text-white text-lg font-bold px-4">
                    Nous permettons aux utilisateurs de gérer facilement leurs
                    objets connectés (stations météo, capteurs, etc.) à travers
                    une interface simple, tout en offrant un suivi en temps réel
                    de leur statut et de leurs données.
                  </p>
                </div>
                <h1 className="text-xl font-bold mt-4 mb-6">
                  Gestion des objets connectés
                </h1>
              </div>

              {/* Objectif 4 */}
              <div className="relative group w-full h-80 mb-7">
                <img
                  src="./src/img/fr-alert.webp"
                  alt="Réponse rapide"
                  className="w-full h-full object-cover rounded-xl"
                />
                <div className="absolute inset-0 bg-blue-600 opacity-0 group-hover:opacity-100 transition-opacity duration-500 rounded-xl flex items-center justify-center">
                  <p className="text-white text-lg font-bold px-4">
                    Notre plateforme vous envoie des alertes instantanées
                    concernant les phénomènes météorologiques extrêmes, vous
                    permettant de prendre des décisions rapides et adaptées.
                  </p>
                </div>
                <h1 className="text-xl font-bold mt-4 mb-6">
                  Réponse rapide aux alertes climatiques
                </h1>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default About;