Initial commit

.gitignore

@@ -0,0 +1,9 @@
+node_modules
+.next
+.cache
+dist
+build
+.DS_Store
+*.log
+.env.local
+*.tsbuildinfo

Dockerfile

@@ -0,0 +1,21 @@
+FROM node:20-slim
+
+WORKDIR /app
+
+# Copy package files
+COPY package*.json ./
+
+# Install dependencies
+RUN npm ci --only=production
+
+# Copy application files
+COPY . .
+
+# Build the application
+RUN npm run build
+
+# Expose port
+EXPOSE 3000
+
+# Start the application
+CMD ["npm", "start"]

README.md

@@ -0,0 +1,294 @@
+# DevTool Platform Template
+
+A developer tools platform template built with Next.js 15, TypeScript, and @hanzo/ui components for creating modern development utilities.
+
+## Features
+
+- ✨ Built with **@hanzo/ui** component library (shadcn/ui based)
+- 🎨 **Monochromatic color scheme** with developer-focused aesthetics
+- 📱 **Fully responsive** design (mobile, tablet, desktop)
+- 🌙 **Dark mode** support with next-themes
+- 🚀 **Next.js 15** App Router with React 19
+- 🛠️ **Developer-centric** components
+- ⚡ **TypeScript strict mode** enabled
+- 🎯 **Performance optimized** for tool interfaces
+
+## Quick Start
+
+### Installation
+
+```bash
+# Install dependencies
+npm install
+
+# Start development server
+npm run dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) to view your dev tool platform.
+
+### Production Build
+
+```bash
+# Create production build
+npm run build
+
+# Start production server
+npm start
+```
+
+## Project Structure
+
+```
+devtool/
+├── app/                  # Next.js App Router
+│   ├── layout.tsx       # Root layout with theming
+│   └── page.tsx         # Landing page
+├── components/          # React components
+│   └── sections/        # Page sections
+│       ├── hero.tsx     # Hero with CTA
+│       └── features.tsx # Feature cards
+├── lib/                 # Utilities and config
+│   └── site.ts          # Site configuration
+├── public/              # Static assets
+└── package.json         # Dependencies
+```
+
+## Component Usage
+
+All components are imported from `@hanzo/ui` with developer-friendly styling:
+
+```tsx
+import { Button, Card, CardContent, CardHeader, CardTitle } from '@hanzo/ui/components'
+
+// Developer-styled button with monospace font
+<Button size="lg" className="font-mono">
+  npm install @your-tool
+</Button>
+
+// Feature card with technical styling
+<Card className="border-2 hover:border-black dark:hover:border-white">
+  <CardHeader>
+    <CardTitle className="font-mono">Feature Name</CardTitle>
+  </CardHeader>
+  <CardContent>
+    Technical description here
+  </CardContent>
+</Card>
+```
+
+## Customization
+
+### Site Configuration
+
+Edit `lib/site.ts` to customize your dev tool details:
+
+```typescript
+export const siteConfig = {
+  name: "Your Tool Name",
+  tagline: "Your Tool Tagline",
+  description: "What your tool does",
+  url: "https://your-tool.com",
+  features: [
+    "Feature 1",
+    "Feature 2",
+    "Feature 3",
+    "Feature 4"
+  ]
+}
+```
+
+### Styling
+
+The template uses a monochromatic color scheme perfect for developer tools:
+
+- Primary: Black (`#000000`)
+- Secondary: Gray (`#666666`)
+- Accent: Dark gradients for depth
+- Code: Monospace fonts throughout
+- Borders: High contrast for clarity
+
+### Adding Tool Pages
+
+Create new pages for different tools:
+
+```tsx
+// app/editor/page.tsx
+import { Button, Card } from '@hanzo/ui/components'
+
+export default function EditorPage() {
+  return (
+    <div className="container mx-auto py-12">
+      <h1 className="text-4xl font-mono font-bold mb-8">
+        Code Editor
+      </h1>
+      {/* Your editor implementation */}
+    </div>
+  )
+}
+```
+
+## Developer Features
+
+### Code Display Components
+
+```tsx
+// Code block with syntax highlighting
+<pre className="bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto">
+  <code className="language-javascript">
+    {codeString}
+  </code>
+</pre>
+
+// Terminal-style output
+<div className="bg-black text-green-400 p-4 font-mono text-sm">
+  $ npm install your-package
+  <br />
+  ✓ Installation complete
+</div>
+```
+
+### API Integration
+
+```tsx
+// Example API endpoint structure
+// app/api/tools/[tool]/route.ts
+export async function POST(request: Request) {
+  const data = await request.json()
+  // Process tool request
+  return Response.json({ result })
+}
+```
+
+### Keyboard Shortcuts
+
+```tsx
+// Example keyboard shortcut handler
+useEffect(() => {
+  const handleKeyPress = (e: KeyboardEvent) => {
+    if (e.metaKey && e.key === 'k') {
+      // Open command palette
+    }
+  }
+  document.addEventListener('keydown', handleKeyPress)
+  return () => document.removeEventListener('keydown', handleKeyPress)
+}, [])
+```
+
+## Available Scripts
+
+| Command | Description |
+|---------|-------------|
+| `npm run dev` | Start development server |
+| `npm run build` | Build for production |
+| `npm start` | Start production server |
+| `npm run lint` | Run ESLint |
+
+## Tool Categories
+
+### Supported Tool Types
+- **Code Generators**: Templates, boilerplate, snippets
+- **Testing Tools**: Unit tests, integration tests, E2E
+- **Build Tools**: Bundlers, compilers, transpilers
+- **Documentation**: API docs, README generators
+- **Analysis Tools**: Linters, formatters, profilers
+- **Deployment**: CI/CD, containerization, monitoring
+
+## Environment Variables
+
+Create a `.env.local` file for configuration:
+
+```env
+# Example environment variables
+NEXT_PUBLIC_API_URL=https://api.your-tool.com
+NEXT_PUBLIC_GITHUB_TOKEN=ghp_...
+DATABASE_URL=postgresql://...
+REDIS_URL=redis://...
+```
+
+## Responsive Design
+
+The template adapts to different screen sizes:
+
+```tsx
+// Responsive layout
+<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+  {/* Tool cards */}
+</div>
+
+// Responsive navigation
+<nav className="flex flex-col md:flex-row gap-4">
+  {/* Navigation items */}
+</nav>
+```
+
+## TypeScript
+
+Strict mode is enabled for better type safety:
+
+```json
+{
+  "compilerOptions": {
+    "strict": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true
+  }
+}
+```
+
+## Performance Optimization
+
+- Lazy loading for heavy components
+- Code splitting by feature
+- Optimized bundle size
+- Service worker for offline support
+- WebAssembly support for compute-intensive tasks
+
+## Integration Examples
+
+### GitHub Integration
+```tsx
+// Connect to GitHub API
+const octokit = new Octokit({
+  auth: process.env.GITHUB_TOKEN,
+})
+```
+
+### Database Integration
+```tsx
+// Prisma ORM example
+import { PrismaClient } from '@prisma/client'
+const prisma = new PrismaClient()
+```
+
+### Real-time Features
+```tsx
+// WebSocket connection
+const ws = new WebSocket('wss://your-api.com')
+ws.on('message', handleMessage)
+```
+
+## Browser Support
+
+- Chrome 90+
+- Firefox 88+
+- Safari 14+
+- Edge 90+
+
+## Contributing
+
+1. Fork the repository
+2. Create your feature branch
+3. Commit your changes
+4. Push to the branch
+5. Create a Pull Request
+
+## License
+
+MIT
+
+## Support
+
+For questions or issues, visit [github.com/hanzoai/templates](https://github.com/hanzoai/templates)

app/globals.css

@@ -0,0 +1,19 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --primary: #00d4ff;
+    --secondary: #00ff88;
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --border: 214.3 31.8% 91.4%;
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+  }
+}

