Compare commits
3 Commits
849709ad05
...
47d0e332f1
| Author | SHA1 | Date | |
|---|---|---|---|
| 47d0e332f1 | |||
| 2642532b60 | |||
| 6ca6ec31f7 |
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 |
@ -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-bottom: 2.3rem;
|
||||
border-top-left-radius: 3.75rem;
|
||||
border-top-right-radius: 3.75rem;
|
||||
padding-top: 1.3rem;
|
||||
padding-bottom: 1.3rem;
|
||||
border-top-left-radius: 1.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;
|
||||
|
||||
@ -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">
|
||||
Team
|
||||
<a className="nav-link fw-medium" href="#landingPricing">
|
||||
Pricing
|
||||
</a>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
@ -87,11 +92,7 @@ const LandingPage = () => {
|
||||
</a>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<a
|
||||
className="nav-link fw-medium"
|
||||
href="../vertical-menu-template/index.html"
|
||||
target="_blank"
|
||||
>
|
||||
<a className="nav-link fw-medium" href="#landingReviews">
|
||||
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
|
||||
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={[EffectFlip, 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>
|
||||
<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>
|
||||
<SwiperSlide>
|
||||
<SwaperSlideContent
|
||||
ImageUrl="./../../public/img/front-pages/landing-page/dashboard-light-01.png"
|
||||
Title="Project & Task Management"
|
||||
Body="Plan, assign, and track projects and tasks seamlessly for better team collaboration."
|
||||
></SwaperSlideContent>
|
||||
</SwiperSlide>
|
||||
|
||||
{/* <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>
|
||||
<SwiperSlide>
|
||||
<SwaperSlideContent
|
||||
ImageUrl="./../../public/img/front-pages/landing-page/dashboard-light-02.png"
|
||||
Title="Attendance & Leave Tracking"
|
||||
Body="Monitor employee attendance and manage leave requests with ease."
|
||||
></SwaperSlideContent>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<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
|
||||
<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">
|
||||
<div className="container">
|
||||
{/* <!-- Real customers reviews: Start --> */}
|
||||
<section
|
||||
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">
|
||||
Supported
|
||||
<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 className="position-relative fw-extrabold z-1 me-2">
|
||||
Proven results, showcased
|
||||
</span>
|
||||
by Real People
|
||||
through client success stories
|
||||
</h4>
|
||||
<p className="text-center mb-md-11 pb-0 pb-xl-12">
|
||||
Who is behind these great-looking interfaces?
|
||||
<p className="text-center pb-2 mb-7">
|
||||
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 className="card mt-3 mt-lg-0 shadow-none">
|
||||
<div className="bg-label-primary border border-bottom-0 border-label-primary position-relative team-image-box">
|
||||
<img
|
||||
src="./../../public/img/front-pages/landing-page/team-member-1.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-primary text-center py-5">
|
||||
<h5 className="card-title mb-0">Sophie Gilbert</h5>
|
||||
<p className="text-muted mb-0">Project Manager</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-3 col-sm-6">
|
||||
<div className="card mt-3 mt-lg-0 shadow-none">
|
||||
<div className="bg-label-info border border-bottom-0 border-label-info position-relative team-image-box">
|
||||
<img
|
||||
src="./../../public/img/front-pages/landing-page/team-member-2.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-info text-center py-5">
|
||||
<h5 className="card-title mb-0">Paul Miles</h5>
|
||||
<p className="text-muted mb-0">UI Designer</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-3 col-sm-6">
|
||||
<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">
|
||||
<img
|
||||
src="./../../public/img/front-pages/landing-page/team-member-3.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-danger text-center py-5">
|
||||
<h5 className="card-title mb-0">Nannie Ford</h5>
|
||||
<p className="text-muted mb-0">Development Lead</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-3 col-sm-6">
|
||||
<div className="card mt-3 mt-lg-0 shadow-none">
|
||||
<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 class="row">
|
||||
<div class="swiper-reviews-carousel">
|
||||
<Swiper
|
||||
onSwiper={setSwiperRef}
|
||||
slidesPerView={4}
|
||||
centeredSlides={true}
|
||||
spaceBetween={30}
|
||||
pagination={{
|
||||
type: "fraction",
|
||||
}}
|
||||
navigation={true}
|
||||
modules={[Autoplay, Pagination, Navigation]}
|
||||
className="mySwiper"
|
||||
>
|
||||
<SwiperSlide>
|
||||
{" "}
|
||||
<SwaperBlogContent
|
||||
ImageUrl="./../../img/front-pages/branding/logo-1.png"
|
||||
Title="Project & Task Management"
|
||||
Body="Plan, assign, and track projects and tasks seamlessly for better team collaboration."
|
||||
></SwaperBlogContent>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
{" "}
|
||||
<SwaperBlogContent
|
||||
ImageUrl="./../../img/front-pages/branding/logo-1.png"
|
||||
Title="Project & Task Management"
|
||||
Body="Plan, assign, and track projects and tasks seamlessly for better team collaboration."
|
||||
></SwaperBlogContent>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
{" "}
|
||||
<SwaperBlogContent
|
||||
ImageUrl="./../../img/front-pages/branding/logo-1.png"
|
||||
Title="Project & Task Management"
|
||||
Body="Plan, assign, and track projects and tasks seamlessly for better team collaboration."
|
||||
></SwaperBlogContent>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
{" "}
|
||||
<SwaperBlogContent
|
||||
ImageUrl="./../../img/front-pages/branding/logo-1.png"
|
||||
Title="Project & Task Management"
|
||||
Body="Plan, assign, and track projects and tasks seamlessly for better team collaboration."
|
||||
></SwaperBlogContent>
|
||||
</SwiperSlide>
|
||||
</Swiper>
|
||||
</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
|
||||
product.
|
||||
<br />
|
||||
Choose the best plan to fit your needs.
|
||||
No matter which plan you choose, you’ll get access to powerful
|
||||
features. <strong>Choose the best plan to fit your needs.</strong>
|
||||
</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>
|
||||
<div className="pricing-plans-item position-absolute d-flex">
|
||||
</label> */}
|
||||
{/* <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
|
||||
id="landingCTA"
|
||||
className="section-py landing-cta position-relative p-lg-0 pb-0"
|
||||
>
|
||||
<section id="landingCTA" className="section-py landing-cta ">
|
||||
<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="col-lg-5">
|
||||
<a href="#" className="app-brand-link mb-6">
|
||||
<div className="row ">
|
||||
<div className="col-lg-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">
|
||||
Most developer friendly & highly customisable Admin Dashboard
|
||||
Template.
|
||||
<p className="footer-text footer-logo-description" hidden>
|
||||
Work smarter, track faster, and manage everything from one
|
||||
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">
|
||||
<h6 className="footer-title mb-6">Pages</h6>
|
||||
<ul className="list-unstyled">
|
||||
<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">
|
||||
|
||||
<div className="col-lg-6 col-md-6 d-flex gap-3 align-items-center justify-content-end">
|
||||
<h6 className="footer-title">Download our app</h6>
|
||||
<a href="javascript:void(0);">
|
||||
<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"
|
||||
|
||||
49
src/pages/Home/SwaperBlogContent.jsx
Normal file
49
src/pages/Home/SwaperBlogContent.jsx
Normal file
@ -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;
|
||||
59
src/pages/Home/SwaperSlideContent.jsx
Normal file
59
src/pages/Home/SwaperSlideContent.jsx
Normal file
@ -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;
|
||||
@ -50,7 +50,7 @@ const router = createBrowserRouter(
|
||||
[
|
||||
{
|
||||
path: "/",
|
||||
element: <RootRedirect />,
|
||||
element: <LandingPage />,
|
||||
},
|
||||
{
|
||||
element: <AuthLayout />,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user