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

add blog container

Browse Source
This commit is contained in:
Vikas Nale 2025-09-10 10:35:36 +05:30
parent 2642532b60
commit 47d0e332f1
3 changed files with 175 additions and 161 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,10 @@
.section-py { .section-py {
padding: 6.25rem 0; padding: 6.25rem 0;
} }
.section-py .heading {
font-size: 1.625rem;
}
@media (max-width: 1199.98px) { @media (max-width: 1199.98px) {
.section-py { .section-py {
padding: 4rem 0; padding: 4rem 0;
@ -303,10 +307,10 @@ nav.layout-navbar.navbar-active::after {
opacity: 1; opacity: 1;
} }
.landing-footer .footer-top { .landing-footer .footer-top {
padding-top: 3.3rem; padding-top: 1.3rem;
padding-bottom: 2.3rem; padding-bottom: 1.3rem;
border-top-left-radius: 3.75rem; border-top-left-radius: 1.75rem;
border-top-right-radius: 3.75rem; border-top-right-radius: 1.75rem;
} }
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
.landing-footer .footer-top { .landing-footer .footer-top {
@ -635,7 +639,6 @@ nav.layout-navbar.navbar-active::after {
.swiper-slide { .swiper-slide {
text-align: center; text-align: center;
font-size: 18px; font-size: 18px;
background: #444;
/* Center slide text vertically */ /* Center slide text vertically */
display: flex; display: flex;

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

@ -1,4 +1,6 @@
import { noop } from "@tanstack/react-query"; import { noop } from "@tanstack/react-query";
import React, { useEffect, useMemo, useState } from "react";
import "./LandingPage.css"; import "./LandingPage.css";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
@ -9,8 +11,10 @@ import { EffectFlip, Autoplay, Pagination, Navigation } from "swiper/modules";
import "swiper/css"; import "swiper/css";
import "swiper/css/navigation"; import "swiper/css/navigation";
import SwaperSlideContent from "./SwaperSlideContent"; import SwaperSlideContent from "./SwaperSlideContent";
import SwaperBlogContent from "./SwaperBlogContent";
const LandingPage = () => { const LandingPage = () => {
const [swiperRef, setSwiperRef] = useState(null);
return ( return (
<div> <div>
<nav className="layout-navbar shadow-none py-0"> <nav className="layout-navbar shadow-none py-0">
@ -88,11 +92,7 @@ const LandingPage = () => {
</a> </a>
</li> </li>
<li className="nav-item"> <li className="nav-item">
<a <a className="nav-link fw-medium" href="#landingReviews">
className="nav-link fw-medium"
href="../vertical-menu-template/index.html"
target="_blank"
>
Blogs Blogs
</a> </a>
</li> </li>
@ -244,14 +244,6 @@ const LandingPage = () => {
></SwaperSlideContent> ></SwaperSlideContent>
</SwiperSlide> </SwiperSlide>
</Swiper> </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> </div>
</div> </div>
</div> </div>
@ -264,7 +256,9 @@ const LandingPage = () => {
<section id="landingFeatures" className="section-py landing-features"> <section id="landingFeatures" className="section-py landing-features">
<div className="container"> <div className="container">
<div className="text-center mb-4"> <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> </div>
<h4 className="text-center mb-1"> <h4 className="text-center mb-1">
<span className="position-relative fw-extrabold z-1"> <span className="position-relative fw-extrabold z-1">
@ -405,91 +399,86 @@ const LandingPage = () => {
</section> </section>
{/* Useful features: End */} {/* Useful features: End */}
{/* Our great team: Start */} {/* <!-- Real customers reviews: Start --> */}
<section id="landingTeam" className="section-py landing-team" hidden> <section
<div className="container"> 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"> <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> </div>
<h4 className="text-center mb-1"> <h4 className="text-center mb-1">
<span className="position-relative fw-extrabold z-1"> <span className="position-relative fw-extrabold z-1 me-2">
Supported Proven results, showcased
<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> </span>
by Real People through client success stories
</h4> </h4>
<p className="text-center mb-md-11 pb-0 pb-xl-12"> <p className="text-center pb-2 mb-7">
Who is behind these great-looking interfaces? 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> </p>
<div className="row gy-12 mt-2">
<div className="col-lg-3 col-sm-6"> <div class="row">
<div className="card mt-3 mt-lg-0 shadow-none"> <div class="swiper-reviews-carousel">
<div className="bg-label-primary border border-bottom-0 border-label-primary position-relative team-image-box"> <Swiper
<img onSwiper={setSwiperRef}
src="./../../public/img/front-pages/landing-page/team-member-1.png" slidesPerView={4}
className="position-absolute card-img-position bottom-0 start-50 scaleX-n1-rtl" centeredSlides={true}
alt="human image" spaceBetween={30}
/> pagination={{
</div> type: "fraction",
<div className="card-body border border-top-0 border-label-primary text-center py-5"> }}
<h5 className="card-title mb-0">Sophie Gilbert</h5> navigation={true}
<p className="text-muted mb-0">Project Manager</p> modules={[Autoplay, Pagination, Navigation]}
</div> className="mySwiper"
</div> >
</div> <SwiperSlide>
<div className="col-lg-3 col-sm-6"> {" "}
<div className="card mt-3 mt-lg-0 shadow-none"> <SwaperBlogContent
<div className="bg-label-info border border-bottom-0 border-label-info position-relative team-image-box"> ImageUrl="./../../img/front-pages/branding/logo-1.png"
<img Title="Project & Task Management"
src="./../../public/img/front-pages/landing-page/team-member-2.png" Body="Plan, assign, and track projects and tasks seamlessly for better team collaboration."
className="position-absolute card-img-position bottom-0 start-50 scaleX-n1-rtl" ></SwaperBlogContent>
alt="human image" </SwiperSlide>
/> <SwiperSlide>
</div> {" "}
<div className="card-body border border-top-0 border-label-info text-center py-5"> <SwaperBlogContent
<h5 className="card-title mb-0">Paul Miles</h5> ImageUrl="./../../img/front-pages/branding/logo-1.png"
<p className="text-muted mb-0">UI Designer</p> Title="Project & Task Management"
</div> Body="Plan, assign, and track projects and tasks seamlessly for better team collaboration."
</div> ></SwaperBlogContent>
</div> </SwiperSlide>
<div className="col-lg-3 col-sm-6"> <SwiperSlide>
<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"> <SwaperBlogContent
<img ImageUrl="./../../img/front-pages/branding/logo-1.png"
src="./../../public/img/front-pages/landing-page/team-member-3.png" Title="Project & Task Management"
className="position-absolute card-img-position bottom-0 start-50 scaleX-n1-rtl" Body="Plan, assign, and track projects and tasks seamlessly for better team collaboration."
alt="human image" ></SwaperBlogContent>
/> </SwiperSlide>
</div> <SwiperSlide>
<div className="card-body border border-top-0 border-label-danger text-center py-5"> {" "}
<h5 className="card-title mb-0">Nannie Ford</h5> <SwaperBlogContent
<p className="text-muted mb-0">Development Lead</p> ImageUrl="./../../img/front-pages/branding/logo-1.png"
</div> Title="Project & Task Management"
</div> Body="Plan, assign, and track projects and tasks seamlessly for better team collaboration."
</div> ></SwaperBlogContent>
<div className="col-lg-3 col-sm-6"> </SwiperSlide>
<div className="card mt-3 mt-lg-0 shadow-none"> </Swiper>
<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> </div>
</div> </div>
</div> </div>
</section> </section>
{/* Our great team: End */} {/* <!-- Real customers reviews: End --> */}
{/* Pricing plans: Start */} {/* Pricing plans: Start */}
<section <section
@ -498,28 +487,39 @@ const LandingPage = () => {
> >
<div className="container"> <div className="container">
<div className="text-center mb-4"> <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> </div>
<h4 className="text-center mb-1"> <h4 className="text-center mb-1">
<span className="position-relative fw-extrabold z-1 me-2"> <span className="position-relative fw-extrabold z-1 me-2">
Tailored pricing plans Tailored pricing plans
<img {/* <img
src="./../../public/img/front-pages/icons/section-title-icon.png" src="./../../public/img/front-pages/icons/section-title-icon.png"
alt="laptop charging" alt="laptop charging"
className="section-title-img position-absolute object-fit-contain bottom-0 z-n1" className="section-title-img position-absolute object-fit-contain bottom-0 z-n1"
/> /> */}
</span> </span>
designed for you designed for you
</h4> </h4>
<p className="text-center pb-2 mb-7"> <p className="text-center pb-2 mb-7">
All plans include 40+ advanced tools and features to boost your No matter which plan you choose, you’ll get access to powerful
product. features. <strong>Choose the best plan to fit your needs.</strong>
<br />
Choose the best plan to fit your needs.
</p> </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"> <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"> <span className="switch-label fs-6 text-body me-3">
Pay Monthly Pay Monthly
</span> </span>
@ -535,18 +535,18 @@ const LandingPage = () => {
<span className="switch-label fs-6 text-body ms-3"> <span className="switch-label fs-6 text-body ms-3">
Pay Annual Pay Annual
</span> </span>
</label> </label> */}
<div className="pricing-plans-item position-absolute d-flex"> {/* <div className="pricing-plans-item position-absolute d-flex">
<img <img
src="./../../public/img/front-pages/icons/pricing-plans-arrow.png" src="./../../public/img/front-pages/icons/pricing-plans-arrow.png"
alt="pricing plans arrow" alt="pricing plans arrow"
className="scaleX-n1-rtl" className="scaleX-n1-rtl"
/> />
<span className="fw-medium mt-2 ms-1"> Save 25%</span> <span className="fw-medium mt-2 ms-1"> Save 25%</span>
</div> </div> */}
</div> </div>
</div> </div>
<div className="row g-6 pt-lg-5"> <div className="row g-6 pt-0">
{/* Basic Plan: Start */} {/* Basic Plan: Start */}
<div className="col-xl-4 col-lg-6 col-md-4"> <div className="col-xl-4 col-lg-6 col-md-4">
<div className="card"> <div className="card">
@ -930,7 +930,7 @@ const LandingPage = () => {
<section id="landingFAQ" className="section-py bg-body landing-faq"> <section id="landingFAQ" className="section-py bg-body landing-faq">
<div className="container"> <div className="container">
<div className="text-center mb-4"> <div className="text-center mb-4">
<span className="badge bg-label-primary">FAQ</span> <span className="badge bg-label-primary heading">FAQ</span>
</div> </div>
<h4 className="text-center mb-1"> <h4 className="text-center mb-1">
Frequently asked Frequently asked
@ -1112,10 +1112,7 @@ const LandingPage = () => {
{/* FAQ: End */} {/* FAQ: End */}
{/* CTA: Start */} {/* CTA: Start */}
<section <section id="landingCTA" className="section-py landing-cta ">
id="landingCTA"
className="section-py landing-cta position-relative p-lg-0 pb-0"
>
<img <img
src="./../../public/img/front-pages/backgrounds/cta-bg-light.png" 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" className="position-absolute bottom-0 end-0 scaleX-n1-rtl h-100 w-100 z-n1"
@ -1125,7 +1122,7 @@ const LandingPage = () => {
/> />
<div className="container"> <div className="container">
<div className="text-center mb-4 mt-5"> <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>
<div className="row align-items-center gy-12 mb-12"> <div className="row align-items-center gy-12 mb-12">
@ -1226,7 +1223,7 @@ const LandingPage = () => {
> >
<div className="container"> <div className="container">
<div className="text-center mb-4"> <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> </div>
<h4 className="text-center mb-1"> <h4 className="text-center mb-1">
<span className="position-relative fw-extrabold z-1"> <span className="position-relative fw-extrabold z-1">
@ -1379,9 +1376,9 @@ const LandingPage = () => {
className="footer-bg banner-bg-img z-n1" className="footer-bg banner-bg-img z-n1"
/> />
<div className="container"> <div className="container">
<div className="row gx-0 gy-6 g-lg-10"> <div className="row ">
<div className="col-lg-5"> <div className="col-lg-6">
<a href="#" className="app-brand-link mb-6"> <a href="#" className="app-brand-link ">
<span className="app-brand-logo demo"> <span className="app-brand-logo demo">
<svg <svg
width="25" width="25"
@ -1482,11 +1479,11 @@ const LandingPage = () => {
</Link> </Link>
</span> </span>
</a> </a>
<p className="footer-text footer-logo-description mb-6"> <p className="footer-text footer-logo-description" hidden>
Most developer friendly & highly customisable Admin Dashboard Work smarter, track faster, and manage everything from one
Template. platform.
</p> </p>
<form className="footer-form"> <form className="footer-form" hidden>
<label for="footer-email" className="small"> <label for="footer-email" className="small">
Subscribe to newsletter Subscribe to newsletter
</label> </label>
@ -1506,51 +1503,16 @@ const LandingPage = () => {
</div> </div>
</form> </form>
</div> </div>
<div className="col-lg-2 col-md-4 col-sm-6"></div>
<div className="col-lg-2 col-md-4 col-sm-6"> <div className="col-lg-6 col-md-6 d-flex gap-3 align-items-center justify-content-end">
<h6 className="footer-title mb-6">Pages</h6> <h6 className="footer-title">Download our app</h6>
<ul className="list-unstyled"> <a href="javascript:void(0);">
<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">
<img <img
src="./../../public/img/front-pages/landing-page/apple-icon.png" src="./../../public/img/front-pages/landing-page/apple-icon.png"
alt="apple icon" alt="apple icon"
/> />
</a> </a>
<a href="javascript:void(0);" className="d-block"> <a href="javascript:void(0);">
<img <img
src="./../../public/img/front-pages/landing-page/google-play-icon.png" src="./../../public/img/front-pages/landing-page/google-play-icon.png"
alt="google play icon" alt="google play icon"

49
src/pages/Home/SwaperBlogContent.jsx Normal file
View 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;