add project details page

components/project/discover-more-projects.tsx

@@ -36,20 +36,28 @@ export default function DiscoverMoreProjects({ project, lang }: ProjectProps) {
   const suggestedProject = getSuggestedProjects()
 
   return (
-    <div className="flex w-full flex-col items-center justify-center gap-14 bg-anakiwa-200 px-6 py-32 md:px-0">
-      <h2 className="text-center text-3xl font-bold">{t("discoverMore")}</h2>
-      <div className="flex flex-col gap-5 md:flex-row">
-        {suggestedProject?.map((project: ProjectInterface) => (
-          <ProjectCard project={project} lang={lang} />
-        ))}
+    <div className="w-full bg-anakiwa-300">
+      <div className="bg-classic-gradient">
+        <div className="mx-auto flex w-full max-w-[644px] flex-col items-center justify-center gap-14 px-6 py-16 md:px-0">
+          <h2 className="text-center text-3xl font-bold">
+            {t("discoverMore")}
+          </h2>
+          <div className="grid grid-cols-1 flex-col gap-5 md:grid-cols-2 md:flex-row">
+            {suggestedProject?.map((project: ProjectInterface) => (
+              <ProjectCard border project={project} lang={lang} />
+            ))}
+          </div>
+          <Link
+            className="flex items-center gap-2 text-tuatara-950/80 hover:text-tuatara-950"
+            href={`/${lang}/projects`}
+          >
+            <Icons.arrowLeft />
+            <span className="font-sans text-base">
+              {t("backToProjectLibrary")}
+            </span>
+          </Link>
+        </div>
       </div>
-      <Link
-        className="flex items-center gap-2 text-tuatara-950/80 hover:text-tuatara-950"
-        href={`/${lang}/projects`}
-      >
-        <Icons.arrowLeft />
-        <span className="font-sans text-base">{t("backToProjectLibrary")}</span>
-      </Link>
     </div>
   )
 }

components/project/project-card.tsx

@@ -118,7 +118,7 @@ export default function ProjectCard({
             </div>
           )}
           {projectNotActive && (
-            <span className="text-sm font-medium italic leading-[21px] text-tuatara-400">
+            <span className="ml-auto text-sm font-medium italic leading-[21px] text-tuatara-400">
               {t("notCurrentlyActive")}
             </span>
           )}

components/project/project-detail-tags.tsx

@@ -13,6 +13,7 @@ import { LocaleTypes } from "@/app/i18n/settings"
 
 import { CategoryTag } from "../ui/categoryTag"
 import { ThemesStatusMapping } from "./project-filters-bar"
+import { ProjectSectionLabelMapping } from "./project-list"
 
 interface TagsProps extends HtmlHTMLAttributes<HTMLDivElement> {
   label: string
@@ -72,6 +73,13 @@ export function ProjectTags({ project, lang }: IProjectTags) {
           </div>
         </CategoryTag>
       </TagsWrapper>
+      <TagsWrapper label={t("filterLabels.fundingSource")}>
+        <CategoryTag variant="gray" size="default">
+          <div className="flex items-center gap-1">
+            {ProjectSectionLabelMapping[project?.section]}
+          </div>
+        </CategoryTag>
+      </TagsWrapper>
     </div>
   )
 }

components/project/project-list.tsx

@@ -35,7 +35,7 @@ const NoResults = ({ lang }: LangProps["params"]) => {
   )
 }
 
-const ProjectSectionLabelMapping: Record<ProjectSection, string> = {
+export const ProjectSectionLabelMapping: Record<ProjectSection, string> = {
   pse: "PSE projects",
   grant: "Grants",
   collaboration: "Collaborations",