fix: blog card item styling & hero for others

public/assets/css/demo-slick/demo-slick.css

@@ -1,7 +1,7 @@
 .theme-slick {
   --font-global: "Plus Jakarta Sans", sans-serif;
   --font-alt: "Plus Jakarta Sans", sans-serif;
-  --section-padding-y: 130px;
+  --section-padding-y: 50px;
   --color-dark-1: #1e2432;
   --color-dark-2: #282e3c;
   --color-dark-3: #303747;

public/assets/css/style.css

@@ -172,7 +172,7 @@ Primary use: Multipurpose Template
   --font-serif: Georgia, "Times New Roman", Times, serif;
   --full-wrapper-margin-x: 30px;
   --container-width: 1350px;
-  --section-padding-y: 120px;
+  --section-padding-y: 50px;
   --menu-bar-height: 85px;
   --menu-bar-height-scrolled: 65px;
   --color-dark-1: #010101;
@@ -3105,7 +3105,6 @@ a.bg-video-button-pause {
   position: absolute;
   top: 0;
   right: 0;
-  width: 90.1875%;
 }
 .bg-shape-1 img {
   width: 100%;

public/assets/css/styles.css

@@ -7,17 +7,6 @@
 @import "./splitting.css";
 @import "./modal.css";
 @import "./YTPlayer.css";
-@import "./demo-main/demo-main.css";
-@import "./demo-bold/demo-bold.css";
-@import "./demo-brutalist/demo-brutalist.css";
-
-@import "./demo-corporate/demo-corporate.css";
-@import "./demo-elegant/demo-elegant.css";
-@import "./demo-fancy/demo-fancy.css";
-@import "./demo-gradient/demo-gradient.css";
-@import "./demo-modern/demo-modern.css";
 @import "./demo-slick/demo-slick.css";
-@import "./demo-strong/demo-strong.css";
-
 @import "./custom.css";
 @import "./style-responsive.css";

src/app/(main)/blog/page.tsx

@@ -1,8 +1,8 @@
 import { BeforeFooterBlock } from "@/components/Blocks/BeforeFooter";
 import { BlogCardItemSkeleton } from "@/components/Blogs/BlogCardItem";
 import Blogs from "@/components/Blogs/Blogs";
+import HeroOther from "@/components/HeroOther";
 import { sanitizePageNumber } from "@/utils/sanitize";
-import Image from "next/image";
 import { Suspense } from "react";
 
 export const metadata = {
@@ -18,23 +18,10 @@ export default async function BlogPage({ searchParams }: { searchParams?: Promis
 
   return (
     <>
-      <section className="page-section bg-dark-1 bg-gradient-gray-dark-1 light-content bg-scroll overflow-hidden">
-        {/* <!-- Background Shape --> */}
-        <div className="bg-shape-1 opacity-003">
-          <Image src="/assets/images/demo-fancy/bg-shape-1.svg" width={1443} height={844} alt="" />
-        </div>
-        {/* <!-- End Background Shape --> */}
+      <HeroOther title="Blog" />
 
-        <div className="container position-relative pt-sm-40 text-center">
-          <div className="row">
-            <div className="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
-              <h1 className="hs-title-10 mb-10 wow fadeInUp">Blog</h1>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      <div className="px-3 md:px-4 mt-4 lg:w-2/3 lg:mx-auto">
+      <section className="page-section" id="blog">
+        <div className="w-full px-[15px] md:px-[30px]">
           <form action="/blog" method="GET">
             <div className="input-group">
               <input
@@ -42,10 +29,10 @@ export default async function BlogPage({ searchParams }: { searchParams?: Promis
                 name="s"
                 defaultValue={paramsSearch ?? ""}
                 placeholder="Search blog..."
-              className="input-lg input-circle form-control"
+                className="input-lg input-circle form-control h-12"
               />
               <div className="input-group-append">
-              <button className="btn btn-info text-white" type="submit">
+                <button className="btn btn-info text-white h-12" type="submit">
                   Search
                 </button>
               </div>
@@ -53,7 +40,6 @@ export default async function BlogPage({ searchParams }: { searchParams?: Promis
           </form>
         </div>
 
-      <section className="page-section" id="blog">
         <Suspense fallback={<Loading />}>
           <Blogs page={page} search={paramsSearch} />
         </Suspense>
@@ -71,7 +57,6 @@ function Loading() {
         <BlogCardItemSkeleton />
         <BlogCardItemSkeleton />
         <BlogCardItemSkeleton />
-        <BlogCardItemSkeleton />
       </div>
     </div>
   );

src/components/Blogs/BlogCardItem.tsx

@@ -21,12 +21,12 @@ export function BlogCardItem({ data }: BlogCardItemProps) {
   return (
     <div className="post-prev-3 col-12 col-md-6 col-lg-4 col-xl-4 mt-50">
       <div className="post-prev-3-container flex flex-col">
-        <div>
+        <div className="relative w-full h-[200px]">
           <a href={`/${data.slug}/`}>
-            <Image width={684} height={454} src={data?.img?.url ?? ""} alt={data?.img?.alt ?? ""} />
+            <Image src={data?.img?.url ?? ""} alt={data?.img?.alt ?? ""} fill className="object-cover" />
           </a>
         </div>
-        <div className="px-4 py-3 h-full flex flex-col justify-between">
+        <div className="px-4 py-3 flex flex-col flex-1 justify-between">
           <h2 className="text-lg text-center">
             <a href={`/${data.slug}/`}>{data.title}</a>
           </h2>

src/components/Blogs/Blogs.tsx

@@ -16,7 +16,7 @@ export default async function Blogs({ page, search }: BlogsProps) {
   return (
     <div className="container position-relative">
       {/* Blog Posts Grid */}
-      <div className="row mt-n50 mb-50">
+      <div className="row">
         {/* Post Item */}
         {data.formattedData.map((blog, i) => (
           <BlogCardItem
@@ -35,12 +35,14 @@ export default async function Blogs({ page, search }: BlogsProps) {
       {/* End Blog Posts Grid */}
       {/* Pagination */}
       {data.totalPages > 1 && (
+        <div className="mt-20">
           <Pagination
             page={data.page ?? 1}
             hasNextPage={data.hasNextPage}
             hasPreviousPage={data.hasPrevPage}
             totalPages={data.totalPages}
           />
+        </div>
       )}
       {/* End Pagination */}
     </div>

src/components/HeroOther.tsx

@@ -0,0 +1,32 @@
+import Image from "next/image";
+
+export interface HeroOtherProps {
+  title: string;
+}
+
+export default function HeroOther({ title }: HeroOtherProps) {
+  return (
+    <section
+      className="page-section bg-dark-1 bg-gradient-gray-dark-1 light-content bg-scroll overflow-hidden !py-52 relative"
+      // style={{ clipPath: "ellipse(50% 100% at 50% 100%)" }}
+    >
+      {/* <!-- Background Shape --> */}
+      <div className="bg-shape-1 w-full h-full opacity-50">
+        <Image src="/assets/images/hero-default.webp" fill alt="" />
+      </div>
+      {/* <!-- End Background Shape --> */}
+
+      <div className="container position-relative pt-sm-40 text-center">
+        <div className="row">
+          <div className="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
+            <h1 className="hs-title-10 mb-10 wow fadeInUp">{title ?? ""}</h1>
+          </div>
+        </div>
+      </div>
+
+      <svg className="absolute bottom-0 left-0 w-full" viewBox="0 0 1440 50" xmlns="http://www.w3.org/2000/svg">
+        <path fill="white" d="M0,0 C480,40 960,40 1440,0 L1440,50 L0,50 Z"></path>
+      </svg>
+    </section>
+  );
+}

src/components/Pagination.tsx

@@ -1,7 +1,6 @@
 "use client";
 
-import { usePathname, useRouter } from "next/navigation";
-import React from "react";
+import { usePathname } from "next/navigation";
 
 interface PaginationProps {
   page: number;
@@ -12,7 +11,6 @@ interface PaginationProps {
 
 export default function Pagination({ page, hasPreviousPage, hasNextPage, totalPages }: PaginationProps) {
   const activePage = page;
-  const router = useRouter();
   const pathName = usePathname();
 
   // Function to handle page change
@@ -23,8 +21,7 @@ export default function Pagination({ page, hasPreviousPage, hasNextPage, totalPa
     const url = new URL(window.location.href);
     const searchParams = new URLSearchParams(url.search);
     searchParams.set("page", `${page}`);
-
-    router.push(`${pathName}/?${searchParams}`);
+    window.location.href = `${pathName}/?${searchParams}`;
   };
 
   const getPageNumbers = () => {