add blog container

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

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

src/pages/Home/LandingPage.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;
@@ -303,10 +307,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 +359,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 +372,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 +633,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,13 +132,14 @@ const LandingPage = () => {
             <div className="container">
               <div className="hero-text-box text-center position-relative">
                 <h1 className="text-primary hero-title display-6 fw-extrabold">
-                  One dashboard to manage all your businesses
+                  All-in-one platform to manage projects, people, and resources
+                  seamlessly.
                 </h1>
-                <h2 className="hero-sub-title h6 mb-6">
+                {/* <h2 className="hero-sub-title h6 mb-6">
                   Production-ready & easy to use Admin Template
                   <br className="d-none d-lg-block" />
                   for Reliability and Customizability.
-                </h2>
+                </h2> */}
                 <div className="landing-hero-btn d-inline-block position-relative">
                   {/* <span className="hero-btn-item position-absolute d-none d-md-flex fw-medium">
                     Join community
@@ -151,7 +153,7 @@ const LandingPage = () => {
                     href="#landingPricing"
                     className="btn btn-primary btn-lg me-5"
                   >
-                    Get early access
+                    Get Early Access
                   </a>
                   <a
                     href="/auth/reqest/demo"
@@ -161,121 +163,88 @@ const LandingPage = () => {
                   </a>
                 </div>
               </div>
+
               <div
                 id="heroDashboardAnimation"
                 className="hero-animation-img mt-10"
               >
-                <a
+                <div
-                  href="../vertical-menu-template/app-ecommerce-dashboard.html"
+                  id="heroAnimationImg"
-                  target="_blank"
+                  className="position-relative hero-dashboard-img"
                 >
-                  <div
+                  <Swiper
-                    id="heroAnimationImg"
+                    spaceBetween={30}
-                    className="position-relative hero-dashboard-img"
+                    centeredSlides={true}
+                    rewind={true}
+                    autoplay={{
+                      delay: 3500,
+                      disableOnInteraction: false,
+                    }}
+                    pagination={{
+                      clickable: true,
+                    }}
+                    keyboard={{
+                      enabled: true,
+                    }}
+                    navigation={false}
+                    modules={[EffectFlip, Autoplay, Pagination, Navigation]}
+                    className="mySwiper"
+                    onSlideChange={() => console.log("slide change")}
+                    onSwiper={(swiper) => console.log(swiper)}
                   >
-                    <Swiper
+                    <SwiperSlide>
-                      spaceBetween={30}
+                      <SwaperSlideContent
-                      centeredSlides={true}
+                        ImageUrl="./../../public/img/front-pages/landing-page/dashboard-light-01.png"
-                      rewind={true}
+                        Title="Project & Task Management"
-                      autoplay={{
+                        Body="Plan, assign, and track projects and tasks seamlessly for better team collaboration."
-                        delay: 3500,
+                      ></SwaperSlideContent>
-                        disableOnInteraction: false,
+                    </SwiperSlide>
-                      }}
-                      pagination={{
-                        clickable: true,
-                      }}
-                      keyboard={{
-                        enabled: true,
-                      }}
-                      navigation={false}
-                      modules={[Autoplay, Pagination, Navigation]}
-                      className="mySwiper"
-                      onSlideChange={() => console.log("slide change")}
-                      onSwiper={(swiper) => console.log(swiper)}
-                    >
-                      <SwiperSlide>
-                        <img
-                          src="./../../public/img/front-pages/landing-page/dashboard-light-01.png"
-                          alt="hero dashboard"
-                          className="animation-img"
-                          data-app-light-img="front-pages/landing-page/hero-dashboard-light.png"
-                          data-app-dark-img="front-pages/landing-page/hero-dashboard-dark.png"
-                        />
-                      </SwiperSlide>
-                      <SwiperSlide>
-                        <img
-                          src="./../../public/img/front-pages/landing-page/dashboard-light-02.png"
-                          alt="hero dashboard"
-                          className="animation-img"
-                          data-app-light-img="front-pages/landing-page/hero-dashboard-light.png"
-                          data-app-dark-img="front-pages/landing-page/hero-dashboard-dark.png"
-                        />
-                      </SwiperSlide>
-                      <SwiperSlide>
-                        <img
-                          src="./../../public/img/front-pages/landing-page/dashboard-light-03.png"
-                          alt="hero dashboard"
-                          className="animation-img"
-                          data-app-light-img="front-pages/landing-page/hero-dashboard-light.png"
-                          data-app-dark-img="front-pages/landing-page/hero-dashboard-dark.png"
-                        />
-                      </SwiperSlide>
-                      <SwiperSlide>
-                        <img
-                          src="./../../public/img/front-pages/landing-page/dashboard-light-04.png"
-                          alt="hero dashboard"
-                          className="animation-img"
-                          data-app-light-img="front-pages/landing-page/hero-dashboard-light.png"
-                          data-app-dark-img="front-pages/landing-page/hero-dashboard-dark.png"
-                        />
-                      </SwiperSlide>
-                      <SwiperSlide>
-                        <img
-                          src="./../../public/img/front-pages/landing-page/dashboard-light-05.png"
-                          alt="hero dashboard"
-                          className="animation-img"
-                          data-app-light-img="front-pages/landing-page/hero-dashboard-light.png"
-                          data-app-dark-img="front-pages/landing-page/hero-dashboard-dark.png"
-                        />
-                      </SwiperSlide>
-                      <SwiperSlide>
-                        <img
-                          src="./../../public/img/front-pages/landing-page/dashboard-light-06.png"
-                          alt="hero dashboard"
-                          className="animation-img"
-                          data-app-light-img="front-pages/landing-page/hero-dashboard-light.png"
-                          data-app-dark-img="front-pages/landing-page/hero-dashboard-dark.png"
-                        />
-                      </SwiperSlide>
-                      <SwiperSlide>
-                        <img
-                          src="./../../public/img/front-pages/landing-page/dashboard-light-07.png"
-                          alt="hero dashboard"
-                          className="animation-img"
-                          data-app-light-img="front-pages/landing-page/hero-dashboard-light.png"
-                          data-app-dark-img="front-pages/landing-page/hero-dashboard-dark.png"
-                        />
-                      </SwiperSlide>
-                      <SwiperSlide>
-                        <img
-                          src="./../../public/img/front-pages/landing-page/dashboard-light-08.png"
-                          alt="hero dashboard"
-                          className="animation-img"
-                          data-app-light-img="front-pages/landing-page/hero-dashboard-light.png"
-                          data-app-dark-img="front-pages/landing-page/hero-dashboard-dark.png"
-                        />
-                      </SwiperSlide>
-                    </Swiper>
 
-                    {/* <img
+                    <SwiperSlide>
-                      src="./../../public/img/front-pages/landing-page/hero-elements-light.png"
+                      <SwaperSlideContent
-                      alt="hero elements"
+                        ImageUrl="./../../public/img/front-pages/landing-page/dashboard-light-02.png"
-                      className="position-absolute hero-elements-img animation-img top-0 start-0"
+                        Title="Attendance & Leave Tracking"
-                      data-app-light-img="front-pages/landing-page/hero-elements-light.png"
+                        Body="Monitor employee attendance and manage leave requests with ease."
-                      data-app-dark-img="front-pages/landing-page/hero-elements-dark.png"
+                      ></SwaperSlideContent>
-                    /> */}
+                    </SwiperSlide>
-                  </div>
+                    <SwiperSlide>
-                </a>
+                      <SwaperSlideContent
+                        ImageUrl="./../../public/img/front-pages/landing-page/dashboard-light-04.png"
+                        Title="Role-based Permissions"
+                        Body="Securely control access with customizable roles and permissions."
+                      ></SwaperSlideContent>
+                    </SwiperSlide>
+                    <SwiperSlide>
+                      <SwaperSlideContent
+                        ImageUrl="./../../public/img/front-pages/landing-page/dashboard-light-05.png"
+                        Title="Expense & Budget Tracking"
+                        Body="Keep projects on budget with real-time expense and cost management."
+                        ContentAlign="left"
+                      ></SwaperSlideContent>
+                    </SwiperSlide>
+                    <SwiperSlide>
+                      <SwaperSlideContent
+                        ImageUrl="./../../public/img/front-pages/landing-page/dashboard-light-06.png"
+                        Title="Reporting & Analytics"
+                        Body="Gain actionable insights through powerful reports and analytics dashboards."
+                      ></SwaperSlideContent>
+                    </SwiperSlide>
+                    <SwiperSlide>
+                      <SwaperSlideContent
+                        ImageUrl="./../../public/img/front-pages/landing-page/dashboard-light-07.png"
+                        Title="Document Management"
+                        Body="Organize, share, and access all your project and employee documents in one place."
+                      ></SwaperSlideContent>
+                    </SwiperSlide>
+                    <SwiperSlide>
+                      <SwaperSlideContent
+                        ImageUrl="./../../public/img/front-pages/landing-page/dashboard-light-08.png"
+                        Title="Inventory Management"
+                        Body="Track materials, supplies, and assets — never run short again."
+                      ></SwaperSlideContent>
+                    </SwiperSlide>
+                  </Swiper>
+                </div>
               </div>
             </div>
           </div>
@@ -287,192 +256,229 @@ 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"
                   alt="laptop charging"
                   className="section-title-img position-absolute object-fit-contain bottom-0 z-n1"
-                />
+                /> */}
               </span>
