add blog container
This commit is contained in:
parent
2642532b60
commit
47d0e332f1
@ -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 {
|
||||
@ -635,7 +639,6 @@ nav.layout-navbar.navbar-active::after {
|
||||
.swiper-slide {
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
background: #444;
|
||||
|
||||
/* Center slide text vertically */
|
||||
display: flex;
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
import { noop } from "@tanstack/react-query";
|
||||
import React, { useEffect, useMemo, useState } from "react";
|
||||
|
||||
import "./LandingPage.css";
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
@ -9,8 +11,10 @@ import { EffectFlip, Autoplay, Pagination, Navigation } from "swiper/modules";
|
||||
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">
|
||||
@ -88,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>
|
||||
@ -244,14 +244,6 @@ const LandingPage = () => {
|
||||
></SwaperSlideContent>
|
||||
</SwiperSlide>
|
||||
</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>
|
||||
@ -264,7 +256,9 @@ 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">
|
||||
@ -405,91 +399,86 @@ const LandingPage = () => {
|
||||
</section>
|
||||
{/* Useful features: End */}
|
||||
|
||||
{/* Our great team: Start */}
|
||||
<section id="landingTeam" className="section-py landing-team" hidden>
|
||||
<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
|
||||
@ -498,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>
|
||||
@ -535,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">
|
||||
@ -930,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
|
||||
@ -1112,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"
|
||||
@ -1125,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">
|
||||
@ -1226,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">
|
||||
@ -1379,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"
|
||||
@ -1482,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>
|
||||
@ -1506,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;
|
||||
Loading…
x
Reference in New Issue
Block a user