From 7ff5be7c4e2487f2c40322d4a1e73e636d495f89 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Mon, 9 Mar 2026 02:00:32 +0100
Subject: [PATCH] fix: pre-render Phosphor icons in capabilities array

The /features page mixed inline SVG JSX with Phosphor component
references in the capabilities array. The typeof check couldn't
distinguish them, causing a prerender crash:
"Objects are not valid as a React child (found: object with keys
{$$typeof, render, displayName})".

Pre-rendering Share2Icon and GlobeIcon as JSX makes all entries
consistent and eliminates the conditional entirely.
---
 app/features/page.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/features/page.tsx b/app/features/page.tsx
index c985bb6..8431d58 100644
--- a/app/features/page.tsx
+++ b/app/features/page.tsx
@@ -83,12 +83,12 @@ const capabilities = [
     description: 'Automatically parse UTM parameters. Built-in link builder for campaigns, sources, and mediums.',
   },
   {
-    icon: Share2Icon,
+    icon: <Share2Icon className="w-5 h-5" />,
     title: 'Shared Dashboards',
     description: 'Generate a public link to share analytics with clients or teammates — no login required.',
   },
   {
-    icon: GlobeIcon,
+    icon: <GlobeIcon className="w-5 h-5" />,
     title: 'Geographic Insights',
     description: 'Country, region, and city-level breakdowns. IPs are never stored — derived at request time only.',
   },
@@ -190,7 +190,7 @@ export default function FeaturesPage() {
                 className="flex gap-4"
               >
                 <div className="w-10 h-10 rounded-lg bg-brand-orange/10 flex items-center justify-center shrink-0 text-brand-orange mt-0.5">
-                  {typeof cap.icon === 'object' ? cap.icon : <cap.icon className="w-5 h-5" />}
+                  {cap.icon}
                 </div>
                 <div>
                   <h3 className="font-bold text-neutral-900 dark:text-white mb-1">