# Startup Toolkit Template

A comprehensive startup toolkit built with Next.js 15, TypeScript, and @hanzo/ui components for rapid MVP development.

## Features

- ✨ 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

## Quick Start

### Installation

```bash
# Install dependencies
npm install

# Start development server
npm run dev
```

Open [http://localhost:3000](http://localhost:3000) to view your app.

### Production 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)