Fix TemplateComponent error - use iframe or placeholder instead

app/template/[id]/page.tsx

@@ -294,9 +294,22 @@ export default function TemplatePage() {
               <CardContent className="p-0">
                 <div className={`bg-muted/10 ${isFullscreen ? 'min-h-screen' : getViewportHeight()} overflow-auto`}>
                   <div className={`${getViewportWidth()} mx-auto bg-background border border-border rounded-lg overflow-hidden shadow-xl`}>
-                    {/* Template Preview - Render actual component */}
+                    {/* Template Preview - Show demo iframe or placeholder */}
                     <div className="relative h-full min-h-[600px]">
-                      <TemplateComponent />
+                      {template.demoUrl ? (
+                        <iframe
+                          src={template.demoUrl}
+                          className="w-full h-full border-0"
+                          title={`${template.name} Preview`}
+                        />
+                      ) : (
+                        <div className="flex items-center justify-center h-full">
+                          <div className="text-center">
+                            <h3 className="text-2xl font-semibold mb-2">{template.name}</h3>
+                            <p className="text-muted-foreground">Preview coming soon</p>
+                          </div>
+                        </div>
+                      )}
                     </div>
                   </div>
                 </div>