Code Detail

import React from 'react';

const App = () => {
  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-purple-100 p-6">
      <header className="text-center py-6">
        <h1 className="text-4xl font-bold text-purple-900">Smart Personal Finance Planner</h1>
        <p className="text-purple-700 mt-2">Take control of your finances with ease</p>
      </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-lg">
          <h2 className="text-xl font-semibold text-purple-900">Budget Tracker</h2>
          <p className="text-purple-700 mt-2">Track your expenses and manage your budget effectively.</p>
        </div>
        <div className="bg-white p-6 rounded-lg shadow-lg">
          <h2 className="text-xl font-semibold text-purple-900">Savings Goals</h2>
          <p className="text-purple-700 mt-2">Set and achieve your savings goals with personalized plans.</p>
        </div>
        <div className="bg-white p-6 rounded-lg shadow-lg">
          <h2 className="text-xl font-semibold text-purple-900">Investment Planner</h2>
          <p className="text-purple-700 mt-2">Plan your investments and grow your wealth smartly.</p>
        </div>
        <div className="bg-white p-6 rounded-lg shadow-lg">
          <h2 className="text-xl font-semibold text-purple-900">Debt Management</h2>
          <p className="text-purple-700 mt-2">Manage and reduce your debts with tailored strategies.</p>
        </div>
        <div className="bg-white p-6 rounded-lg shadow-lg">
          <h2 className="text-xl font-semibold text-purple-900">Expense Analyzer</h2>
          <p className="text-purple-700 mt-2">Analyze your spending habits and find ways to save more.</p>
        </div>
        <div className="bg-white p-6 rounded-lg shadow-lg">
          <h2 className="text-xl font-semibold text-purple-900">Financial Reports</h2>
          <p className="text-purple-700 mt-2">Generate detailed financial reports to stay informed.</p>
        </div>
      </section>

      <footer className="text-center py-6 mt-6">
        <p className="text-purple-700">© 2025 Smart Personal Finance Planner. All rights reserved.</p>
      </footer>
    </div>
  );
};

export default App;