-              to start your next project
+              everything your business needs in one place.
             </h4>
             <p className="text-center mb-12">
-              Not just a set of tools, the package includes ready-to-deploy
+              All-in-one platform to manage projects, people, and resources
-              conceptual application.
+              seamlessly.
             </p>
             <div className="features-icon-wrapper row gx-0 gy-6 g-sm-12">
-              <div className="col-lg-4 col-sm-6 text-center features-icon-box">
+              <div className="col-lg-3 col-sm-4 text-center features-icon-box">
                 <div className="text-center mb-4">
                   <img
                     src="./../../public/img/front-pages/icons/laptop.svg"
                     alt="laptop charging"
                   />
                 </div>
-                <h5 className="mb-2">Quality Code</h5>
+                <h5 className="mb-2">Project & Task Management</h5>
                 <p className="features-icon-description">
-                  Code structure that all developers will easily understand and
+                  Plan, assign, and track projects and tasks seamlessly for
-                  fall in love with.
+                  better team collaboration.
                 </p>
               </div>
-              <div className="col-lg-4 col-sm-6 text-center features-icon-box">
+              <div className="col-lg-3 col-sm-4 text-center features-icon-box">
                 <div className="text-center mb-4">
                   <img
                     src="./../../public/img/front-pages/icons/rocket.svg"
                     alt="transition up"
                   />
                 </div>
