update project api and page, set pagination in blog and create content generator component, create blog single page, ui fix

src/components/pages/project/ProjectGrid.tsx

@@ -17,11 +17,11 @@ export default function ProjectsGrid({
 
   return (
     <div
-      className={`grid grid-cols-1 gap-8 md:grid-cols-2 md:gap-12 xl:grid-cols-3 xl:gap-18 ${className}`}
+      className={`grid grid-cols-1 gap-6 md:grid-cols-2 md:gap-8 xl:grid-cols-3 xl:gap-10 ${className}`}
     >
       {projects.map((project, index) => (
-        <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">
+        <div className="group flex flex-col gap-3 overflow-hidden bg-white md:gap-5">
+          <div className="relative aspect-[1.4] w-full overflow-hidden rounded-2xl">
             <Image
               src={project.imageSrc}
               alt={project.title}
@@ -38,9 +38,9 @@ export default function ProjectsGrid({
           <Link
             href={'/'}
             key={index}
-            className="group-hover:text-primary text-center text-gray-500"
+            className="group-hover:text-primary mb-4 text-center text-gray-500"
           >
-            <h2 className="text-xl font-semibold">{project.title}</h2>
+            <h2 className="text-base font-medium">{project.title}</h2>
           </Link>
         </div>
       ))}

src/components/pages/project/projectGridView.tsx

@@ -14,8 +14,6 @@ export default function ProjectsGridView({
   const [pagination, setPagination] = useState(initialPagination);
 
   const fetchPage = (page: number) => {
-    console.log(page);
-
     getProjects(page)
       .then((res) => {
         setProjects(res.data);