From 2642532b60e96c5f8edb0425e12cde464fc6e7bc Mon Sep 17 00:00:00 2001
From: Vikas Nale <vikas@marcoaiot.com>
Date: Tue, 9 Sep 2025 15:02:59 +0530
Subject: [PATCH] handle animations

---
 src/pages/Home/LandingPage.css        |   6 +-
 src/pages/Home/LandingPage.jsx        | 116 +++++++++++---------------
 src/pages/Home/SwaperSlideContent.jsx |  38 +++++++--
 3 files changed, 82 insertions(+), 78 deletions(-)

diff --git a/src/pages/Home/LandingPage.css b/src/pages/Home/LandingPage.css
index 70b8e283..c2a23cf9 100644
--- a/src/pages/Home/LandingPage.css
+++ b/src/pages/Home/LandingPage.css
@@ -355,7 +355,7 @@ nav.layout-navbar.navbar-active::after {
 
 .landing-hero {
   border-radius: 0 0 3.5rem 3.5rem;
-  padding-top: 10.2rem;
+  padding-top: 8.2rem;
 }
 .landing-hero::after {
   content: "";
@@ -368,7 +368,8 @@ nav.layout-navbar.navbar-active::after {
 }
 @media (min-width: 992px) {
   .landing-hero .hero-text-box {
-    max-width: 34.375rem;
+    /* max-width: 34.375rem; */
+    max-width: 70%;
     margin: 0 auto;
   }
 }
@@ -628,6 +629,7 @@ nav.layout-navbar.navbar-active::after {
 .swiper {
   width: 100%;
   height: 100%;
+  border-radius: 10px;
 }
 
 .swiper-slide {
diff --git a/src/pages/Home/LandingPage.jsx b/src/pages/Home/LandingPage.jsx
index 0277d357..252a1fa6 100644
--- a/src/pages/Home/LandingPage.jsx
+++ b/src/pages/Home/LandingPage.jsx
@@ -4,7 +4,7 @@ import { Link } from "react-router-dom";
 
 import { Swiper, SwiperSlide } from "swiper/react";
 // import required modules
-import { Autoplay, Pagination, Navigation } from "swiper/modules";
+import { EffectFlip, Autoplay, Pagination, Navigation } from "swiper/modules";
 // Import Swiper styles
 import "swiper/css";
 import "swiper/css/navigation";
@@ -163,6 +163,7 @@ const LandingPage = () => {
                   </a>
                 </div>
               </div>
+
               <div
                 id="heroDashboardAnimation"
                 className="hero-animation-img mt-10"
@@ -186,81 +187,62 @@ const LandingPage = () => {
                       enabled: true,
                     }}
                     navigation={false}
-                    modules={[Autoplay, Pagination, Navigation]}
+                    modules={[EffectFlip, Autoplay, Pagination, Navigation]}
                     className="mySwiper"
                     onSlideChange={() => console.log("slide change")}
                     onSwiper={(swiper) => console.log(swiper)}
                   >
                     <SwiperSlide>
-                      <SwaperSlideContent></SwaperSlideContent>
+                      <SwaperSlideContent
+                        ImageUrl="./../../public/img/front-pages/landing-page/dashboard-light-01.png"
+                        Title="Project & Task Management"
+                        Body="Plan, assign, and track projects and tasks seamlessly for better team collaboration."
+                      ></SwaperSlideContent>
                     </SwiperSlide>
 
                     <SwiperSlide>
-                      <SwaperSlideContent></SwaperSlideContent>
+                      <SwaperSlideContent
+                        ImageUrl="./../../public/img/front-pages/landing-page/dashboard-light-02.png"
+                        Title="Attendance & Leave Tracking"
+                        Body="Monitor employee attendance and manage leave requests with ease."
+                      ></SwaperSlideContent>
+                    </SwiperSlide>
+                    <SwiperSlide>
+                      <SwaperSlideContent
+                        ImageUrl="./../../public/img/front-pages/landing-page/dashboard-light-04.png"
+                        Title="Role-based Permissions"
+                        Body="Securely control access with customizable roles and permissions."
+                      ></SwaperSlideContent>
+                    </SwiperSlide>
+                    <SwiperSlide>
+                      <SwaperSlideContent
+                        ImageUrl="./../../public/img/front-pages/landing-page/dashboard-light-05.png"
+                        Title="Expense & Budget Tracking"
+                        Body="Keep projects on budget with real-time expense and cost management."
+                        ContentAlign="left"
+                      ></SwaperSlideContent>
+                    </SwiperSlide>
+                    <SwiperSlide>
+                      <SwaperSlideContent
+                        ImageUrl="./../../public/img/front-pages/landing-page/dashboard-light-06.png"
+                        Title="Reporting & Analytics"
+                        Body="Gain actionable insights through powerful reports and analytics dashboards."
+                      ></SwaperSlideContent>
+                    </SwiperSlide>
+                    <SwiperSlide>
+                      <SwaperSlideContent
+                        ImageUrl="./../../public/img/front-pages/landing-page/dashboard-light-07.png"
+                        Title="Document Management"
+                        Body="Organize, share, and access all your project and employee documents in one place."
+                      ></SwaperSlideContent>
+                    </SwiperSlide>
+                    <SwiperSlide>
+                      <SwaperSlideContent
+                        ImageUrl="./../../public/img/front-pages/landing-page/dashboard-light-08.png"
+                        Title="Inventory Management"
+                        Body="Track materials, supplies, and assets — never run short again."
+                      ></SwaperSlideContent>
                     </SwiperSlide>
-                    {/* <SwiperSlide>
-                        <img
-                          src="./../../public/img/front-pages/landing-page/dashboard-light-02.png"
-                          alt="hero dashboard"
-                          className="animation-img"
-                          data-app-light-img="front-pages/landing-page/hero-dashboard-light.png"
-                          data-app-dark-img="front-pages/landing-page/hero-dashboard-dark.png"
-                        />
-                      </SwiperSlide> */}
-                    {/* <SwiperSlide>
-                        <img
-                          src="./../../public/img/front-pages/landing-page/dashboard-light-03.png"
-                          alt="hero dashboard"
-                          className="animation-img"
-                          data-app-light-img="front-pages/landing-page/hero-dashboard-light.png"
-                          data-app-dark-img="front-pages/landing-page/hero-dashboard-dark.png"
-                        />
-                      </SwiperSlide>
-                      <SwiperSlide>
-                        <img
-                          src="./../../public/img/front-pages/landing-page/dashboard-light-04.png"
-                          alt="hero dashboard"
-                          className="animation-img"
-                          data-app-light-img="front-pages/landing-page/hero-dashboard-light.png"
-                          data-app-dark-img="front-pages/landing-page/hero-dashboard-dark.png"
-                        />
-                      </SwiperSlide>
-                      <SwiperSlide>
-                        <img
-                          src="./../../public/img/front-pages/landing-page/dashboard-light-05.png"
-                          alt="hero dashboard"
-                          className="animation-img"
-                          data-app-light-img="front-pages/landing-page/hero-dashboard-light.png"
-                          data-app-dark-img="front-pages/landing-page/hero-dashboard-dark.png"
-                        />
-                      </SwiperSlide>
-                      <SwiperSlide>
-                        <img
-                          src="./../../public/img/front-pages/landing-page/dashboard-light-06.png"
-                          alt="hero dashboard"
-                          className="animation-img"
-                          data-app-light-img="front-pages/landing-page/hero-dashboard-light.png"
-                          data-app-dark-img="front-pages/landing-page/hero-dashboard-dark.png"
-                        />
-                      </SwiperSlide>
-                      <SwiperSlide>
-                        <img
-                          src="./../../public/img/front-pages/landing-page/dashboard-light-07.png"
-                          alt="hero dashboard"
-                          className="animation-img"
-                          data-app-light-img="front-pages/landing-page/hero-dashboard-light.png"
-                          data-app-dark-img="front-pages/landing-page/hero-dashboard-dark.png"
-                        />
-                      </SwiperSlide>
-                      <SwiperSlide>
-                        <img
-                          src="./../../public/img/front-pages/landing-page/dashboard-light-08.png"
-                          alt="hero dashboard"
-                          className="animation-img"
-                          data-app-light-img="front-pages/landing-page/hero-dashboard-light.png"
-                          data-app-dark-img="front-pages/landing-page/hero-dashboard-dark.png"
-                        />
-                      </SwiperSlide> */}
                   </Swiper>
 
                   {/* <img
diff --git a/src/pages/Home/SwaperSlideContent.jsx b/src/pages/Home/SwaperSlideContent.jsx
index 05ea80c0..13ed6c7f 100644
--- a/src/pages/Home/SwaperSlideContent.jsx
+++ b/src/pages/Home/SwaperSlideContent.jsx
@@ -1,11 +1,15 @@
-const SwaperSlideContent = () => {
+const SwaperSlideContent = ({
+  ImageUrl = "",
+  Title = "",
+  Body = "",
+  ContentAlign = "right",
+}) => {
   return (
     <div className="container-fluid p-0">
       <div
         className="position-relative text-center text-white"
         style={{
-          background:
-            "url('./../../public/img/front-pages/landing-page/dashboard-light-01.png') center center/cover no-repeat",
+          background: `url('${ImageUrl}') center center/cover no-repeat`,
           height: "500px",
         }}
       >
@@ -14,16 +18,32 @@ const SwaperSlideContent = () => {
           className="position-absolute top-0 start-0 w-100 h-100"
           style={{
             background:
-              "linear-gradient(to right, rgba(0,0,0,0.7), rgba(0,0,0,0.1))",
+              "linear-gradient(to right, rgba(0,0,0,0.5), rgba(0,0,0,0.1))",
           }}
         ></div>
 
         {/* Text Content */}
-        <div className="position-absolute top-50 start-50 translate-middle text-end">
-          <h1 className="fw-bold">Manage Projects. Empower Teams.</h1>
-          <p className="lead">
-            All-in-one PMS solution for projects, people, and resources.
-          </p>
+        <div
+          className={
+            "position-absolute top-50  p-5 " +
+            (ContentAlign == "left"
+              ? "start-0  text-start ps-10 ms-10"
+              : "start-50  text-end pe-10 me-10")
+          }
+          style={{
+            borderRadius: "10px",
+            background:
+              "linear-gradient(to bottom, rgba(194, 216, 237,1), rgba(194, 216, 237,0.8))",
+            boxShadow: "10px 10px 15px rgba(0, 0, 0, 0.4)",
+          }}
+        >
+          <h1
+            className="fw-bold text-primary hero-title display-6 fw-extrabold"
+            style={{ color: "#fff" }}
+          >
+            {Title}
+          </h1>
+          <p className="lead fw-bold">{Body}</p>
           {/* <a
                                 href="#services"
                                 className="btn btn-primary btn-lg mt-3"