admin/marco.pms.web
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

handle animations

Browse Source
This commit is contained in:
Vikas Nale 2025-09-09 15:02:59 +05:30
parent 6ca6ec31f7
commit 2642532b60
3 changed files with 82 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/pages/Home/LandingPage.css
View File

@ -355,7 +355,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 +368,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,6 +629,7 @@ nav.layout-navbar.navbar-active::after {
.swiper {
width: 100%;
height: 100%;
border-radius: 10px;
}
.swiper-slide {

116
src/pages/Home/LandingPage.jsx
View File

@ -4,7 +4,7 @@ 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";
@ -163,6 +163,7 @@ const LandingPage = () => {
</a>
</div>
</div>
<div
id="heroDashboardAnimation"
className="hero-animation-img mt-10"
@ -186,81 +187,62 @@ const LandingPage = () => {
enabled: true,
}}
navigation={false}
modules={[Autoplay, Pagination, Navigation]}
modules={[EffectFlip, Autoplay, Pagination, Navigation]}
className="mySwiper"
onSlideChange={() => console.log("slide change")}
onSwiper={(swiper) => console.log(swiper)}
>
<SwiperSlide>
<SwaperSlideContent></SwaperSlideContent>
<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>
<SwiperSlide>
<SwaperSlideContent></SwaperSlideContent>
<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>
{/* <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

38
src/pages/Home/SwaperSlideContent.jsx
View File

@ -1,11 +1,15 @@
const SwaperSlideContent = () => {
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('./../../public/img/front-pages/landing-page/dashboard-light-01.png') center center/cover no-repeat",
background: `url('${ImageUrl}') center center/cover no-repeat`,
height: "500px",
}}
>
@ -14,16 +18,32 @@ const SwaperSlideContent = () => {
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))",
"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 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>
<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"