implement landing page UI

package-lock.json

@@ -37,6 +37,7 @@
         "react-router-dom": "^6.20.1",
         "react-toastify": "^11.0.2",
         "sort-by": "^1.2.0",
+        "swiper": "^11.2.10",
         "xlsx": "^0.18.5",
         "zod": "^3.24.1"
       },
@@ -5547,6 +5548,24 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/swiper": {
+      "version": "11.2.10",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-11.2.10.tgz",
+      "integrity": "sha512-RMeVUUjTQH+6N3ckimK93oxz6Sn5la4aDlgPzB+rBrG/smPdCTicXyhxa+woIpopz+jewEloiEE3lKo1h9w2YQ==",
+      "funding": [
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/swiperjs"
+        },
+        {
+          "type": "open_collective",
+          "url": "http://opencollective.com/swiper"
+        }
+      ],
+      "engines": {
+        "node": ">= 4.7.0"
+      }
+    },
     "node_modules/tapable": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",

package.json

@@ -40,6 +40,7 @@
     "react-router-dom": "^6.20.1",
     "react-toastify": "^11.0.2",
     "sort-by": "^1.2.0",
+    "swiper": "^11.2.10",
     "xlsx": "^0.18.5",
     "zod": "^3.24.1"
   },

src/pages/Home/LandingPage.css

@@ -51,20 +51,32 @@
 }
 
 nav.layout-navbar {
-  backdrop-filter: unset !important;
+  backdrop-filter: unset;
-  height: auto !important;
-  z-index: 999 !important;
   background-color: transparent !important;
 }
