handle UI to look sliker and add missing images
This commit is contained in:
parent
b86bf204a9
commit
717d215d8e
BIN
public/img/brand/ofw-500x500.png
Normal file
BIN
public/img/brand/ofw-500x500.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 127 KiB |
BIN
public/img/icons/ai.png
Normal file
BIN
public/img/icons/ai.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
BIN
public/img/icons/apple-icon-lite.png
Normal file
BIN
public/img/icons/apple-icon-lite.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
BIN
public/img/icons/attendance.png
Normal file
BIN
public/img/icons/attendance.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
BIN
public/img/icons/cloud-service.png
Normal file
BIN
public/img/icons/cloud-service.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
public/img/icons/dashboard.png
Normal file
BIN
public/img/icons/dashboard.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
BIN
public/img/icons/directory.png
Normal file
BIN
public/img/icons/directory.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
public/img/icons/document.png
Normal file
BIN
public/img/icons/document.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
BIN
public/img/icons/google-play-icon-lite.png
Normal file
BIN
public/img/icons/google-play-icon-lite.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
BIN
public/img/icons/profile.png
Normal file
BIN
public/img/icons/profile.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
public/img/icons/report.png
Normal file
BIN
public/img/icons/report.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
public/img/icons/spending.png
Normal file
BIN
public/img/icons/spending.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
public/img/illustrations/contact-us.png
Normal file
BIN
public/img/illustrations/contact-us.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 94 KiB |
24
src/pages/Home/FeatureCard.jsx
Normal file
24
src/pages/Home/FeatureCard.jsx
Normal file
@ -0,0 +1,24 @@
|
||||
const FeatureCard = ({ imagesrc, title, description }) => {
|
||||
return (
|
||||
<>
|
||||
<div className="col-md-3 px-4">
|
||||
<div className="row g-4">
|
||||
<div className="card-slider p-4 bg-light rounded-4 h-100 text-start border">
|
||||
<div className="feature-icon mb-3 d-flex align-items-center justify-content-middle">
|
||||
<img
|
||||
src={imagesrc}
|
||||
alt={title}
|
||||
className="w-14 mb-4 feature-icon-image"
|
||||
/>
|
||||
<span class="ms-5">
|
||||
<h5>{title}</h5>
|
||||
</span>
|
||||
</div>
|
||||
<p>{description}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default FeatureCard;
|
||||
@ -235,3 +235,35 @@ body {
|
||||
margin-top: 15px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.btn-green {
|
||||
background-color: #49bf3c;
|
||||
color: #fff;
|
||||
|
||||
border-radius: 50px;
|
||||
padding: 10px 30px;
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.btn-green:hover {
|
||||
background-color: #2d8822;
|
||||
color: #fff;
|
||||
}
|
||||
.btn-ovel-small {
|
||||
padding-bottom: 5.072px;
|
||||
padding-inline-end: 12px;
|
||||
padding-inline-start: 12px;
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
padding-top: 5.072px;
|
||||
}
|
||||
.btn-square-small {
|
||||
border-radius: 3px;
|
||||
padding-bottom: 5.072px;
|
||||
padding-inline-end: 12px;
|
||||
padding-inline-start: 12px;
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
padding-top: 5.072px;
|
||||
}
|
||||
|
||||
@ -6,11 +6,12 @@ import DashboardImage from "/img/hero/bg-01.jpg";
|
||||
import { Swiper, SwiperSlide } from "swiper/react";
|
||||
import { EffectFlip, Autoplay, Pagination, Navigation } from "swiper/modules";
|
||||
import SwaperSlideImages from "./SwaperSlideImages";
|
||||
import FeatureCard from "./FEatureCard";
|
||||
|
||||
const LandingPage = () => {
|
||||
return (
|
||||
<>
|
||||
<nav className="navbar navbar-expand-lg navbar-light bg-white shadow-sm fixed-top custom-navbar">
|
||||
<nav className="navbar navbar-expand-lg navbar-light bg-white shadow-sm fixed-top custom-navbar py-1">
|
||||
<div className="container-fluid px-5 w-100">
|
||||
<div className="row w-100">
|
||||
<div className="col-md-auto d-flex justify-content-between align-items-center">
|
||||
@ -41,7 +42,7 @@ const LandingPage = () => {
|
||||
className="collapse navbar-collapse justify-content-end col-md-auto "
|
||||
id="navbarNav"
|
||||
>
|
||||
<ul className="navbar-nav">
|
||||
<ul className="navbar-nav my-0">
|
||||
<li className="nav-item">
|
||||
<a className="nav-link" href="#">
|
||||
Home
|
||||
@ -73,21 +74,21 @@ const LandingPage = () => {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul className=" navbar-nav align-items-center ms-5">
|
||||
<ul className=" navbar-nav align-items-center ms-5 my-0">
|
||||
<li className="nav-item">
|
||||
<a
|
||||
className="btn btn-green btn-square-small btn-sm px-3 my-1 "
|
||||
className="btn btn-green btn-ovel-small btn-sm px-3 my-1 "
|
||||
href="/auth/login"
|
||||
>
|
||||
Login
|
||||
</a>
|
||||
</li>
|
||||
<li className="nav-item ms-2">
|
||||
<li className="nav-item ms-1">
|
||||
<a
|
||||
className="btn btn-sm btn-green btn-square-small px-3 my-1"
|
||||
className="btn btn-sm btn-green btn-ovel-small px-3 my-1"
|
||||
href="#"
|
||||
>
|
||||
Get Started
|
||||
Request For Demo
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
@ -188,104 +189,96 @@ const LandingPage = () => {
|
||||
<div className="container text-center">
|
||||
<h3 className="mb-5">Powerful Features for Every Role</h3>
|
||||
<div className="row g-4">
|
||||
<div className="col-md-4">
|
||||
<div className="card-slider p-4 bg-light rounded-4 h-100 text-start border">
|
||||
<div className="feature-icon mb-3">
|
||||
<img
|
||||
src="/img/icons/dashboard.png"
|
||||
alt="Dashboard"
|
||||
className="w-14 mb-4 feature-icon-image"
|
||||
/>
|
||||
</div>
|
||||
<h5>Analytical Dashboard</h5>
|
||||
<p>
|
||||
Real-time insights on attendance, expenses, tasks, and project
|
||||
progress in one view.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
<div className="card-slider p-4 bg-light rounded-4 h-100 text-start border">
|
||||
<div className="feature-icon mb-3">
|
||||
<img
|
||||
src="/img/icons/attendance.png"
|
||||
alt="Smart Attendance"
|
||||
className="w-14 mb-4 feature-icon-image"
|
||||
/>
|
||||
</div>
|
||||
<h5>Smart Attendance</h5>
|
||||
<p>
|
||||
Site managers mark attendance with employee photos and
|
||||
location verification.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<FeatureCard
|
||||
imagesrc={"/img/icons/dashboard.png"}
|
||||
title={"Analytical Dashboard"}
|
||||
description={
|
||||
"Real-time insights on attendance, expenses, tasks, and project progress in one view."
|
||||
}
|
||||
></FeatureCard>
|
||||
<FeatureCard
|
||||
imagesrc={"/img/icons/attendance.png"}
|
||||
title={"Smart Attendance"}
|
||||
description={
|
||||
" Site managers mark attendance with employee photos and location verification."
|
||||
}
|
||||
></FeatureCard>
|
||||
<FeatureCard
|
||||
imagesrc={"/img/icons/spending.png"}
|
||||
title={"Expense & Budget Tracking"}
|
||||
description={
|
||||
"Track daily operations, procurement, and travel expenses with approval workflows."
|
||||
}
|
||||
></FeatureCard>
|
||||
|
||||
<div className="col-md-4">
|
||||
<div className="card-slider p-4 bg-light rounded-4 h-100 text-start border">
|
||||
<div className="feature-icon mb-3">
|
||||
<img
|
||||
src="/img/icons/spending.png"
|
||||
alt="Expense & Budget Tracking"
|
||||
className="w-14 mb-4 feature-icon-image"
|
||||
/>
|
||||
</div>
|
||||
<h5>Expense & Budget Tracking</h5>
|
||||
<p>
|
||||
Track daily operations, procurement, and travel expenses with
|
||||
approval workflows.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
<div className="card-slider p-4 bg-light rounded-4 h-100 text-start border">
|
||||
<div className="feature-icon mb-3">
|
||||
<img
|
||||
src="/img/icons/directory.png"
|
||||
alt="Cloud Scalability"
|
||||
className="w-14 mb-4 feature-icon-image"
|
||||
/>
|
||||
</div>
|
||||
<h5>Directory</h5>
|
||||
<p>
|
||||
Your team, suppliers, vendors organized and connected in one
|
||||
unified directory.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
<div className="card-slider p-4 bg-light rounded-4 h-100 text-start border">
|
||||
<div className="feature-icon mb-3">
|
||||
<img
|
||||
src="/img/icons/report.png"
|
||||
alt="Advanced Reporting"
|
||||
className="w-14 mb-4 feature-icon-image"
|
||||
/>
|
||||
</div>
|
||||
<h5>Advanced Reporting</h5>
|
||||
<p>
|
||||
Get performance insights with role-based dashboards and
|
||||
category-wise analytics.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<FeatureCard
|
||||
imagesrc={"/img/icons/directory.png"}
|
||||
title={"Project & Task Management"}
|
||||
description={
|
||||
"Plan, assign, and track projects and tasks seamlessly for better team collaboration."
|
||||
}
|
||||
></FeatureCard>
|
||||
<FeatureCard
|
||||
imagesrc={"/img/icons/directory.png"}
|
||||
title={"Document Management"}
|
||||
description={
|
||||
" Organize, share, and access all your project and employee documents in one place."
|
||||
}
|
||||
></FeatureCard>
|
||||
|
||||
<div className="col-md-4">
|
||||
<div className="card-slider p-4 bg-light rounded-4 h-100 text-start border">
|
||||
<div className="feature-icon mb-3">
|
||||
<img
|
||||
src="/img/icons/cloud-service.png"
|
||||
alt="Cloud Scalability"
|
||||
className="w-14 mb-4 feature-icon-image"
|
||||
/>
|
||||
</div>
|
||||
<h5>Cloud Scalability</h5>
|
||||
<p>
|
||||
Built on secure cloud infrastructure for seamless scaling and
|
||||
24/7 availability.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<FeatureCard
|
||||
imagesrc={"/img/icons/directory.png"}
|
||||
title={"Service Provider & Subcontractor Tracking"}
|
||||
description={
|
||||
"Manage multiple service providers and subcontractors efficiently within projects."
|
||||
}
|
||||
></FeatureCard>
|
||||
<FeatureCard
|
||||
imagesrc={"/img/icons/directory.png"}
|
||||
title={"Inventory Management"}
|
||||
description={
|
||||
"Track materials, supplies, and assets — never run short again."
|
||||
}
|
||||
></FeatureCard>
|
||||
|
||||
<FeatureCard
|
||||
imagesrc={"/img/icons/directory.png"}
|
||||
title={"Directory"}
|
||||
description={
|
||||
" Your team, suppliers, vendors organized and connected in one unified directory."
|
||||
}
|
||||
></FeatureCard>
|
||||
|
||||
<FeatureCard
|
||||
imagesrc={"/img/icons/directory.png"}
|
||||
title={"Image Gallary"}
|
||||
description={
|
||||
"Your team, suppliers, vendors organized and connected in one unified directory."
|
||||
}
|
||||
></FeatureCard>
|
||||
|
||||
<FeatureCard
|
||||
imagesrc={"/img/icons/report.png"}
|
||||
title={"Role-based Permissions"}
|
||||
description={
|
||||
"Securely control access with customizable roles and permissions."
|
||||
}
|
||||
></FeatureCard>
|
||||
<FeatureCard
|
||||
imagesrc={"/img/icons/report.png"}
|
||||
title={"Advanced Reporting"}
|
||||
description={
|
||||
"Get performance insights with role-based dashboards and category-wise analytics."
|
||||
}
|
||||
></FeatureCard>
|
||||
|
||||
<FeatureCard
|
||||
imagesrc={"/img/icons/cloud-service.png"}
|
||||
title={"Cloud Scalability"}
|
||||
description={
|
||||
" Built on secure cloud infrastructure for seamless scaling and 24/7 availability."
|
||||
}
|
||||
></FeatureCard>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@ -727,9 +720,36 @@ const LandingPage = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-5 pt-5">
|
||||
<a href="#" className="btn-green">
|
||||
Know More
|
||||
<h6 className="footer-title mt-3">Download our app</h6>
|
||||
<a href="javascript:void(0);" hidden>
|
||||
<img src="/img/icons/apple-icon.png" alt="apple icon" />
|
||||
</a>
|
||||
<a
|
||||
href="https://play.google.com/store/apps/details?id=com.marcoonfieldwork.aiot&pcampaignid=web_share "
|
||||
target="_blank"
|
||||
>
|
||||
<img
|
||||
src="/img/icons/google-play-icon-lite.png"
|
||||
alt="google play icon"
|
||||
style={{ width: "200px" }}
|
||||
/>
|
||||
</a>{" "}
|
||||
<a
|
||||
href="https://play.google.com/store/apps/details?id=com.marcoonfieldwork.aiot&pcampaignid=web_share "
|
||||
target="_blank"
|
||||
>
|
||||
<img
|
||||
src="/img/icons/apple-icon-lite.png"
|
||||
alt="apple app store icon"
|
||||
style={{ width: "200px" }}
|
||||
/>
|
||||
</a>{" "}
|
||||
</div>
|
||||
<div className="mt-5 pt-5">
|
||||
<a href="mailto:sales@marcoaiot.com" className="btn-green">
|
||||
Contact Support
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user