public/img/front-pages/icons/inventory.svg

@@ -0,0 +1 @@
+<svg idth="64" height="64"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M0 142.1L0 480c0 17.7 14.3 32 32 32s32-14.3 32-32l0-240c0-17.7 14.3-32 32-32l384 0c17.7 0 32 14.3 32 32l0 240c0 17.7 14.3 32 32 32s32-14.3 32-32l0-337.9c0-27.5-17.6-52-43.8-60.7L303.2 5.1c-9.9-3.3-20.5-3.3-30.4 0L43.8 81.4C17.6 90.1 0 114.6 0 142.1zM464 256l-352 0 0 64 352 0 0-64zM112 416l352 0 0-64-352 0 0 64zm352 32l-352 0 0 64 352 0 0-64z"/></svg>

src/pages/Home/LandingPage.jsx

@@ -8,6 +8,7 @@ import { Autoplay, Pagination, Navigation } from "swiper/modules";
 // Import Swiper styles
 import "swiper/css";
 import "swiper/css/navigation";
+import SwaperSlideContent from "./SwaperSlideContent";
 
 const LandingPage = () => {
   return (
@@ -77,8 +78,8 @@ const LandingPage = () => {
                   </a>
                 </li>
                 <li className="nav-item">
-                  <a className="nav-link fw-medium" href="#landingTeam">
+                  <a className="nav-link fw-medium" href="#landingPricing">
-                    Team
+                    Pricing
                   </a>
                 </li>
                 <li className="nav-item">
@@ -131,13 +132,14 @@ const LandingPage = () => {
             <div className="container">
               <div className="hero-text-box text-center position-relative">
                 <h1 className="text-primary hero-title display-6 fw-extrabold">
-                  One dashboard to manage all your businesses
+                  All-in-one platform to manage projects, people, and resources
+                  seamlessly.
                 </h1>
-                <h2 className="hero-sub-title h6 mb-6">
+                {/* <h2 className="hero-sub-title h6 mb-6">
                   Production-ready & easy to use Admin Template
                   <br className="d-none d-lg-block" />
                   for Reliability and Customizability.
-                </h2>
+                </h2> */}
                 <div className="landing-hero-btn d-inline-block position-relative">
                   {/* <span className="hero-btn-item position-absolute d-none d-md-flex fw-medium">
                     Join community
@@ -151,7 +153,7 @@ const LandingPage = () => {
                     href="#landingPricing"
                     className="btn btn-primary btn-lg me-5"
                   >
-                    Get early access
+                    Get Early Access
                   </a>
                   <a
                     href="/auth/reqest/demo"
@@ -165,44 +167,38 @@ const LandingPage = () => {
                 id="heroDashboardAnimation"
                 className="hero-animation-img mt-10"
               >
-                <a
+                <div
-                  href="../vertical-menu-template/app-ecommerce-dashboard.html"
+                  id="heroAnimationImg"
-                  target="_blank"
+                  className="position-relative hero-dashboard-img"
                 >
-                  <div
+                  <Swiper
-                    id="heroAnimationImg"
+                    spaceBetween={30}
-                    className="position-relative hero-dashboard-img"
+                    centeredSlides={true}
+                    rewind={true}
+                    autoplay={{
+                      delay: 3500,
+                      disableOnInteraction: false,
+                    }}
+                    pagination={{
+                      clickable: true,
+                    }}
+                    keyboard={{
+                      enabled: true,
+                    }}
+                    navigation={false}
+                    modules={[Autoplay, Pagination, Navigation]}
+                    className="mySwiper"
+                    onSlideChange={() => console.log("slide change")}
+                    onSwiper={(swiper) => console.log(swiper)}
                   >
-                    <Swiper
+                    <SwiperSlide>
-                      spaceBetween={30}
+                      <SwaperSlideContent></SwaperSlideContent>
-                      centeredSlides={true}
+                    </SwiperSlide>
-                      rewind={true}
+
-                      autoplay={{
+                    <SwiperSlide>
-                        delay: 3500,
+                      <SwaperSlideContent></SwaperSlideContent>
-                        disableOnInteraction: false,
+                    </SwiperSlide>
-                      }}
+                    {/* <SwiperSlide>
-                      pagination={{
-                        clickable: true,
-                      }}
-                      keyboard={{
-                        enabled: true,
-                      }}
-                      navigation={false}
-                      modules={[Autoplay, Pagination, Navigation]}
-                      className="mySwiper"
-                      onSlideChange={() => console.log("slide change")}
-                      onSwiper={(swiper) => console.log(swiper)}
-                    >
-                      <SwiperSlide>
-                        <img
-                          src="./../../public/img/front-pages/landing-page/dashboard-light-01.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-02.png"
                           alt="hero dashboard"
@@ -210,8 +206,8 @@ const LandingPage = () => {
                           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> */}
-                      <SwiperSlide>
+                    {/* <SwiperSlide>
                         <img
                           src="./../../public/img/front-pages/landing-page/dashboard-light-03.png"
                           alt="hero dashboard"
@@ -264,18 +260,17 @@ const LandingPage = () => {
                           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> */}
-                    </Swiper>
+                  </Swiper>
 
-                    {/* <img
+                  {/* <img
                       src="./../../public/img/front-pages/landing-page/hero-elements-light.png"
                       alt="hero elements"
                       className="position-absolute hero-elements-img animation-img top-0 start-0"
                       data-app-light-img="front-pages/landing-page/hero-elements-light.png"
                       data-app-dark-img="front-pages/landing-page/hero-elements-dark.png"
                     /> */}
-                  </div>
+                </div>
-                </a>
               </div>
             </div>
           </div>
@@ -291,105 +286,145 @@ const LandingPage = () => {
             </div>
             <h4 className="text-center mb-1">
               <span className="position-relative fw-extrabold z-1">
-                Everything you need
+                From tasks to teams, documents to inventory —
-                <img
+                {/* <img
                   src="./../../public/img/front-pages/icons/section-title-icon.png"
                   alt="laptop charging"
                   className="section-title-img position-absolute object-fit-contain bottom-0 z-n1"
-                />
+                /> */}
               </span>
-              to start your next project
+              everything your business needs in one place.
             </h4>
             <p className="text-center mb-12">
-              Not just a set of tools, the package includes ready-to-deploy
+              All-in-one platform to manage projects, people, and resources
-              conceptual application.
+              seamlessly.
             </p>
             <div className="features-icon-wrapper row gx-0 gy-6 g-sm-12">
-              <div className="col-lg-4 col-sm-6 text-center features-icon-box">
+              <div className="col-lg-3 col-sm-4 text-center features-icon-box">
                 <div className="text-center mb-4">
                   <img
                     src="./../../public/img/front-pages/icons/laptop.svg"
                     alt="laptop charging"
                   />
                 </div>
-                <h5 className="mb-2">Quality Code</h5>
+                <h5 className="mb-2">Project & Task Management</h5>
                 <p className="features-icon-description">
-                  Code structure that all developers will easily understand and
+                  Plan, assign, and track projects and tasks seamlessly for
-                  fall in love with.
+                  better team collaboration.
                 </p>
               </div>
-              <div className="col-lg-4 col-sm-6 text-center features-icon-box">
+              <div className="col-lg-3 col-sm-4 text-center features-icon-box">
                 <div className="text-center mb-4">
                   <img
                     src="./../../public/img/front-pages/icons/rocket.svg"
                     alt="transition up"
                   />
                 </div>
-                <h5 className="mb-2">Continuous Updates</h5>
+                <h5 className="mb-2">Attendance & Leave Tracking</h5>
                 <p className="features-icon-description">
-                  Free updates for the next 12 months, including new demos and
+                  Monitor employee attendance and manage leave requests with
-                  features.
+                  ease.
                 </p>
               </div>
-              <div className="col-lg-4 col-sm-6 text-center features-icon-box">
+              <div className="col-lg-3 col-sm-4 text-center features-icon-box">
                 <div className="text-center mb-4">
                   <img
                     src="./../../public/img/front-pages/icons/paper.svg"
                     alt="edit"
                   />
                 </div>
-                <h5 className="mb-2">Stater-Kit</h5>
+                <h5 className="mb-2">Role-based Permissions</h5>
                 <p className="features-icon-description">
-                  Start your project quickly without having to remove
+                  Securely control access with customizable roles and
-                  unnecessary features.
+                  permissions.
                 </p>
               </div>
-              <div className="col-lg-4 col-sm-6 text-center features-icon-box">
+              <div className="col-lg-3 col-sm-4 text-center features-icon-box">
                 <div className="text-center mb-4">
                   <img
                     src="./../../public/img/front-pages/icons/check.svg"
                     alt="3d select solid"
                   />
                 </div>
-                <h5 className="mb-2">API Ready</h5>
+                <h5 className="mb-2">Expense & Budget Tracking</h5>
                 <p className="features-icon-description">
-                  Just change the endpoint and see your own data loaded within
+                  Keep projects on budget with real-time expense and cost
-                  seconds.
+                  management.
                 </p>
               </div>
-              <div className="col-lg-4 col-sm-6 text-center features-icon-box">
+              <div className="col-lg-3 col-sm-4 text-center features-icon-box">
                 <div className="text-center mb-4">
                   <img
                     src="./../../public/img/front-pages/icons/user.svg"
                     alt="user"
                   />
                 </div>
-                <h5 className="mb-2">Excellent Support</h5>
+                <h5 className="mb-2">Reporting & Analytics</h5>
                 <p className="features-icon-description">
-                  An easy-to-follow doc with lots of references and code
+                  Gain actionable insights through powerful reports and
-                  examples.
+                  analytics dashboards.
                 </p>
               </div>
-              <div className="col-lg-4 col-sm-6 text-center features-icon-box">
+              <div className="col-lg-3 col-sm-4 text-center features-icon-box">
                 <div className="text-center mb-4">
                   <img
                     src="./../../public/img/front-pages/icons/keyboard.svg"
                     alt="keyboard"
                   />
                 </div>
-                <h5 className="mb-2">Well Documented</h5>
+                <h5 className="mb-2">Document Management</h5>
                 <p className="features-icon-description">
-                  An easy-to-follow doc with lots of references and code
+                  Organize, share, and access all your project and employee
-                  examples.
+                  documents in one place.
                 </p>
               </div>
+              <div className="col-lg-3 col-sm-4 text-center features-icon-box">
+                <div className="text-center mb-4">
+                  <img
+                    src="./../../public/img/front-pages/icons/keyboard.svg"
+                    alt="keyboard"
+                  />
+                </div>
+                <h5 className="mb-2">
+                  Service Provider & Subcontractor Tracking
+                </h5>
+                <p className="features-icon-description">
+                  Manage multiple service providers and subcontractors
+                  efficiently within projects.
+                </p>
+              </div>{" "}
+              <div className="col-lg-3 col-sm-4 text-center features-icon-box">
+                <div className="text-center mb-4">
+                  <img
+                    src="./../../public/img/front-pages/icons/inventory.svg"
+                    alt="keyboard"
+                  />
+                </div>
+                <h5 className="mb-2">Inventory Management</h5>
+                <p className="features-icon-description">
+                  Track materials, supplies, and assets — never run short again.
+                </p>
+              </div>{" "}
             </div>
+            <div className="col-lg-3 col-sm-4 text-center features-icon-box">
+              <div className="text-center mb-4">
+                <img
+                  src="./../../public/img/front-pages/icons/keyboard.svg"
+                  alt="keyboard"
+                />
+              </div>
+              <h5 className="mb-2">Directory</h5>
+              <p className="features-icon-description">
+                Your team, suppliers, vendors organized and connected in one
+                unified directory.
+              </p>
+            </div>{" "}
           </div>
         </section>
         {/*  Useful features: End */}
 
         {/*  Our great team: Start */}
-        <section id="landingTeam" className="section-py landing-team">
+        <section id="landingTeam" className="section-py landing-team" hidden>
           <div className="container">
             <div className="text-center mb-4">
               <span className="badge bg-label-primary">Our Great Team</span>
@@ -952,7 +987,7 @@ const LandingPage = () => {
                         aria-expanded="true"
                         aria-controls="accordionOne"
                       >
-                        Do you charge for each upgrade?
+                        What is MarcoPMS?
                       </button>
                     </h2>
 
@@ -980,7 +1015,7 @@ const LandingPage = () => {
                         aria-expanded="false"
                         aria-controls="accordionTwo"
                       >
-                        Do I need to purchase a license for each website?
+                        Can I switch or cancel my plan?
                       </button>
                     </h2>
                     <div
@@ -1008,7 +1043,7 @@ const LandingPage = () => {
                         aria-expanded="false"
                         aria-controls="accordionThree"
                       >
-                        What is regular license?
+                        How secure is Marco PMS?
                       </button>
                     </h2>
                     <div
@@ -1041,7 +1076,7 @@ const LandingPage = () => {
                         aria-expanded="false"
                         aria-controls="accordionFour"
                       >
-                        What is extended license?
+                        Where can i get help if I have more questions?
                       </button>
                     </h2>
                     <div

src/pages/Home/SwaperSlideContent.jsx

@@ -0,0 +1,39 @@
+const SwaperSlideContent = () => {
+  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",
+          height: "500px",
+        }}
+      >
+        {/* Overlay */}
+        <div
+          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))",
+          }}
+        ></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>
+          {/* <a
+                                href="#services"
+                                className="btn btn-primary btn-lg mt-3"
+                              >
+                                Get Started
+                              </a> */}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SwaperSlideContent;

src/router/AppRoutes.jsx

@@ -50,7 +50,7 @@ const router = createBrowserRouter(
   [
     {
       path: "/",
-      element: <RootRedirect />,
+      element: <LandingPage />,
     },
     {
       element: <AuthLayout />,