Système de paiement VB

import React from 'react';

function App() {
  return (
    <div className="App min-h-screen bg-gray-100 p-8">
      <header className="bg-blue-500 text-white py-6 rounded-lg shadow-lg mb-8">
        <h1 className="text-4xl font-bold text-center">Payment Management System</h1>
      </header>

      <section className="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-2xl font-semibold text-blue-600 mb-4">Add Client via Excel</h2>
          <p className="text-gray-700">Easily add new clients by importing Excel files.</p>
        </div>

        <div className="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow">
          <h2 className="text-2xl font-semibold text-blue-600 mb-4">Record Payment</h2>
          <p className="text-gray-700">Record and manage client payments efficiently.</p>
        </div>

        <div className="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow">
          <h2 className="text-2xl font-semibold text-blue-600 mb-4">Color Payments</h2>
          <p className="text-gray-700">Color code payments as Paid, Partial, or Not Paid.</p>
        </div>

        <div className="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow">
          <h2 className="text-2xl font-semibold text-blue-600 mb-4">Search Client</h2>
          <p className="text-gray-700">Quickly search for client information.</p>
        </div>

        <div className="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow">
          <h2 className="text-2xl font-semibold text-blue-600 mb-4">Daily Payment Page</h2>
          <p className="text-gray-700">Generate daily payment summaries.</p>
        </div>

        <div className="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow">
          <h2 className="text-2xl font-semibold text-blue-600 mb-4">Export Clients via Excel</h2>
          <p className="text-gray-700">Export client data to Excel for external use.</p>
        </div>
      </section>

      <footer className="mt-12 text-center text-gray-600">
        <p>© 2025 Payment Management System. All rights reserved.</p>
      </footer>
    </div>
  );
}

export default App;