api project

src/components/pages/home/Projects.tsx

@@ -1,65 +1,32 @@
-import images from '@/assets/images/images';
 import SectionTitle from '@/components/layout/sectionTitle';
-import { getProductCategories } from '@/services/products';
-import Link from 'next/link';
-import routeFactory from '@/assets/constants/routeFactory';
 import { getTranslations } from 'next-intl/server';
 import { TLocales } from '@/models/layout';
-import { getProjectCategories } from '@/services/projects';
+import { getProjects } from '@/services/projects';
 import { IProjectCardProps } from '../project/project';
-
+import ProjectsGrid from '../project/ProjectGrid';
 interface Props {
   locale: TLocales;
 }
-
 export default async function HomePageProjects({ locale }: Props) {
   const t = await getTranslations({ locale });
-
-  // const projectCategories: IProjectCardProps[] = await getProjectCategories();
-  const routes = routeFactory(t, locale);
-
+  const projects: IProjectCardProps[] = await getProjects();
   return (
     <div className="w-full">
       <div
-        className={`relative w-full bg-white bg-cover bg-fixed bg-center bg-no-repeat pt-28 pb-48`}
-        // style={{ backgroundImage: `url(${images.homeProductBack.src})` }}
+        className={`relative w-full bg-white bg-cover bg-fixed bg-center bg-no-repeat pt-28`}
       >
-        <div className="absolute inset-0 z-10 bg-black opacity-50" />
         <div className="relative z-20 container mx-auto grid grid-cols-2 gap-28">
           <SectionTitle
-            title={t('pages_product_categories_title')}
-            description={t('com_home_products_title')}
-            reverseColor
+            title={t('pages_projects_title')}
+            description={t('com_home_projects_title')}
+            description_bold={t('com_home_projects_title_bold')}
           />
-          <h4 className="pt-10 text-base font-extralight tracking-normal text-white">
-            {t('com_home_products_description')}
+          <h4 className="pt-10 text-base font-extralight tracking-normal">
+            {t('com_home_projects_description')}
           </h4>
         </div>
-      </div>
 
-      <div className="relative top-[-100px] z-20 container mx-auto w-full">
-        {/* <div className="grid grid-cols-1 gap-8 rounded-4xl bg-gray-50 py-10 shadow-2xl md:grid-cols-2 lg:grid-cols-4">
-          {projectCategories.map((category, index) => (
-            <Link
-              href={'#'}
-              key={index}
-              // href={routes.products.route(index)}
-            >
-              <div
-                className={`flex flex-col items-center justify-center gap-4 p-6 text-center ${index ? 'border-s-[1px] border-gray-100' : ''}`}
-              >
-                <h3 className="text-xl font-bold text-gray-500">
-                  {category.title}
-                </h3>
-                {/* <p className="text-lg font-light text-gray-400">
-                  {t('com_products_category_types_count', {
-                    count: category.typesCount,
-                  })}
-                </p> 
-              </div>
-            </Link>
-          ))} 
-        </div>*/}
+        <ProjectsGrid projects={projects?.slice(-4)} />
       </div>
     </div>
   );

src/components/pages/project/ProjectGrid.tsx

@@ -1,42 +1,9 @@
-import images from '@/assets/images/images';
 import Image from 'next/image';
 import Link from 'next/link';
 import { IProjectCardProps } from './project';
+import { getProjects } from '@/services/projects';
 
-const projects = [
-  {
-    title: 'Sustainable Practices Reducing Waste in Industrial Production',
-    imageSrc: images.projectImg_1.src,
-    link: '#',
-  },
-  {
-    title: 'Advanced Robotics Revolutionizing Industrial Workflows',
-    imageSrc: images.projectImg_1.src,
-    link: '#',
-  },
-  {
-    title: 'Top Benefits of the Robotics in Manufacturing',
-    imageSrc: images.projectImg_1.src,
-    link: '#',
-  },
-  {
-    title: 'Leveraging Data Analytics for Smarter Production',
-    imageSrc: images.projectImg_1.src,
-    link: '#',
-  },
-  {
-    title: 'Reducing Operational Costs Through Automation',
-    imageSrc: '/images/post5.jpg',
-    link: '#',
-  },
-  {
-    title: 'The Advantages of Customized Manufacturing Solutions',
-    imageSrc: '/images/post6.jpg',
-    link: '#',
-  },
-] as IProjectCardProps[];
-
-export default function ProjectsGrid() {
+export default async function ProjectsGrid({ projects }) {
   return (
     <div className="container mx-auto grid grid-cols-1 gap-6 px-4 py-14 md:grid-cols-2 md:py-28">
       {projects.map((project, index) => (
@@ -45,7 +12,7 @@ export default function ProjectsGrid() {
           key={index}
           className="overflow-hidden bg-white"
         >
-          <div className="relative aspect-[1.09] w-full overflow-hidden rounded-4xl">
+          <div className="relative aspect-[1.4] w-full overflow-hidden rounded-4xl">
             <Image
               src={project.imageSrc}
               alt={project.title}

src/components/pages/project/projectGridView.tsx

@@ -0,0 +1,14 @@
+import { getProjects } from '@/services/projects';
+import { IProjectCardProps } from './project';
+import ProjectsGrid from './ProjectGrid';
+
+export default async function ProjectsGridView() {
+  const projects: IProjectCardProps[] = await getProjects();
+
+  return (
+    <>
+      <ProjectsGrid projects={projects} />
+      {/* <Pagination {...pagination} onPageChange={fetchPage} /> */}
+    </>
+  );
+}