Spaces:

hanzoai
/

gallery

Sleeping

Hanzo Dev commited on Sep 18, 2025

Commit

cabb811

1 Parent(s): a5493e9

feat: Complete @hanzo /ui integration with proper imports

- Use @hanzo /ui/primitives for all component imports
- Fix button variant names (primary instead of default)
- Add all missing template properties (rating, featured, installCmd, etc)
- Create local Logo components since not exported from @hanzo /ui
- Update tsconfig for bundler module resolution
- Add react-hook-form and date-fns dependencies
- Set dark mode by default with pure black (#000) background
- Fix template data with proper types

Files changed (13) hide show

app/layout.tsx +2 -2
app/page.tsx +323 -391
components/hanzo-brand.tsx +3 -12
components/logo.tsx +30 -0
components/template-data.ts +86 -48
components/ui-components.tsx +3 -79
package-lock.json +28 -0
package.json +2 -0
scripts/screenshot-templates.js +91 -0
templates/devforge.tsx +2 -2
templates/mobilefirst.tsx +2 -2
templates/saasify.tsx +2 -2
tsconfig.json +2 -1

app/layout.tsx CHANGED Viewed

@@ -15,8 +15,8 @@ export default function RootLayout({
   children: React.ReactNode
 }) {
   return (
-    <html lang="en">
-      <body className={inter.className}>
         {children}
       </body>
     </html>

   children: React.ReactNode
 }) {
   return (
+    <html lang="en" className="dark">
+      <body className={`${inter.className} bg-black text-white`}>
         {children}
       </body>
     </html>

app/page.tsx CHANGED Viewed

@@ -2,12 +2,33 @@
 import { useState, useEffect } from 'react'
 import { templates, categories, type Template } from '@/components/template-data'
 import {
   Search,
   Grid3x3,
   List,
-  Moon,
-  Sun,
   Sparkles,
   Code2,
   Palette,
@@ -42,465 +63,376 @@ export default function GalleryPage() {
   const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid')
   const [searchQuery, setSearchQuery] = useState('')
   const [selectedTemplate, setSelectedTemplate] = useState<Template | null>(null)
-  const [isDark, setIsDark] = useState(false)
   const [showFilters, setShowFilters] = useState(false)
   const [copiedId, setCopiedId] = useState<string | null>(null)
   const [favorites, setFavorites] = useState<string[]>([])
   const [showScrollTop, setShowScrollTop] = useState(false)
   // Filter templates based on search and category
-  const filteredTemplates = templates.filter((template) => {
     const matchesCategory = selectedCategory === 'all' || template.category === selectedCategory
-    const matchesSearch = template.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
-                          template.description.toLowerCase().includes(searchQuery.toLowerCase()) ||
-                          template.tagline.toLowerCase().includes(searchQuery.toLowerCase())
-    return matchesCategory && matchesSearch
-  })
-  // Dark mode toggle
-  useEffect(() => {
-    if (isDark) {
-      document.documentElement.classList.add('dark')
-    } else {
-      document.documentElement.classList.remove('dark')
-    }
-  }, [isDark])
-  // Scroll to top button
   useEffect(() => {
     const handleScroll = () => {
-      setShowScrollTop(window.scrollY > 300)
     }
     window.addEventListener('scroll', handleScroll)
     return () => window.removeEventListener('scroll', handleScroll)
   }, [])
-  const copyToClipboard = (text: string, id: string) => {
-    navigator.clipboard.writeText(text)
     setCopiedId(id)
     setTimeout(() => setCopiedId(null), 2000)
   }
   const toggleFavorite = (id: string) => {
     setFavorites(prev =>
-      prev.includes(id) ? prev.filter(f => f !== id) : [...prev, id]
     )
   }
-  const scrollToTop = () => {
-    window.scrollTo({ top: 0, behavior: 'smooth' })
   }
-  return (
-    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-slate-50 dark:from-slate-950 dark:via-slate-900 dark:to-slate-950 transition-colors">
-      {/* Background Pattern */}
-      <div className="fixed inset-0 bg-grid opacity-[0.02] dark:opacity-[0.05] pointer-events-none" />
       {/* Header */}
-      <header className="sticky top-0 z-50 glass-effect border-b border-slate-200 dark:border-slate-800">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
           <div className="flex items-center justify-between">
-            {/* Logo & Title */}
-            <div className="flex items-center gap-3">
               <div className="relative">
-                <div className="absolute inset-0 bg-gradient-to-r from-blue-600 to-purple-600 rounded-lg blur animate-pulse-slow" />
-                <div className="relative bg-gradient-to-r from-blue-600 to-purple-600 p-2 rounded-lg">
-                  <Sparkles className="h-6 w-6 text-white" />
-                </div>
               </div>
-              <div>
-                <h1 className="text-2xl font-bold text-gradient">
-                  Hanzo Templates
-                </h1>
-                <p className="text-sm text-muted-foreground">
-                  Production-ready templates for every project
-                </p>
               </div>
-            </div>
-            {/* Actions */}
-            <div className="flex items-center gap-2">
-              {/* View Mode Toggle */}
-              <div className="hidden sm:flex items-center bg-slate-100 dark:bg-slate-800 rounded-lg p-1">
-                <button
                   onClick={() => setViewMode('grid')}
-                  className={`px-3 py-1.5 rounded-md transition-colors ${
-                    viewMode === 'grid'
-                      ? 'bg-white dark:bg-slate-700 shadow-sm'
-                      : 'hover:bg-white/50 dark:hover:bg-slate-700/50'
-                  }`}
                 >
-                  <Grid3x3 className="h-4 w-4" />
-                </button>
-                <button
                   onClick={() => setViewMode('list')}
-                  className={`px-3 py-1.5 rounded-md transition-colors ${
-                    viewMode === 'list'
-                      ? 'bg-white dark:bg-slate-700 shadow-sm'
-                      : 'hover:bg-white/50 dark:hover:bg-slate-700/50'
-                  }`}
                 >
-                  <List className="h-4 w-4" />
-                </button>
               </div>
-              {/* Dark Mode Toggle */}
-              <button
-                onClick={() => setIsDark(!isDark)}
-                className="p-2 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors"
-              >
-                {isDark ? <Sun className="h-5 w-5" /> : <Moon className="h-5 w-5" />}
-              </button>
-              {/* Filter Toggle (Mobile) */}
-              <button
-                onClick={() => setShowFilters(!showFilters)}
-                className="sm:hidden p-2 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors"
-              >
-                <Filter className="h-5 w-5" />
-              </button>
-            </div>
-          </div>
-          {/* Search Bar */}
-          <div className="mt-4">
-            <div className="relative">
-              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground" />
-              <input
-                type="text"
-                placeholder="Search templates..."
-                value={searchQuery}
-                onChange={(e) => setSearchQuery(e.target.value)}
-                className="w-full pl-10 pr-4 py-2 rounded-lg bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 focus:outline-none focus:ring-2 focus:ring-blue-500"
-              />
             </div>
           </div>
         </div>
-      </header>
-      {/* Main Content */}
-      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-        <div className="flex gap-8">
-          {/* Sidebar - Categories */}
-          <aside className={`${showFilters ? 'block' : 'hidden'} sm:block w-64 flex-shrink-0`}>
-            <div className="sticky top-24">
-              <h2 className="text-sm font-semibold text-muted-foreground uppercase tracking-wider mb-4">
-                Categories
-              </h2>
-              <nav className="space-y-1">
-                {categories.map((category) => (
-                  <button
-                    key={category.id}
-                    onClick={() => setSelectedCategory(category.id)}
-                    className={`w-full flex items-center gap-3 px-3 py-2 rounded-lg transition-all ${
-                      selectedCategory === category.id
-                        ? 'bg-gradient-to-r from-blue-500/10 to-purple-500/10 text-blue-600 dark:text-blue-400 font-medium'
-                        : 'hover:bg-slate-100 dark:hover:bg-slate-800'
-                    }`}
-                  >
-                    <span className="text-xl">{category.icon}</span>
-                    <span>{category.name}</span>
-                    <span className="ml-auto text-xs text-muted-foreground">
-                      {category.id === 'all'
-                        ? templates.length
-                        : templates.filter(t => t.category === category.id).length}
-                    </span>
-                  </button>
-                ))}
-              </nav>
-              {/* Quick Stats */}
-              <div className="mt-8 p-4 rounded-lg bg-gradient-to-r from-blue-500/5 to-purple-500/5 border border-slate-200 dark:border-slate-800">
-                <h3 className="text-sm font-semibold mb-3">Quick Stats</h3>
-                <div className="space-y-2 text-sm">
-                  <div className="flex items-center justify-between">
-                    <span className="text-muted-foreground">Total Templates</span>
-                    <span className="font-medium">{templates.length}</span>
                   </div>
-                  <div className="flex items-center justify-between">
-                    <span className="text-muted-foreground">Free Templates</span>
-                    <span className="font-medium">{templates.filter(t => t.price === 'Free').length}</span>
                   </div>
-                  <div className="flex items-center justify-between">
-                    <span className="text-muted-foreground">New Releases</span>
-                    <span className="font-medium">{templates.filter(t => t.status === 'new').length}</span>
                   </div>
                 </div>
-              </div>
-            </div>
-          </aside>
-          {/* Template Grid/List */}
-          <div className="flex-1">
-            {/* Results Header */}
-            <div className="flex items-center justify-between mb-6">
-              <div>
-                <h2 className="text-lg font-semibold">
-                  {filteredTemplates.length} Templates Found
-                </h2>
-                <p className="text-sm text-muted-foreground">
-                  {selectedCategory !== 'all' && `in ${categories.find(c => c.id === selectedCategory)?.name}`}
-                </p>
-              </div>
-              <select className="px-3 py-1.5 rounded-lg bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 text-sm">
-                <option>Most Popular</option>
-                <option>Newest First</option>
-                <option>Price: Low to High</option>
-                <option>Price: High to Low</option>
-              </select>
-            </div>
-            {/* Templates */}
-            <div className={
-              viewMode === 'grid'
-                ? 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6'
-                : 'space-y-4'
-            }>
-              {filteredTemplates.map((template) => (
-                <article
-                  key={template.id}
-                  className={`group relative bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800 overflow-hidden transition-all hover:shadow-xl hover:scale-[1.02] ${
-                    viewMode === 'list' ? 'flex' : ''
-                  }`}
-                >
-                  {/* Status Badge */}
-                  {template.status === 'new' && (
-                    <div className="absolute top-3 right-3 z-10">
-                      <span className="px-2 py-1 text-xs font-semibold rounded-full bg-gradient-to-r from-green-400 to-emerald-400 text-white">
-                        NEW
-                      </span>
-                    </div>
-                  )}
-                  {/* Gradient Header */}
-                  <div className={`relative ${viewMode === 'list' ? 'w-48' : 'h-32'} bg-gradient-to-br ${template.gradient} p-6 flex items-center justify-center`}>
-                    <span className="text-5xl animate-float">{template.icon}</span>
-                    {/* Popularity Indicator */}
-                    <div className="absolute bottom-2 right-2 flex items-center gap-1 bg-black/20 backdrop-blur-sm px-2 py-1 rounded-full">
-                      <TrendingUp className="h-3 w-3 text-white" />
-                      <span className="text-xs text-white font-medium">{template.popularity}%</span>
                     </div>
                   </div>
-                  {/* Content */}
-                  <div className={`p-5 ${viewMode === 'list' ? 'flex-1' : ''}`}>
-                    <div className="flex items-start justify-between mb-3">
-                      <div>
-                        <h3 className="text-lg font-semibold mb-1">{template.name}</h3>
-                        <p className="text-sm text-muted-foreground">{template.tagline}</p>
-                      </div>
-                      <button
-                        onClick={() => toggleFavorite(template.id)}
-                        className="p-1.5 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors"
-                      >
-                        <Heart className={`h-4 w-4 ${favorites.includes(template.id) ? 'fill-red-500 text-red-500' : ''}`} />
-                      </button>
-                    </div>
-                    <p className="text-sm text-muted-foreground mb-4 line-clamp-2">
-                      {template.description}
-                    </p>
-                    {/* Tech Stack */}
-                    <div className="flex flex-wrap gap-1 mb-4">
-                      {template.tech.slice(0, 3).map((tech) => (
-                        <span key={tech} className="px-2 py-1 text-xs bg-slate-100 dark:bg-slate-800 rounded">
-                          {tech}
-                        </span>
                       ))}
-                      {template.tech.length > 3 && (
-                        <span className="px-2 py-1 text-xs text-muted-foreground">
-                          +{template.tech.length - 3} more
-                        </span>
-                      )}
                     </div>
-                    {/* Features Preview */}
-                    <div className="space-y-1 mb-4">
-                      {template.features.slice(0, viewMode === 'list' ? 4 : 2).map((feature) => (
-                        <div key={feature} className="flex items-center gap-2 text-xs text-muted-foreground">
-                          <Check className="h-3 w-3 text-green-500" />
-                          <span>{feature}</span>
-                        </div>
-                      ))}
                     </div>
                     {/* Actions */}
-                    <div className="flex items-center justify-between pt-4 border-t border-slate-200 dark:border-slate-800">
-                      <span className="text-sm font-semibold text-blue-600 dark:text-blue-400">
-                        {template.price}
                       </span>
-                      <div className="flex gap-2">
-                        <button
-                          onClick={() => window.location.href = `/template/${template.id}`}
-                          className="px-3 py-1.5 text-xs font-medium bg-gradient-to-r from-blue-500 to-purple-500 text-white rounded-lg hover:opacity-90 transition-opacity flex items-center gap-1"
-                        >
-                          <Eye className="h-3 w-3" />
-                          Preview
-                        </button>
-                        <button
-                          onClick={() => setSelectedTemplate(template)}
-                          className="px-3 py-1.5 text-xs font-medium bg-slate-100 dark:bg-slate-800 rounded-lg hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors flex items-center gap-1"
-                        >
-                          <Code2 className="h-3 w-3" />
-                          Details
-                        </button>
-                      </div>
                     </div>
                   </div>
-                </article>
-              ))}
-            </div>
           </div>
-        </div>
-      </main>
-      {/* Template Detail Modal */}
-      {selectedTemplate && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm animate-fade-in">
-          <div className="relative w-full max-w-4xl max-h-[90vh] bg-white dark:bg-slate-900 rounded-2xl shadow-2xl overflow-hidden animate-scale-in">
-            {/* Modal Header with Gradient */}
-            <div className={`h-48 bg-gradient-to-br ${selectedTemplate.gradient} p-8 relative`}>
-              <button
-                onClick={() => setSelectedTemplate(null)}
-                className="absolute top-4 right-4 p-2 rounded-lg bg-white/20 backdrop-blur hover:bg-white/30 transition-colors"
-              >
-                <X className="h-5 w-5 text-white" />
-              </button>
-              <div className="flex items-center gap-4">
-                <span className="text-7xl">{selectedTemplate.icon}</span>
-                <div className="text-white">
-                  <h2 className="text-3xl font-bold mb-2">{selectedTemplate.name}</h2>
-                  <p className="text-lg opacity-90">{selectedTemplate.tagline}</p>
-                  <div className="flex items-center gap-4 mt-3">
-                    <span className="px-3 py-1 bg-white/20 backdrop-blur rounded-full text-sm font-medium">
-                      {selectedTemplate.category}
-                    </span>
-                    <span className="px-3 py-1 bg-white/20 backdrop-blur rounded-full text-sm font-medium">
-                      {selectedTemplate.price}
-                    </span>
-                  </div>
-                </div>
-              </div>
             </div>
-            {/* Modal Content */}
-            <div className="p-8 overflow-y-auto max-h-[calc(90vh-12rem)]">
-              <p className="text-muted-foreground mb-6">{selectedTemplate.description}</p>
-              {/* Features Grid */}
-              <div className="mb-8">
-                <h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
-                  <Zap className="h-5 w-5 text-yellow-500" />
-                  Key Features
-                </h3>
-                <div className="grid grid-cols-2 gap-3">
-                  {selectedTemplate.features.map((feature) => (
-                    <div key={feature} className="flex items-center gap-3 p-3 rounded-lg bg-slate-50 dark:bg-slate-800">
-                      <Check className="h-4 w-4 text-green-500 flex-shrink-0" />
-                      <span className="text-sm">{feature}</span>
-                    </div>
-                  ))}
-                </div>
-              </div>
-              {/* Tech Stack */}
-              <div className="mb-8">
-                <h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
-                  <Code2 className="h-5 w-5 text-blue-500" />
-                  Technology Stack
-                </h3>
-                <div className="flex flex-wrap gap-2">
-                  {selectedTemplate.tech.map((tech) => (
-                    <span key={tech} className="px-3 py-1.5 bg-gradient-to-r from-blue-500/10 to-purple-500/10 rounded-lg font-medium text-sm">
-                      {tech}
-                    </span>
-                  ))}
-                </div>
-              </div>
-              {/* Quick Start */}
-              <div className="mb-8">
-                <h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
-                  <Rocket className="h-5 w-5 text-purple-500" />
-                  Quick Start
-                </h3>
-                <div className="bg-slate-900 dark:bg-slate-950 rounded-lg p-4 font-mono text-sm">
-                  <div className="flex items-center justify-between mb-2">
-                    <span className="text-green-400"># Install and run</span>
-                    <button
-                      onClick={() => copyToClipboard(
-                        `cd /Users/z/work/hanzo/templates/${selectedTemplate.id.replace('forge', 'tool').replace('first', '').replace('ify', '').replace('kit', '').replace('dash', '')}\nnpm install --legacy-peer-deps\nnpm run dev`,
-                        selectedTemplate.id
-                      )}
-                      className="p-1.5 rounded hover:bg-slate-800 transition-colors"
-                    >
-                      {copiedId === selectedTemplate.id ? (
-                        <Check className="h-4 w-4 text-green-500" />
-                      ) : (
-                        <Copy className="h-4 w-4 text-slate-400" />
-                      )}
-                    </button>
-                  </div>
-                  <div className="text-slate-300">
-                    <div>cd /Users/z/work/hanzo/templates/{selectedTemplate.id.replace('forge', 'tool').replace('first', '').replace('ify', '').replace('kit', '').replace('dash', '')}</div>
-                    <div>npm install --legacy-peer-deps</div>
-                    <div>npm run dev</div>
-                  </div>
-                </div>
-              </div>
-              {/* Actions */}
-              <div className="flex gap-3">
-                <button
-                  onClick={() => window.location.href = `/template/${selectedTemplate.id}`}
-                  className="flex-1 px-6 py-3 bg-gradient-to-r from-blue-500 to-purple-500 text-white rounded-lg font-medium hover:opacity-90 transition-opacity flex items-center justify-center gap-2"
-                >
-                  <Play className="h-5 w-5" />
-                  Launch Preview
-                </button>
-                <button className="px-6 py-3 bg-slate-100 dark:bg-slate-800 rounded-lg font-medium hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors flex items-center justify-center gap-2">
-                  <Github className="h-5 w-5" />
-                  View Code
-                </button>
-                <button className="px-6 py-3 bg-slate-100 dark:bg-slate-800 rounded-lg font-medium hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors flex items-center justify-center gap-2">
-                  <Download className="h-5 w-5" />
-                  Download
-                </button>
-              </div>
             </div>
           </div>
         </div>
-      )}
-      {/* Scroll to Top Button */}
       {showScrollTop && (
-        <button
           onClick={scrollToTop}
-          className="fixed bottom-8 right-8 p-3 bg-gradient-to-r from-blue-500 to-purple-500 text-white rounded-full shadow-lg hover:scale-110 transition-transform animate-fade-up"
         >
-          <ArrowUp className="h-5 w-5" />
-        </button>
       )}
-      {/* Floating Action Bar */}
-      <div className="fixed bottom-8 left-1/2 -translate-x-1/2 glass-effect px-4 py-2 rounded-full shadow-xl flex items-center gap-4">
-        <button className="p-2 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-lg transition-colors">
-          <Globe className="h-5 w-5" />
-        </button>
-        <button className="p-2 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-lg transition-colors">
-          <Users className="h-5 w-5" />
-        </button>
-        <button className="p-2 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-lg transition-colors">
-          <BarChart3 className="h-5 w-5" />
-        </button>
-        <button className="p-2 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-lg transition-colors">
-          <Shield className="h-5 w-5" />
-        </button>
-        <button className="p-2 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-lg transition-colors">
-          <Settings className="h-5 w-5" />
-        </button>
-      </div>
     </div>
   )
 }

 import { useState, useEffect } from 'react'
 import { templates, categories, type Template } from '@/components/template-data'
+import {
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Badge,
+  Input,
+  Label,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+  ScrollArea,
+  Separator
+} from '@hanzo/ui/primitives'
+import { Logo, LogoText } from '@/components/logo'
 import {
   Search,
   Grid3x3,
   List,
   Sparkles,
   Code2,
   Palette,
   const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid')
   const [searchQuery, setSearchQuery] = useState('')
   const [selectedTemplate, setSelectedTemplate] = useState<Template | null>(null)
   const [showFilters, setShowFilters] = useState(false)
   const [copiedId, setCopiedId] = useState<string | null>(null)
   const [favorites, setFavorites] = useState<string[]>([])
   const [showScrollTop, setShowScrollTop] = useState(false)
   // Filter templates based on search and category
+  const filteredTemplates = templates.filter(template => {
+    const matchesSearch = searchQuery === '' ||
+      template.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      template.description.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      template.tech.some(t => t.toLowerCase().includes(searchQuery.toLowerCase()))
     const matchesCategory = selectedCategory === 'all' || template.category === selectedCategory
+    return matchesSearch && matchesCategory
+  })
+  // Handle scroll to top
   useEffect(() => {
     const handleScroll = () => {
+      setShowScrollTop(window.scrollY > 400)
     }
     window.addEventListener('scroll', handleScroll)
     return () => window.removeEventListener('scroll', handleScroll)
   }, [])
+  const scrollToTop = () => {
+    window.scrollTo({ top: 0, behavior: 'smooth' })
+  }
+  const copyInstallCommand = (command: string, id: string) => {
+    navigator.clipboard.writeText(command)
     setCopiedId(id)
     setTimeout(() => setCopiedId(null), 2000)
   }
   const toggleFavorite = (id: string) => {
     setFavorites(prev =>
+      prev.includes(id)
+        ? prev.filter(fav => fav !== id)
+        : [...prev, id]
     )
   }
+  const getCategoryIcon = (category: string) => {
+    switch(category) {
+      case 'Development': return <Code2 className="w-4 h-4" />
+      case 'Business': return <BarChart3 className="w-4 h-4" />
+      case 'Creative': return <Palette className="w-4 h-4" />
+      default: return <Sparkles className="w-4 h-4" />
+    }
   }
+  const getRandomGradient = (index: number) => {
+    const gradients = [
+      'from-blue-600 to-purple-600',
+      'from-green-600 to-teal-600',
+      'from-orange-600 to-red-600',
+      'from-pink-600 to-purple-600',
+      'from-yellow-600 to-orange-600',
+      'from-indigo-600 to-purple-600',
+      'from-teal-600 to-blue-600',
+      'from-red-600 to-pink-600'
+    ]
+    return gradients[index % gradients.length]
+  }
+  return (
+    <div className="min-h-screen bg-black text-white">
       {/* Header */}
+      <header className="sticky top-0 z-50 bg-black/80 backdrop-blur-lg border-b border-white/10">
+        <div className="container mx-auto px-4 py-4">
           <div className="flex items-center justify-between">
+            <div className="flex items-center space-x-4">
+              <Logo className="h-8 w-8" />
+              <LogoText className="h-6" />
+              <Separator orientation="vertical" className="h-6" />
+              <span className="text-sm text-muted-foreground">Template Gallery</span>
+            </div>
+            <nav className="flex items-center space-x-4">
+              <Button variant="ghost" size="icon">
+                <Github className="w-5 h-5" />
+              </Button>
+              <Button variant="ghost" size="icon">
+                <Settings className="w-5 h-5" />
+              </Button>
+            </nav>
+          </div>
+        </div>
+      </header>
+      {/* Hero Section */}
+      <section className="relative overflow-hidden py-20 px-4">
+        <div className="absolute inset-0 bg-grid-pattern opacity-10" />
+        <div className="absolute inset-0 bg-gradient-to-b from-transparent via-black/50 to-black" />
+        <div className="container mx-auto relative z-10">
+          <div className="text-center max-w-4xl mx-auto">
+            <Badge variant="outline" className="mb-4 animate-pulse">
+              <Sparkles className="w-3 h-3 mr-1" />
+              100x Your Development Speed
+            </Badge>
+            <h1 className="text-5xl md:text-7xl font-bold mb-6 bg-gradient-to-r from-white to-gray-400 bg-clip-text text-transparent">
+              Hanzo AI App Templates
+            </h1>
+            <p className="text-xl text-gray-400 mb-12">
+              Production-ready templates powered by @hanzo/ui. Start with our battle-tested components,
+              ship faster with AI assistance, and scale with confidence.
+            </p>
+            {/* Search and Filters */}
+            <div className="max-w-2xl mx-auto space-y-4">
               <div className="relative">
+                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
+                <Input
+                  type="text"
+                  placeholder="Search templates, technologies, or features..."
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  className="pl-10 pr-4 py-3 bg-white/5 border-white/10 text-white placeholder-gray-500"
+                />
               </div>
+              <div className="flex flex-wrap gap-2 justify-center">
+                <Button
+                  variant={selectedCategory === 'all' ? 'primary' : 'outline'}
+                  onClick={() => setSelectedCategory('all')}
+                  className="gap-2"
+                >
+                  <Sparkles className="w-4 h-4" />
+                  All Templates
+                  <Badge variant="secondary">{templates.length}</Badge>
+                </Button>
+                {categories.map(category => (
+                  <Button
+                    key={category.id}
+                    variant={selectedCategory === category.id ? 'primary' : 'outline'}
+                    onClick={() => setSelectedCategory(category.id)}
+                    className="gap-2"
+                  >
+                    {getCategoryIcon(category.name)}
+                    {category.name}
+                    <Badge variant="secondary">
+                      {templates.filter(t => t.category === category.id).length}
+                    </Badge>
+                  </Button>
+                ))}
               </div>
+              <div className="flex justify-center gap-2">
+                <Button
+                  variant="outline"
+                  size="icon"
                   onClick={() => setViewMode('grid')}
+                  className={viewMode === 'grid' ? 'bg-white/10' : ''}
                 >
+                  <Grid3x3 className="w-4 h-4" />
+                </Button>
+                <Button
+                  variant="outline"
+                  size="icon"
                   onClick={() => setViewMode('list')}
+                  className={viewMode === 'list' ? 'bg-white/10' : ''}
                 >
+                  <List className="w-4 h-4" />
+                </Button>
               </div>
             </div>
           </div>
         </div>
+      </section>
+      {/* Templates Grid/List */}
+      <section className="container mx-auto px-4 py-12">
+        {filteredTemplates.length === 0 ? (
+          <div className="text-center py-20">
+            <p className="text-gray-400 text-lg">No templates found matching your criteria.</p>
+            <Button
+              variant="outline"
+              onClick={() => {
+                setSearchQuery('')
+                setSelectedCategory('all')
+              }}
+              className="mt-4"
+            >
+              Clear Filters
+            </Button>
+          </div>
+        ) : (
+          <div className={viewMode === 'grid'
+            ? 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6'
+            : 'space-y-4 max-w-4xl mx-auto'
+          }>
+            {filteredTemplates.map((template, index) => (
+              <Card
+                key={template.id}
+                className="group relative bg-white/5 border-white/10 hover:bg-white/10 transition-all duration-300 overflow-hidden"
+              >
+                {/* Preview Image Placeholder */}
+                <div className={`relative h-48 bg-gradient-to-br ${getRandomGradient(index)} opacity-20`}>
+                  <div className="absolute inset-0 flex items-center justify-center">
+                    <span className="text-6xl">{template.icon}</span>
                   </div>
+                  {/* Quick Actions */}
+                  <div className="absolute top-2 right-2 flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="bg-black/50 backdrop-blur"
+                      onClick={() => toggleFavorite(template.id)}
+                    >
+                      <Heart className={`w-4 h-4 ${favorites.includes(template.id) ? 'fill-red-500 text-red-500' : ''}`} />
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="bg-black/50 backdrop-blur"
+                    >
+                      <Share2 className="w-4 h-4" />
+                    </Button>
                   </div>
+                  {/* Rating Badge */}
+                  <div className="absolute top-2 left-2">
+                    <Badge className="bg-black/50 backdrop-blur">
+                      <Star className="w-3 h-3 mr-1 fill-yellow-500 text-yellow-500" />
+                      {template.rating}%
+                    </Badge>
                   </div>
                 </div>
+                <CardHeader>
+                  <div className="flex items-start justify-between">
+                    <div>
+                      <CardTitle className="text-xl flex items-center gap-2">
+                        {template.name}
+                        {template.featured && (
+                          <Badge variant="secondary" className="animate-pulse">
+                            <Zap className="w-3 h-3 mr-1" />
+                            Featured
+                          </Badge>
+                        )}
+                      </CardTitle>
+                      <CardDescription className="text-gray-400 mt-1">
+                        {template.description}
+                      </CardDescription>
                     </div>
                   </div>
+                  <div className="flex flex-wrap gap-1 mt-3">
+                    {template.tech.map((tech) => (
+                      <Badge key={tech} variant="outline" className="text-xs">
+                        {tech}
+                      </Badge>
+                    ))}
+                  </div>
+                </CardHeader>
+                <CardContent>
+                  <div className="space-y-3">
+                    {/* Features */}
+                    <div className="space-y-1">
+                      {template.features.slice(0, 3).map((feature, idx) => (
+                        <div key={idx} className="flex items-center gap-2 text-sm text-gray-400">
+                          <Check className="w-3 h-3 text-green-500" />
+                          {feature}
+                        </div>
                       ))}
                     </div>
+                    {/* Install Command */}
+                    <div className="relative group/cmd">
+                      <code className="block p-2 bg-black/50 border border-white/10 rounded text-xs text-gray-400 pr-10">
+                        {template.installCmd}
+                      </code>
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="absolute right-1 top-1/2 -translate-y-1/2 h-6 w-6"
+                        onClick={() => copyInstallCommand(template.installCmd, template.id)}
+                      >
+                        {copiedId === template.id ? (
+                          <Check className="w-3 h-3 text-green-500" />
+                        ) : (
+                          <Copy className="w-3 h-3" />
+                        )}
+                      </Button>
                     </div>
                     {/* Actions */}
+                    <div className="flex gap-2 pt-2">
+                      <Button
+                        variant="primary"
+                        className="flex-1 gap-2"
+                        onClick={() => window.location.href = `/template/${template.id}`}
+                      >
+                        <Eye className="w-4 h-4" />
+                        Preview
+                      </Button>
+                      <Button
+                        variant="outline"
+                        className="flex-1 gap-2"
+                      >
+                        <Download className="w-4 h-4" />
+                        Use Template
+                      </Button>
+                    </div>
+                    {/* Stats */}
+                    <div className="flex items-center justify-between pt-2 text-xs text-gray-500">
+                      <span className="flex items-center gap-1">
+                        <Clock className="w-3 h-3" />
+                        {template.updatedAt}
+                      </span>
+                      <span className={`flex items-center gap-1 ${
+                        template.pricing === 'Free' ? 'text-green-500' : 'text-yellow-500'
+                      }`}>
+                        {template.pricing === 'Free' ? 'Free' : template.pricing}
                       </span>
                     </div>
                   </div>
+                </CardContent>
+              </Card>
+            ))}
           </div>
+        )}
+      </section>
+      {/* Footer */}
+      <footer className="border-t border-white/10 mt-20">
+        <div className="container mx-auto px-4 py-8">
+          <div className="flex flex-col md:flex-row items-center justify-between gap-4">
+            <div className="flex items-center gap-4">
+              <Logo className="h-6 w-6" />
+              <span className="text-sm text-gray-400">
+                © 2024 Hanzo AI. Built with @hanzo/ui
+              </span>
             </div>
+            <div className="flex items-center gap-6 text-sm text-gray-400">
+              <a href="https://hanzo.ai" className="hover:text-white transition-colors">
+                hanzo.ai
+              </a>
+              <a href="https://github.com/hanzoai" className="hover:text-white transition-colors">
+                GitHub
+              </a>
+              <a href="https://docs.hanzo.ai" className="hover:text-white transition-colors">
+                Documentation
+              </a>
             </div>
           </div>
         </div>
+      </footer>
+      {/* Scroll to Top */}
       {showScrollTop && (
+        <Button
+          variant="primary"
+          size="icon"
           onClick={scrollToTop}
+          className="fixed bottom-8 right-8 z-50 rounded-full shadow-lg animate-fade-in"
         >
+          <ArrowUp className="w-4 h-4" />
+        </Button>
       )}
     </div>
   )
 }

components/hanzo-brand.tsx CHANGED Viewed

@@ -1,16 +1,7 @@
-// Hanzo Brand Components and Constants
-import { cn } from '../lib/utils'
-export const HanzoLogo = ({ className }: { className?: string }) => (
-  <svg
-    viewBox="0 0 24 24"
-    className={cn("w-6 h-6", className)}
-    fill="currentColor"
-  >
-    <path d="M12 2L2 7v10c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-10-5z"/>
-  </svg>
-)
 export const hanzoColors = {
   background: '#000000',
   foreground: '#ffffff',

+// Re-export Hanzo logo components from local file
+export { Logo, LogoText, LogoIcon, HanzoLogo, HanzoLogoText, HanzoLogoIcon } from './logo'
+// Hanzo brand colors (matching @hanzo/ui defaults - pure black background)
 export const hanzoColors = {
   background: '#000000',
   foreground: '#ffffff',

components/logo.tsx ADDED Viewed

	@@ -0,0 +1,30 @@

+// Hanzo Logo Components
+import { cn } from '@/lib/utils'
+export const Logo = ({ className, ...props }: { className?: string } & React.SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    className={cn("w-6 h-6", className)}
+    fill="currentColor"
+    {...props}
+  >
+    <path d="M12 2L2 7v10c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-10-5z"/>
+  </svg>
+)
+export const LogoText = ({ className, ...props }: { className?: string } & React.SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 80 24"
+    className={cn("h-6", className)}
+    fill="currentColor"
+    {...props}
+  >
+    <text x="0" y="18" fontFamily="system-ui" fontSize="18" fontWeight="bold">HANZO</text>
+  </svg>
+)
+export const LogoIcon = Logo
+export const HanzoLogo = Logo
+export const HanzoLogoText = LogoText
+export const HanzoLogoIcon = LogoIcon

components/template-data.ts CHANGED Viewed

@@ -16,6 +16,11 @@ export interface Template {
   demoUrl?: string
   githubUrl?: string
   price?: string
 }
 export const templates: Template[] = [
@@ -28,11 +33,11 @@ export const templates: Template[] = [
     port: 3001,
     primaryColor: '#00d4ff',
     secondaryColor: '#00ff88',
-    gradient: 'from-cyan-400 via-blue-500 to-emerald-400',
     features: [
-      'AI Code Generation',
       'Real-time Collaboration',
-      'Automated Testing',
       'CI/CD Integration',
       'Code Review Tools',
       'Performance Monitoring'
@@ -41,7 +46,12 @@ export const templates: Template[] = [
     category: 'development',
     popularity: 95,
     status: 'stable',
-    price: 'Free'
   },
   {
     id: 'mobilefirst',
@@ -50,13 +60,12 @@ export const templates: Template[] = [
     description: 'Visual mobile app builder with cross-platform deployment',
     icon: '📱',
     port: 3002,
-    primaryColor: '#8b5cf6',
-    secondaryColor: '#ec4899',
-    gradient: 'from-purple-500 via-pink-500 to-rose-500',
     features: [
       'Drag & Drop Builder',
       'Cross-Platform Export',
-      'Live Device Preview',
       'Push Notifications',
       'App Store Deploy',
       'Analytics Dashboard'
@@ -65,7 +74,12 @@ export const templates: Template[] = [
     category: 'development',
     popularity: 88,
     status: 'new',
-    price: '$29/mo'
   },
   {
     id: 'saasify',
@@ -74,13 +88,12 @@ export const templates: Template[] = [
     description: 'Complete SaaS boilerplate with authentication, billing, and admin',
     icon: '☁️',
     port: 3003,
-    primaryColor: '#3b82f6',
-    secondaryColor: '#6366f1',
-    gradient: 'from-blue-500 via-indigo-500 to-purple-500',
     features: [
-      'Multi-tenant Architecture',
-      'Stripe Integration',
-      'User Management',
       'Admin Dashboard',
       'Email Templates',
       'API Documentation'
@@ -89,7 +102,12 @@ export const templates: Template[] = [
     category: 'business',
     popularity: 92,
     status: 'stable',
-    price: '$99'
   },
   {
     id: 'startupkit',
@@ -98,13 +116,12 @@ export const templates: Template[] = [
     description: 'Comprehensive toolkit for startup founders and teams',
     icon: '🚀',
     port: 3004,
-    primaryColor: '#f97316',
-    secondaryColor: '#fbbf24',
-    gradient: 'from-orange-500 via-amber-500 to-yellow-400',
     features: [
-      'Pitch Deck Builder',
-      'Investor CRM',
-      'Financial Modeling',
       'Team Workspace',
       'Legal Templates',
       'Growth Analytics'
@@ -113,7 +130,12 @@ export const templates: Template[] = [
     category: 'business',
     popularity: 79,
     status: 'beta',
-    price: '$49/mo'
   },
   {
     id: 'analyticsdash',
@@ -122,12 +144,12 @@ export const templates: Template[] = [
     description: 'Real-time analytics dashboard with custom metrics and reports',
     icon: '📊',
     port: 3005,
-    primaryColor: '#14b8a6',
-    secondaryColor: '#06b6d4',
-    gradient: 'from-teal-500 via-cyan-500 to-blue-500',
     features: [
-      'Real-time Dashboards',
-      'Custom Metrics',
       'Data Visualization',
       'Report Builder',
       'API Access',
@@ -137,7 +159,12 @@ export const templates: Template[] = [
     category: 'analytics',
     popularity: 85,
     status: 'stable',
-    price: '$79/mo'
   },
   {
     id: 'blog',
@@ -146,13 +173,12 @@ export const templates: Template[] = [
     description: 'Professional blog with MDX support and content management',
     icon: '📝',
     port: 3006,
-    primaryColor: '#6366f1',
     secondaryColor: '#8b5cf6',
-    gradient: 'from-indigo-500 via-purple-500 to-pink-500',
     features: [
       'MDX Support',
       'SEO Optimized',
-      'Newsletter Integration',
       'Comment System',
       'RSS Feed',
       'Dark Mode'
@@ -161,7 +187,12 @@ export const templates: Template[] = [
     category: 'content',
     popularity: 90,
     status: 'stable',
-    price: 'Free'
   },
   {
     id: 'changelog',
@@ -170,13 +201,11 @@ export const templates: Template[] = [
     description: 'Keep users informed with beautiful changelogs',
     icon: '📋',
     port: 3007,
-    primaryColor: '#10b981',
-    secondaryColor: '#34d399',
-    gradient: 'from-emerald-500 via-green-500 to-teal-500',
     features: [
-      'Version Tracking',
-      'Categories & Tags',
-      'Email Notifications',
       'RSS Feed',
       'Search & Filter',
       'Markdown Support'
@@ -185,7 +214,12 @@ export const templates: Template[] = [
     category: 'content',
     popularity: 75,
     status: 'stable',
-    price: 'Free'
   },
   {
     id: 'portfolio',
@@ -194,13 +228,12 @@ export const templates: Template[] = [
     description: 'Personal portfolio for developers and designers',
     icon: '👤',
     port: 3008,
-    primaryColor: '#f59e0b',
-    secondaryColor: '#fbbf24',
-    gradient: 'from-amber-500 via-orange-500 to-red-500',
     features: [
-      'Resume Builder',
       'Project Gallery',
-      'Blog Section',
       'Contact Form',
       'Social Links',
       'Analytics'
@@ -209,7 +242,12 @@ export const templates: Template[] = [
     category: 'creative',
     popularity: 82,
     status: 'stable',
-    price: 'Free'
   }
 ]
@@ -217,7 +255,7 @@ export const categories = [
   { id: 'all', name: 'All Templates', icon: '🎯' },
   { id: 'development', name: 'Development', icon: '💻' },
   { id: 'business', name: 'Business', icon: '💼' },
-  { id: 'creative', name: 'Creative', icon: '🎨' },
   { id: 'analytics', name: 'Analytics', icon: '📈' },
-  { id: 'content', name: 'Content', icon: '✍️' },
 ]

   demoUrl?: string
   githubUrl?: string
   price?: string
+  rating: number
+  featured?: boolean
+  installCmd: string
+  updatedAt: string
+  pricing: 'Free' | 'Pro' | 'Enterprise'
 }
 export const templates: Template[] = [
     port: 3001,
     primaryColor: '#00d4ff',
     secondaryColor: '#00ff88',
+    gradient: 'from-cyan-500 to-green-500',
     features: [
+      'AI-Powered Code Generation',
       'Real-time Collaboration',
+      'Built-in Testing Framework',
       'CI/CD Integration',
       'Code Review Tools',
       'Performance Monitoring'
     category: 'development',
     popularity: 95,
     status: 'stable',
+    price: 'Free',
+    rating: 100,
+    featured: true,
+    installCmd: 'npx create-hanzo-app --template devforge',
+    updatedAt: '2 days ago',
+    pricing: 'Free'
   },
   {
     id: 'mobilefirst',
     description: 'Visual mobile app builder with cross-platform deployment',
     icon: '📱',
     port: 3002,
+    primaryColor: '#ff00d4',
+    secondaryColor: '#ffaa00',
+    gradient: 'from-pink-500 to-orange-500',
     features: [
       'Drag & Drop Builder',
       'Cross-Platform Export',
       'Push Notifications',
       'App Store Deploy',
       'Analytics Dashboard'
     category: 'development',
     popularity: 88,
     status: 'new',
+    price: '$29/mo',
+    rating: 95,
+    featured: false,
+    installCmd: 'npx create-hanzo-app --template mobile',
+    updatedAt: 'Today',
+    pricing: 'Pro'
   },
   {
     id: 'saasify',
     description: 'Complete SaaS boilerplate with authentication, billing, and admin',
     icon: '☁️',
     port: 3003,
+    primaryColor: '#8b5cf6',
+    secondaryColor: '#f59e0b',
+    gradient: 'from-violet-500 to-amber-500',
     features: [
+      'Authentication & SSO',
+      'Stripe Billing',
       'Admin Dashboard',
       'Email Templates',
       'API Documentation'
     category: 'business',
     popularity: 92,
     status: 'stable',
+    price: '$99',
+    rating: 98,
+    featured: true,
+    installCmd: 'npx create-hanzo-app --template saas',
+    updatedAt: '1 week ago',
+    pricing: 'Pro'
   },
   {
     id: 'startupkit',
     description: 'Comprehensive toolkit for startup founders and teams',
     icon: '🚀',
     port: 3004,
+    primaryColor: '#3b82f6',
+    secondaryColor: '#10b981',
+    gradient: 'from-blue-500 to-emerald-500',
     features: [
+      'Landing Pages',
+      'Investor Dashboards',
       'Team Workspace',
       'Legal Templates',
       'Growth Analytics'
     category: 'business',
     popularity: 79,
     status: 'beta',
+    price: '$49/mo',
+    rating: 92,
+    featured: false,
+    installCmd: 'npx create-hanzo-app --template startup',
+    updatedAt: '3 days ago',
+    pricing: 'Pro'
   },
   {
     id: 'analyticsdash',
     description: 'Real-time analytics dashboard with custom metrics and reports',
     icon: '📊',
     port: 3005,
+    primaryColor: '#f97316',
+    secondaryColor: '#14b8a6',
+    gradient: 'from-orange-500 to-teal-500',
     features: [
+      'Real-time Data',
+      'Custom Dashboards',
       'Data Visualization',
       'Report Builder',
       'API Access',
     category: 'analytics',
     popularity: 85,
     status: 'stable',
+    price: '$79/mo',
+    rating: 96,
+    featured: false,
+    installCmd: 'npx create-hanzo-app --template analytics',
+    updatedAt: '1 day ago',
+    pricing: 'Enterprise'
   },
   {
     id: 'blog',
     description: 'Professional blog with MDX support and content management',
     icon: '📝',
     port: 3006,
+    primaryColor: '#06b6d4',
     secondaryColor: '#8b5cf6',
+    gradient: 'from-cyan-500 to-violet-500',
     features: [
       'MDX Support',
       'SEO Optimized',
       'Comment System',
       'RSS Feed',
       'Dark Mode'
     category: 'content',
     popularity: 90,
     status: 'stable',
+    price: 'Free',
+    rating: 94,
+    featured: false,
+    installCmd: 'npx create-hanzo-app --template blog',
+    updatedAt: '5 days ago',
+    pricing: 'Free'
   },
   {
     id: 'changelog',
     description: 'Keep users informed with beautiful changelogs',
     icon: '📋',
     port: 3007,
+    primaryColor: '#84cc16',
+    secondaryColor: '#f43f5e',
+    gradient: 'from-lime-500 to-rose-500',
     features: [
+      'Version Control',
       'RSS Feed',
       'Search & Filter',
       'Markdown Support'
     category: 'content',
     popularity: 75,
     status: 'stable',
+    price: 'Free',
+    rating: 91,
+    featured: false,
+    installCmd: 'npx create-hanzo-app --template changelog',
+    updatedAt: '1 week ago',
+    pricing: 'Free'
   },
   {
     id: 'portfolio',
     description: 'Personal portfolio for developers and designers',
     icon: '👤',
     port: 3008,
+    primaryColor: '#ec4899',
+    secondaryColor: '#6366f1',
+    gradient: 'from-pink-500 to-indigo-500',
     features: [
       'Project Gallery',
+      'About Section',
       'Contact Form',
       'Social Links',
       'Analytics'
     category: 'creative',
     popularity: 82,
     status: 'stable',
+    price: 'Free',
+    rating: 97,
+    featured: false,
+    installCmd: 'npx create-hanzo-app --template portfolio',
+    updatedAt: '4 days ago',
+    pricing: 'Free'
   }
 ]
   { id: 'all', name: 'All Templates', icon: '🎯' },
   { id: 'development', name: 'Development', icon: '💻' },
   { id: 'business', name: 'Business', icon: '💼' },
   { id: 'analytics', name: 'Analytics', icon: '📈' },
+  { id: 'content', name: 'Content', icon: '📄' },
+  { id: 'creative', name: 'Creative', icon: '🎨' },
 ]

components/ui-components.tsx CHANGED Viewed

@@ -1,79 +1,3 @@
-// Simple UI component replacements to avoid @hanzo/ui dependency issues
-import { cn } from '../lib/utils'
-export const Button = ({
-  children,
-  className,
-  variant = 'default',
-  size = 'default',
-  ...props
-}: any) => {
-  const variants: any = {
-    default: 'bg-white text-black hover:bg-gray-200',
-    ghost: 'bg-transparent hover:bg-white/10',
-    outline: 'border border-white text-white hover:bg-white hover:text-black'
-  }
-  const sizes: any = {
-    default: 'px-4 py-2',
-    sm: 'px-3 py-1',
-    lg: 'px-6 py-3'
-  }
-  return (
-    <button
-      className={cn(
-        'rounded-lg font-semibold transition-colors',
-        variants[variant],
-        sizes[size],
-        className
-      )}
-      {...props}
-    >
-      {children}
-    </button>
-  )
-}
-export const Card = ({ children, className, ...props }: any) => (
-  <div className={cn('rounded-xl', className)} {...props}>
-    {children}
-  </div>
-)
-export const CardHeader = ({ children, className, ...props }: any) => (
-  <div className={cn('p-6 pb-0', className)} {...props}>
-    {children}
-  </div>
-)
-export const CardTitle = ({ children, className, ...props }: any) => (
-  <h3 className={cn('text-lg font-semibold', className)} {...props}>
-    {children}
-  </h3>
-)
-export const CardDescription = ({ children, className, ...props }: any) => (
-  <p className={cn('text-sm text-gray-400', className)} {...props}>
-    {children}
-  </p>
-)
-export const CardContent = ({ children, className, ...props }: any) => (
-  <div className={cn('p-6', className)} {...props}>
-    {children}
-  </div>
-)
-export const Badge = ({ children, className, variant = 'default', ...props }: any) => (
-  <span
-    className={cn(
-      'inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold',
-      variant === 'secondary' && 'bg-gray-100 text-gray-900',
-      className
-    )}
-    {...props}
-  >
-    {children}
-  </span>
-)

+// Import @hanzo/ui components - these are 1:1 with shadcn/ui
+// @hanzo/ui exports from ./primitives subpath, not from root
+export * from '@hanzo/ui/primitives'

package-lock.json CHANGED Viewed

@@ -31,12 +31,14 @@
         "@radix-ui/react-tooltip": "^1.1.0",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "framer-motion": "^11.18.2",
         "lucide-react": "^0.456.0",
         "next": "15.3.5",
         "next-themes": "^0.4.6",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
         "react-hot-toast": "^2.6.0",
         "tailwind-merge": "^3.3.1",
         "tailwindcss-animate": "^1.0.7"
@@ -4346,6 +4348,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/debug": {
       "version": "4.4.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
@@ -7664,6 +7676,22 @@
         "react": "^19.1.1"
       }
     },
     "node_modules/react-hot-toast": {
       "version": "2.6.0",
       "resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.6.0.tgz",

         "@radix-ui/react-tooltip": "^1.1.0",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
+        "date-fns": "^4.1.0",
         "framer-motion": "^11.18.2",
         "lucide-react": "^0.456.0",
         "next": "15.3.5",
         "next-themes": "^0.4.6",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
+        "react-hook-form": "^7.62.0",
         "react-hot-toast": "^2.6.0",
         "tailwind-merge": "^3.3.1",
         "tailwindcss-animate": "^1.0.7"
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/date-fns": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
+      "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
     "node_modules/debug": {
       "version": "4.4.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
         "react": "^19.1.1"
       }
     },
+    "node_modules/react-hook-form": {
+      "version": "7.62.0",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.62.0.tgz",
+      "integrity": "sha512-7KWFejc98xqG/F4bAxpL41NB3o1nnvQO1RWZT3TqRZYL8RryQETGfEdVnJN2fy1crCiBLLjkRBVK05j24FxJGA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-hook-form"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17 || ^18 || ^19"
+      }
+    },
     "node_modules/react-hot-toast": {
       "version": "2.6.0",
       "resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.6.0.tgz",

package.json CHANGED Viewed

@@ -32,12 +32,14 @@
     "@radix-ui/react-tooltip": "^1.1.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "framer-motion": "^11.18.2",
     "lucide-react": "^0.456.0",
     "next": "15.3.5",
     "next-themes": "^0.4.6",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-hot-toast": "^2.6.0",
     "tailwind-merge": "^3.3.1",
     "tailwindcss-animate": "^1.0.7"

     "@radix-ui/react-tooltip": "^1.1.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "date-fns": "^4.1.0",
     "framer-motion": "^11.18.2",
     "lucide-react": "^0.456.0",
     "next": "15.3.5",
     "next-themes": "^0.4.6",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-hook-form": "^7.62.0",
     "react-hot-toast": "^2.6.0",
     "tailwind-merge": "^3.3.1",
     "tailwindcss-animate": "^1.0.7"

scripts/screenshot-templates.js ADDED Viewed

	@@ -0,0 +1,91 @@

+#!/usr/bin/env node
+const puppeteer = require('puppeteer');
+const fs = require('fs');
+const path = require('path');
+const templates = [
+  'devforge',
+  'mobilefirst',
+  'saasify',
+  'startupkit',
+  'analyticsdash',
+  'blog',
+  'changelog',
+  'portfolio'
+];
+const baseUrl = process.env.BASE_URL || 'http://localhost:3000';
+const screenshotDir = path.join(process.cwd(), 'public', 'screenshots');
+async function captureScreenshots() {
+  // Ensure screenshot directory exists
+  if (!fs.existsSync(screenshotDir)) {
+    fs.mkdirSync(screenshotDir, { recursive: true });
+  }
+  const browser = await puppeteer.launch({
+    headless: 'new',
+    args: ['--no-sandbox', '--disable-setuid-sandbox']
+  });
+  console.log('🎨 Starting screenshot capture for all templates...\n');
+  for (const template of templates) {
+    try {
+      console.log(`📸 Capturing ${template}...`);
+      const page = await browser.newPage();
+      // Set viewport to standard desktop size
+      await page.setViewport({ width: 1920, height: 1080 });
+      // Navigate to template page
+      const url = `${baseUrl}/template/${template}`;
+      await page.goto(url, { waitUntil: 'networkidle2' });
+      // Wait for content to load
+      await page.waitForTimeout(2000);
+      // Capture full page screenshot
+      const screenshotPath = path.join(screenshotDir, `${template}.png`);
+      await page.screenshot({
+        path: screenshotPath,
+        fullPage: false, // Just viewport for consistent sizing
+      });
+      // Also capture a thumbnail version
+      await page.setViewport({ width: 1280, height: 720 });
+      const thumbnailPath = path.join(screenshotDir, `${template}-thumb.png`);
+      await page.screenshot({
+        path: thumbnailPath,
+        fullPage: false,
+      });
+      // Capture mobile version
+      await page.setViewport({ width: 375, height: 812 });
+      const mobilePath = path.join(screenshotDir, `${template}-mobile.png`);
+      await page.screenshot({
+        path: mobilePath,
+        fullPage: false,
+      });
+      await page.close();
+      console.log(`   ✅ Desktop: ${template}.png`);
+      console.log(`   ✅ Thumbnail: ${template}-thumb.png`);
+      console.log(`   ✅ Mobile: ${template}-mobile.png\n`);
+    } catch (error) {
+      console.error(`   ❌ Error capturing ${template}:`, error.message);
+    }
+  }
+  await browser.close();
+  console.log('🎉 Screenshot capture complete!');
+  console.log(`📁 Screenshots saved to: ${screenshotDir}`);
+}
+// Run the screenshot capture
+captureScreenshots().catch(console.error);

templates/devforge.tsx CHANGED Viewed

@@ -1,6 +1,6 @@
 import { motion } from 'framer-motion'
-import { Button, Card, CardContent, CardDescription, CardHeader, CardTitle, Badge } from '../components/ui-components'
-import { HanzoLogo } from '../components/hanzo-brand'
 import { Code2, Zap, Shield, Globe, Users, Terminal, Cloud, Sparkles } from 'lucide-react'
 export default function DevForgeTemplate() {

 import { motion } from 'framer-motion'
+import { Button, Card, CardContent, CardDescription, CardHeader, CardTitle, Badge } from '@hanzo/ui/primitives'
+import { HanzoLogo } from '@/components/logo'
 import { Code2, Zap, Shield, Globe, Users, Terminal, Cloud, Sparkles } from 'lucide-react'
 export default function DevForgeTemplate() {

templates/mobilefirst.tsx CHANGED Viewed

@@ -1,6 +1,6 @@
 import { motion } from 'framer-motion'
-import { Button, Card, CardContent, CardHeader, CardTitle, Badge } from '../components/ui-components'
-import { HanzoLogo } from '../components/hanzo-brand'
 import { Smartphone, Palette, Layers, Zap, Download, Share2 } from 'lucide-react'
 export default function MobileFirstTemplate() {

 import { motion } from 'framer-motion'
+import { Button, Card, CardContent, CardHeader, CardTitle, Badge } from '@hanzo/ui/primitives'
+import { HanzoLogo } from '@/components/logo'
 import { Smartphone, Palette, Layers, Zap, Download, Share2 } from 'lucide-react'
 export default function MobileFirstTemplate() {

templates/saasify.tsx CHANGED Viewed

@@ -1,6 +1,6 @@
 import { motion } from 'framer-motion'
-import { Button, Card, CardContent, CardDescription, CardHeader, CardTitle, Badge } from '../components/ui-components'
-import { HanzoLogo } from '../components/hanzo-brand'
 import { CreditCard, Users, BarChart3, Shield, Zap, Globe } from 'lucide-react'
 export default function SaaSifyTemplate() {

 import { motion } from 'framer-motion'
+import { Button, Card, CardContent, CardDescription, CardHeader, CardTitle, Badge } from '@hanzo/ui/primitives'
+import { HanzoLogo } from '@/components/logo'
 import { CreditCard, Users, BarChart3, Shield, Zap, Globe } from 'lucide-react'
 export default function SaaSifyTemplate() {

tsconfig.json CHANGED Viewed

@@ -4,12 +4,13 @@
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
     "forceConsistentCasingInFileNames": true,
     "noEmit": true,
     "esModuleInterop": true,
     "module": "esnext",
-    "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",

     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
+    "typeRoots": ["./node_modules/@types"],
     "strict": true,
     "forceConsistentCasingInFileNames": true,
     "noEmit": true,
     "esModuleInterop": true,
     "module": "esnext",
+    "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",