app/layout.tsx

@@ -0,0 +1,25 @@
+import type { Metadata } from 'next'
+import { Inter } from 'next/font/google'
+import './globals.css'
+import { siteConfig } from '@/lib/site'
+
+const inter = Inter({ subsets: ['latin'] })
+
+export const metadata: Metadata = {
+  title: `${siteConfig.name} - ${siteConfig.tagline}`,
+  description: siteConfig.description,
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>
+        {children}
+      </body>
+    </html>
+  )
+}

app/page.tsx

@@ -0,0 +1,11 @@
+import { Hero } from '@/components/sections/hero'
+import { Features } from '@/components/sections/features'
+
+export default function Home() {
+  return (
+    <main className="min-h-screen">
+      <Hero />
+      <Features />
+    </main>
+  )
+}

components/sections/features.tsx

@@ -0,0 +1,29 @@
+import { siteConfig } from '@/lib/site'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@hanzo/ui/components'
+
+export function Features() {
+  return (
+    <section className="py-24 px-4 bg-gray-50 dark:bg-gray-900">
+      <div className="max-w-7xl mx-auto">
+        <h2 className="text-3xl md:text-4xl font-bold text-center mb-12">
+          Key Features
+        </h2>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
+          {siteConfig.features.map((feature, index) => (
+            <Card key={index} className="border-2 hover:border-black dark:hover:border-white transition-colors">
+              <CardHeader>
+                <div className="w-12 h-12 rounded mb-4 bg-gradient-to-br from-gray-900 to-gray-600 dark:from-gray-100 dark:to-gray-400" />
+                <CardTitle className="font-mono">{feature}</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <CardDescription>
+                  Developer tools and utilities for modern workflows.
+                </CardDescription>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}

components/sections/hero.tsx

@@ -0,0 +1,28 @@
+import { siteConfig } from '@/lib/site'
+import { Button } from '@hanzo/ui/components'
+
+export function Hero() {
+  return (
+    <section className="relative py-24 px-4">
+      <div className="max-w-7xl mx-auto text-center">
+        <h1 className="text-5xl md:text-6xl font-bold mb-6">
+          {siteConfig.name}
+        </h1>
+        <p className="text-2xl md:text-3xl text-gray-600 dark:text-gray-400 mb-8">
+          {siteConfig.tagline}
+        </p>
+        <p className="text-lg text-gray-500 dark:text-gray-500 max-w-2xl mx-auto mb-12">
+          {siteConfig.description}
+        </p>
+        <div className="flex gap-4 justify-center">
+          <Button size="lg" className="font-mono">
+            npm install
+          </Button>
+          <Button size="lg" variant="outline" className="font-mono">
+            View Docs
+          </Button>
+        </div>
+      </div>
+    </section>
+  )
+}

lib/site.ts

@@ -0,0 +1,17 @@
+export const siteConfig = {
+  name: "DevForge",
+  tagline: "Code Smarter, Ship Faster",
+  description: "The ultimate developer tools platform for modern development workflows",
+  url: "https://devtool.hanzo.ai",
+  // Monochromatic color scheme for developer tools
+  primaryColor: "#000000",
+  secondaryColor: "#666666",
+  features: [
+    "AI-Powered Code Generation",
+    "Real-time Collaboration",
+    "Automated Testing Suite",
+    "CI/CD Pipeline Integration"
+  ]
+};
+
+export type SiteConfig = typeof siteConfig;

next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

next.config.js

@@ -0,0 +1,9 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  images: {
+    domains: ['localhost'],
+  },
+}
+
+module.exports = nextConfig

package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@hanzo/devtool-template",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@hanzo/ui": "latest",
+    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-icons": "^1.3.2",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "framer-motion": "^11.18.2",
+    "lucide-react": "^0.525.0",
+    "next": "15.3.5",
+    "next-themes": "^0.4.6",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tailwind-merge": "^3.3.1"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "15.3.5",
+    "tailwindcss": "^3.4.17",
+    "typescript": "^5"
+  }
+}

tailwind.config.js

@@ -0,0 +1,27 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: ["class"],
+  content: [
+    "./pages/**/*.{ts,tsx}",
+    "./components/**/*.{ts,tsx}",
+    "./app/**/*.{ts,tsx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+      },
+    },
+  },
+  plugins: [],
+}

tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "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",
+    "incremental": true,
+    "plugins": [{"name": "next"}],
+    "paths": {"@/*": ["./*"]}
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}