diff --git a/package-lock.json b/package-lock.json index 39e9a3b4..bcc14487 100644 --- a/package-lock.json +++ b/package-lock.json @@ -36,6 +36,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" }, @@ -5536,6 +5537,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", diff --git a/package.json b/package.json index 3f4d52fe..b921a4b1 100644 --- a/package.json +++ b/package.json @@ -39,6 +39,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" }, diff --git a/public/img/front-pages/landing-page/hero-dashboard-light.png b/public/img/front-pages/landing-page/dashboard-light-01.png similarity index 100% rename from public/img/front-pages/landing-page/hero-dashboard-light.png rename to public/img/front-pages/landing-page/dashboard-light-01.png diff --git a/public/img/front-pages/landing-page/dashboard-light-02.png b/public/img/front-pages/landing-page/dashboard-light-02.png new file mode 100644 index 00000000..ede59aed Binary files /dev/null and b/public/img/front-pages/landing-page/dashboard-light-02.png differ diff --git a/public/img/front-pages/landing-page/dashboard-light-03.png b/public/img/front-pages/landing-page/dashboard-light-03.png new file mode 100644 index 00000000..1e45e519 Binary files /dev/null and b/public/img/front-pages/landing-page/dashboard-light-03.png differ diff --git a/public/img/front-pages/landing-page/dashboard-light-04.png b/public/img/front-pages/landing-page/dashboard-light-04.png new file mode 100644 index 00000000..998d30ea Binary files /dev/null and b/public/img/front-pages/landing-page/dashboard-light-04.png differ diff --git a/public/img/front-pages/landing-page/dashboard-light-05.png b/public/img/front-pages/landing-page/dashboard-light-05.png new file mode 100644 index 00000000..c7e6f5ac Binary files /dev/null and b/public/img/front-pages/landing-page/dashboard-light-05.png differ diff --git a/public/img/front-pages/landing-page/dashboard-light-06.png b/public/img/front-pages/landing-page/dashboard-light-06.png new file mode 100644 index 00000000..386d7289 Binary files /dev/null and b/public/img/front-pages/landing-page/dashboard-light-06.png differ diff --git a/public/img/front-pages/landing-page/dashboard-light-07.png b/public/img/front-pages/landing-page/dashboard-light-07.png new file mode 100644 index 00000000..b358f986 Binary files /dev/null and b/public/img/front-pages/landing-page/dashboard-light-07.png differ diff --git a/public/img/front-pages/landing-page/dashboard-light-08.png b/public/img/front-pages/landing-page/dashboard-light-08.png new file mode 100644 index 00000000..2ae124a9 Binary files /dev/null and b/public/img/front-pages/landing-page/dashboard-light-08.png differ diff --git a/src/pages/Home/LandingPage.css b/src/pages/Home/LandingPage.css index c251bfda..28817a59 100644 --- a/src/pages/Home/LandingPage.css +++ b/src/pages/Home/LandingPage.css @@ -51,20 +51,32 @@ } nav.layout-navbar { - backdrop-filter: unset !important; - height: auto !important; - z-index: 999 !important; + backdrop-filter: unset; background-color: transparent !important; } -nav.layout-navbar::after { - content: ""; + +nav.layout-navbar::before { position: absolute; display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; + block-size: 100%; + content: ""; + inline-size: 100%; + 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; +} diff --git a/src/pages/Home/LandingPage.jsx b/src/pages/Home/LandingPage.jsx index 8ace0c16..c29e2373 100644 --- a/src/pages/Home/LandingPage.jsx +++ b/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 (
@@ -22,7 +30,7 @@ const LandingPage = () => { {/* Mobile menu toggle: End*/} - + { Home
  • - + Features
  • - + Team
  • - + FAQ
    • @@ -97,10 +96,7 @@ const LandingPage = () => {
  • - + Contact us
    • @@ -132,12 +128,6 @@ const LandingPage = () => { id="landingHero" className="section-py landing-hero position-relative" > - hero background

    @@ -149,20 +139,32 @@ const LandingPage = () => { for Reliability and Customizability.

    - + {/* Join community Join community arrow - - + */} + Get early access + + Request a Demo +
    - @@ -395,7 +484,7 @@ const LandingPage = () => { Pricing Plans

    - + Tailored pricing plans {

    {/* Basic Plan: Start */} -
    +
    @@ -469,7 +558,7 @@ const LandingPage = () => {
    -
      +
      • @@ -541,7 +630,7 @@ const LandingPage = () => { {/* Basic Plan: End */} {/* Favourite Plan: Start */} -
        +
        @@ -568,7 +657,7 @@ const LandingPage = () => {
        -
          +
          • @@ -637,7 +726,7 @@ const LandingPage = () => { {/* Favourite Plan: End */} {/* Standard Plan: Start */} -
            +
            @@ -664,7 +753,7 @@ const LandingPage = () => {
            -
              +
              • @@ -740,7 +829,11 @@ const LandingPage = () => { {/* Pricing plans: End */} {/* Fun facts: Start */} -
                +
                @@ -1014,24 +1107,94 @@ const LandingPage = () => { data-app-dark-img="front-pages/backgrounds/cta-bg-dark.png" />
                -
                +
                + Contact US +
                + +
                -

                - Ready to Get Started? -

                -
                - Start your project with a 14-day free trial -
                - - Get Started - +
                + {" "} +

                + + Let's work + laptop charging + + together +

                +

                + Any question or remark? just write us a message +

                +
                +
                +
                +
                + +
                + +
                +
                +
                +
                +
                + +
                +
                +

                Phone

                +
                + + +1234 568 963 + +
                +
                +
                +
                +
                +
                +
                +

                + Ready to Get Started? +

                +
                + Start your project with a 14-day free trial +
                + + Get Started + {" "} + + Request a Demo + +
                cta dashboard + style={{ width: "80%" }} + src="./../../public/img/front-pages/landing-page/contact-customer-service.png" + alt="hero elements" + >
                @@ -1042,6 +1205,7 @@ const LandingPage = () => {
                @@ -1200,7 +1364,7 @@ const LandingPage = () => {
                - + { - Marco PMS + + +

                @@ -1336,13 +1514,14 @@ const LandingPage = () => {

              • - + Login/Register + + {/* - Login/Register - + >*/}
            diff --git a/src/pages/authentication/LoginPage.jsx b/src/pages/authentication/LoginPage.jsx index a2b46a39..c364b756 100644 --- a/src/pages/authentication/LoginPage.jsx +++ b/src/pages/authentication/LoginPage.jsx @@ -16,13 +16,13 @@ const LoginPage = () => { const loginSchema = IsLoginWithOTP ? z.object({ - username: z.string().email({ message: "Valid email required" }), - }) + username: z.string().email({ message: "Valid email required" }), + }) : z.object({ - username: z.string().email({ message: "Valid email required" }), - password: z.string().min(1, { message: "Password required" }), - rememberMe: z.boolean(), - }); + username: z.string().email({ message: "Valid email required" }), + password: z.string().min(1, { message: "Password required" }), + rememberMe: z.boolean(), + }); const { register, @@ -70,7 +70,7 @@ const LoginPage = () => { }, [IsLoginWithOTP]); return ( -
            +

            Welcome to PMS!

            @@ -94,7 +94,10 @@ const LoginPage = () => { autoFocus /> {errors.username && ( -

            +
            {errors.username.message}
            )} @@ -111,7 +114,9 @@ const LoginPage = () => { @@ -123,7 +128,10 @@ const LoginPage = () => {
            {errors.password && ( -
            +
            {errors.password.message}
            )} @@ -142,7 +150,10 @@ const LoginPage = () => { Remember Me
            - + Forgot Password?
            @@ -158,8 +169,8 @@ const LoginPage = () => { {loading ? "Please Wait..." : IsLoginWithOTP - ? "Send OTP" - : "Sign In"} + ? "Send OTP" + : "Sign In"} {/* Login With OTP Button */} @@ -198,10 +209,9 @@ const LoginPage = () => {
            )} -
            ); }; -export default LoginPage; \ No newline at end of file +export default LoginPage;