implement landing page UI
This commit is contained in:
parent
ee2c973d01
commit
a602bebc5e
19
package-lock.json
generated
19
package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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"
|
||||
},
|
||||
|
||||
|
Before Width: | Height: | Size: 96 KiB After Width: | Height: | Size: 96 KiB |
BIN
public/img/front-pages/landing-page/dashboard-light-02.png
Normal file
BIN
public/img/front-pages/landing-page/dashboard-light-02.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 222 KiB |
BIN
public/img/front-pages/landing-page/dashboard-light-03.png
Normal file
BIN
public/img/front-pages/landing-page/dashboard-light-03.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 308 KiB |
BIN
public/img/front-pages/landing-page/dashboard-light-04.png
Normal file
BIN
public/img/front-pages/landing-page/dashboard-light-04.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 165 KiB |
BIN
public/img/front-pages/landing-page/dashboard-light-05.png
Normal file
BIN
public/img/front-pages/landing-page/dashboard-light-05.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 217 KiB |
BIN
public/img/front-pages/landing-page/dashboard-light-06.png
Normal file
BIN
public/img/front-pages/landing-page/dashboard-light-06.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 278 KiB |
BIN
public/img/front-pages/landing-page/dashboard-light-07.png
Normal file
BIN
public/img/front-pages/landing-page/dashboard-light-07.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 202 KiB |
BIN
public/img/front-pages/landing-page/dashboard-light-08.png
Normal file
BIN
public/img/front-pages/landing-page/dashboard-light-08.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 166 KiB |
@ -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;
|
||||
}
|
||||
|
||||
@ -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
|
||||
className="nav-link fw-medium"
|
||||
href="landing-page.html#landingFeatures"
|
||||
>
|
||||
<a className="nav-link fw-medium" href="#landingFeatures">
|
||||
Features
|
||||
</a>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<a
|
||||
className="nav-link fw-medium"
|
||||
href="landing-page.html#landingTeam"
|
||||
>
|
||||
<a className="nav-link fw-medium" href="#landingTeam">
|
||||
Team
|
||||
</a>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<a
|
||||
className="nav-link fw-medium"
|
||||
href="landing-page.html#landingFAQ"
|
||||
>
|
||||
<a className="nav-link fw-medium" href="#landingFAQ">
|
||||
FAQ
|
||||
</a>
|
||||
</li>
|
||||
@ -97,10 +96,7 @@ const LandingPage = () => {
|
||||
</a>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<a
|
||||
className="nav-link fw-medium"
|
||||
href="landing-page.html#landingContact"
|
||||
>
|
||||
<a className="nav-link fw-medium" href="#landingCTA">
|
||||
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>
|
||||
<a href="#landingPricing" className="btn btn-primary btn-lg">
|
||||
</span> */}
|
||||
<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
|
||||
src="./../../public/img/front-pages/landing-page/hero-dashboard-light.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"
|
||||
/>
|
||||
<img
|
||||
<Swiper
|
||||
spaceBetween={30}
|
||||
centeredSlides={true}
|
||||
rewind={true}
|
||||
autoplay={{
|
||||
delay: 3500,
|
||||
disableOnInteraction: false,
|
||||
}}
|
||||
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">
|
||||
Ready to Get Started?
|
||||
</h3>
|
||||
<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>
|
||||
<div className="mt-5">
|
||||
{" "}
|
||||
<h4 className="text-start mb-1">
|
||||
<span className="position-relative fw-extrabold z-1">
|
||||
Let's work
|
||||
<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>
|
||||
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"
|
||||
alt="cta dashboard"
|
||||
className="img-fluid mt-lg-4"
|
||||
/>
|
||||
style={{ width: "80%" }}
|
||||
src="./../../public/img/front-pages/landing-page/contact-customer-service.png"
|
||||
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"
|
||||
>
|
||||
Login/Register
|
||||
</a>
|
||||
></a>*/}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -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 (
|
||||
<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">
|
||||
@ -94,7 +94,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>
|
||||
)}
|
||||
@ -111,7 +114,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")}
|
||||
/>
|
||||
@ -123,7 +128,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>
|
||||
)}
|
||||
@ -142,7 +150,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>
|
||||
@ -158,8 +169,8 @@ const LoginPage = () => {
|
||||
{loading
|
||||
? "Please Wait..."
|
||||
: IsLoginWithOTP
|
||||
? "Send OTP"
|
||||
: "Sign In"}
|
||||
? "Send OTP"
|
||||
: "Sign In"}
|
||||
</button>
|
||||
|
||||
{/* Login With OTP Button */}
|
||||
@ -198,7 +209,6 @@ const LoginPage = () => {
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user