-nav.layout-navbar::after {
+
-  content: "";
+nav.layout-navbar::before {
   position: absolute;
   display: block;
-  height: 100%;
+  block-size: 100%;
-  width: 100%;
+  content: "";
-  top: 0;
+  inline-size: 100%;
-  left: 0;
+  inset-block-start: 0;
+  inset-inline-start: 0;
 }
+
+nav.layout-navbar .navbar.landing-navbar {
+  --bs-front-navbar-bg: rgba(var(--bs-paper-bg-rgb), 0.38);
+  --bs-front-navbar-border-color: rgba(var(--bs-paper-bg-rgb), 0.68);
+  border: 2px solid var(--bs-front-navbar-border-color);
+  background-color: var(--bs-front-navbar-bg);
+  margin-block-start: 1rem;
+  padding-block: 0.614rem;
+  transform: unset;
+  transition: all 0.2s ease-in-out;
+  border-radius: 0.375rem;
+}
+
 nav.layout-navbar.navbar-active::after {
   backdrop-filter: saturate(100%) blur(6px);
   -webkit-backdrop-filter: saturate(100%) blur(6px);
@@ -389,6 +401,9 @@ nav.layout-navbar.navbar-active::after {
 .landing-hero .hero-animation-img {
   margin-bottom: -32rem;
 }
+.animation-img {
+  border: 1px soid red;
+}
 @media (max-width: 1199.98px) {
   .landing-hero .hero-animation-img {
     margin-bottom: -20rem;
@@ -609,3 +624,26 @@ nav.layout-navbar.navbar-active::after {
   inset-inline-start: -3.125rem;
   transform: rotate(90deg);
 }
+
+.swiper {
+  width: 100%;
+  height: 100%;
+}
+
+.swiper-slide {
+  text-align: center;
+  font-size: 18px;
+  background: #444;
+
+  /* Center slide text vertically */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.swiper-slide img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}

src/pages/Home/LandingPage.jsx

@@ -1,6 +1,14 @@
+import { noop } from "@tanstack/react-query";
 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 Swiper styles
+import "swiper/css";
+import "swiper/css/navigation";
+
 const LandingPage = () => {
   return (
     <div>
@@ -22,7 +30,7 @@ const LandingPage = () => {
                 <i className="tf-icons bx bx-menu bx-lg align-middle text-heading fw-medium"></i>
               </button>
               {/*  Mobile menu toggle: End*/}
-              <a href="landing-page.html" className="app-brand-link">
+              <a href="/" className="app-brand-link">
                 <span className="app-brand-logo demo">
                   <img
                     src="../../../public/img/brand/marco.png"
@@ -58,32 +66,23 @@ const LandingPage = () => {
                   <a
                     className="nav-link fw-medium"
                     aria-current="page"
-                    href="landing-page.html#landingHero"
+                    href="#landingHero"
                   >
                     Home
                   </a>
                 </li>
                 <li className="nav-item">
-                  <a
+                  <a className="nav-link fw-medium" href="#landingFeatures">
-                    className="nav-link fw-medium"
-                    href="landing-page.html#landingFeatures"
-                  >
                     Features
                   </a>
                 </li>
                 <li className="nav-item">
-                  <a
+                  <a className="nav-link fw-medium" href="#landingTeam">
-                    className="nav-link fw-medium"
-                    href="landing-page.html#landingTeam"
-                  >
                     Team
                   </a>
                 </li>
                 <li className="nav-item">
-                  <a
+                  <a className="nav-link fw-medium" href="#landingFAQ">
-                    className="nav-link fw-medium"
-                    href="landing-page.html#landingFAQ"
-                  >
                     FAQ
                   </a>
                 </li>
@@ -97,10 +96,7 @@ const LandingPage = () => {
                   </a>
                 </li>
                 <li className="nav-item">
-                  <a
+                  <a className="nav-link fw-medium" href="#landingCTA">
-                    className="nav-link fw-medium"
-                    href="landing-page.html#landingContact"
-                  >
                     Contact us
                   </a>
                 </li>
@@ -132,12 +128,6 @@ const LandingPage = () => {
             id="landingHero"
             className="section-py landing-hero position-relative"
           >
-            <img
-              src="./../../public/img/front-pages/backgrounds/hero-bg.png"
-              alt="hero background"
-              className="position-absolute top-0 start-50 translate-middle-x object-fit-cover w-100 h-100"
-              data-speed="1"
-            />
             <div className="container">
               <div className="hero-text-box text-center position-relative">
                 <h1 className="text-primary hero-title display-6 fw-extrabold">
@@ -149,20 +139,32 @@ const LandingPage = () => {
                   for Reliability and Customizability.
                 </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">
+                  {/* <span className="hero-btn-item position-absolute d-none d-md-flex fw-medium">
                     Join community
                     <img
                       src="./../../public/img/front-pages/icons/Join-community-arrow.png"
                       alt="Join community arrow"
                       className="scaleX-n1-rtl"
                     />
-                  </span>
+                  </span> */}
-                  <a href="#landingPricing" className="btn btn-primary btn-lg">
+                  <a
+                    href="#landingPricing"
+                    className="btn btn-primary btn-lg me-5"
+                  >
                     Get early access
                   </a>
+                  <a
+                    href="/auth/reqest/demo"
+                    className="btn btn-lg btn-primary"
+                  >
+                    Request a Demo
+                  </a>
                 </div>
               </div>
-              <div id="heroDashboardAnimation" className="hero-animation-img">
+              <div
+                id="heroDashboardAnimation"
+                className="hero-animation-img mt-10"
+              >
                 <a
                   href="../vertical-menu-template/app-ecommerce-dashboard.html"
                   target="_blank"
@@ -171,20 +173,107 @@ const LandingPage = () => {
                     id="heroAnimationImg"
                     className="position-relative hero-dashboard-img"
                   >
-                    <img
+                    <Swiper
-                      src="./../../public/img/front-pages/landing-page/hero-dashboard-light.png"
+                      spaceBetween={30}
-                      alt="hero dashboard"
+                      centeredSlides={true}
-                      className="animation-img"
+                      rewind={true}
-                      data-app-light-img="front-pages/landing-page/hero-dashboard-light.png"
+                      autoplay={{
-                      data-app-dark-img="front-pages/landing-page/hero-dashboard-dark.png"
+                        delay: 3500,
-                    />
+                        disableOnInteraction: false,
-                    <img
+                      }}
+                      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
                       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>
@@ -395,7 +484,7 @@ const LandingPage = () => {
               <span className="badge bg-label-primary">Pricing Plans</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">
                 Tailored pricing plans
                 <img
                   src="./../../public/img/front-pages/icons/section-title-icon.png"
@@ -442,7 +531,7 @@ const LandingPage = () => {
             </div>
             <div className="row g-6 pt-lg-5">
               {/*  Basic Plan: Start */}
-              <div className="col-xl-4 col-lg-6">
+              <div className="col-xl-4 col-lg-6 col-md-4">
                 <div className="card">
                   <div className="card-header">
                     <div className="text-center">
@@ -469,7 +558,7 @@ const LandingPage = () => {
                     </div>
                   </div>
                   <div className="card-body">
-                    <ul className="list-unstyled pricing-list">
+                    <ul className="text start list-unstyled pricing-list">
                       <li>
                         <h6 className="d-flex align-items-center mb-3">
                           <span className="badge badge-center rounded-pill bg-label-primary p-0 me-3">
@@ -541,7 +630,7 @@ const LandingPage = () => {
               {/*  Basic Plan: End */}
 
               {/*  Favourite Plan: Start */}
-              <div className="col-xl-4 col-lg-6">
+              <div className="col-xl-4 col-lg-6 col-md-4">
                 <div className="card border border-primary shadow-xl">
                   <div className="card-header">
                     <div className="text-center">
@@ -568,7 +657,7 @@ const LandingPage = () => {
                     </div>
                   </div>
                   <div className="card-body">
-                    <ul className="list-unstyled pricing-list">
+                    <ul className="text start list-unstyled pricing-list">
                       <li>
                         <h6 className="d-flex align-items-center mb-3">
                           <span className="badge badge-center rounded-pill bg-primary p-0 me-3">
@@ -637,7 +726,7 @@ const LandingPage = () => {
               {/*  Favourite Plan: End */}
 
               {/*  Standard Plan: Start */}
-              <div className="col-xl-4 col-lg-6">
+              <div className="col-xl-4 col-lg-6 col-md-4">
                 <div className="card">
                   <div className="card-header">
                     <div className="text-center">
@@ -664,7 +753,7 @@ const LandingPage = () => {
                     </div>
                   </div>
                   <div className="card-body">
-                    <ul className="list-unstyled pricing-list">
+                    <ul className="text start list-unstyled pricing-list">
                       <li>
                         <h6 className="d-flex align-items-center mb-3">
                           <span className="badge badge-center rounded-pill bg-label-primary p-0 me-3">
@@ -740,7 +829,11 @@ const LandingPage = () => {
         {/*  Pricing plans: End */}
 
         {/*  Fun facts: Start */}
-        <section id="landingFunFacts" className="section-py landing-fun-facts">
+        <section
+          id="landingFunFacts"
+          className="section-py landing-fun-facts "
+          style={{ display: "none" }}
+        >
           <div className="container">
             <div className="row gy-6">
               <div className="col-sm-6 col-lg-3">
@@ -1014,24 +1107,94 @@ const LandingPage = () => {
             data-app-dark-img="front-pages/backgrounds/cta-bg-dark.png"
           />
           <div className="container">
-            <div className="row align-items-center gy-12">
+            <div className="text-center mb-4 mt-5">
+              <span className="badge bg-label-primary">Contact US</span>
+            </div>
+
+            <div className="row align-items-center gy-12  mb-12">
               <div className="col-lg-6 text-start text-sm-center text-lg-start">
-                <h3 className="cta-title text-primary fw-bold mb-1">
+                <div className="mt-5">
-                  Ready to Get Started?
+                  {" "}
-                </h3>
+                  <h4 className="text-start mb-1">
-                <h5 className="text-body mb-8">
+                    <span className="position-relative fw-extrabold z-1">
-                  Start your project with a 14-day free trial
+                      Let's work
-                </h5>
+                      <img
-                <a href="payment-page.html" className="btn btn-lg btn-primary">
+                        src="./../../public/img/front-pages/icons/section-title-icon.png"
-                  Get Started
+                        alt="laptop charging"
-                </a>
+                        className="section-title-img position-absolute object-fit-contain bottom-0 z-n1"
+                      />
+                    </span>
+                    together
+                  </h4>
+                  <p className="text-start pb-md-4">
+                    Any question or remark? just write us a message
+                  </p>
+                  <div className="row g-4 ">
+                    <div className="col-md-6 col-lg-12 col-xl-6">
+                      <div className="d-flex align-items-center">
+                        <div className="badge bg-label-primary rounded p-1_5 me-3">
+                          <i className="bx bx-envelope bx-lg"></i>
+                        </div>
+                        <div>
+                          <p className="mb-0">Email</p>
+                          <h6 className="mb-0">
+                            <a
+                              href="mailto:example@gmail.com"
+                              className="text-heading"
+                            >
+                              sales@marcoaiot.com
+                            </a>
+                          </h6>
+                        </div>
+                      </div>
+                    </div>
+                    <div className="col-md-6 col-lg-12 col-xl-6">
+                      <div className="d-flex align-items-center">
+                        <div className="badge bg-label-success rounded p-1_5 me-3">
+                          <i className="bx bx-phone-call bx-lg"></i>
+                        </div>
+                        <div>
+                          <p className="mb-0">Phone</p>
+                          <h6 className="mb-0">
+                            <a
+                              href="tel:+1234-568-963"
+                              className="text-heading"
+                            >
+                              +1234 568 963
+                            </a>
+                          </h6>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div className="mt-10">
+                  <h4 className="cta-title text-primary  mb-1">
+                    Ready to Get Started?
+                  </h4>
+                  <h5 className="text-body mb-8">
+                    Start your project with a 14-day free trial
+                  </h5>
+                  <a
+                    href="payment-page.html"
+                    className="btn btn-lg btn-primary"
+                  >
+                    Get Started
+                  </a>{" "}
+                  <a
+                    href="/auth/reqest/demo"
+                    className="btn btn-lg btn-primary"
+                  >
+                    Request a Demo
+                  </a>
+                </div>
               </div>
               <div className="col-lg-6 pt-lg-12 text-center text-lg-end">
                 <img
-                  src="./../../public/img/front-pages/landing-page/cta-dashboard.png"
+                  style={{ width: "80%" }}
-                  alt="cta dashboard"
+                  src="./../../public/img/front-pages/landing-page/contact-customer-service.png"
-                  className="img-fluid mt-lg-4"
+                  alt="hero elements"
-                />
+                ></img>
               </div>
             </div>
           </div>
@@ -1042,6 +1205,7 @@ const LandingPage = () => {
         <section
           id="landingContact"
           className="section-py bg-body landing-contact"
+          style={{ display: "none" }}
         >
           <div className="container">
             <div className="text-center mb-4">
@@ -1200,7 +1364,7 @@ const LandingPage = () => {
           <div className="container">
             <div className="row gx-0 gy-6 g-lg-10">
               <div className="col-lg-5">
-                <a href="landing-page.html" className="app-brand-link mb-6">
+                <a href="#" className="app-brand-link mb-6">
                   <span className="app-brand-logo demo">
                     <svg
                       width="25"
@@ -1284,7 +1448,21 @@ const LandingPage = () => {
                     </svg>
                   </span>
                   <span className="app-brand-text demo text-white fw-bold ms-2 ps-1">
-                    <Link>Marco PMS</Link>
+                    <Link className="cta-title">
+                      <div class="app-brand-logo demo">
+                        <img
+                          className="rounded"
+                          style={{
+                            border: "1px solid #fff",
+                            padding: "5px",
+                            borderRadius: "50px",
+                          }}
+                          src="../../../public/img/brand/marco.png"
+                          width="50"
+                        />
+                        <span> Marco PMS</span>
+                      </div>
+                    </Link>
                   </span>
                 </a>
                 <p className="footer-text footer-logo-description mb-6">
@@ -1336,13 +1514,14 @@ const LandingPage = () => {
                     </a>
                   </li>
                   <li>
-                    <a
+                    <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>*/}
-                      Login/Register
-                    </a>
                   </li>
                 </ul>
               </div>

src/pages/authentication/LoginPage.jsx

@@ -16,19 +16,13 @@ const LoginPage = () => {
 
   const loginSchema = IsLoginWithOTP
     ? z.object({
-      username: z.string()
+        username: z.string().email({ message: "Valid email required" }),
-        .trim()
+      })
-        .email({ message: "Valid email required" }),
-    })
     : z.object({
-      username: z.string()
+        username: z.string().email({ message: "Valid email required" }),
-        .trim()
+        password: z.string().min(1, { message: "Password required" }),
-        .email({ message: "Valid email required" }),
+        rememberMe: z.boolean(),
-      password: z.string()
+      });
-        .trim()
-        .min(1, { message: "Password required" }),
-      rememberMe: z.boolean(),
-    });
 
   const {
     register,
@@ -81,7 +75,7 @@ const LoginPage = () => {
   }, [IsLoginWithOTP]);
 
   return (
-    <div className="col-12 col-lg-5 col-xl-4 d-flex align-items-center p-4 p-sm-5 bg-white">
+    <div className="col-12 col-lg-5 col-xl-4 d-flex align-items-center p-4 p-sm-5 ">
       <div className="w-100" style={{ maxWidth: 420, margin: "0 auto" }}>
         <h4 className="mb-2">Welcome to PMS!</h4>
         <p className="mb-4">
@@ -105,7 +99,10 @@ const LoginPage = () => {
               autoFocus
             />
             {errors.username && (
-              <div className="invalid-feedback text-start" style={{ fontSize: "12px" }}>
+              <div
+                className="invalid-feedback text-start"
+                style={{ fontSize: "12px" }}
+              >
                 {errors.username.message}
               </div>
             )}
@@ -122,7 +119,9 @@ const LoginPage = () => {
                   <input
                     type={hidepass ? "password" : "text"}
                     id="password"
-                    className={`form-control ${errors.password ? "is-invalid" : ""}`}
+                    className={`form-control ${
+                      errors.password ? "is-invalid" : ""
+                    }`}
                     placeholder="••••••••"
                     {...register("password")}
                   />
@@ -134,7 +133,10 @@ const LoginPage = () => {
                   </span>
                 </div>
                 {errors.password && (
-                  <div className="invalid-feedback text-start" style={{ fontSize: "12px" }}>
+                  <div
+                    className="invalid-feedback text-start"
+                    style={{ fontSize: "12px" }}
+                  >
                     {errors.password.message}
                   </div>
                 )}
@@ -153,7 +155,10 @@ const LoginPage = () => {
                     Remember Me
                   </label>
                 </div>
-                <Link to="/auth/forgot-password" className="text-decoration-none">
+                <Link
+                  to="/auth/forgot-password"
+                  className="text-decoration-none"
+                >
                   Forgot Password?
                 </Link>
               </div>
@@ -169,8 +174,8 @@ const LoginPage = () => {
             {loading
               ? "Please Wait..."
               : IsLoginWithOTP
-                ? "Send OTP"
+              ? "Send OTP"
-                : "Sign In"}
+              : "Sign In"}
           </button>
 
           {/* Login With OTP Button */}
@@ -209,7 +214,6 @@ const LoginPage = () => {
             </button>
           </div>
         )}
-
       </div>
     </div>
   );