clean project sections and page and set pagination to projects

src/app/[locale]/projects/page.tsx

@@ -1,18 +1,18 @@
 import { IProjectCardProps } from '@/app/api/projects/data';
+import routeFactory from '@/assets/constants/routeFactory';
 import images from '@/assets/images/images';
 import InnerPageBanner from '@/components/layout/innerPages/banner';
-import ProjectsGrid from '@/components/pages/project/ProjectGrid';
+import SectionTitle from '@/components/layout/sectionTitle';
 import ProjectsGridView from '@/components/pages/project/projectGridView';
+import Button from '@/components/uikit/button';
 import { IPageParams } from '@/models/layout';
 import { getProjects } from '@/services/projects';
 import { getTranslations, setRequestLocale } from 'next-intl/server';
-import Head from 'next/head';
 
 export async function generateMetadata({ params }: { params: IPageParams }) {
   const { locale } = await params;
   setRequestLocale(locale);
   const t = await getTranslations({ locale });
-
   return {
     title: t('page_projects_metadata_title'),
     description: t('page_projects_metadata_description'),
@@ -25,15 +25,25 @@ export default async function ProjectsPage({
 }) {
   const { locale } = await params;
   const t = await getTranslations({ locale });
-  const projects: IProjectCardProps[] = await getProjects();
+  const projects = await getProjects();
+
   return (
     <main>
       <InnerPageBanner
         title={t('pages_projects_title')}
         imageSrc={images.aboutBanner.src}
       />
-      <div className="container-fluid mx-auto my-12 md:my-24">
-        <ProjectsGridView />
+      <div
+        id="projectList"
+        className="container-fluid mx-auto flex flex-col gap-10 py-12 md:py-24"
+      >
+        <h3 className="text-xl tracking-normal max-lg:hidden">
+          {t('page_projects_description')}
+        </h3>
+        <ProjectsGridView
+          initialProjects={projects.data}
+          initialPagination={projects.pagination}
+        />
       </div>
     </main>
   );