clean project sections and page and set pagination to projects

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>
   );