Fix all TypeScript errors - remove gradient properties and fix Button variants

components/template-data.ts

@@ -283,7 +283,6 @@ export const templates: Template[] = [
     port: 3009,
     primaryColor: '#ffffff',
     secondaryColor: '#9ca3af',
-    gradient: 'from-white to-gray-400',
     features: [
       'Model Context Protocol',
       '100+ LLM Providers',
@@ -312,7 +311,6 @@ export const templates: Template[] = [
     port: 3010,
     primaryColor: '#ffffff',
     secondaryColor: '#9ca3af',
-    gradient: 'from-white to-gray-400',
     features: [
       'AI Understanding',
       'Generative UI',
@@ -341,7 +339,6 @@ export const templates: Template[] = [
     port: 3011,
     primaryColor: '#ffffff',
     secondaryColor: '#9ca3af',
-    gradient: 'from-white to-gray-400',
     features: [
       'Sales Analytics',
       'Inventory Management',
@@ -370,7 +367,6 @@ export const templates: Template[] = [
     port: 3012,
     primaryColor: '#ffffff',
     secondaryColor: '#9ca3af',
-    gradient: 'from-white to-gray-400',
     features: [
       'Interactive Examples',
       'Multiple SDKs',

templates/analyticsdash.tsx

@@ -80,7 +80,7 @@ const AnalyticsDashTemplate: React.FC = () => {
                 <Bell className="w-5 h-5" />
                 <div className="absolute top-1 right-1 w-2 h-2 bg-foreground rounded-full" />
               </Button>
-              <Button variant="default" className="flex items-center gap-2">
+              <Button variant="primary" className="flex items-center gap-2">
                 <Download className="w-4 h-4" />
                 Export
               </Button>

templates/api-docs.tsx

@@ -93,8 +93,8 @@ export default function ApiDocsTemplate() {
                   {"    "}<span className="text-gray-400">"messages":</span> [{"{"}{"\n"}
                   {"      "}<span className="text-gray-400">"role":</span> <span className="text-gray-300">"user"</span>,{"\n"}
                   {"      "}<span className="text-gray-400">"content":</span> <span className="text-gray-300">"Hello, API!"</span>{"\n"}
-                  {"    "}{"}"]}]{"\n"}
-                  {"  "}{"}'"}
+                  {"    "}{"}"}]{"\n"}
+                  {"  "}{"}"}'
                 </code>
               </pre>
             </CardContent>

templates/devforge.tsx

@@ -47,7 +47,7 @@ const DevForgeTemplate: React.FC = () => {
             <Button variant="ghost">
               Pricing
             </Button>
-            <Button variant="default">
+            <Button variant="primary">
               Get Started
             </Button>
           </div>
@@ -162,7 +162,7 @@ const DevForgeTemplate: React.FC = () => {
             <p className="text-xl text-muted-foreground mb-8">
               Join thousands of developers building the future with Hanzo DevForge
             </p>
-            <Button size="lg" variant="default">
+            <Button size="lg" variant="primary">
               Start Free Trial
             </Button>
           </CardContent>

templates/index.tsx

@@ -1,6 +1,23 @@
 // Export all template components
 // These are dynamically imported in the gallery
 
+// Import all templates
+import DevforgeTemplate from './devforge'
+import MobilefirstTemplate from './mobilefirst'
+import SaasifyTemplate from './saasify'
+import StartupkitTemplate from './startupkit'
+import AnalyticsdashTemplate from './analyticsdash'
+import BlogTemplate from './blog'
+import ChangelogTemplate from './changelog'
+import PortfolioTemplate from './portfolio'
+
+// New templates with hyphenated names
+import AiChatTemplate from './ai-chat'
+import SearchInterfaceTemplate from './search-interface'
+import EcommerceDashTemplate from './ecommerce-dash'
+import ApiDocsTemplate from './api-docs'
+
+// Named exports for backward compatibility
 export { default as devforge } from './devforge'
 export { default as mobilefirst } from './mobilefirst'
 export { default as saasify } from './saasify'
@@ -10,22 +27,16 @@ export { default as blog } from './blog'
 export { default as changelog } from './changelog'
 export { default as portfolio } from './portfolio'
 
-// New templates with hyphenated names
-import AiChatTemplate from './ai-chat'
-import SearchInterfaceTemplate from './search-interface'
-import EcommerceDashTemplate from './ecommerce-dash'
-import ApiDocsTemplate from './api-docs'
-
 // Export with keys matching template IDs in template-data.ts
 export const templates = {
-  'devforge': devforge,
-  'mobilefirst': mobilefirst,
-  'saasify': saasify,
-  'startupkit': startupkit,
-  'analyticsdash': analyticsdash,
-  'blog': blog,
-  'changelog': changelog,
-  'portfolio': portfolio,
+  'devforge': DevforgeTemplate,
+  'mobilefirst': MobilefirstTemplate,
+  'saasify': SaasifyTemplate,
+  'startupkit': StartupkitTemplate,
+  'analyticsdash': AnalyticsdashTemplate,
+  'blog': BlogTemplate,
+  'changelog': ChangelogTemplate,
+  'portfolio': PortfolioTemplate,
   'ai-chat': AiChatTemplate,
   'search-interface': SearchInterfaceTemplate,
   'ecommerce-dash': EcommerceDashTemplate,

templates/mobilefirst.tsx

@@ -23,7 +23,7 @@ const MobileFirstTemplate: React.FC = () => {
               </div>
               <span className="text-xl font-bold">Hanzo MobileFirst</span>
             </div>
-            <Button variant="default">
+            <Button variant="primary">
               Start Building
             </Button>
           </nav>

templates/saasify.tsx

@@ -23,7 +23,7 @@ const SaaSifyTemplate: React.FC = () => {
             </div>
             <span className="text-xl font-bold">Hanzo SaaSify</span>
           </div>
-          <Button variant="default">
+          <Button variant="primary">
             Start Free Trial
           </Button>
         </nav>

templates/startupkit.tsx

@@ -34,7 +34,7 @@ const StartupKitTemplate: React.FC = () => {
               <Button variant="ghost">Features</Button>
               <Button variant="ghost">Pricing</Button>
               <Button variant="ghost">Docs</Button>
-              <Button variant="default">
+              <Button variant="primary">
                 Get Started
               </Button>
             </div>
@@ -67,7 +67,7 @@ const StartupKitTemplate: React.FC = () => {
               </p>
 
               <div className="flex gap-4 mb-12">
-                <Button variant="default" className="flex items-center gap-2">
+                <Button variant="primary" className="flex items-center gap-2">
                   Start Building <ChevronRight className="w-4 h-4" />
                 </Button>
                 <Button variant="outline">