Utility Bill Pay Later

import React from 'react';

const App = () => {
  return (
    <div className="App bg-gradient-to-b from-blue-50 to-blue-100 min-h-screen">
      <header className="bg-blue-600 text-white p-6">
        <h1 className="text-3xl font-bold">Utility Bill Payment</h1>
        <p className="text-xl">Pay Later Limit $600</p>
      </header>

      <main className="p-6">
        <section className="mb-8">
          <h2 className="text-2xl font-semibold mb-4">Dashboard</h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div className="bg-white p-6 rounded-lg shadow-lg">
              <h3 className="text-xl font-medium mb-2">Current Balance</h3>
              <p className="text-2xl text-blue-600">$450</p>
            </div>
            <div className="bg-white p-6 rounded-lg shadow-lg">
              <h3 className="text-xl font-medium mb-2">Due Date</h3>
              <p className="text-2xl text-blue-600">Dec 15, 2025</p>
            </div>
            <div className="bg-white p-6 rounded-lg shadow-lg">
              <h3 className="text-xl font-medium mb-2">Pay Later Limit</h3>
              <p className="text-2xl text-blue-600">$600</p>
            </div>
          </div>
        </section>

        <section className="mb-8">
          <h2 className="text-2xl font-semibold mb-4">Recent Transactions</h2>
          <div className="bg-white p-6 rounded-lg shadow-lg">
            <div className="flex justify-between border-b pb-2 mb-2">
              <p className="font-medium">Date</p>
              <p className="font-medium">Amount</p>
            </div>
            <div className="flex justify-between py-2">
              <p>Nov 1, 2025</p>
              <p className="text-green-600">+$200</p>
            </div>
            <div className="flex justify-between py-2">
              <p>Nov 5, 2025</p>
              <p className="text-red-600">-$100</p>
            </div>
          </div>
        </section>

        <section className="mb-8">
          <h2 className="text-2xl font-semibold mb-4">Quick Actions</h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            <button className="bg-blue-600 text-white p-6 rounded-lg shadow-lg hover:bg-blue-700 transition duration-300">
              Pay Now
            </button>
            <button className="bg-blue-600 text-white p-6 rounded-lg shadow-lg hover:bg-blue-700 transition duration-300">
              Pay Later
            </button>
            <button className="bg-blue-600 text-white p-6 rounded-lg shadow-lg hover:bg-blue-700 transition duration-300">
              View History
            </button>
          </div>
        </section>

        <section className="mb-8">
          <h2 className="text-2xl font-semibold mb-4">Notifications</h2>
          <div className="bg-white p-6 rounded-lg shadow-lg">
            <div className="flex items-center mb-4">
              <div className="mr-4">
                <img src="https://placehold.co/50x50" alt="Notification" className="rounded-full" />
              </div>
              <p className="text-lg">Your bill is due soon. Please pay before Dec 15, 2025.</p>
            </div>
            <div className="flex items-center">
              <div className="mr-4">
                <img src="https://placehold.co/50x50" alt="Notification" className="rounded-full" />
              </div>
              <p className="text-lg">You have reached 75% of your pay later limit.</p>
            </div>
          </div>
        </section>

        <section className="mb-8">
          <h2 className="text-2xl font-semibold mb-4">Graphical Overview</h2>
          <div className="bg-white p-6 rounded-lg shadow-lg">
            <img src="https://placehold.co/800x400" alt="Graphical Overview" className="w-full" />
          </div>
        </section>

        <section className="mb-8">
          <h2 className="text-2xl font-semibold mb-4">Settings</h2>
          <div className="bg-white p-6 rounded-lg shadow-lg">
            <div className="flex items-center mb-4">
              <div className="mr-4">
                <img src="https://placehold.co/50x50" alt="Profile" className="rounded-full" />
              </div>
              <p className="text-lg">Update Profile</p>
            </div>
            <div className="flex items-center">
              <div className="mr-4">
                <img src="https://placehold.co/50x50" alt="Security" className="rounded-full" />
              </div>
              <p className="text-lg">Security Settings</p>
            </div>
          </div>
        </section>

        <section className="mb-8">
          <h2 className="text-2xl font-semibold mb-4">Support</h2>
          <div className="bg-white p-6 rounded-lg shadow-lg">
            <div className="flex items-center mb-4">
              <div className="mr-4">
                <img src="https://placehold.co/50x50" alt="Support" className="rounded-full" />
              </div>
              <p className="text-lg">Contact Support</p>
            </div>
            <div className="flex items-center">
              <div className="mr-4">
                <img src="https://placehold.co/50x50" alt="FAQ" className="rounded-full" />
              </div>
              <p className="text-lg">FAQ</p>
            </div>
          </div>
        </section>
      </main>

      <footer className="bg-blue-600 text-white p-6 text-center">
        <p>&copy; 2025 Utility Bill Payment. All rights reserved.</p>
      </footer>
    </div>
  );
};

export default App;