-                <h5 className="mb-2">Continuous Updates</h5>
+                <h5 className="mb-2">Attendance & Leave Tracking</h5>
                 <p className="features-icon-description">
-                  Free updates for the next 12 months, including new demos and
+                  Monitor employee attendance and manage leave requests with
-                  features.
+                  ease.
                 </p>
               </div>
-              <div className="col-lg-4 col-sm-6 text-center features-icon-box">
+              <div className="col-lg-3 col-sm-4 text-center features-icon-box">
                 <div className="text-center mb-4">
                   <img
                     src="./../../public/img/front-pages/icons/paper.svg"
                     alt="edit"
                   />
                 </div>
-                <h5 className="mb-2">Stater-Kit</h5>
+                <h5 className="mb-2">Role-based Permissions</h5>
                 <p className="features-icon-description">
-                  Start your project quickly without having to remove
+                  Securely control access with customizable roles and
-                  unnecessary features.
+                  permissions.
                 </p>
               </div>
-              <div className="col-lg-4 col-sm-6 text-center features-icon-box">
+              <div className="col-lg-3 col-sm-4 text-center features-icon-box">
                 <div className="text-center mb-4">
                   <img
                     src="./../../public/img/front-pages/icons/check.svg"
                     alt="3d select solid"
                   />
                 </div>
-                <h5 className="mb-2">API Ready</h5>
+                <h5 className="mb-2">Expense & Budget Tracking</h5>
                 <p className="features-icon-description">
-                  Just change the endpoint and see your own data loaded within
+                  Keep projects on budget with real-time expense and cost
-                  seconds.
+                  management.
                 </p>
               </div>
-              <div className="col-lg-4 col-sm-6 text-center features-icon-box">
+              <div className="col-lg-3 col-sm-4 text-center features-icon-box">
                 <div className="text-center mb-4">
                   <img
                     src="./../../public/img/front-pages/icons/user.svg"
                     alt="user"
                   />
                 </div>
-                <h5 className="mb-2">Excellent Support</h5>
+                <h5 className="mb-2">Reporting & Analytics</h5>
                 <p className="features-icon-description">
-                  An easy-to-follow doc with lots of references and code
+                  Gain actionable insights through powerful reports and
-                  examples.
+                  analytics dashboards.
                 </p>
               </div>
-              <div className="col-lg-4 col-sm-6 text-center features-icon-box">
+              <div className="col-lg-3 col-sm-4 text-center features-icon-box">
                 <div className="text-center mb-4">
                   <img
                     src="./../../public/img/front-pages/icons/keyboard.svg"
                     alt="keyboard"
                   />
                 </div>
-                <h5 className="mb-2">Well Documented</h5>
+                <h5 className="mb-2">Document Management</h5>
                 <p className="features-icon-description">
-                  An easy-to-follow doc with lots of references and code
+                  Organize, share, and access all your project and employee
-                  examples.
+                  documents in one place.
                 </p>
               </div>
