src/widgets/ProjectsSection/ui/ProjectsSection/ProjectsSection.tsx

@@ -1,19 +1,7 @@
 import { ProjectCard } from '$entities/project';
 import type { ProjectRecord } from '$shared/api';
 import { getCollection } from '$shared/api';
-
-/** Base URL for PocketBase file storage */
-const PB_URL = process.env.NEXT_PUBLIC_PB_URL || 'http://127.0.0.1:8090';
-
-/**
- * Builds a PocketBase file URL for a project image.
- */
-function buildImageUrl(project: ProjectRecord): string | undefined {
-  if (!project.image) {
-    return undefined;
-  }
-  return `${PB_URL}/api/files/${project.collectionId}/${project.id}/${project.image}`;
-}
+import { buildFileUrl } from '$shared/lib';
 
 /**
  * Projects section component.
@@ -25,7 +13,7 @@ export default async function ProjectsSection() {
   });
 
   return (
-    <div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-section">
+    <div className="space-y-6 max-w-section">
       {items.map((project) => (
         <ProjectCard
           key={project.id}
@@ -33,7 +21,8 @@ export default async function ProjectsSection() {
           year={project.year}
           description={project.description}
           tags={project.stack}
-          imageUrl={buildImageUrl(project)}
+          url={project.url}
+          imageUrl={project.image ? buildFileUrl(project.collectionId, project.id, project.image) : undefined}
         />
       ))}
     </div>