add project details page

app/[lang]/projects/[id]/page.tsx

@@ -63,9 +63,9 @@ export default async function ProjectDetailPage({ params }: PageProps) {
   const hasSocialLinks = Object.keys(currProject?.links ?? {}).length > 0
 
   return (
-    <section className="flex flex-col items-center">
-      <div className="flex w-full flex-col items-center justify-center gap-5 bg-anakiwa-100 px-6 py-16 md:px-0">
-        <div className=" w-full md:w-[700px]">
+    <section className="flex flex-col items-center bg-project-page-gradient">
+      <div className="flex w-full flex-col items-center justify-center gap-5 px-6 py-16 md:px-0">
+        <div className=" w-full md:max-w-[644px]">
           <div className="flex flex-col">
             <div className="flex flex-col gap-6 text-left">
               <Link
@@ -119,9 +119,10 @@ export default async function ProjectDetailPage({ params }: PageProps) {
                 )}
               </div>
             )}
+            <div className="mt-6 h-[1px] w-full bg-anakiwa-300"></div>
           </div>
 
-          <div className="mt-[50px] flex w-full flex-col gap-6 md:w-[700px]">
+          <div className="mt-[50px] flex w-full flex-col gap-6">
             <div className="relative flex items-center justify-center overflow-hidden rounded-lg">
               <Image
                 src={`/project-banners/${
@@ -133,7 +134,7 @@ export default async function ProjectDetailPage({ params }: PageProps) {
                 className="w-full rounded-t-lg object-cover"
               />
               {!currProject?.image && (
-                <span className="w-full px-5 text-3xl text-center font-bold text-black absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform">
+                <span className="absolute left-1/2 top-1/2 w-full -translate-x-1/2 -translate-y-1/2 transform px-5 text-center text-3xl font-bold text-black">
                   {currProject?.imageAlt || currProject?.name}
                 </span>
               )}

app/i18n/locales/en/common.json

@@ -28,7 +28,8 @@
     "keywords": "Keywords",
     "builtWith": "Built with",
     "themes": "Themes selected",
-    "projectStatus": "Project status"
+    "projectStatus": "Project status",
+    "fundingSource": "Funding source"
   },
   "error": {
     "404": {

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",

lib/types.ts

@@ -35,7 +35,12 @@ export type ProjectLinkWebsite =
 
 export type ProjectLinkType = Partial<Record<ProjectLinkWebsite, string>>
 export type ProjectExtraLinkType = "buildWith" | "play" | "research" | "learn"
-export type TagType = "types" | "themes" | "builtWith" | "keywords"
+export type TagType =
+  | "types"
+  | "themes"
+  | "builtWith"
+  | "keywords"
+  | "fundingSource"
 export type ProjectTags = Partial<Record<TagType, string[]>>
 export type ActionLinkTypeLink = {
   label: string

state/useProjectFiltersState.ts

@@ -8,7 +8,11 @@ import { uniq } from "@/lib/utils"
 import { LocaleTypes, fallbackLng } from "@/app/i18n/settings"
 
 export type ProjectSortBy = "random" | "asc" | "desc" | "relevance"
-export type ProjectFilter = "keywords" | "builtWith" | "themes"
+export type ProjectFilter =
+  | "keywords"
+  | "builtWith"
+  | "themes"
+  | "fundingSource"
 export type FiltersProps = Record<ProjectFilter, string[]>
 export const DEFAULT_PROJECT_SORT_BY: ProjectSortBy = "asc"
 interface ProjectInterfaceScore extends ProjectInterface {
@@ -33,10 +37,13 @@ export const FilterLabelMapping = (
     keywords: t("filterLabels.keywords"),
     builtWith: t("filterLabels.builtWith"),
     themes: t("filterLabels.themes"),
+    fundingSource: t("filterLabels.fundingSource"),
   }
 }
 
-export const FilterTypeMapping: Record<ProjectFilter, "checkbox" | "button"> = {
+export const FilterTypeMapping: Partial<
+  Record<ProjectFilter, "checkbox" | "button">
+> = {
   keywords: "checkbox",
   builtWith: "checkbox",
   themes: "button",
@@ -83,6 +90,7 @@ const getProjectFilters = (): FiltersProps => {
     themes: ["play", "build", "research"],
     keywords: [],
     builtWith: [],
+    fundingSource: [],
   }
 
   // get list of all tags from project list

tailwind.config.js

@@ -25,7 +25,8 @@ module.exports = {
         "second-gradient":
           "radial-gradient(56.07% 115.65% at 93.66% 158.94%, #D0F8F1 0%, #D1F3FF 18.23%, #ECF8FF 51.28%, #E1FFFA 80.21%, #D0F2FF 93.23%)",
 
-        "classic-gradient": "radial-gradient(325.52% 79.63% at 100% -0.02%, #FFF 0%, rgba(255, 255, 255, 0.00) 100%), radial-gradient(205.45% 61.89% at 2.34% 99.98%, #FFF 0%, rgba(255, 255, 255, 0.00) 100%)"
+        "classic-gradient": "radial-gradient(325.52% 79.63% at 100% -0.02%, #FFF 0%, rgba(255, 255, 255, 0.00) 100%), radial-gradient(205.45% 61.89% at 2.34% 99.98%, #FFF 0%, rgba(255, 255, 255, 0.00) 100%)",
+        "project-page-gradient": "linear-gradient(180deg, #C2E8F5 -17.44%, #FFF 17.72%)"
       },
       colors: {
         corduroy: "#4A5754",