modify hero images for landing page

src/pages/Home/LandingPage.jsx

@@ -137,7 +137,10 @@ const LandingPage = () => {
                 Empower your team with attendance, expense, and task management
                 tools.
               </p>
-              <a href="#" className="btn btn-square-small btn-lg mt-3 p-3">
+              <a
+                href="#"
+                className="btn btn-green btn-square-small btn-lg mt-3 p-3"
+              >
                 Learn More
               </a>
             </div>
@@ -157,7 +160,33 @@ const LandingPage = () => {
               <p className="lead">
                 Make data-driven decisions with real-time project analytics.
               </p>
-              <a href="#" className="btn btn-square-small btn-lg mt-3 p-3">
+              <a
+                href="#"
+                className="btn btn-green btn-square-small btn-lg mt-3 p-3"
+              >
+                View Demo
+              </a>
+            </div>
+          </div>
+
+          <div
+            className="carousel-item"
+            style={{
+              backgroundImage: `url("./img/hero/bg-04.png")`,
+            }}
+          >
+            <div className="hero-overlay"></div>
+            <div className="carousel-caption text-start text-white">
+              <h1 className="fw-bold display-4">
+                Financial Management (Expense & Billing)
+              </h1>
+              <p className="lead">
+                Eliminate Paper Receipts. Take Control of Your Cash Flow.
+              </p>
+              <a
+                href="#"
+                className="btn btn-green btn-square-small btn-lg mt-3 p-3"
+              >
                 View Demo
               </a>
             </div>