435 lines
18 KiB
TypeScript
435 lines
18 KiB
TypeScript
"use client";
|
|
import Image from "next/legacy/image";
|
|
import Link from "next/link";
|
|
import { Swiper, SwiperSlide } from "swiper/react";
|
|
import { Autoplay } from "swiper/modules";
|
|
import "swiper/swiper-bundle.css";
|
|
import one from "@/public/images/blog/related-one.png";
|
|
import two from "@/public/images/blog/related-two.png";
|
|
import three from "@/public/images/blog/related-three.png";
|
|
import four from "@/public/images/blog/related-four.png";
|
|
|
|
const HomeLatestPost = () => {
|
|
return (
|
|
<section className="tp-latest-post pt-120 pb-120 bg-quinary">
|
|
<div className="container">
|
|
<div className="row vertical-column-gap align-items-center">
|
|
<div className="col-12 col-lg-7">
|
|
<div className="tp-lp-title text-center text-lg-start">
|
|
<h2 className="mt-8 fw-7 text-secondary title-anim">
|
|
Related posts
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
<div className="col-12 col-lg-5">
|
|
<div className="tp-lp-cta text-center text-lg-end">
|
|
<Link href="blog" className="btn-line text-uppercase">
|
|
See All Posts
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="row">
|
|
<div className="col-12">
|
|
<div className="tp-lp-slider-wrapper mt-60">
|
|
<div className="tp-lp-slider-wrapper">
|
|
<Swiper
|
|
slidesPerView={"auto"}
|
|
spaceBetween={24}
|
|
slidesPerGroup={1}
|
|
freeMode={true}
|
|
speed={1200}
|
|
loop={true}
|
|
roundLengths={true}
|
|
modules={[Autoplay]}
|
|
autoplay={{
|
|
delay: 5000,
|
|
disableOnInteraction: false,
|
|
pauseOnMouseEnter: true,
|
|
}}
|
|
className="tp-lp-slider"
|
|
>
|
|
<SwiperSlide>
|
|
<div className="tp-lp-slider__single topy-tilt">
|
|
<div className="thumb mb-24">
|
|
<Link href="blog-single" className="w-100 overflow-hidden">
|
|
<Image
|
|
src={one}
|
|
width={400}
|
|
height={220}
|
|
className="w-100 mh-220"
|
|
alt="Image"
|
|
/>
|
|
</Link>
|
|
</div>
|
|
<div className="content">
|
|
<div className="tp-lp-post__meta mb-24 mt-8">
|
|
<p className="author text-xs text-tertiary">
|
|
Denial Lio
|
|
</p>
|
|
<span></span>
|
|
<p className="date text-xs text-tertiary">
|
|
18 Dec 2022
|
|
</p>
|
|
</div>
|
|
<h5 className="mt-8 fw-5 text-secondary">
|
|
<Link href="blog-single">
|
|
Tackling data of annotation problems in healthcare
|
|
</Link>
|
|
</h5>
|
|
</div>
|
|
</div>
|
|
</SwiperSlide>
|
|
<SwiperSlide>
|
|
<div className="tp-lp-slider__single topy-tilt">
|
|
<div className="thumb mb-24">
|
|
<Link href="blog-single" className="w-100 overflow-hidden">
|
|
<Image
|
|
src={two}
|
|
width={400}
|
|
height={220}
|
|
className="w-100 mh-220"
|
|
alt="Image"
|
|
/>
|
|
</Link>
|
|
</div>
|
|
<div className="content">
|
|
<div className="tp-lp-post__meta mb-24 mt-8">
|
|
<p className="author text-xs text-tertiary">
|
|
Denial Lio
|
|
</p>
|
|
<span></span>
|
|
<p className="date text-xs text-tertiary">
|
|
18 Dec 2022
|
|
</p>
|
|
</div>
|
|
<h5 className="mt-8 fw-5 text-secondary">
|
|
<Link href="blog-single">
|
|
Tackling data of annotation problems in healthcare
|
|
</Link>
|
|
</h5>
|
|
</div>
|
|
</div>
|
|
</SwiperSlide>
|
|
<SwiperSlide>
|
|
<div className="tp-lp-slider__single topy-tilt">
|
|
<div className="thumb mb-24">
|
|
<Link href="blog-single" className="w-100 overflow-hidden">
|
|
<Image
|
|
src={three}
|
|
width={400}
|
|
height={220}
|
|
className="w-100 mh-220"
|
|
alt="Image"
|
|
/>
|
|
</Link>
|
|
</div>
|
|
<div className="content">
|
|
<div className="tp-lp-post__meta mb-24 mt-8">
|
|
<p className="author text-xs text-tertiary">
|
|
Denial Lio
|
|
</p>
|
|
<span></span>
|
|
<p className="date text-xs text-tertiary">
|
|
18 Dec 2022
|
|
</p>
|
|
</div>
|
|
<h5 className="mt-8 fw-5 text-secondary">
|
|
<Link href="blog-single">
|
|
Tackling data of annotation problems in healthcare
|
|
</Link>
|
|
</h5>
|
|
</div>
|
|
</div>
|
|
</SwiperSlide>
|
|
<SwiperSlide>
|
|
<div className="tp-lp-slider__single topy-tilt">
|
|
<div className="thumb mb-24">
|
|
<Link href="blog-single" className="w-100 overflow-hidden">
|
|
<Image
|
|
src={four}
|
|
width={400}
|
|
height={220}
|
|
className="w-100 mh-220"
|
|
alt="Image"
|
|
/>
|
|
</Link>
|
|
</div>
|
|
<div className="content">
|
|
<div className="tp-lp-post__meta mb-24 mt-8">
|
|
<p className="author text-xs text-tertiary">
|
|
Denial Lio
|
|
</p>
|
|
<span></span>
|
|
<p className="date text-xs text-tertiary">
|
|
18 Dec 2022
|
|
</p>
|
|
</div>
|
|
<h5 className="mt-8 fw-5 text-secondary">
|
|
<Link href="blog-single">
|
|
Tackling data of annotation problems in healthcare
|
|
</Link>
|
|
</h5>
|
|
</div>
|
|
</div>
|
|
</SwiperSlide>
|
|
<SwiperSlide>
|
|
<div className="tp-lp-slider__single topy-tilt">
|
|
<div className="thumb mb-24">
|
|
<Link href="blog-single" className="w-100 overflow-hidden">
|
|
<Image
|
|
src={one}
|
|
width={400}
|
|
height={220}
|
|
className="w-100 mh-220"
|
|
alt="Image"
|
|
/>
|
|
</Link>
|
|
</div>
|
|
<div className="content">
|
|
<div className="tp-lp-post__meta mb-24 mt-8">
|
|
<p className="author text-xs text-tertiary">
|
|
Denial Lio
|
|
</p>
|
|
<span></span>
|
|
<p className="date text-xs text-tertiary">
|
|
18 Dec 2022
|
|
</p>
|
|
</div>
|
|
<h5 className="mt-8 fw-5 text-secondary">
|
|
<Link href="blog-single">
|
|
Tackling data of annotation problems in healthcare
|
|
</Link>
|
|
</h5>
|
|
</div>
|
|
</div>
|
|
</SwiperSlide>
|
|
<SwiperSlide>
|
|
<div className="tp-lp-slider__single topy-tilt">
|
|
<div className="thumb mb-24">
|
|
<Link href="blog-single" className="w-100 overflow-hidden">
|
|
<Image
|
|
src={two}
|
|
width={400}
|
|
height={220}
|
|
className="w-100 mh-220"
|
|
alt="Image"
|
|
/>
|
|
</Link>
|
|
</div>
|
|
<div className="content">
|
|
<div className="tp-lp-post__meta mb-24 mt-8">
|
|
<p className="author text-xs text-tertiary">
|
|
Denial Lio
|
|
</p>
|
|
<span></span>
|
|
<p className="date text-xs text-tertiary">
|
|
18 Dec 2022
|
|
</p>
|
|
</div>
|
|
<h5 className="mt-8 fw-5 text-secondary">
|
|
<Link href="blog-single">
|
|
Tackling data of annotation problems in healthcare
|
|
</Link>
|
|
</h5>
|
|
</div>
|
|
</div>
|
|
</SwiperSlide>
|
|
<SwiperSlide>
|
|
<div className="tp-lp-slider__single topy-tilt">
|
|
<div className="thumb mb-24">
|
|
<Link href="blog-single" className="w-100 overflow-hidden">
|
|
<Image
|
|
src={three}
|
|
width={400}
|
|
height={220}
|
|
className="w-100 mh-220"
|
|
alt="Image"
|
|
/>
|
|
</Link>
|
|
</div>
|
|
<div className="content">
|
|
<div className="tp-lp-post__meta mb-24 mt-8">
|
|
<p className="author text-xs text-tertiary">
|
|
Denial Lio
|
|
</p>
|
|
<span></span>
|
|
<p className="date text-xs text-tertiary">
|
|
18 Dec 2022
|
|
</p>
|
|
</div>
|
|
<h5 className="mt-8 fw-5 text-secondary">
|
|
<Link href="blog-single">
|
|
Tackling data of annotation problems in healthcare
|
|
</Link>
|
|
</h5>
|
|
</div>
|
|
</div>
|
|
</SwiperSlide>
|
|
<SwiperSlide>
|
|
<div className="tp-lp-slider__single topy-tilt">
|
|
<div className="thumb mb-24">
|
|
<Link href="blog-single" className="w-100 overflow-hidden">
|
|
<Image
|
|
src={four}
|
|
width={400}
|
|
height={220}
|
|
className="w-100 mh-220"
|
|
alt="Image"
|
|
/>
|
|
</Link>
|
|
</div>
|
|
<div className="content">
|
|
<div className="tp-lp-post__meta mb-24 mt-8">
|
|
<p className="author text-xs text-tertiary">
|
|
Denial Lio
|
|
</p>
|
|
<span></span>
|
|
<p className="date text-xs text-tertiary">
|
|
18 Dec 2022
|
|
</p>
|
|
</div>
|
|
<h5 className="mt-8 fw-5 text-secondary">
|
|
<Link href="blog-single">
|
|
Tackling data of annotation problems in healthcare
|
|
</Link>
|
|
</h5>
|
|
</div>
|
|
</div>
|
|
</SwiperSlide>
|
|
<SwiperSlide>
|
|
<div className="tp-lp-slider__single topy-tilt">
|
|
<div className="thumb mb-24">
|
|
<Link href="blog-single" className="w-100 overflow-hidden">
|
|
<Image
|
|
src={one}
|
|
width={400}
|
|
height={220}
|
|
className="w-100 mh-220"
|
|
alt="Image"
|
|
/>
|
|
</Link>
|
|
</div>
|
|
<div className="content">
|
|
<div className="tp-lp-post__meta mb-24 mt-8">
|
|
<p className="author text-xs text-tertiary">
|
|
Denial Lio
|
|
</p>
|
|
<span></span>
|
|
<p className="date text-xs text-tertiary">
|
|
18 Dec 2022
|
|
</p>
|
|
</div>
|
|
<h5 className="mt-8 fw-5 text-secondary">
|
|
<Link href="blog-single">
|
|
Tackling data of annotation problems in healthcare
|
|
</Link>
|
|
</h5>
|
|
</div>
|
|
</div>
|
|
</SwiperSlide>
|
|
<SwiperSlide>
|
|
<div className="tp-lp-slider__single topy-tilt">
|
|
<div className="thumb mb-24">
|
|
<Link href="blog-single" className="w-100 overflow-hidden">
|
|
<Image
|
|
src={two}
|
|
width={400}
|
|
height={220}
|
|
className="w-100 mh-220"
|
|
alt="Image"
|
|
/>
|
|
</Link>
|
|
</div>
|
|
<div className="content">
|
|
<div className="tp-lp-post__meta mb-24 mt-8">
|
|
<p className="author text-xs text-tertiary">
|
|
Denial Lio
|
|
</p>
|
|
<span></span>
|
|
<p className="date text-xs text-tertiary">
|
|
18 Dec 2022
|
|
</p>
|
|
</div>
|
|
<h5 className="mt-8 fw-5 text-secondary">
|
|
<Link href="blog-single">
|
|
Tackling data of annotation problems in healthcare
|
|
</Link>
|
|
</h5>
|
|
</div>
|
|
</div>
|
|
</SwiperSlide>
|
|
<SwiperSlide>
|
|
<div className="tp-lp-slider__single topy-tilt">
|
|
<div className="thumb mb-24">
|
|
<Link href="blog-single" className="w-100 overflow-hidden">
|
|
<Image
|
|
src={three}
|
|
width={400}
|
|
height={220}
|
|
className="w-100 mh-220"
|
|
alt="Image"
|
|
/>
|
|
</Link>
|
|
</div>
|
|
<div className="content">
|
|
<div className="tp-lp-post__meta mb-24 mt-8">
|
|
<p className="author text-xs text-tertiary">
|
|
Denial Lio
|
|
</p>
|
|
<span></span>
|
|
<p className="date text-xs text-tertiary">
|
|
18 Dec 2022
|
|
</p>
|
|
</div>
|
|
<h5 className="mt-8 fw-5 text-secondary">
|
|
<Link href="blog-single">
|
|
Tackling data of annotation problems in healthcare
|
|
</Link>
|
|
</h5>
|
|
</div>
|
|
</div>
|
|
</SwiperSlide>
|
|
<SwiperSlide>
|
|
<div className="tp-lp-slider__single topy-tilt">
|
|
<div className="thumb mb-24">
|
|
<Link href="blog-single" className="w-100 overflow-hidden">
|
|
<Image
|
|
src={four}
|
|
width={400}
|
|
height={220}
|
|
className="w-100 mh-220"
|
|
alt="Image"
|
|
/>
|
|
</Link>
|
|
</div>
|
|
<div className="content">
|
|
<div className="tp-lp-post__meta mb-24 mt-8">
|
|
<p className="author text-xs text-tertiary">
|
|
Denial Lio
|
|
</p>
|
|
<span></span>
|
|
<p className="date text-xs text-tertiary">
|
|
18 Dec 2022
|
|
</p>
|
|
</div>
|
|
<h5 className="mt-8 fw-5 text-secondary">
|
|
<Link href="blog-single">
|
|
Tackling data of annotation problems in healthcare
|
|
</Link>
|
|
</h5>
|
|
</div>
|
|
</div>
|
|
</SwiperSlide>
|
|
</Swiper>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default HomeLatestPost;
|