landing page modifications
This commit is contained in:
parent
8dc064340b
commit
15581f3f26
1
public/img/front-pages/icons/inventory.svg
Normal file
1
public/img/front-pages/icons/inventory.svg
Normal file
@ -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>
|
||||
|
After Width: | Height: | Size: 500 B |
@ -8,6 +8,7 @@ import { Autoplay, Pagination, Navigation } from "swiper/modules";
|
||||
// Import Swiper styles
|
||||
import "swiper/css";
|
||||
import "swiper/css/navigation";
|
||||
import SwaperSlideContent from "./SwaperSlideContent";
|
||||
|
||||
const LandingPage = () => {
|
||||
return (
|
||||
@ -77,8 +78,8 @@ const LandingPage = () => {
|
||||
</a>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<a className="nav-link fw-medium" href="#landingTeam">
|
||||
Team
|
||||
<a className="nav-link fw-medium" href="#landingPricing">
|
||||
Pricing
|
||||
</a>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
@ -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"
|
||||
@ -165,44 +167,38 @@ const LandingPage = () => {
|
||||
id="heroDashboardAnimation"
|
||||
className="hero-animation-img mt-10"
|
||||
>
|
||||
<a
|
||||
href="../vertical-menu-template/app-ecommerce-dashboard.html"
|
||||
target="_blank"
|
||||
<div
|
||||
id="heroAnimationImg"
|
||||
className="position-relative hero-dashboard-img"
|
||||
>
|
||||
<div
|
||||
id="heroAnimationImg"
|
||||
className="position-relative hero-dashboard-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)}
|
||||
>
|
||||
<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>
|
||||
<SwiperSlide>
|
||||
<SwaperSlideContent></SwaperSlideContent>
|
||||
</SwiperSlide>
|
||||
|
||||
<SwiperSlide>
|
||||
<SwaperSlideContent></SwaperSlideContent>
|
||||
</SwiperSlide>
|
||||
{/* <SwiperSlide>
|
||||
<img
|
||||
src="./../../public/img/front-pages/landing-page/dashboard-light-02.png"
|
||||
alt="hero dashboard"
|
||||
@ -210,8 +206,8 @@ const LandingPage = () => {
|
||||
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>
|
||||
</SwiperSlide> */}
|
||||
{/* <SwiperSlide>
|
||||
<img
|
||||
src="./../../public/img/front-pages/landing-page/dashboard-light-03.png"
|
||||
alt="hero dashboard"
|
||||
@ -264,18 +260,17 @@ const LandingPage = () => {
|
||||
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>
|
||||
</SwiperSlide> */}
|
||||
</Swiper>
|
||||
|
||||
{/* <img
|
||||
{/* <img
|
||||
src="./../../public/img/front-pages/landing-page/hero-elements-light.png"
|
||||
alt="hero elements"
|
||||
className="position-absolute hero-elements-img animation-img top-0 start-0"
|
||||
data-app-light-img="front-pages/landing-page/hero-elements-light.png"
|
||||
data-app-dark-img="front-pages/landing-page/hero-elements-dark.png"
|
||||
/> */}
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -291,105 +286,145 @@ const LandingPage = () => {
|
||||
</div>
|
||||
<h4 className="text-center mb-1">
|
||||
<span className="position-relative fw-extrabold z-1">
|
||||
Everything you need
|
||||
<img
|
||||
From tasks to teams, documents to inventory —
|
||||
{/* <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
|
||||
conceptual application.
|
||||
All-in-one platform to manage projects, people, and resources
|
||||
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
|
||||
fall in love with.
|
||||
Plan, assign, and track projects and tasks seamlessly for
|
||||
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
|
||||
features.
|
||||
Monitor employee attendance and manage leave requests with
|
||||
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
|
||||
unnecessary features.
|
||||
Securely control access with customizable roles and
|
||||
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
|
||||
seconds.
|
||||
Keep projects on budget with real-time expense and cost
|
||||
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
|
||||
examples.
|
||||
Gain actionable insights through powerful reports and
|
||||
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
|
||||
examples.
|
||||
Organize, share, and access all your project and employee
|
||||
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 */}
|
||||
<section id="landingTeam" className="section-py landing-team">
|
||||
<section id="landingTeam" className="section-py landing-team" hidden>
|
||||
<div className="container">
|
||||
<div className="text-center mb-4">
|
||||
<span className="badge bg-label-primary">Our Great Team</span>
|
||||
@ -952,7 +987,7 @@ const LandingPage = () => {
|
||||
aria-expanded="true"
|
||||
aria-controls="accordionOne"
|
||||
>
|
||||
Do you charge for each upgrade?
|
||||
What is MarcoPMS?
|
||||
</button>
|
||||
</h2>
|
||||
|
||||
@ -980,7 +1015,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 +1043,7 @@ const LandingPage = () => {
|
||||
aria-expanded="false"
|
||||
aria-controls="accordionThree"
|
||||
>
|
||||
What is regular license?
|
||||
How secure is Marco PMS?
|
||||
</button>
|
||||
</h2>
|
||||
<div
|
||||
@ -1041,7 +1076,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
|
||||
|
||||
39
src/pages/Home/SwaperSlideContent.jsx
Normal file
39
src/pages/Home/SwaperSlideContent.jsx
Normal file
@ -0,0 +1,39 @@
|
||||
const SwaperSlideContent = () => {
|
||||
return (
|
||||
<div className="container-fluid p-0">
|
||||
<div
|
||||
className="position-relative text-center text-white"
|
||||
style={{
|
||||
background:
|
||||
"url('./../../public/img/front-pages/landing-page/dashboard-light-01.png') 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.7), rgba(0,0,0,0.1))",
|
||||
}}
|
||||
></div>
|
||||
|
||||
{/* Text Content */}
|
||||
<div className="position-absolute top-50 start-50 translate-middle text-end">
|
||||
<h1 className="fw-bold">Manage Projects. Empower Teams.</h1>
|
||||
<p className="lead">
|
||||
All-in-one PMS solution for projects, people, and resources.
|
||||
</p>
|
||||
{/* <a
|
||||
href="#services"
|
||||
className="btn btn-primary btn-lg mt-3"
|
||||
>
|
||||
Get Started
|
||||
</a> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SwaperSlideContent;
|
||||
@ -53,7 +53,7 @@ const router = createBrowserRouter(
|
||||
[
|
||||
{
|
||||
path: "/",
|
||||
element: <RootRedirect />,
|
||||
element: <LandingPage />,
|
||||
},
|
||||
{
|
||||
element: <AuthLayout />,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user