add project image placeholders

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

@@ -132,6 +132,11 @@ export default async function ProjectDetailPage({ params }: PageProps) {
                 height={630}
                 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">
+                  {currProject?.imageAlt || currProject?.name}
+                </span>
+              )}
             </div>
             <ProjectTags project={currProject} lang={lang} />
             <div className="flex w-full flex-col gap-5 text-base font-normal leading-relaxed">

components/project/project-card.tsx

@@ -53,7 +53,7 @@ export default function ProjectCard({
 }: ProjectCardProps & { lang: LocaleTypes }) {
   const router = useRouter()
 
-  const { id, image, links, name, tldr, tags } = project
+  const { id, image, links, name, tldr, tags, imageAlt } = project
 
   return (
     <div
@@ -61,13 +61,20 @@ export default function ProjectCard({
       className={cn(projectCardVariants({ showLinks, border, className }))}
     >
       {showBanner && (
-        <Image
-          src={`/project-banners/${image ? image : "fallback.webp"}`}
-          alt={`${name} banner`}
-          width={1200}
-          height={630}
-          className="min-h-[160px] w-full rounded-t-lg object-cover"
-        />
+        <div className="relative flex flex-col">
+          <Image
+            src={`/project-banners/${image ? image : "fallback.webp"}`}
+            alt={`${name} banner`}
+            width={1200}
+            height={630}
+            className="min-h-[160px] w-full rounded-t-lg object-cover"
+          />
+          {!image && (
+            <span className="w-full px-5 text-xl text-center font-bold text-black absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform">
+              {imageAlt || name}
+            </span>
+          )}
+        </div>
       )}
       <div className="flex h-full flex-col justify-between gap-5 rounded-b-lg bg-white p-5">
         <div className="flex flex-col justify-start gap-2">

data/projects/dsl-working-group.ts

@@ -8,6 +8,7 @@ export const dslWorkingGroup: ProjectInterface = {
   id: "dsl-working-group",
   projectStatus: "active",
   image: "",
+  imageAlt: "DSL Working Group",
   name: "DSL Working Group",
   tldr: "Exploration of languages for writing zk circuits",
   description,

data/projects/ecip-halo2.ts

@@ -1,24 +1,28 @@
-import { ProjectInterface } from "@/lib/types";
+import { ProjectInterface } from "@/lib/types"
 
 export const ECIPHalo2: ProjectInterface = {
-    id: "ecip-halo2",
-    image: "",
-    name: "ECIP (Elliptic Curve Inner Products) Halo 2 Implementation",
-    tldr: "Integrating Nova into the EVM involves wrapping Liam Eagen's theoretical ECIP argument in Halo 2",
-    description: `Liam Eagen has developed a ZK proof for Elliptic Curve Inner Products (ECIPs) to overcome a significant bottle neck in recursive proof composition over elliptic curve cycles. The p1rocess of integrating Nova into the EVM requires an efficient method or "argument" for handling large elliptic Multi-Scalar Multiplications (MSMs). The final step in this integration process involves wrapping this argument Halo 2.`,
-    projectStatus: 'active',
-    links: {
-        github: 'https://github.com/levs57/sage-circuits/',
-        website: 'https://perpetualpowersoftau.com/'
-    },
-    extraLinks: {
-        learn: [{
-            label: "Designing a plonk circuit for Liam Eagen's protocol",
-            url: 'https://hackmd.io/@levs57/r1n77YvP3'
-        },
-        {
-            label: 'ZKPs of Elliptic Curve Inner Products from Principal Divisors and Weil Reciprocity',
-            url: 'https://eprint.iacr.org/2022/596'
-        }],
-    },
+  id: "ecip-halo2",
+  image: "",
+  imageAlt: "ECIP + Halo 2",
+  name: "ECIP (Elliptic Curve Inner Products) Halo 2 Implementation",
+  tldr: "Integrating Nova into the EVM involves wrapping Liam Eagen's theoretical ECIP argument in Halo 2",
+  description: `Liam Eagen has developed a ZK proof for Elliptic Curve Inner Products (ECIPs) to overcome a significant bottle neck in recursive proof composition over elliptic curve cycles. The p1rocess of integrating Nova into the EVM requires an efficient method or "argument" for handling large elliptic Multi-Scalar Multiplications (MSMs). The final step in this integration process involves wrapping this argument Halo 2.`,
+  projectStatus: "active",
+  links: {
+    github: "https://github.com/levs57/sage-circuits/",
+    website: "https://perpetualpowersoftau.com/",
+  },
+  extraLinks: {
+    learn: [
+      {
+        label: "Designing a plonk circuit for Liam Eagen's protocol",
+        url: "https://hackmd.io/@levs57/r1n77YvP3",
+      },
+      {
+        label:
+          "ZKPs of Elliptic Curve Inner Products from Principal Divisors and Weil Reciprocity",
+        url: "https://eprint.iacr.org/2022/596",
+      },
+    ],
+  },
 }

lib/types.ts

@@ -33,6 +33,7 @@ export type ProjectStatusType = "active" | "inactive" | "archived"
 export interface ProjectInterface {
   id: string
   image: string
+  imageAlt?: string
   name: string
   tldr: string
   description: string