public/img/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.css

@@ -1,6 +1,10 @@
 .section-py {
   padding: 6.25rem 0;
 }
+
+.section-py .heading {
+  font-size: 1.625rem;
+}
 @media (max-width: 1199.98px) {
   .section-py {
     padding: 4rem 0;
@@ -53,6 +57,7 @@
 nav.layout-navbar {
   /* backdrop-filter: unset; */
   /* background-color: transparent !important; */
+  background-color: rgba(214, 36, 33, 0.88) !important;
 }
 
 nav.layout-navbar::before {
@@ -303,10 +308,10 @@ nav.layout-navbar.navbar-active::after {
   opacity: 1;
 }
 .landing-footer .footer-top {
-  padding-top: 3.3rem;
+  padding-top: 1.3rem;
-  padding-bottom: 2.3rem;
+  padding-bottom: 1.3rem;
-  border-top-left-radius: 3.75rem;
+  border-top-left-radius: 1.75rem;
-  border-top-right-radius: 3.75rem;
+  border-top-right-radius: 1.75rem;
 }
 @media (max-width: 767.98px) {
   .landing-footer .footer-top {
@@ -355,7 +360,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 +373,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,12 +634,12 @@ nav.layout-navbar.navbar-active::after {
 .swiper {
   width: 100%;
   height: 100%;
+  border-radius: 10px;
 }
 
 .swiper-slide {
   text-align: center;
   font-size: 18px;
-  background: #444;
 
   /* Center slide text vertically */
   display: flex;

src/pages/Home/LandingPage.jsx

@@ -1,15 +1,20 @@
 import { noop } from "@tanstack/react-query";
+import React, { useEffect, useMemo, useState } from "react";
+
 import "./LandingPage.css";
 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";
+import SwaperSlideContent from "./SwaperSlideContent";
+import SwaperBlogContent from "./SwaperBlogContent";
 
 const LandingPage = () => {
+  const [swiperRef, setSwiperRef] = useState(null);
   return (
     <div>
       <nav className="layout-navbar shadow-none py-0">
@@ -77,8 +82,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">
@@ -87,11 +92,7 @@ const LandingPage = () => {
                   </a>
                 </li>
                 <li className="nav-item">
-                  <a
+                  <a className="nav-link fw-medium" href="#landingReviews">
-                    className="nav-link fw-medium"
-                    href="../vertical-menu-template/index.html"
-                    target="_blank"
-                  >
                     Blogs
                   </a>
                 </li>
@@ -131,18 +132,19 @@ 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
                     <img
-                      src="./../../public/img/front-pages/icons/Join-community-arrow.png"
+                      src="./../../public/img/icons/Join-community-arrow.png"
                       alt="Join community arrow"
                       className="scaleX-n1-rtl"
                     />
@@ -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"
@@ -161,13 +163,10 @@ const LandingPage = () => {
                   </a>
                 </div>
               </div>
+
               <div
                 id="heroDashboardAnimation"
                 className="hero-animation-img mt-10"
-              >
-                <a
-                  href="../vertical-menu-template/app-ecommerce-dashboard.html"
-                  target="_blank"
               >
                 <div
                   id="heroAnimationImg"
@@ -188,94 +187,64 @@ 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>
-                        <img
+                      <SwaperSlideContent
-                          src="./../../public/img/front-pages/landing-page/dashboard-light-01.png"
+                        ImageUrl="./../../public/img/app/dashboard-light-01.png"
-                          alt="hero dashboard"
+                        Title="Project & Task Management"
-                          className="animation-img"
+                        Body="Plan, assign, and track projects and tasks seamlessly for better team collaboration."
-                          data-app-light-img="front-pages/landing-page/hero-dashboard-light.png"
+                      ></SwaperSlideContent>
-                          data-app-dark-img="front-pages/landing-page/hero-dashboard-dark.png"
+                    </SwiperSlide>
-                        />
+
+                    <SwiperSlide>
+                      <SwaperSlideContent
+                        ImageUrl="./../../public/img/app/dashboard-light-02.png"
+                        Title="Attendance & Leave Tracking"
+                        Body="Monitor employee attendance and manage leave requests with ease."
+                      ></SwaperSlideContent>
                     </SwiperSlide>
                     <SwiperSlide>
-                        <img
+                      <SwaperSlideContent
-                          src="./../../public/img/front-pages/landing-page/dashboard-light-02.png"
+                        ImageUrl="./../../public/img/app/dashboard-light-04.png"
-                          alt="hero dashboard"
+                        Title="Role-based Permissions"
-                          className="animation-img"
+                        Body="Securely control access with customizable roles and permissions."
-                          data-app-light-img="front-pages/landing-page/hero-dashboard-light.png"
+                      ></SwaperSlideContent>
-                          data-app-dark-img="front-pages/landing-page/hero-dashboard-dark.png"
-                        />
                     </SwiperSlide>
                     <SwiperSlide>
-                        <img
+                      <SwaperSlideContent
-                          src="./../../public/img/front-pages/landing-page/dashboard-light-03.png"
+                        ImageUrl="./../../public/img/app/dashboard-light-05.png"
-                          alt="hero dashboard"
+                        Title="Expense & Budget Tracking"
-                          className="animation-img"
+                        Body="Keep projects on budget with real-time expense and cost management."
-                          data-app-light-img="front-pages/landing-page/hero-dashboard-light.png"
+                        ContentAlign="left"
-                          data-app-dark-img="front-pages/landing-page/hero-dashboard-dark.png"
+                      ></SwaperSlideContent>
-                        />
                     </SwiperSlide>
                     <SwiperSlide>
-                        <img
+                      <SwaperSlideContent
-                          src="./../../public/img/front-pages/landing-page/dashboard-light-04.png"
+                        ImageUrl="./../../public/img/app/dashboard-light-06.png"
-                          alt="hero dashboard"
+                        Title="Reporting & Analytics"
-                          className="animation-img"
+                        Body="Gain actionable insights through powerful reports and analytics dashboards."
-                          data-app-light-img="front-pages/landing-page/hero-dashboard-light.png"
+                      ></SwaperSlideContent>
-                          data-app-dark-img="front-pages/landing-page/hero-dashboard-dark.png"
-                        />
                     </SwiperSlide>
                     <SwiperSlide>
-                        <img
+                      <SwaperSlideContent
-                          src="./../../public/img/front-pages/landing-page/dashboard-light-05.png"
+                        ImageUrl="./../../public/img/app/dashboard-light-07.png"
-                          alt="hero dashboard"
+                        Title="Document Management"
-                          className="animation-img"
+                        Body="Organize, share, and access all your project and employee documents in one place."
-                          data-app-light-img="front-pages/landing-page/hero-dashboard-light.png"
+                      ></SwaperSlideContent>
-                          data-app-dark-img="front-pages/landing-page/hero-dashboard-dark.png"
-                        />
                     </SwiperSlide>
                     <SwiperSlide>
-                        <img
+                      <SwaperSlideContent
-                          src="./../../public/img/front-pages/landing-page/dashboard-light-06.png"
+                        ImageUrl="./../../public/img/app/dashboard-light-08.png"
-                          alt="hero dashboard"
+                        Title="Inventory Management"
-                          className="animation-img"
+                        Body="Track materials, supplies, and assets — never run short again."
-                          data-app-light-img="front-pages/landing-page/hero-dashboard-light.png"
+                      ></SwaperSlideContent>
-                          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
-                      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>
-                </a>
               </div>
             </div>
           </div>
@@ -287,192 +256,223 @@ const LandingPage = () => {
         <section id="landingFeatures" className="section-py landing-features">
           <div className="container">
             <div className="text-center mb-4">
-              <span className="badge bg-label-primary">Useful Features</span>
+              <span className="badge bg-label-primary heading">
+                Useful Features
+              </span>
             </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"
+                  src="./../../public/img/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"
+                    src="./../../public/img/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"
+                    src="./../../public/img/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
+                  <img src="./../../public/img/icons/paper.svg" alt="edit" />
-                    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"
+                    src="./../../public/img/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
+                  <img src="./../../public/img/icons/user.svg" alt="user" />
-                    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"
+                    src="./../../public/img/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/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/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/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 */}
+        {/* <!-- Real customers reviews: Start --> */}
-        <section id="landingTeam" className="section-py landing-team">
+        <section
-          <div className="container">
+          id="landingReviews"
+          class="section-py bg-body landing-reviews pb-0"
+        >
+          {/* <!-- What people say slider: Start --> */}
+          <div class="container">
             <div className="text-center mb-4">
-              <span className="badge bg-label-primary">Our Great Team</span>
+              <span className="badge bg-label-primary heading">
+                Case Studies
+              </span>
             </div>
             <h4 className="text-center mb-1">
-              <span className="position-relative fw-extrabold z-1">
+              <span className="position-relative fw-extrabold z-1 me-2">
-                Supported
+                Proven results, showcased
-                <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>
-              by Real People
+              through client success stories
             </h4>
-            <p className="text-center mb-md-11 pb-0 pb-xl-12">
+            <p className="text-center pb-2 mb-7">
-              Who is behind these great-looking interfaces?
+              Every business has unique goals, and our case studies highlight
+              <strong>
+                {" "}
+                how we tailor solutions to deliver real impact.
+              </strong>{" "}
+              <br></br>
+              See the transformations our clients have achieved with us
             </p>
-            <div className="row gy-12 mt-2">
+
-              <div className="col-lg-3 col-sm-6">
+            <div class="row">
-                <div className="card mt-3 mt-lg-0 shadow-none">
+              <div class="swiper-reviews-carousel">
-                  <div className="bg-label-primary border border-bottom-0 border-label-primary position-relative team-image-box">
+                <Swiper
-                    <img
+                  onSwiper={setSwiperRef}
-                      src="./../../public/img/front-pages/landing-page/team-member-1.png"
+                  slidesPerView={4}
-                      className="position-absolute card-img-position bottom-0 start-50 scaleX-n1-rtl"
+                  centeredSlides={true}
-                      alt="human image"
+                  spaceBetween={30}
-                    />
+                  pagination={{
-                  </div>
+                    clickable: true,
-                  <div className="card-body border border-top-0 border-label-primary text-center py-5">
+                  }}
-                    <h5 className="card-title mb-0">Sophie Gilbert</h5>
+                  navigation={true}
-                    <p className="text-muted mb-0">Project Manager</p>
+                  modules={[Autoplay, Pagination, Navigation]}
-                  </div>
+                  className="mySwiper"
-                </div>
+                >
-              </div>
+                  <SwiperSlide>
-              <div className="col-lg-3 col-sm-6">
+                    {" "}
-                <div className="card mt-3 mt-lg-0 shadow-none">
+                    <SwaperBlogContent
-                  <div className="bg-label-info border border-bottom-0 border-label-info position-relative team-image-box">
+                      ImageUrl="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQs28_JnxJUKdAgaZsiWW4NyekVmfmLtpUtaA&s"
-                    <img
+                      Title="Transforming Residential Project Delivery with Marco PMS"
-                      src="./../../public/img/front-pages/landing-page/team-member-2.png"
+                      Body="Sunrise Builders struggled with delays, cost overruns, and lack of transparency in their multi-phase township project. Different contractors for civil, electrical, and finishing works operated in silos, and communication gaps with the Project Management Consultant (PMC) often led to rework and disputes."
-                      className="position-absolute card-img-position bottom-0 start-50 scaleX-n1-rtl"
+                    ></SwaperBlogContent>
-                      alt="human image"
+                  </SwiperSlide>
-                    />
+                  <SwiperSlide>
-                  </div>
+                    {" "}
-                  <div className="card-body border border-top-0 border-label-info text-center py-5">
+                    <SwaperBlogContent
-                    <h5 className="card-title mb-0">Paul Miles</h5>
+                      ImageUrl="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRaQ0iKVDfpfTY3kS2WgSH1n4yBhFhLQfiESg&s"
-                    <p className="text-muted mb-0">UI Designer</p>
+                      Title="Commercial Tower Project Delivered On Time"
-                  </div>
+                      Body="Metro Infra Developers faced coordination challenges between multiple stakeholders—PMC, structural consultants, MEP contractors, and vendors. Manual tracking via Excel sheets was slowing decision-making and progress reporting."
-                </div>
+                    ></SwaperBlogContent>
-              </div>
+                  </SwiperSlide>
-              <div className="col-lg-3 col-sm-6">
+                  <SwiperSlide>
-                <div className="card mt-3 mt-lg-0 shadow-none">
+                    {" "}
-                  <div className="bg-label-danger border border-bottom-0 border-label-danger position-relative team-image-box">
+                    <SwaperBlogContent
-                    <img
+                      ImageUrl="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT4ma1IiRhV1NRWVwQpzLi0kJK2E7ABP9Sn-Q&s"
-                      src="./../../public/img/front-pages/landing-page/team-member-3.png"
+                      Title="Smart Collaboration for Mixed-Use Development"
-                      className="position-absolute card-img-position bottom-0 start-50 scaleX-n1-rtl"
+                      Body="The project required close collaboration between multiple consultants—architecture, interiors, civil, and MEP. Email-based communication caused delays, and the client had limited visibility into daily progress."
-                      alt="human image"
+                    ></SwaperBlogContent>
-                    />
+                  </SwiperSlide>
-                  </div>
+                  <SwiperSlide>
-                  <div className="card-body border border-top-0 border-label-danger text-center py-5">
+                    {" "}
-                    <h5 className="card-title mb-0">Nannie Ford</h5>
+                    <SwaperBlogContent
-                    <p className="text-muted mb-0">Development Lead</p>
+                      ImageUrl="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcROvl-qI8KIDHMKLfMyGppCLpluAj9nxFPqFy-YJ7kqc9L7LvPeSW3AZDWSOV62VAaYKO0&usqp=CAU"
-                  </div>
+                      Title="On-Time Delivery of a Luxury Villa Project"
-                </div>
+                      Body="Elite Constructions was managing multiple luxury villas in parallel, each with unique specifications. The PMC struggled with tracking progress across sites, ensuring quality compliance, and keeping the high-profile clients updated. Manual reporting caused delays, and missed dependencies risked extending timelines."
-              </div>
+                    ></SwaperBlogContent>
-              <div className="col-lg-3 col-sm-6">
+                  </SwiperSlide>
-                <div className="card mt-3 mt-lg-0 shadow-none">
+                </Swiper>
-                  <div className="bg-label-success border border-bottom-0 border-label-success position-relative team-image-box">
-                    <img
-                      src="./../../public/img/front-pages/landing-page/team-member-4.png"
-                      className="position-absolute card-img-position bottom-0 start-50 scaleX-n1-rtl"
-                      alt="human image"
-                    />
-                  </div>
-                  <div className="card-body border border-top-0 border-label-success text-center py-5">
-                    <h5 className="card-title mb-0">Chris Watkins</h5>
-                    <p className="text-muted mb-0">Marketing Manager</p>
-                  </div>
-                </div>
               </div>
             </div>
           </div>
         </section>
-        {/*  Our great team: End */}
+        {/* <!-- Real customers reviews: End --> */}
 
         {/*  Pricing plans: Start */}
         <section
@@ -481,28 +481,39 @@ const LandingPage = () => {
         >
           <div className="container">
             <div className="text-center mb-4">
-              <span className="badge bg-label-primary">Pricing Plans</span>
+              <span className="badge bg-label-primary heading">
+                Pricing Plans
+              </span>
             </div>
             <h4 className="text-center mb-1">
               <span className="position-relative fw-extrabold z-1 me-2">
                 Tailored pricing plans
-                <img
+                {/* <img
-                  src="./../../public/img/front-pages/icons/section-title-icon.png"
+                  src="./../../public/img/icons/section-title-icon.png"
                   alt="laptop charging"
                   className="section-title-img position-absolute object-fit-contain bottom-0 z-n1"
-                />
+                /> */}
               </span>
               designed for you
             </h4>
             <p className="text-center pb-2 mb-7">
-              All plans include 40+ advanced tools and features to boost your
+              No matter which plan you choose, you’ll get access to powerful
-              product.
+              features. <strong>Choose the best plan to fit your needs.</strong>
-              <br />
-              Choose the best plan to fit your needs.
             </p>
-            <div className="text-center mb-12">
+            <div className="text-center mb-8">
               <div className="position-relative d-inline-block pt-3 pt-md-0">
-                <label className="switch switch-sm switch-primary me-0">
+                <div class="btn-group" role="group" aria-label="Basic example">
+                  <button type="button" class="btn btn-outline-secondary">
+                    Basic
+                  </button>
+                  <button type="button" class="btn btn-primary">
+                    Team
+                  </button>
+                  <button type="button" class="btn btn-outline-secondary">
+                    Enterprise
+                  </button>
+                </div>
+                {/* <label className="switch switch-sm switch-primary me-0">
                   <span className="switch-label fs-6 text-body me-3">
                     Pay Monthly
                   </span>
@@ -518,25 +529,25 @@ const LandingPage = () => {
                   <span className="switch-label fs-6 text-body ms-3">
                     Pay Annual
                   </span>
-                </label>
+                </label> */}
-                <div className="pricing-plans-item position-absolute d-flex">
+                {/* <div className="pricing-plans-item position-absolute d-flex">
                   <img
-                    src="./../../public/img/front-pages/icons/pricing-plans-arrow.png"
+                    src="./../../public/img/icons/pricing-plans-arrow.png"
                     alt="pricing plans arrow"
                     className="scaleX-n1-rtl"
                   />
                   <span className="fw-medium mt-2 ms-1"> Save 25%</span>
+                </div> */}
               </div>
             </div>
-            </div>
+            <div className="row g-6 pt-0">
-            <div className="row g-6 pt-lg-5">
               {/*  Basic Plan: Start */}
               <div className="col-xl-4 col-lg-6 col-md-4">
                 <div className="card">
                   <div className="card-header">
                     <div className="text-center">
                       <img
-                        src="./../../public/img/front-pages/icons/paper-airplane.png"
+                        src="./../../public/img/icons/paper-airplane.png"
                         alt="paper airplane icon"
                         className="mb-8 pb-2"
                       />
@@ -618,7 +629,7 @@ const LandingPage = () => {
                     </ul>
                     <div className="d-grid mt-8">
                       <a
-                        href="payment-page.html"
+                        href="#landingPricing"
                         className="btn btn-label-primary"
                       >
                         Get Started
@@ -635,7 +646,7 @@ const LandingPage = () => {
                   <div className="card-header">
                     <div className="text-center">
                       <img
-                        src="./../../public/img/front-pages/icons/plane.png"
+                        src="./../../public/img/icons/plane.png"
                         alt="plane icon"
                         className="mb-8 pb-2"
                       />
@@ -731,7 +742,7 @@ const LandingPage = () => {
                   <div className="card-header">
                     <div className="text-center">
                       <img
-                        src="./../../public/img/front-pages/icons/shuttle-rocket.png"
+                        src="./../../public/img/icons/shuttle-rocket.png"
                         alt="shuttle rocket icon"
                         className="mb-8 pb-2"
                       />
@@ -840,7 +851,7 @@ const LandingPage = () => {
                 <div className="card border border-primary shadow-none">
                   <div className="card-body text-center">
                     <img
-                      src="./../../public/img/front-pages/icons/laptop.svg"
+                      src="./../../public/img/icons/laptop.svg"
                       alt="laptop"
                       className="mb-4"
                     />
@@ -857,7 +868,7 @@ const LandingPage = () => {
                 <div className="card border border-success shadow-none">
                   <div className="card-body text-center">
                     <img
-                      src="./../../public/img/front-pages/icons/user-success.svg"
+                      src="./../../public/img/icons/user-success.svg"
                       alt="laptop"
                       className="mb-4"
                     />
@@ -874,7 +885,7 @@ const LandingPage = () => {
                 <div className="card border border-info shadow-none">
                   <div className="card-body text-center">
                     <img
-                      src="./../../public/img/front-pages/icons/diamond-info.svg"
+                      src="./../../public/img/icons/diamond-info.svg"
                       alt="laptop"
                       className="mb-4"
                     />
@@ -891,7 +902,7 @@ const LandingPage = () => {
                 <div className="card border border-warning shadow-none">
                   <div className="card-body text-center">
                     <img
-                      src="./../../public/img/front-pages/icons/check-warning.svg"
+                      src="./../../public/img/icons/check-warning.svg"
                       alt="laptop"
                       className="mb-4"
                     />
@@ -913,14 +924,14 @@ const LandingPage = () => {
         <section id="landingFAQ" className="section-py bg-body landing-faq">
           <div className="container">
             <div className="text-center mb-4">
-              <span className="badge bg-label-primary">FAQ</span>
+              <span className="badge bg-label-primary heading">FAQ</span>
             </div>
             <h4 className="text-center mb-1">
               Frequently asked
               <span className="position-relative fw-extrabold z-1">
                 questions
                 <img
-                  src="./../../public/img/front-pages/icons/section-title-icon.png"
+                  src="./../../public/img/icons/section-title-icon.png"
                   alt="laptop charging"
                   className="section-title-img position-absolute object-fit-contain bottom-0 z-n1"
                 />
@@ -934,7 +945,7 @@ const LandingPage = () => {
               <div className="col-lg-5">
                 <div className="text-center">
                   <img
-                    src="./../../public/img/front-pages/landing-page/faq-boy-with-logos.png"
+                    src="./../../public/img/illustrations/faq-boy-with-logos.png"
                     alt="faq boy with logos"
                     className="faq-image"
                   />
@@ -952,7 +963,7 @@ const LandingPage = () => {
                         aria-expanded="true"
                         aria-controls="accordionOne"
                       >
-                        Do you charge for each upgrade?
+                        What is MarcoPMS?
                       </button>
                     </h2>
 
@@ -980,7 +991,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 +1019,7 @@ const LandingPage = () => {
                         aria-expanded="false"
                         aria-controls="accordionThree"
                       >
-                        What is regular license?
+                        How secure is Marco PMS?
                       </button>
                     </h2>
                     <div
@@ -1041,7 +1052,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
@@ -1095,20 +1106,17 @@ const LandingPage = () => {
         {/*  FAQ: End */}
 
         {/*  CTA: Start */}
-        <section
+        <section id="landingCTA" className="section-py landing-cta ">
-          id="landingCTA"
-          className="section-py landing-cta position-relative p-lg-0 pb-0"
-        >
           <img
-            src="./../../public/img/front-pages/backgrounds/cta-bg-light.png"
+            src="./../../public/img/backgrounds/cta-bg-light.png"
             className="position-absolute bottom-0 end-0 scaleX-n1-rtl h-100 w-100 z-n1"
             alt="cta image"
-            data-app-light-img="front-pages/backgrounds/cta-bg-light.png"
+            data-app-light-img="backgrounds/cta-bg-light.png"
-            data-app-dark-img="front-pages/backgrounds/cta-bg-dark.png"
+            data-app-dark-img="backgrounds/cta-bg-dark.png"
           />
           <div className="container">
             <div className="text-center mb-4 mt-5">
-              <span className="badge bg-label-primary">Contact US</span>
+              <span className="badge bg-label-primary heading">Contact US</span>
             </div>
 
             <div className="row align-items-center gy-12  mb-12">
@@ -1119,7 +1127,7 @@ const LandingPage = () => {
                     <span className="position-relative fw-extrabold z-1">
                       Let's work
                       <img
-                        src="./../../public/img/front-pages/icons/section-title-icon.png"
+                        src="./../../public/img/icons/section-title-icon.png"
                         alt="laptop charging"
                         className="section-title-img position-absolute object-fit-contain bottom-0 z-n1"
                       />
@@ -1175,10 +1183,7 @@ const LandingPage = () => {
                   <h5 className="text-body mb-8">
                     Start your project with a 14-day free trial
                   </h5>
-                  <a
+                  <a href="#landingPricing" className="btn btn-lg btn-primary">
-                    href="payment-page.html"
-                    className="btn btn-lg btn-primary"
-                  >
                     Get Started
                   </a>{" "}
                   <a
@@ -1192,7 +1197,7 @@ const LandingPage = () => {
               <div className="col-lg-6 pt-lg-12 text-center text-lg-end">
                 <img
                   style={{ width: "80%" }}
-                  src="./../../public/img/front-pages/landing-page/contact-customer-service.png"
+                  src="./../../public/img/images/contact-customer-service.png"
                   alt="hero elements"
                 ></img>
               </div>
@@ -1209,13 +1214,13 @@ const LandingPage = () => {
         >
           <div className="container">
             <div className="text-center mb-4">
-              <span className="badge bg-label-primary">Contact US</span>
+              <span className="badge bg-label-primary heading">Contact US</span>
             </div>
             <h4 className="text-center mb-1">
               <span className="position-relative fw-extrabold z-1">
                 Let's work
                 <img
-                  src="./../../public/img/front-pages/icons/section-title-icon.png"
+                  src="./../../public/img/icons/section-title-icon.png"
                   alt="laptop charging"
                   className="section-title-img position-absolute object-fit-contain bottom-0 z-n1"
                 />
@@ -1229,12 +1234,12 @@ const LandingPage = () => {
               <div className="col-lg-5">
                 <div className="contact-img-box position-relative border p-2 h-100">
                   <img
-                    src="./../../public/img/front-pages/icons/contact-border.png"
+                    src="./../../public/img/icons/contact-border.png"
                     alt="contact border"
                     className="contact-border-img position-absolute d-none d-lg-block scaleX-n1-rtl"
                   />
                   <img
-                    src="./../../public/img/front-pages/landing-page/contact-customer-service.png"
+                    src="./../../public/img/images/contact-customer-service.png"
                     alt="contact customer service"
                     className="contact-img w-100 scaleX-n1-rtl"
                   />
@@ -1357,14 +1362,14 @@ const LandingPage = () => {
       <footer className="landing-footer bg-body footer-text">
         <div className="footer-top position-relative overflow-hidden z-1">
           <img
-            src="./../../public/img/front-pages/backgrounds/footer-bg.png"
+            src="./../../public/img/backgrounds/footer-bg.png"
             alt="footer bg"
             className="footer-bg banner-bg-img z-n1"
           />
           <div className="container">
-            <div className="row gx-0 gy-6 g-lg-10">
+            <div className="row ">
-              <div className="col-lg-5">
+              <div className="col-lg-6">
-                <a href="#" className="app-brand-link mb-6">
+                <a href="#" className="app-brand-link ">
                   <span className="app-brand-logo demo">
                     <svg
                       width="25"
@@ -1451,10 +1456,10 @@ const LandingPage = () => {
                     <Link className="cta-title">
                       <div className="app-brand-logo demo">
                         <img
-                          className="rounded"
+                          className="rounded rounded-circle"
                           style={{
-                            border: "1px solid #fff",
+                            border: "3px solid #efdedeff",
-                            padding: "5px",
+                            padding: "0px",
                             borderRadius: "50px",
                           }}
                           src="../../../public/img/brand/marco.png"
@@ -1465,11 +1470,11 @@ const LandingPage = () => {
                     </Link>
                   </span>
                 </a>
-                <p className="footer-text footer-logo-description mb-6">
+                <p className="footer-text footer-logo-description" hidden>
-                  Most developer friendly & highly customisable Admin Dashboard
+                  Work smarter, track faster, and manage everything from one
-                  Template.
+                  platform.
                 </p>
-                <form className="footer-form">
+                <form className="footer-form" hidden>
                   <label for="footer-email" className="small">
                     Subscribe to newsletter
                   </label>
@@ -1489,53 +1494,21 @@ const LandingPage = () => {
                   </div>
                 </form>
               </div>
-              <div className="col-lg-2 col-md-4 col-sm-6"></div>
+
-              <div className="col-lg-2 col-md-4 col-sm-6">
+              <div className="col-lg-6 col-md-6 d-flex gap-3 align-items-center justify-content-end">
-                <h6 className="footer-title mb-6">Pages</h6>
+                <h6 className="footer-title mt-3">Download our app</h6>
-                <ul className="list-unstyled">
+                <a href="javascript:void(0);">
-                  <li className="mb-4">
-                    <a href="pricing-page.html" className="footer-link">
-                      Pricing
-                    </a>
-                  </li>
-                  <li className="mb-4">
-                    <a href="payment-page.html" className="footer-link">
-                      Payment<span className="badge bg-primary ms-2">New</span>
-                    </a>
-                  </li>
-                  <li className="mb-4">
-                    <a href="checkout-page.html" className="footer-link">
-                      Checkout
-                    </a>
-                  </li>
-                  <li className="mb-4">
-                    <a href="help-center-landing.html" className="footer-link">
-                      Help Center
-                    </a>
-                  </li>
-                  <li>
-                    <Link className="footer-link" to="/auth/login">
-                      Login/Register
-                    </Link>
-                    {/* <a
-                      href="../vertical-menu-template/auth-login-cover.html"
-                      target="_blank"
-                      className="footer-link"
-                    ></a>*/}
-                  </li>
-                </ul>
-              </div>
-              <div className="col-lg-3 col-md-4">
-                <h6 className="footer-title mb-6">Download our app</h6>
-                <a href="javascript:void(0);" className="d-block mb-4">
                   <img
-                    src="./../../public/img/front-pages/landing-page/apple-icon.png"
+                    src="./../../public/img/icons/apple-icon.png"
                     alt="apple icon"
                   />
                 </a>
-                <a href="javascript:void(0);" className="d-block">
+                <a
+                  href="https://play.google.com/store/apps/details?id=com.marco.aiotstage&pcampaignid=web_share"
+                  target="_blank"
+                >
                   <img
-                    src="./../../public/img/front-pages/landing-page/google-play-icon.png"
+                    src="./../../public/img/icons/google-play-icon.png"
                     alt="google play icon"
                   />
                 </a>
@@ -1564,7 +1537,7 @@ const LandingPage = () => {
                 target="_blank"
               >
                 <img
-                  src="./../../public/img/front-pages/icons/facebook.svg"
+                  src="./../../public/img/icons/facebook.svg"
                   alt="facebook icon"
                 />
               </a>
@@ -1574,13 +1547,13 @@ const LandingPage = () => {
                 target="_blank"
               >
                 <img
-                  src="./../../public/img/front-pages/icons/twitter.svg"
+                  src="./../../public/img/icons/twitter.svg"
                   alt="twitter icon"
                 />
               </a>
               <a href="https://www.instagram.com/marcoaiot/" target="_blank">
                 <img
-                  src="./../../public/img/front-pages/icons/instagram.svg"
+                  src="./../../public/img/icons/instagram.svg"
                   alt="google icon"
                 />
               </a>

src/pages/Home/SwaperBlogContent.jsx

@@ -0,0 +1,47 @@
+const SwaperBlogContent = ({
+  ImageUrl = "",
+  Title = "",
+  Body = "",
+  ContentAlign = "right",
+}) => {
+  return (
+    <div class="swiper-slide">
+      <div class="card h-100">
+        <div class="card-body text-body d-flex flex-column justify-content-between h-100">
+          <div class="mb-4">
+            <img
+              src={ImageUrl}
+              alt="client logo"
+              class="client-logo img-fluid"
+              style={{ width: "580px", height: "100px" }}
+            />
+            <h5>{Title}</h5>
+          </div>
+          <p>{Body}</p>
+          <div class="text-warning mb-4">
+            <i class="bx bxs-star"></i>
+            <i class="bx bxs-star"></i>
+            <i class="bx bxs-star"></i>
+            <i class="bx bxs-star"></i>
+            <i class="bx bxs-star"></i>
+          </div>
+          <div class="d-flex align-items-center">
+            <div class="avatar me-3 avatar-sm">
+              <img
+                src="../../assets/img/avatars/1.png"
+                alt="Avatar"
+                class="rounded-circle"
+              />
+            </div>
+            <div>
+              <h6 class="mb-0">Cecilia Payne</h6>
+              <p class="small text-muted mb-0">CEO of Airbnb</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SwaperBlogContent;

src/pages/Home/SwaperSlideContent.jsx

@@ -0,0 +1,59 @@
+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('${ImageUrl}') 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.5), rgba(0,0,0,0.1))",
+          }}
+        ></div>
+
+        {/* Text Content */}
+        <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"
+                              >
+                                Get Started
+                              </a> */}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SwaperSlideContent;

src/router/AppRoutes.jsx

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