Improve page load times and rendering

app/components/cards/CaseStudy/CaseStudy.view.tsx

@@ -1,8 +1,10 @@
 "use client";
 
-import Image from "next/image";
 import { memo } from "react";
-import { caseStudyVisualPath, getAssetPath } from "../../../../lib/assetUtils";
+import type { ComponentType, SVGProps } from "react";
+import MutualAidArt from "../../../../public/assets/case-study/case-study-mutual-aid.svg";
+import FoodNotBombsArt from "../../../../public/assets/case-study/case-study-food-not-bombs.svg";
+import BoulderCountyStreetMedicsArt from "../../../../public/assets/case-study/case-study-boulder-county-street-medics.svg";
 import type { CaseStudyProps } from "./CaseStudy.types";
 
 const SURFACE_CLASS: Record<CaseStudyProps["surface"], string> = {
@@ -11,11 +13,23 @@ const SURFACE_CLASS: Record<CaseStudyProps["surface"], string> = {
   rose: "bg-[var(--color-surface-invert-brand-red)]",
 };
 
-/** Default art per tile: Figma-exported SVG composites (305×305 incl. rounded bg). */
-const SURFACE_ART: Record<CaseStudyProps["surface"], string> = {
-  lavender: getAssetPath(caseStudyVisualPath("lavender")),
-  neutral: getAssetPath(caseStudyVisualPath("neutral")),
-  rose: getAssetPath(caseStudyVisualPath("rose")),
+/**
+ * Inline SVGR components avoid the network round-trip the prior `next/image`
+ * version required, so the illustration paints with the colored tile shell.
+ */
+const SURFACE_ART: Record<
+  CaseStudyProps["surface"],
+  ComponentType<SVGProps<SVGSVGElement>>
+> = {
+  lavender: MutualAidArt,
+  neutral: FoodNotBombsArt,
+  rose: BoulderCountyStreetMedicsArt,
+};
+
+const SURFACE_ART_DATA_KEY: Record<CaseStudyProps["surface"], string> = {
+  lavender: "case-study-mutual-aid",
+  neutral: "case-study-food-not-bombs",
+  rose: "case-study-boulder-county-street-medics",
 };
 
 /** Figma: ~23px corner (“Card / CaseStudy” shells). */
@@ -27,6 +41,7 @@ function CaseStudyView({
   visual,
   className = "",
 }: CaseStudyProps) {
+  const Art = SURFACE_ART[surface];
   return (
     <div
       data-figma-node="21993-32352"
@@ -35,14 +50,13 @@ function CaseStudyView({
       {visual ? (
         <div className="flex size-full items-center justify-center p-2">{visual}</div>
       ) : (
-        <Image
-          src={SURFACE_ART[surface]}
-          alt={imageAlt}
+        <Art
+          role="img"
+          aria-label={imageAlt}
+          data-case-study-art={SURFACE_ART_DATA_KEY[surface]}
           width={305}
           height={305}
-          unoptimized
           className="pointer-events-none size-full select-none object-contain object-center"
-          draggable={false}
         />
       )}
     </div>