应用管理水泥厂巡检

import React from 'react';

class App extends React.Component {
  render() {
    return (
      <div className="bg-gray-100 min-h-screen p-8">
        <header className="bg-blue-600 text-white p-6 rounded-lg shadow-md">
          <h1 className="text-3xl font-bold">Cement Factory Workshop Supervisor App</h1>
          <p className="text-lg mt-2">Manage patrols and on-site verification tasks efficiently.</p>
        </header>

        <section className="mt-8 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          <div className="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow">
            <h2 className="text-xl font-semibold text-blue-600">Patrol Management</h2>
            <p className="mt-2 text-gray-700">Schedule and track patrols across the site.</p>
            <img src="https://placehold.co/300x150" alt="Patrol Management" className="mt-4 rounded-lg" />
          </div>
          <div className="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow">
            <h2 className="text-xl font-semibold text-blue-600">Task Verification</h2>
            <p className="mt-2 text-gray-700">Verify and confirm completion of tasks.</p>
            <img src="https://placehold.co/300x150" alt="Task Verification" className="mt-4 rounded-lg" />
          </div>
          <div className="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow">
            <h2 className="text-xl font-semibold text-blue-600">Reports</h2>
            <p className="mt-2 text-gray-700">Generate detailed reports for analysis.</p>
            <img src="https://placehold.co/300x150" alt="Reports" className="mt-4 rounded-lg" />
          </div>
        </section>

        <footer className="mt-8 bg-blue-600 text-white p-6 rounded-lg shadow-md">
          <p className="text-center">© 2025 Cement Factory Workshop Supervisor App. All rights reserved.</p>
        </footer>
      </div>
    );
  }
}

export default App;