Add replaceable images, category mega menu, and contact pages.

Give every placeholder a real img src, add FAQ and contact sections, and put categories first in the header.

Co-authored-by: Cursor <cursoragent@cursor.com>

src/components/Placeholder.tsx

@@ -1,41 +1,29 @@
-import type { Tone } from "@/data/content";
-
-const tones: Record<Tone, string> = {
-  purple: "bg-purple-200 from-purple-300 via-purple-200 to-purple-100 text-purple-800",
-  cyan: "bg-cyan-100 from-cyan-300 via-cyan-200 to-cyan-100 text-cyan-800",
-  rose: "bg-rose-100 from-rose-300 via-rose-200 to-rose-100 text-rose-700",
-};
-
 type Props = {
+  src: string;
+  alt?: string;
   width: number;
   height: number;
-  tone?: Tone;
   className?: string;
   rounded?: string;
   fill?: boolean;
-  showSize?: boolean;
 };
 
 export function Placeholder({
+  src,
+  alt = "",
   width,
   height,
-  tone = "purple",
   className = "",
   rounded = "rounded-2xl",
   fill = false,
-  showSize = true,
 }: Props) {
   return (
-    <div
-      className={`placeholder-grid relative flex flex-col items-center justify-center overflow-hidden bg-linear-to-br ${tones[tone]} ${rounded} ${className}`}
-      style={fill ? undefined : { aspectRatio: `${width} / ${height}` }}
-      aria-hidden
-    >
-      {showSize ? (
-        <span className="font-display text-lg font-semibold tracking-wide sm:text-xl">
-          {width} × {height}
-        </span>
-      ) : null}
-    </div>
+    <img
+      src={src}
+      alt={alt}
+      width={width}
+      height={height}
+      className={`block w-full object-cover ${fill ? "h-full" : "h-auto"} ${rounded} ${className}`}
+    />
   );
 }