BlogHome.js
3.53 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
import FadeInStagger from "@/components/FadeInStagger";
import Image from "next/image";
import React from "react";
import { Col, Container, Row } from "react-bootstrap";
const BlogHome = () => {
const rightBlogs = [
{
image: "/image/blog1.png",
date: "News | 04.06.25",
title: "Design Heritage In Harmony",
desc: "the picturesque coastal town of La Baule-Escoublac. This innovative space showcases a blend of modern aesthetics and timeless elegance",
},
{
image: "/image/blog1.png",
date: "News | 04.06.25",
title: "Design Heritage In Harmony",
desc: "the picturesque coastal town of La Baule-Escoublac. This innovative space showcases a blend of modern aesthetics and timeless elegance",
},
];
return (
<section className="sec_padd">
<Container className="custom_container">
{/* Heading Row */}
<Row className="align-items-center justify-content-between mb-4">
<Col lg={8} md={8}>
<h2 className="heading mb-2">Blogs / News</h2>
</Col>
<Col lg={4} md={4} className="d-flex justify-content-md-end">
<button className="btn3">Explore More</button>
</Col>
</Row>
<Row className="g-4">
{/* Left Blog (large) */}
<Col lg={7} md={12}>
<div className="blog-large">
<FadeInStagger direction="right">
<Image
src="/image/blog.png"
alt="About"
width={1000}
height={400}
className="img-fluid rounded"
/>
<div className="d-flex flex-column-reverse flex-md-row align-items-start align-items-md-center justify-content-between mt-2">
<h5 className="mb-1">Design Heritage In Harmony</h5>
<p className="blog-date mb-1">Blogs | 07.04.25</p>
</div>
<p className="pt-2 blog_desc">
In the historic heart of Moscow, overlooking the Cathedral of
Christ the Saviour, an apartment appears as a reinterpretation
of Parisian charm viewed through a contemporary lens.
</p>
<button className="read-more-btn">
Read More <i className="fa-solid fa-arrow-right"></i>
</button>
</FadeInStagger>
</div>
</Col>
{/* Right Blogs (list) */}
<Col lg={5} md={12}>
<FadeInStagger direction="right">
{rightBlogs.map((blog, index) => (
<div
key={index}
className="d-flex flex-column flex-md-row mb-4"
>
<Image
src={blog.image}
alt={blog.title}
width={350}
height={400}
className="blog-img img-fluid rounded"
/>
<div className="blog-content ms-md-3 mt-2 mt-md-0">
<p className="blog-date mb-1">{blog.date}</p>
<h5 className="mb-1">{blog.title}</h5>
<p className="blog_desc">{blog.desc}</p>
<button className="read-more-btn">
Read More <i className="fa-solid fa-arrow-right"></i>
</button>
</div>
</div>
))}
</FadeInStagger>
</Col>
</Row>
</Container>
</section>
);
};
export default BlogHome;