integrate frontend with backend

container/Blog/Blog.js

+import React from "react";
+import Link from "next/link";
+import BlogSidebar from "./BlogSidebar";
+import PageBanner from "@/components/reuseables/PageBanner";
+import Image from "next/image";
+import { Col, Container, Row } from "react-bootstrap";
+const banners = [
+  {
+    imageSrc: "/images/banner/blog.webp",
+    pageTitle: "Blogs",
+    homePageUrl: "/",
+    homePageText: "Home",
+    activePageText: "Blogs",
+  },
+];
+const posts = [
+  {
+    id: 1,
+    image: "/images/blog/blog4/3.jpeg",
+    altText: "Blog Image",
+    date: "Nov 20, 2024",
+    author: "By Advith Consulting",
+    authorLink: "/blog/author",
+    title: "Conversion of a Private Limited Company into LLP",
+    shortDesc:
+      "The Limited Liability Partnership (LLP) structure has gained immense popularity in the corporate sector in recent times. Since the enactment",
+    btnText: "Read More",
+    detailsUrl: "/blog/detail/conversion-of-a-private-limited-company-into",
+  },
+  {
+    id: 2,
+    image: "/images/blog/blogs1.jpeg",
+    altText: "Blog Image",
+    date: "Aug 23, 2024",
+    author: "By Advith Consulting",
+    authorLink: "/blog/author",
+    title: "Tax Deducted at Source under Income Tax Act",
+    shortDesc:
+      "Tax Deducted at Source under Income Tax ActBy Advith Consulting.",
+    btnText: "Read More",
+    detailsUrl: "/blog/detail/tax-deducted-at-source-under-income-tax-act",
+  },
+  {
+    id:3,
+    image: "/images/blog/blog-2.jpeg",
+    altText: "Blog Image",
+    date: "July 23, 2024",
+    author: "By Advith Consulting",
+    authorLink: "/blog/author",
+    title: "Reporting on Fraudulent Activities by Auditors",
+    shortDesc:
+      "Reporting on Fraudulent Activities by Auditors By Advith Consulting ",
+    btnText: "Read More",
+    detailsUrl: "/blog/detail/reporting-on-fraudulent-activities-by-auditors",
+  },
+  {
+    id: 4,
+    image: "/images/blog/blogs3.jpeg",
+    altText: "Blog Image",
+    date: "Aug 15, 2024",
+    author: "By Advith Consulting",
+    authorLink: "/blog/author",
+    title: "Start-up and Angel Tax",
+    shortDesc:
+      "Start-up and Angel Tax By Advith Consulting Background With the aim ",
+    btnText: "Read More",
+    detailsUrl: "/blog/detail/start-up-and-angel-tax",
+  },
+ 
+
+];
+
+const Blogs = () => {
+  return (
+    <>
+      <PageBanner banners={banners} />
+      <div className="blog-area ptb-100">
+        <Container>
+          <Row className="g-4">
+            <Col lg={12} md={12}>
+              <div className="row justify-content-center h-100">
+                {posts &&
+                  posts.map((post) => (
+                    <Col lg={4} md={4} key={post.id}>
+                      <div className="single-blog-post">
+                        <div className="post-image">
+                          <Link href={post.detailsUrl} className="d-block">
+                            <Image
+                              src={post.image}
+                              alt={post.altText}
+                              layout="fill"
+                              className="img-fluid image"
+                            />
+                          </Link>
+                        </div>
+                        <div className="post-content">
+                          <ul className="meta">
+                            <li>
+                              <i className="ri-calendar-2-line"></i> {post.date}
+                            </li>
+                            <li>
+                              <i className="ri-user-voice-line"></i>
+                              <Link href={post.authorLink}>{post.author}</Link>
+                            </li>
+                          </ul>
+                          <h3>
+                            <Link href={post.detailsUrl}>{post.title}</Link>
+                          </h3>
+
+                          <p>{post.shortDesc}</p>
+
+                          <Link href={post.detailsUrl} className="default-btn">
+                            {post.btnText}{" "}
+                            <i className="ri-arrow-right-line"></i>
+                          </Link>
+                        </div>
+                      </div>
+                    </Col>
+                  ))}
+              </div>
+            </Col>
+
+            {/* <div className="col-lg-4 col-md-12">
+              <BlogSidebar />
+            </div> */}
+          </Row>
+        </Container>
+      </div>
+    </>
+  );
+};
+
+export default Blogs;