blog page structure updated

app/(blogs)/news-grid/page.jsx

@@ -1,7 +1,7 @@
 import Blogs from "@/components/blogs/Blogs";
 import Brands from "@/components/common/Brands";
 import Footer1 from "@/components/footers/Footer1";
-import Header2 from "@/components/headers/Header2";
+import Header1 from "@/components/headers/Header1";
 import Image from "next/image";
 import Link from "next/link";
 export const metadata = {
@@ -11,25 +11,25 @@ export const metadata = {
 export default function page() {
   return (
     <>
-      <Header2 />
+      <Header1 />
       <div
         className="breadcrumb-wrapper bg-cover"
         style={{ backgroundImage: 'url("/assets/img/breadcrumb-bg.jpg")' }}
       >
-        <div className="shape-image float-bob-y">
+        {/* <div className="shape-image float-bob-y">
           <Image
             src="/assets/img/vector.png"
             width={84}
             height={186}
             alt="img"
           />
-        </div>
+        </div> */}
         <div className="container">
           <div className="breadcrumb-wrapper-items">
             <div className="page-heading">
               <div className="breadcrumb-sub-title">
                 <h1 className="wow fadeInUp" data-wow-delay=".3s">
-                  Blogs Grid
+                  Blog
                 </h1>
               </div>
               <ul
@@ -42,11 +42,11 @@ export default function page() {
                 <li>
                   <i className="fa-sharp fa-solid fa-slash-forward" />
                 </li>
-                <li>Blogs Grid</li>
+                <li>Blog</li>
               </ul>
             </div>
             <div className="breadcrumb-image">
-              <Image
+              {/* <Image
                 src="/assets/img/breadcrumb-image.png"
                 width={540}
                 height={450}
@@ -60,15 +60,15 @@ export default function page() {
                   height={604}
                   alt="img"
                 />
-              </div>
+              </div> */}
             </div>
           </div>
         </div>
       </div>
       <Blogs />
-      <div className="brand-section fix section-padding pt-0">
+      {/* <div className="brand-section fix section-padding pt-0">
         <Brands />
-      </div>
+      </div> */}
       <Footer1 />
     </>
   );

components/blogs/Blogs.jsx

@@ -1,14 +1,15 @@
 import React from "react";
 import Pagination from "../common/Pagination";
-import { newsItems3 } from "@/data/blogs";
+import { BlogData } from "@/utlis/constant.utils";
 import Link from "next/link";
 import Image from "next/image";
+
 export default function Blogs() {
   return (
     <section className="news-section fix section-padding">
       <div className="container">
         <div className="row g-4">
-          {newsItems3.map((news) => (
+          {BlogData.map((news) => (
             <div
               key={news.id}
               className={`col-xl-4 col-lg-6 col-md-6 wow fadeInUp ${
@@ -34,7 +35,9 @@ export default function Blogs() {
                     <li>{news.date}</li>
                   </ul>
                   <h4>
-                    <Link href={`/news-details/${news.id}`}>{news.title}</Link>
+                    <Link href={`/news-details/${news.slug}`}>
+                      {news.title}
+                    </Link>
                   </h4>
                   <div className="author-items">
                     <div className="author-info">
@@ -50,7 +53,7 @@ export default function Blogs() {
                       </div>
                     </div>
                     <Link
-                      href={`/news-details/${news.id}`}
+                      href={`/news-details/${news.slug}`}
                       className="link-btn"
                     >
                       Read More <i className="fa-solid fa-arrow-right" />
@@ -61,14 +64,6 @@ export default function Blogs() {
             </div>
           ))}
         </div>
-        <div
-          className="page-nav-wrap pt-5 text-center wow fadeInUp"
-          data-wow-delay=".3s"
-        >
-          <ul>
-            <Pagination />
-          </ul>
-        </div>
       </div>
     </section>
   );

data/blogs.js

@@ -63,9 +63,9 @@ export const newsItems2 = [
   },
 ];
 
-export const newsItems3 = [
+export const BlogData = [
   {
-    id: 7,
+    slug: "latest-work-disapproved-supervisor",
     images: ["/assets/img/news/04.jpg", "/assets/img/news/04.jpg"],
     category: "Construction",
     date: "07 July 2024",
@@ -77,7 +77,7 @@ export const newsItems3 = [
     delay: ".2s",
   },
   {
-    id: 8,
+    slug: "manager-disapproved-most-recent-work",
     images: ["/assets/img/news/05.jpg", "/assets/img/news/05.jpg"],
     category: "Building",
     date: "07 July 2024",
@@ -90,7 +90,7 @@ export const newsItems3 = [
     active: true,
   },
   {
-    id: 9,
+    slug: "manager-found-latest-work-unsatisfactory",
     images: ["/assets/img/news/06.jpg", "/assets/img/news/06.jpg"],
     category: "Industry",
     date: "07 July 2024",
@@ -101,42 +101,6 @@ export const newsItems3 = [
     },
     delay: ".6s",
   },
-  {
-    id: 10,
-    images: ["/assets/img/news/07.jpg", "/assets/img/news/07.jpg"],
-    category: "Industry",
-    date: "07 July 2024",
-    title: "Manager Found Latest Work Unsatisfactory.",
-    author: {
-      name: "Guy Hawkins",
-      image: "/assets/img/news/author-3.png",
-    },
-    delay: ".2s",
-  },
-  {
-    id: 11,
-    images: ["/assets/img/news/08.jpg", "/assets/img/news/08.jpg"],
-    category: "Industry",
-    date: "07 July 2024",
-    title: "Manager Found Latest Work Unsatisfactory.",
-    author: {
-      name: "Guy Hawkins",
-      image: "/assets/img/news/author-3.png",
-    },
-    delay: ".4s",
-  },
-  {
-    id: 12,
-    images: ["/assets/img/news/09.jpg", "/assets/img/news/09.jpg"],
-    category: "Industry",
-    date: "07 July 2024",
-    title: "Manager Found Latest Work Unsatisfactory.",
-    author: {
-      name: "Guy Hawkins",
-      image: "/assets/img/news/author-3.png",
-    },
-    delay: ".6s",
-  },
 ];
 
 export const newsItems4 = [
@@ -202,7 +166,6 @@ export const allNews = [
   ...newsItems,
   ...newsImageItems,
   ...newsItems2,
-  ...newsItems3,
   ...newsItems4,
   ...recentItems,
 ];

public/assets/scss/_news.scss

@@ -235,7 +235,7 @@
     }
 
     &:hover,&.active {
-        background-color: $header-color;
+        background-color: #0b2273;
 
         .news-image {
             img {