README.bak.md

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

# Install dependencies
npm install

# Start development server
npm run dev

Open http://localhost:3000 to view your app.

Production Build

# 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:

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:

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:

// 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:

# 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:

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

{
  "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