first commit
This commit is contained in:
140
components/homes/marketing-consulting/Blogs.jsx
Normal file
140
components/homes/marketing-consulting/Blogs.jsx
Normal file
@ -0,0 +1,140 @@
|
||||
"use client";
|
||||
import { blogArticles3 } from "@/data/blogs";
|
||||
import React from "react";
|
||||
import { Swiper, SwiperSlide } from "swiper/react";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
export default function Blogs() {
|
||||
return (
|
||||
<div className="section-blog style-1 sw-layout-1 tf-spacing-44">
|
||||
<div className="tf-container-2">
|
||||
<div className="heading-section d-flex gap_12 justify-content-between align-items-end flex-wrap-md mb_59">
|
||||
<div className="left">
|
||||
<div className="heading-tag v2 d-flex gap_12 mb_20 text_mono-gray-5 fw-5">
|
||||
<div className="icon">
|
||||
<i className="icon-blogger text_mono-gray-5" />
|
||||
</div>
|
||||
<p className="text-body-3 fw-5">Blogs</p>
|
||||
</div>
|
||||
<h2 className="title text_white fw-5 split-text effect-right">
|
||||
Our precious <span className="text-gradient">blogs</span>
|
||||
</h2>
|
||||
</div>
|
||||
<div className="right">
|
||||
<div className="wrap-sw-button d-flex gap_16">
|
||||
<div className="sw-button style-default has-bg nav-prev-layout-1">
|
||||
<svg
|
||||
width={24}
|
||||
height={24}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M4 12L20 12"
|
||||
stroke="white"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M8.99996 17C8.99996 17 4.00001 13.3176 4 12C3.99999 10.6824 9 7 9 7"
|
||||
stroke="white"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="sw-button style-default has-bg nav-next-layout-1">
|
||||
<svg
|
||||
width={24}
|
||||
height={24}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M20 12L4 12"
|
||||
stroke="white"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M15 17C15 17 20 13.3176 20 12C20 10.6824 15 7 15 7"
|
||||
stroke="white"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="tf-container-2 slider-layout-right">
|
||||
<Swiper
|
||||
className="swiper"
|
||||
breakpoints={{
|
||||
0: { slidesPerView: 1.2 },
|
||||
575: {
|
||||
slidesPerView: 1.6,
|
||||
},
|
||||
768: {
|
||||
slidesPerView: 2.5,
|
||||
spaceBetween: 30,
|
||||
},
|
||||
992: {
|
||||
slidesPerView: 3.6,
|
||||
spaceBetween: 72,
|
||||
},
|
||||
}}
|
||||
spaceBetween={15}
|
||||
>
|
||||
{blogArticles3.map((article) => (
|
||||
<SwiperSlide
|
||||
className="swiper-slide"
|
||||
key={`blog-article-${article.id}`}
|
||||
>
|
||||
<div className="blog-article-item style-3 hover-image-3">
|
||||
<Link
|
||||
href={`/single-post/${article.id}`}
|
||||
className="article-thumb mb_30"
|
||||
>
|
||||
<Image
|
||||
className="lazyload"
|
||||
data-src={article.imageSrc}
|
||||
alt="blog"
|
||||
src={article.imageSrc}
|
||||
width={article.width}
|
||||
height={article.height}
|
||||
/>
|
||||
<Image
|
||||
className="lazyload"
|
||||
data-src={article.imageSrc}
|
||||
alt="blog"
|
||||
src={article.imageSrc}
|
||||
width={article.width}
|
||||
height={article.height}
|
||||
/>
|
||||
</Link>
|
||||
<div className="article-content">
|
||||
<p className="text-body-1 text_mono-gray-5 mb_8">
|
||||
{article.date}
|
||||
</p>
|
||||
<h6 className="title fw-5 letter-spacing-2 text_white">
|
||||
<Link href={`/single-post/${article.id}`} className="link">
|
||||
{article.title}
|
||||
</Link>
|
||||
</h6>
|
||||
</div>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
))}
|
||||
</Swiper>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user