+              <div className="col-lg-3 col-sm-4 text-center features-icon-box">
+                <div className="text-center mb-4">
+                  <img
+                    src="./../../public/img/front-pages/icons/keyboard.svg"
+                    alt="keyboard"
+                  />
+                </div>
+                <h5 className="mb-2">
+                  Service Provider & Subcontractor Tracking
+                </h5>
+                <p className="features-icon-description">
+                  Manage multiple service providers and subcontractors
+                  efficiently within projects.
+                </p>
+              </div>{" "}
+              <div className="col-lg-3 col-sm-4 text-center features-icon-box">
+                <div className="text-center mb-4">
+                  <img
+                    src="./../../public/img/front-pages/icons/inventory.svg"
+                    alt="keyboard"
+                  />
+                </div>
+                <h5 className="mb-2">Inventory Management</h5>
+                <p className="features-icon-description">
+                  Track materials, supplies, and assets — never run short again.
+                </p>
+              </div>{" "}
             </div>
+            <div className="col-lg-3 col-sm-4 text-center features-icon-box">
+              <div className="text-center mb-4">
+                <img
+                  src="./../../public/img/front-pages/icons/keyboard.svg"
+                  alt="keyboard"
+                />
+              </div>
+              <h5 className="mb-2">Directory</h5>
+              <p className="features-icon-description">
+                Your team, suppliers, vendors organized and connected in one
+                unified directory.
+              </p>
+            </div>{" "}
           </div>
         </section>
         {/*  Useful features: End */}
 
-        {/*  Our great team: Start */}
+        {/* <!-- 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>
+                    type: "fraction",
-                  <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="./../../img/front-pages/branding/logo-1.png"
-                    <img
+                      Title="Project & Task Management"
-                      src="./../../public/img/front-pages/landing-page/team-member-2.png"
+                      Body="Plan, assign, and track projects and tasks seamlessly for better team collaboration."
-                      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="./../../img/front-pages/branding/logo-1.png"
-                    <p className="text-muted mb-0">UI Designer</p>
+                      Title="Project & Task Management"
-                  </div>
+                      Body="Plan, assign, and track projects and tasks seamlessly for better team collaboration."
-                </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="./../../img/front-pages/branding/logo-1.png"
-                      src="./../../public/img/front-pages/landing-page/team-member-3.png"
+                      Title="Project & Task Management"
-                      className="position-absolute card-img-position bottom-0 start-50 scaleX-n1-rtl"
+                      Body="Plan, assign, and track projects and tasks seamlessly for better team collaboration."
-                      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="./../../img/front-pages/branding/logo-1.png"
-                  </div>
+                      Title="Project & Task Management"
-                </div>
+                      Body="Plan, assign, and track projects and tasks seamlessly for better team collaboration."
-              </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 +487,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"
                   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,18 +535,18 @@ 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"
                     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-lg-5">
+            <div className="row g-6 pt-0">
               {/*  Basic Plan: Start */}
               <div className="col-xl-4 col-lg-6 col-md-4">
                 <div className="card">
@@ -913,7 +930,7 @@ 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
@@ -952,7 +969,7 @@ const LandingPage = () => {
                         aria-expanded="true"
                         aria-controls="accordionOne"
                       >
-                        Do you charge for each upgrade?
+                        What is MarcoPMS?
                       </button>
                     </h2>
 
@@ -980,7 +997,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 +1025,7 @@ const LandingPage = () => {
                         aria-expanded="false"
                         aria-controls="accordionThree"
                       >
-                        What is regular license?
+                        How secure is Marco PMS?
                       </button>
                     </h2>
                     <div
@@ -1041,7 +1058,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,10 +1112,7 @@ 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"
             className="position-absolute bottom-0 end-0 scaleX-n1-rtl h-100 w-100 z-n1"
@@ -1108,7 +1122,7 @@ const LandingPage = () => {
           />
           <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">
@@ -1209,7 +1223,7 @@ 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">
@@ -1362,9 +1376,9 @@ const LandingPage = () => {
             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"
@@ -1465,11 +1479,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,51 +1503,16 @@ 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">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"
                     alt="apple icon"
                   />
                 </a>
-                <a href="javascript:void(0);" className="d-block">
+                <a href="javascript:void(0);">
                   <img
                     src="./../../public/img/front-pages/landing-page/google-play-icon.png"
                     alt="google play icon"

src/pages/Home/SwaperBlogContent.jsx

@@ -0,0 +1,49 @@
+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"
+            />
+            <h5>The Decoy Effect – Strategy</h5>
+          </div>
+          <p>
+            “Vuexy is hands down the most useful front end Bootstrap theme I've
+            ever used. I can't wait to use it again for my next project.”
+          </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

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