fix(extra) : show text colors and catalog items

components/public/structured-guide.tsx

@@ -1,7 +1,7 @@
 import Image from "next/image";
 import Link from "next/link";
 import { ArrowUpRightIcon, ChevronLeftIcon } from "lucide-react";
-import type { ReactNode } from "react";
+import type { CSSProperties, ReactNode } from "react";
 
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -1180,7 +1180,16 @@ function ExtraSectionContent({
           <Card
             key={row.id}
             className="overflow-hidden py-0"
-            style={row.backgroundColor ? { backgroundColor: row.backgroundColor } : undefined}
+            style={
+              {
+                backgroundColor: row.backgroundColor ?? undefined,
+                color: row.textColor ?? undefined,
+                "--tw-prose-body": row.textColor ?? undefined,
+                "--tw-prose-bold": row.textColor ?? undefined,
+                "--tw-prose-headings": row.textColor ?? undefined,
+                "--tw-prose-links": row.textColor ?? undefined,
+              } as CSSProperties
+            }
           >
             {row.imageUrl ? (
               <div
@@ -1219,7 +1228,7 @@ function ExtraSectionContent({
             ) : null}
             <CardHeader className="pt-5">
               <CardTitle>{row.heading}</CardTitle>
-              <CardDescription>
+              <CardDescription style={{ color: row.textColor ?? undefined }}>
                 <RichTextContent html={normalizeExtraRichText(row.body, row.highlights)} />
               </CardDescription>
               {row.percent ? <Badge>{metric(row.percent)}</Badge> : null}