clean project sections and page and set pagination to projects

src/components/layout/header/index.tsx

@@ -22,7 +22,7 @@ export default function Header() {
 
   return (
     <header
-      className="relative w-full bg-cover bg-right bg-no-repeat text-white md:h-screen"
+      className="relative w-full overflow-hidden bg-cover bg-right bg-no-repeat text-white md:h-screen"
       style={{ backgroundImage: `url(${images.homeBanner.src})` }}
     >
       <div className="absolute inset-0 z-0 bg-black opacity-50 blur-[100px]" />

src/components/layout/pagination/index.tsx

@@ -23,7 +23,7 @@ export default function Pagination({
     pages.push(i);
   }
 
-  return (
+  return pages.length ? (
     <nav
       className={`mt-8 flex items-center justify-center gap-2 ${className || ''}`}
     >
@@ -51,5 +51,7 @@ export default function Pagination({
         &gt;
       </IconButton>
     </nav>
+  ) : (
+    <></>
   );
 }

src/components/pages/about/TopInfo.tsx

@@ -29,7 +29,6 @@ export default function AboutTopInfo() {
       </div>
       <div className="relative z-20 container mx-auto grid grid-cols-1 items-stretch gap-10 lg:grid-cols-2">
         <div className="lg:hidden">
-          {' '}
           <div>
             <SectionTitle
               title={t('pages_about_title')}
@@ -88,7 +87,7 @@ export default function AboutTopInfo() {
               <AchievementTextBox key={index} title={title} />
             ))}
           </div>
-          <div className="mt-10">
+          <div className="mt-10 max-md:mx-auto">
             <Button endIcon="showMore" link={routes.contact.route()}>
               {t('pages_contact_title')}
             </Button>

src/components/pages/home/Projects.tsx

@@ -4,30 +4,51 @@ import { TLocales } from '@/models/layout';
 import { getProjects } from '@/services/projects';
 import { IProjectCardProps } from '../project/project';
 import ProjectsGrid from '../project/ProjectGrid';
+import Button from '@/components/uikit/button';
+import routeFactory from '@/assets/constants/routeFactory';
 interface Props {
   locale: TLocales;
 }
 export default async function HomePageProjects({ locale }: Props) {
   const t = await getTranslations({ locale });
-  const projects: IProjectCardProps[] = await getProjects();
+  const projects = await getProjects();
+  console.log(projects);
+
+  const routes = routeFactory(t, locale);
   return (
     <div className="w-full">
       <div
-        className={`relative w-full bg-white bg-cover bg-fixed bg-center bg-no-repeat pt-28 max-lg:pt-6`}
+        className={`relative container mx-auto w-full bg-white bg-cover bg-fixed bg-center bg-no-repeat pt-28 max-lg:pt-6`}
       >
-        <div className="relative z-20 container mx-auto grid grid-cols-1 lg:grid-cols-2 lg:gap-28">
+        <div className="relative z-20 grid grid-cols-1 lg:grid-cols-2 lg:gap-28">
           <SectionTitle
             title={t('pages_projects_title')}
             description={t('com_home_projects_title')}
             description_bold={t('com_home_projects_title_bold')}
             locale={locale}
           />
-          <h4 className="pt-10 text-base font-extralight tracking-normal max-lg:hidden">
-            {t('com_home_projects_description')}
-          </h4>
+          <div className="pt-10 max-lg:hidden">
+            <h4 className="text-base font-extralight tracking-normal max-lg:hidden">
+              {t('com_home_projects_description')}
+            </h4>
+            <Button
+              link={routes.projects.route()}
+              endIcon="showMore"
+              className="mt-5"
+            >
+              {t('com_home_projects_show_more')}
+            </Button>
+          </div>
         </div>
 
-        <ProjectsGrid projects={projects?.slice(-4)} />
+        <ProjectsGrid projects={projects.data?.slice(3)} className="mt-10" />
+        <Button
+          link={routes.projects.route()}
+          endIcon="showMore"
+          className="mx-auto mt-5 lg:hidden"
+        >
+          {t('com_home_projects_show_more')}
+        </Button>
       </div>
     </div>
   );

src/components/pages/project/ProjectGrid.tsx

@@ -1,17 +1,26 @@
+'use client';
+
 import Image from 'next/image';
 import Link from 'next/link';
 import { IProjectCardProps } from './project';
-import { getProjects } from '@/services/projects';
+import Button from '@/components/uikit/button';
+import { useTranslations } from 'next-intl';
 
-export default async function ProjectsGrid({
+export default function ProjectsGrid({
   projects,
+  className = '',
 }: {
   projects: IProjectCardProps[];
+  className?: string;
 }) {
+  const t = useTranslations();
+
   return (
-    <div className="container mx-auto grid grid-cols-1 gap-6 px-4 pt-12 pb-0 md:grid-cols-2 md:py-28">
+    <div
+      className={`grid grid-cols-1 gap-8 md:grid-cols-2 md:gap-12 xl:grid-cols-3 xl:gap-18 ${className}`}
+    >
       {projects.map((project, index) => (
-        <Link href={'/'} key={index} className="overflow-hidden bg-white">
+        <div className="group flex flex-col gap-4 overflow-hidden bg-white md:gap-6">
           <div className="relative aspect-[1.4] w-full overflow-hidden rounded-4xl">
             <Image
               src={project.imageSrc}
@@ -19,12 +28,21 @@ export default async function ProjectsGrid({
               fill
               className="h-auto w-full object-cover"
             />
+            <div className="invisible absolute inset-0 flex items-center justify-center bg-black/20 opacity-0 backdrop-blur-xs transition-all group-hover:visible group-hover:opacity-100">
+              <Button endIcon="showMore">
+                {t('com_home_projects_details_CTA')}
+              </Button>
+            </div>
           </div>
 
-          <div className="py-7 text-center">
-            <h2 className="mb-5 text-xl font-semibold">{project.title}</h2>
-          </div>
-        </Link>
+          <Link
+            href={'/'}
+            key={index}
+            className="group-hover:text-primary text-center text-gray-500"
+          >
+            <h2 className="text-xl font-semibold">{project.title}</h2>
+          </Link>
+        </div>
       ))}
     </div>
   );

src/components/pages/project/project.d.ts

@@ -3,3 +3,8 @@ export interface IProjectCardProps {
   title: string;
   link: string;
 }
+
+export interface IProjectGridViewProps {
+  initialProjects: IProjectCardProps[];
+  initialPagination: IPagination;
+}

src/components/pages/project/projectGridView.tsx

@@ -1,14 +1,39 @@
-import { getProjects } from '@/services/projects';
-import { IProjectCardProps } from './project';
-import ProjectsGrid from './ProjectGrid';
+'use client';
 
-export default async function ProjectsGridView() {
-  const projects: IProjectCardProps[] = await getProjects();
+import { getProjects } from '@/services/projects';
+import { IProjectGridViewProps } from './project';
+import ProjectsGrid from './ProjectGrid';
+import Pagination from '@/components/layout/pagination';
+import { useState } from 'react';
+
+export default function ProjectsGridView({
+  initialProjects,
+  initialPagination,
+}: IProjectGridViewProps) {
+  const [projects, setProjects] = useState(initialProjects);
+  const [pagination, setPagination] = useState(initialPagination);
+
+  const fetchPage = (page: number) => {
+    console.log(page);
+
+    getProjects(page)
+      .then((res) => {
+        setProjects(res.data);
+        setPagination(res.pagination);
+
+        document
+          .getElementById('projectList')
+          ?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      })
+      .catch((error) => {
+        console.error('Failed to fetch Projects:', error);
+      });
+  };
 
   return (
     <>
-      <ProjectsGrid projects={projects} />
-      {/* <Pagination {...pagination} onPageChange={fetchPage} /> */}
+      {projects?.length ? <ProjectsGrid projects={projects} /> : <></>}
+      <Pagination {...pagination} onPageChange={fetchPage} />
     </>
   );
 }