Add proper YAML frontmatter to README

README.md

@@ -1,211 +1,40 @@
-# Startup Toolkit Template
+---
+title: startupkit
+emoji: 🚀
+colorFrom: gray
+colorTo: gray
+sdk: docker
+pinned: false
+---
 
-A comprehensive startup toolkit built with Next.js 15, TypeScript, and @hanzo/ui components for rapid MVP development.
+# startupkit Template
+
+A Hanzo template for building modern applications.
 
 ## Features
+- Built with @hanzo/ui
+- Fully responsive
+- TypeScript support
+- Tailwind CSS styling
+- shadcn/ui components
 
-- ✨ Built with **@hanzo/ui** component library (shadcn/ui based)
-- 🎨 **Monochromatic color scheme** for professional aesthetics
-- 📱 **Fully responsive** design (mobile, tablet, desktop)
-- 🌙 **Dark mode** support with next-themes
-- 🚀 **Next.js 15** App Router with React 19
-- 📊 **Startup-focused** components and features
-- ⚡ **TypeScript strict mode** enabled
-- 🎯 **SEO optimized** for landing pages
+## Installation
 
-## Quick Start
+```bash
+npx create-hanzo-app --template startupkit
+```
 
-### Installation
+## Development
 
 ```bash
-# Install dependencies
 npm install
-
-# Start development server
 npm run dev
 ```
 
-Open [http://localhost:3000](http://localhost:3000) to view your app.
-
-### Production Build
+## Build
 
 ```bash
-# Create production build
 npm run build
-
-# Start production server
-npm start
-```
-
-## Project Structure
-
-```
-startup/
-├── app/                  # Next.js App Router
-│   ├── layout.tsx       # Root layout
-│   └── page.tsx         # Landing page
-├── components/          # React components
-│   └── sections/        # Page sections
-│       ├── hero.tsx     # Hero section
-│       └── features.tsx # Features grid
-├── lib/                 # Utilities and config
-│   └── site.ts          # Site configuration
-├── public/              # Static assets
-└── package.json         # Dependencies
-```
-
-## Component Usage
-
-All components are imported from `@hanzo/ui`:
-
-```tsx
-import { Button, Card, CardContent, CardHeader, CardTitle } from '@hanzo/ui/components'
-
-// Use components
-<Button variant="default" size="lg">
-  Launch Your Startup
-</Button>
-
-<Card>
-  <CardHeader>
-    <CardTitle>Pitch Deck Builder</CardTitle>
-  </CardHeader>
-  <CardContent>
-    Create stunning pitch decks in minutes
-  </CardContent>
-</Card>
-```
-
-## Customization
-
-### Site Configuration
-
-Edit `lib/site.ts` to customize your startup details:
-
-```typescript
-export const siteConfig = {
-  name: "Your Startup Name",
-  tagline: "Your Value Proposition",
-  description: "What your startup does",
-  url: "https://your-startup.com",
-  features: [
-    "Feature 1",
-    "Feature 2",
-    "Feature 3",
-    "Feature 4"
-  ]
-}
-```
-
-### Styling
-
-The template uses a monochromatic color scheme with Tailwind CSS:
-
-- Primary: Black (`#000000`)
-- Secondary: Gray (`#666666`)
-- Background: White/Dark gray
-- Text: Black/White with gray variants
-
-### Adding Pages
-
-Create new pages in the `app/` directory:
-
-```tsx
-// app/investors/page.tsx
-import { Button, Card } from '@hanzo/ui/components'
-
-export default function InvestorsPage() {
-  return (
-    <div className="container mx-auto py-12">
-      <h1 className="text-4xl font-bold">For Investors</h1>
-      {/* Your content */}
-    </div>
-  )
-}
 ```
 
-## Startup Features
-
-### Pitch Deck Builder
-Pre-built templates for creating investor pitch decks
-
-### Investor CRM
-Track and manage investor relationships
-
-### Financial Modeling
-Templates for revenue projections and burn rate calculations
-
-### Team Collaboration
-Built-in components for team pages and role management
-
-## 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 |
-
-## Environment Variables
-
-Create a `.env.local` file for environment-specific variables:
-
-```env
-# Example environment variables
-NEXT_PUBLIC_API_URL=https://api.example.com
-DATABASE_URL=postgresql://...
-STRIPE_SECRET_KEY=sk_...
-```
-
-## Responsive Design
-
-The template is fully responsive with breakpoints:
-
-- Mobile: `< 640px`
-- Tablet: `640px - 1024px`
-- Desktop: `> 1024px`
-
-Components automatically adapt using Tailwind's responsive prefixes:
-
-```tsx
-<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
-  {/* Responsive grid layout */}
-</div>
-```
-
-## TypeScript
-
-Strict mode is enabled in `tsconfig.json` for better type safety:
-
-```json
-{
-  "compilerOptions": {
-    "strict": true,
-    "noImplicitAny": true,
-    "strictNullChecks": true
-  }
-}
-```
-
-## Performance Optimization
-
-- Automatic code splitting with Next.js
-- Image optimization with Next.js Image component
-- Font optimization with next/font
-- CSS purging with Tailwind CSS
-
-## Browser Support
-
-- Chrome (latest)
-- Firefox (latest)
-- Safari (latest)
-- Edge (latest)
-
-## License
-
-MIT
-
-## Support
-
-For questions or issues, visit [github.com/hanzoai/templates](https://github.com/hanzoai/templates)
+Check out the [Hanzo Template Gallery](https://huggingface.co/spaces/hanzoai/gallery) for more templates.