public/img/icons/inventory.svg

@@ -1 +0,0 @@
-<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,10 +1,6 @@
 .section-py {
   padding: 6.25rem 0;
 }
-
-.section-py .heading {
-  font-size: 1.625rem;
-}
 @media (max-width: 1199.98px) {
   .section-py {
     padding: 4rem 0;
@@ -57,7 +53,6 @@
 nav.layout-navbar {
   /* backdrop-filter: unset; */
   /* background-color: transparent !important; */
-  background-color: rgba(214, 36, 33, 0.88) !important;
 }
 
 nav.layout-navbar::before {
@@ -308,10 +303,10 @@ nav.layout-navbar.navbar-active::after {
   opacity: 1;
 }
 .landing-footer .footer-top {
-  padding-top: 1.3rem;
+  padding-top: 3.3rem;
-  padding-bottom: 1.3rem;
+  padding-bottom: 2.3rem;
-  border-top-left-radius: 1.75rem;
+  border-top-left-radius: 3.75rem;
-  border-top-right-radius: 1.75rem;
+  border-top-right-radius: 3.75rem;
 }
 @media (max-width: 767.98px) {
   .landing-footer .footer-top {
@@ -360,7 +355,7 @@ nav.layout-navbar.navbar-active::after {
 
 .landing-hero {
   border-radius: 0 0 3.5rem 3.5rem;
-  padding-top: 8.2rem;
+  padding-top: 10.2rem;
 }
 .landing-hero::after {
   content: "";
@@ -373,8 +368,7 @@ 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;
   }
 }
@@ -634,12 +628,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,20 +1,15 @@
 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 { EffectFlip, Autoplay, Pagination, Navigation } from "swiper/modules";
+import { 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">
@@ -82,8 +77,8 @@ const LandingPage = () => {
                   </a>
                 </li>
                 <li className="nav-item">
-                  <a className="nav-link fw-medium" href="#landingPricing">
+                  <a className="nav-link fw-medium" href="#landingTeam">
-                    Pricing
+                    Team
                   </a>
                 </li>
                 <li className="nav-item">
@@ -92,7 +87,11 @@ const LandingPage = () => {
                   </a>
                 </li>
                 <li className="nav-item">
-                  <a className="nav-link fw-medium" href="#landingReviews">
+                  <a
+                    className="nav-link fw-medium"
+                    href="../vertical-menu-template/index.html"
+                    target="_blank"
+                  >
                     Blogs
                   </a>
                 </li>
@@ -132,19 +131,18 @@ const LandingPage = () => {
             <div className="container">
               <div className="hero-text-box text-center position-relative">
                 <h1 className="text-primary hero-title display-6 fw-extrabold">
-                  All-in-one platform to manage projects, people, and resources
+                  One dashboard to manage all your businesses
-                  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/icons/Join-community-arrow.png"
+                      src="./../../public/img/front-pages/icons/Join-community-arrow.png"
                       alt="Join community arrow"
                       className="scaleX-n1-rtl"
                     />
@@ -153,7 +151,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"
@@ -163,10 +161,13 @@ 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"
@@ -187,64 +188,94 @@ const LandingPage = () => {
                         enabled: true,
                       }}
                       navigation={false}
-                    modules={[EffectFlip, Autoplay, Pagination, Navigation]}
+                      modules={[Autoplay, Pagination, Navigation]}
                       className="mySwiper"
                       onSlideChange={() => console.log("slide change")}
                       onSwiper={(swiper) => console.log(swiper)}
                     >
                       <SwiperSlide>
-                      <SwaperSlideContent
+                        <img
-                        ImageUrl="./../../public/img/app/dashboard-light-01.png"
+                          src="./../../public/img/front-pages/landing-page/dashboard-light-01.png"
-                        Title="Project & Task Management"
+                          alt="hero dashboard"
-                        Body="Plan, assign, and track projects and tasks seamlessly for better team collaboration."
+                          className="animation-img"
-                      ></SwaperSlideContent>
+                          data-app-light-img="front-pages/landing-page/hero-dashboard-light.png"
-                    </SwiperSlide>
+                          data-app-dark-img="front-pages/landing-page/hero-dashboard-dark.png"
-
+                        />
-                    <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>
-                      <SwaperSlideContent
+                        <img
-                        ImageUrl="./../../public/img/app/dashboard-light-04.png"
+                          src="./../../public/img/front-pages/landing-page/dashboard-light-02.png"
-                        Title="Role-based Permissions"
+                          alt="hero dashboard"
-                        Body="Securely control access with customizable roles and permissions."
+                          className="animation-img"
-                      ></SwaperSlideContent>
+                          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>
-                      <SwaperSlideContent
+                        <img
-                        ImageUrl="./../../public/img/app/dashboard-light-05.png"
+                          src="./../../public/img/front-pages/landing-page/dashboard-light-03.png"
-                        Title="Expense & Budget Tracking"
+                          alt="hero dashboard"
-                        Body="Keep projects on budget with real-time expense and cost management."
+                          className="animation-img"
-                        ContentAlign="left"
+                          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
+                        <img
-                        ImageUrl="./../../public/img/app/dashboard-light-06.png"
+                          src="./../../public/img/front-pages/landing-page/dashboard-light-04.png"
-                        Title="Reporting & Analytics"
+                          alt="hero dashboard"
-                        Body="Gain actionable insights through powerful reports and analytics dashboards."
+                          className="animation-img"
-                      ></SwaperSlideContent>
+                          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>
-                      <SwaperSlideContent
+                        <img
-                        ImageUrl="./../../public/img/app/dashboard-light-07.png"
+                          src="./../../public/img/front-pages/landing-page/dashboard-light-05.png"
-                        Title="Document Management"
+                          alt="hero dashboard"
-                        Body="Organize, share, and access all your project and employee documents in one place."
+                          className="animation-img"
-                      ></SwaperSlideContent>
+                          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>
-                      <SwaperSlideContent
+                        <img
-                        ImageUrl="./../../public/img/app/dashboard-light-08.png"
+                          src="./../../public/img/front-pages/landing-page/dashboard-light-06.png"
-                        Title="Inventory Management"
+                          alt="hero dashboard"
-                        Body="Track materials, supplies, and assets — never run short again."
+                          className="animation-img"
-                      ></SwaperSlideContent>
+                          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
+                      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>
@@ -256,223 +287,192 @@ 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 heading">
+              <span className="badge bg-label-primary">Useful Features</span>
-                Useful Features
-              </span>
             </div>
             <h4 className="text-center mb-1">
               <span className="position-relative fw-extrabold z-1">
-                From tasks to teams, documents to inventory —
+                Everything you need
-                {/* <img
+                <img
-                  src="./../../public/img/icons/section-title-icon.png"
+                  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>
-              everything your business needs in one place.
+              to start your next project
             </h4>
             <p className="text-center mb-12">
-              All-in-one platform to manage projects, people, and resources
+              Not just a set of tools, the package includes ready-to-deploy
-              seamlessly.
+              conceptual application.
             </p>
             <div className="features-icon-wrapper row gx-0 gy-6 g-sm-12">
-              <div className="col-lg-3 col-sm-4 text-center features-icon-box">
+              <div className="col-lg-4 col-sm-6 text-center features-icon-box">
                 <div className="text-center mb-4">
                   <img
-                    src="./../../public/img/icons/laptop.svg"
+                    src="./../../public/img/front-pages/icons/laptop.svg"
                     alt="laptop charging"
                   />
                 </div>
-                <h5 className="mb-2">Project & Task Management</h5>
+                <h5 className="mb-2">Quality Code</h5>
                 <p className="features-icon-description">
-                  Plan, assign, and track projects and tasks seamlessly for
+                  Code structure that all developers will easily understand and
-                  better team collaboration.
+                  fall in love with.
                 </p>
               </div>
-              <div className="col-lg-3 col-sm-4 text-center features-icon-box">
+              <div className="col-lg-4 col-sm-6 text-center features-icon-box">
                 <div className="text-center mb-4">
                   <img
-                    src="./../../public/img/icons/rocket.svg"
+                    src="./../../public/img/front-pages/icons/rocket.svg"
                     alt="transition up"
                   />
                 </div>
-                <h5 className="mb-2">Attendance & Leave Tracking</h5>
+                <h5 className="mb-2">Continuous Updates</h5>
                 <p className="features-icon-description">
-                  Monitor employee attendance and manage leave requests with
+                  Free updates for the next 12 months, including new demos and
-                  ease.
+                  features.
                 </p>
               </div>
-              <div className="col-lg-3 col-sm-4 text-center features-icon-box">
+              <div className="col-lg-4 col-sm-6 text-center features-icon-box">
-                <div className="text-center mb-4">
-                  <img src="./../../public/img/icons/paper.svg" alt="edit" />
-                </div>
-                <h5 className="mb-2">Role-based Permissions</h5>
-                <p className="features-icon-description">
-                  Securely control access with customizable roles and
-                  permissions.
-                </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/check.svg"
+                    src="./../../public/img/front-pages/icons/paper.svg"
+                    alt="edit"
+                  />
+                </div>
+                <h5 className="mb-2">Stater-Kit</h5>
+                <p className="features-icon-description">
+                  Start your project quickly without having to remove
+                  unnecessary features.
+                </p>
+              </div>
+              <div className="col-lg-4 col-sm-6 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">Expense & Budget Tracking</h5>
+                <h5 className="mb-2">API Ready</h5>
                 <p className="features-icon-description">
-                  Keep projects on budget with real-time expense and cost
+                  Just change the endpoint and see your own data loaded within
-                  management.
+                  seconds.
                 </p>
               </div>
-              <div className="col-lg-3 col-sm-4 text-center features-icon-box">
+              <div className="col-lg-4 col-sm-6 text-center features-icon-box">
-                <div className="text-center mb-4">
-                  <img src="./../../public/img/icons/user.svg" alt="user" />
-                </div>
-                <h5 className="mb-2">Reporting & Analytics</h5>
-                <p className="features-icon-description">
-                  Gain actionable insights through powerful reports and
-                  analytics dashboards.
-                </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"
+                    src="./../../public/img/front-pages/icons/user.svg"
+                    alt="user"
+                  />
+                </div>
+                <h5 className="mb-2">Excellent Support</h5>
+                <p className="features-icon-description">
+                  An easy-to-follow doc with lots of references and code
+                  examples.
+                </p>
+              </div>
+              <div className="col-lg-4 col-sm-6 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">Document Management</h5>
+                <h5 className="mb-2">Well Documented</h5>
                 <p className="features-icon-description">
-                  Organize, share, and access all your project and employee
+                  An easy-to-follow doc with lots of references and code
-                  documents in one place.
+                  examples.
                 </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 */}
 
-        {/* <!-- Real customers reviews: Start --> */}
+        {/*  Our great team: Start */}
-        <section
+        <section id="landingTeam" className="section-py landing-team">
-          id="landingReviews"
+          <div className="container">
-          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 heading">
+              <span className="badge bg-label-primary">Our Great Team</span>
-                Case Studies
-              </span>
             </div>
             <h4 className="text-center mb-1">
-              <span className="position-relative fw-extrabold z-1 me-2">
+              <span className="position-relative fw-extrabold z-1">
-                Proven results, showcased
+                Supported
+                <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>
-              through client success stories
+              by Real People
             </h4>
-            <p className="text-center pb-2 mb-7">
+            <p className="text-center mb-md-11 pb-0 pb-xl-12">
-              Every business has unique goals, and our case studies highlight
+              Who is behind these great-looking interfaces?
-              <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 class="row">
+              <div className="col-lg-3 col-sm-6">
-              <div class="swiper-reviews-carousel">
+                <div className="card mt-3 mt-lg-0 shadow-none">
-                <Swiper
+                  <div className="bg-label-primary border border-bottom-0 border-label-primary position-relative team-image-box">
-                  onSwiper={setSwiperRef}
+                    <img
-                  slidesPerView={4}
+                      src="./../../public/img/front-pages/landing-page/team-member-1.png"
-                  centeredSlides={true}
+                      className="position-absolute card-img-position bottom-0 start-50 scaleX-n1-rtl"
-                  spaceBetween={30}
+                      alt="human image"
-                  pagination={{
+                    />
-                    clickable: true,
+                  </div>
-                  }}
+                  <div className="card-body border border-top-0 border-label-primary text-center py-5">
-                  navigation={true}
+                    <h5 className="card-title mb-0">Sophie Gilbert</h5>
-                  modules={[Autoplay, Pagination, Navigation]}
+                    <p className="text-muted mb-0">Project Manager</p>
-                  className="mySwiper"
+                  </div>
-                >
+                </div>
-                  <SwiperSlide>
+              </div>
-                    {" "}
+              <div className="col-lg-3 col-sm-6">
-                    <SwaperBlogContent
+                <div className="card mt-3 mt-lg-0 shadow-none">
-                      ImageUrl="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQs28_JnxJUKdAgaZsiWW4NyekVmfmLtpUtaA&s"
+                  <div className="bg-label-info border border-bottom-0 border-label-info position-relative team-image-box">
-                      Title="Transforming Residential Project Delivery with Marco PMS"
+                    <img
-                      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."
+                      src="./../../public/img/front-pages/landing-page/team-member-2.png"
-                    ></SwaperBlogContent>
+                      className="position-absolute card-img-position bottom-0 start-50 scaleX-n1-rtl"
-                  </SwiperSlide>
+                      alt="human image"
-                  <SwiperSlide>
+                    />
-                    {" "}
+                  </div>
-                    <SwaperBlogContent
+                  <div className="card-body border border-top-0 border-label-info text-center py-5">
-                      ImageUrl="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRaQ0iKVDfpfTY3kS2WgSH1n4yBhFhLQfiESg&s"
+                    <h5 className="card-title mb-0">Paul Miles</h5>
-                      Title="Commercial Tower Project Delivered On Time"
+                    <p className="text-muted mb-0">UI Designer</p>
-                      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>
-                  <SwiperSlide>
+              <div className="col-lg-3 col-sm-6">
-                    {" "}
+                <div className="card mt-3 mt-lg-0 shadow-none">
-                    <SwaperBlogContent
+                  <div className="bg-label-danger border border-bottom-0 border-label-danger position-relative team-image-box">
-                      ImageUrl="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT4ma1IiRhV1NRWVwQpzLi0kJK2E7ABP9Sn-Q&s"
+                    <img
-                      Title="Smart Collaboration for Mixed-Use Development"
+                      src="./../../public/img/front-pages/landing-page/team-member-3.png"
-                      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."
+                      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-danger text-center py-5">
-                    <SwaperBlogContent
+                    <h5 className="card-title mb-0">Nannie Ford</h5>
-                      ImageUrl="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcROvl-qI8KIDHMKLfMyGppCLpluAj9nxFPqFy-YJ7kqc9L7LvPeSW3AZDWSOV62VAaYKO0&usqp=CAU"
+                    <p className="text-muted mb-0">Development Lead</p>
-                      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>
-                  </SwiperSlide>
+              <div className="col-lg-3 col-sm-6">
-                </Swiper>
+                <div className="card mt-3 mt-lg-0 shadow-none">
+                  <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>
-        {/* <!-- Real customers reviews: End --> */}
+        {/*  Our great team: End */}
 
         {/*  Pricing plans: Start */}
         <section
@@ -481,39 +481,28 @@ const LandingPage = () => {
         >
           <div className="container">
             <div className="text-center mb-4">
-              <span className="badge bg-label-primary heading">
+              <span className="badge bg-label-primary">Pricing Plans</span>
-                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/icons/section-title-icon.png"
+                  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>
               designed for you
             </h4>
             <p className="text-center pb-2 mb-7">
-              No matter which plan you choose, you’ll get access to powerful
+              All plans include 40+ advanced tools and features to boost your
-              features. <strong>Choose the best plan to fit your needs.</strong>
+              product.
+              <br />
+              Choose the best plan to fit your needs.
             </p>
-            <div className="text-center mb-8">
+            <div className="text-center mb-12">
               <div className="position-relative d-inline-block pt-3 pt-md-0">
-                <div class="btn-group" role="group" aria-label="Basic example">
+                <label className="switch switch-sm switch-primary me-0">
-                  <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>
@@ -529,25 +518,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/icons/pricing-plans-arrow.png"
+                    src="./../../public/img/front-pages/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 className="row g-6 pt-0">
+            </div>
+            <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/icons/paper-airplane.png"
+                        src="./../../public/img/front-pages/icons/paper-airplane.png"
                         alt="paper airplane icon"
                         className="mb-8 pb-2"
                       />
@@ -629,7 +618,7 @@ const LandingPage = () => {
                     </ul>
                     <div className="d-grid mt-8">
                       <a
-                        href="#landingPricing"
+                        href="payment-page.html"
                         className="btn btn-label-primary"
                       >
                         Get Started
@@ -646,7 +635,7 @@ const LandingPage = () => {
                   <div className="card-header">
                     <div className="text-center">
                       <img
-                        src="./../../public/img/icons/plane.png"
+                        src="./../../public/img/front-pages/icons/plane.png"
                         alt="plane icon"
                         className="mb-8 pb-2"
                       />
@@ -742,7 +731,7 @@ const LandingPage = () => {
                   <div className="card-header">
                     <div className="text-center">
                       <img
-                        src="./../../public/img/icons/shuttle-rocket.png"
+                        src="./../../public/img/front-pages/icons/shuttle-rocket.png"
                         alt="shuttle rocket icon"
                         className="mb-8 pb-2"
                       />
@@ -851,7 +840,7 @@ const LandingPage = () => {
                 <div className="card border border-primary shadow-none">
                   <div className="card-body text-center">
                     <img
-                      src="./../../public/img/icons/laptop.svg"
+                      src="./../../public/img/front-pages/icons/laptop.svg"
                       alt="laptop"
                       className="mb-4"
                     />
@@ -868,7 +857,7 @@ const LandingPage = () => {
                 <div className="card border border-success shadow-none">
                   <div className="card-body text-center">
                     <img
-                      src="./../../public/img/icons/user-success.svg"
+                      src="./../../public/img/front-pages/icons/user-success.svg"
                       alt="laptop"
                       className="mb-4"
                     />
@@ -885,7 +874,7 @@ const LandingPage = () => {
                 <div className="card border border-info shadow-none">
                   <div className="card-body text-center">
                     <img
-                      src="./../../public/img/icons/diamond-info.svg"
+                      src="./../../public/img/front-pages/icons/diamond-info.svg"
                       alt="laptop"
                       className="mb-4"
                     />
@@ -902,7 +891,7 @@ const LandingPage = () => {
                 <div className="card border border-warning shadow-none">
                   <div className="card-body text-center">
                     <img
-                      src="./../../public/img/icons/check-warning.svg"
+                      src="./../../public/img/front-pages/icons/check-warning.svg"
                       alt="laptop"
                       className="mb-4"
                     />
@@ -924,14 +913,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 heading">FAQ</span>
+              <span className="badge bg-label-primary">FAQ</span>
             </div>
             <h4 className="text-center mb-1">
               Frequently asked
               <span className="position-relative fw-extrabold z-1">
                 questions
                 <img
-                  src="./../../public/img/icons/section-title-icon.png"
+                  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"
                 />
@@ -945,7 +934,7 @@ const LandingPage = () => {
               <div className="col-lg-5">
                 <div className="text-center">
                   <img
-                    src="./../../public/img/illustrations/faq-boy-with-logos.png"
+                    src="./../../public/img/front-pages/landing-page/faq-boy-with-logos.png"
                     alt="faq boy with logos"
                     className="faq-image"
                   />
@@ -963,7 +952,7 @@ const LandingPage = () => {
                         aria-expanded="true"
                         aria-controls="accordionOne"
                       >
-                        What is MarcoPMS?
+                        Do you charge for each upgrade?
                       </button>
                     </h2>
 
@@ -991,7 +980,7 @@ const LandingPage = () => {
                         aria-expanded="false"
                         aria-controls="accordionTwo"
                       >
-                        Can I switch or cancel my plan?
+                        Do I need to purchase a license for each website?
                       </button>
                     </h2>
                     <div
@@ -1019,7 +1008,7 @@ const LandingPage = () => {
                         aria-expanded="false"
                         aria-controls="accordionThree"
                       >
-                        How secure is Marco PMS?
+                        What is regular license?
                       </button>
                     </h2>
                     <div
@@ -1052,7 +1041,7 @@ const LandingPage = () => {
                         aria-expanded="false"
                         aria-controls="accordionFour"
                       >
-                        Where can i get help if I have more questions?
+                        What is extended license?
                       </button>
                     </h2>
                     <div
@@ -1106,17 +1095,20 @@ const LandingPage = () => {
         {/*  FAQ: End */}
 
         {/*  CTA: Start */}
-        <section id="landingCTA" className="section-py landing-cta ">
+        <section
+          id="landingCTA"
+          className="section-py landing-cta position-relative p-lg-0 pb-0"
+        >
           <img
-            src="./../../public/img/backgrounds/cta-bg-light.png"
+            src="./../../public/img/front-pages/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="backgrounds/cta-bg-light.png"
+            data-app-light-img="front-pages/backgrounds/cta-bg-light.png"
-            data-app-dark-img="backgrounds/cta-bg-dark.png"
+            data-app-dark-img="front-pages/backgrounds/cta-bg-dark.png"
           />
           <div className="container">
             <div className="text-center mb-4 mt-5">
-              <span className="badge bg-label-primary heading">Contact US</span>
+              <span className="badge bg-label-primary">Contact US</span>
             </div>
 
             <div className="row align-items-center gy-12  mb-12">
@@ -1127,7 +1119,7 @@ const LandingPage = () => {
                     <span className="position-relative fw-extrabold z-1">
                       Let's work
                       <img
-                        src="./../../public/img/icons/section-title-icon.png"
+                        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"
                       />
@@ -1183,7 +1175,10 @@ const LandingPage = () => {
                   <h5 className="text-body mb-8">
                     Start your project with a 14-day free trial
                   </h5>
-                  <a href="#landingPricing" className="btn btn-lg btn-primary">
+                  <a
+                    href="payment-page.html"
+                    className="btn btn-lg btn-primary"
+                  >
                     Get Started
                   </a>{" "}
                   <a
@@ -1197,7 +1192,7 @@ const LandingPage = () => {
               <div className="col-lg-6 pt-lg-12 text-center text-lg-end">
                 <img
                   style={{ width: "80%" }}
-                  src="./../../public/img/images/contact-customer-service.png"
+                  src="./../../public/img/front-pages/landing-page/contact-customer-service.png"
                   alt="hero elements"
                 ></img>
               </div>
@@ -1214,13 +1209,13 @@ const LandingPage = () => {
         >
           <div className="container">
             <div className="text-center mb-4">
-              <span className="badge bg-label-primary heading">Contact US</span>
+              <span className="badge bg-label-primary">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/icons/section-title-icon.png"
+                  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"
                 />
@@ -1234,12 +1229,12 @@ const LandingPage = () => {
               <div className="col-lg-5">
                 <div className="contact-img-box position-relative border p-2 h-100">
                   <img
-                    src="./../../public/img/icons/contact-border.png"
+                    src="./../../public/img/front-pages/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/images/contact-customer-service.png"
+                    src="./../../public/img/front-pages/landing-page/contact-customer-service.png"
                     alt="contact customer service"
                     className="contact-img w-100 scaleX-n1-rtl"
                   />
@@ -1362,14 +1357,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/backgrounds/footer-bg.png"
+            src="./../../public/img/front-pages/backgrounds/footer-bg.png"
             alt="footer bg"
             className="footer-bg banner-bg-img z-n1"
           />
           <div className="container">
-            <div className="row ">
+            <div className="row gx-0 gy-6 g-lg-10">
-              <div className="col-lg-6">
+              <div className="col-lg-5">
-                <a href="#" className="app-brand-link ">
+                <a href="#" className="app-brand-link mb-6">
                   <span className="app-brand-logo demo">
                     <svg
                       width="25"
@@ -1456,10 +1451,10 @@ const LandingPage = () => {
                     <Link className="cta-title">
                       <div className="app-brand-logo demo">
                         <img
-                          className="rounded rounded-circle"
+                          className="rounded"
                           style={{
-                            border: "3px solid #efdedeff",
+                            border: "1px solid #fff",
-                            padding: "0px",
+                            padding: "5px",
                             borderRadius: "50px",
                           }}
                           src="../../../public/img/brand/marco.png"
@@ -1470,11 +1465,11 @@ const LandingPage = () => {
                     </Link>
                   </span>
                 </a>
-                <p className="footer-text footer-logo-description" hidden>
+                <p className="footer-text footer-logo-description mb-6">
-                  Work smarter, track faster, and manage everything from one
+                  Most developer friendly & highly customisable Admin Dashboard
-                  platform.
+                  Template.
                 </p>
-                <form className="footer-form" hidden>
+                <form className="footer-form">
                   <label for="footer-email" className="small">
                     Subscribe to newsletter
                   </label>
@@ -1494,21 +1489,53 @@ const LandingPage = () => {
                   </div>
                 </form>
               </div>
-
+              <div className="col-lg-2 col-md-4 col-sm-6"></div>
-              <div className="col-lg-6 col-md-6 d-flex gap-3 align-items-center justify-content-end">
+              <div className="col-lg-2 col-md-4 col-sm-6">
-                <h6 className="footer-title mt-3">Download our app</h6>
+                <h6 className="footer-title mb-6">Pages</h6>
-                <a href="javascript:void(0);">
+                <ul className="list-unstyled">
+                  <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/icons/apple-icon.png"
+                    src="./../../public/img/front-pages/landing-page/apple-icon.png"
                     alt="apple icon"
                   />
                 </a>
-                <a
+                <a href="javascript:void(0);" className="d-block">
-                  href="https://play.google.com/store/apps/details?id=com.marco.aiotstage&pcampaignid=web_share"
-                  target="_blank"
-                >
                   <img
-                    src="./../../public/img/icons/google-play-icon.png"
+                    src="./../../public/img/front-pages/landing-page/google-play-icon.png"
                     alt="google play icon"
                   />
                 </a>
@@ -1537,7 +1564,7 @@ const LandingPage = () => {
                 target="_blank"
               >
                 <img
-                  src="./../../public/img/icons/facebook.svg"
+                  src="./../../public/img/front-pages/icons/facebook.svg"
                   alt="facebook icon"
                 />
               </a>
@@ -1547,13 +1574,13 @@ const LandingPage = () => {
                 target="_blank"
               >
                 <img
-                  src="./../../public/img/icons/twitter.svg"
+                  src="./../../public/img/front-pages/icons/twitter.svg"
                   alt="twitter icon"
                 />
               </a>
               <a href="https://www.instagram.com/marcoaiot/" target="_blank">
                 <img
-                  src="./../../public/img/icons/instagram.svg"
+                  src="./../../public/img/front-pages/icons/instagram.svg"
                   alt="google icon"
                 />
               </a>

src/pages/Home/SwaperBlogContent.jsx

@@ -1,47 +0,0 @@
-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

@@ -1,59 +0,0 @@
-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: <LandingPage />,
+      element: <RootRedirect />,
     },
     {
       element: <AuthLayout />,