Spaces:
Runtime error
Runtime error
Hanzo Dev
commited on
Commit
Β·
9c3ee64
1
Parent(s):
c7790bb
Fix @hanzo /ui import paths
Browse files- .npmrc +1 -0
- README.bak.md +211 -0
- components/sections/features.tsx +1 -1
- components/sections/hero.tsx +1 -1
.npmrc
ADDED
|
@@ -0,0 +1 @@
|
|
|
|
|
|
|
| 1 |
+
legacy-peer-deps=true
|
README.bak.md
ADDED
|
@@ -0,0 +1,211 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
# Startup Toolkit Template
|
| 2 |
+
|
| 3 |
+
A comprehensive startup toolkit built with Next.js 15, TypeScript, and @hanzo/ui components for rapid MVP development.
|
| 4 |
+
|
| 5 |
+
## Features
|
| 6 |
+
|
| 7 |
+
- β¨ Built with **@hanzo/ui** component library (shadcn/ui based)
|
| 8 |
+
- π¨ **Monochromatic color scheme** for professional aesthetics
|
| 9 |
+
- π± **Fully responsive** design (mobile, tablet, desktop)
|
| 10 |
+
- π **Dark mode** support with next-themes
|
| 11 |
+
- π **Next.js 15** App Router with React 19
|
| 12 |
+
- π **Startup-focused** components and features
|
| 13 |
+
- β‘ **TypeScript strict mode** enabled
|
| 14 |
+
- π― **SEO optimized** for landing pages
|
| 15 |
+
|
| 16 |
+
## Quick Start
|
| 17 |
+
|
| 18 |
+
### Installation
|
| 19 |
+
|
| 20 |
+
```bash
|
| 21 |
+
# Install dependencies
|
| 22 |
+
npm install
|
| 23 |
+
|
| 24 |
+
# Start development server
|
| 25 |
+
npm run dev
|
| 26 |
+
```
|
| 27 |
+
|
| 28 |
+
Open [http://localhost:3000](http://localhost:3000) to view your app.
|
| 29 |
+
|
| 30 |
+
### Production Build
|
| 31 |
+
|
| 32 |
+
```bash
|
| 33 |
+
# Create production build
|
| 34 |
+
npm run build
|
| 35 |
+
|
| 36 |
+
# Start production server
|
| 37 |
+
npm start
|
| 38 |
+
```
|
| 39 |
+
|
| 40 |
+
## Project Structure
|
| 41 |
+
|
| 42 |
+
```
|
| 43 |
+
startup/
|
| 44 |
+
βββ app/ # Next.js App Router
|
| 45 |
+
β βββ layout.tsx # Root layout
|
| 46 |
+
β βββ page.tsx # Landing page
|
| 47 |
+
βββ components/ # React components
|
| 48 |
+
β βββ sections/ # Page sections
|
| 49 |
+
β βββ hero.tsx # Hero section
|
| 50 |
+
β βββ features.tsx # Features grid
|
| 51 |
+
βββ lib/ # Utilities and config
|
| 52 |
+
β βββ site.ts # Site configuration
|
| 53 |
+
βββ public/ # Static assets
|
| 54 |
+
βββ package.json # Dependencies
|
| 55 |
+
```
|
| 56 |
+
|
| 57 |
+
## Component Usage
|
| 58 |
+
|
| 59 |
+
All components are imported from `@hanzo/ui`:
|
| 60 |
+
|
| 61 |
+
```tsx
|
| 62 |
+
import { Button, Card, CardContent, CardHeader, CardTitle } from '@hanzo/ui/components'
|
| 63 |
+
|
| 64 |
+
// Use components
|
| 65 |
+
<Button variant="default" size="lg">
|
| 66 |
+
Launch Your Startup
|
| 67 |
+
</Button>
|
| 68 |
+
|
| 69 |
+
<Card>
|
| 70 |
+
<CardHeader>
|
| 71 |
+
<CardTitle>Pitch Deck Builder</CardTitle>
|
| 72 |
+
</CardHeader>
|
| 73 |
+
<CardContent>
|
| 74 |
+
Create stunning pitch decks in minutes
|
| 75 |
+
</CardContent>
|
| 76 |
+
</Card>
|
| 77 |
+
```
|
| 78 |
+
|
| 79 |
+
## Customization
|
| 80 |
+
|
| 81 |
+
### Site Configuration
|
| 82 |
+
|
| 83 |
+
Edit `lib/site.ts` to customize your startup details:
|
| 84 |
+
|
| 85 |
+
```typescript
|
| 86 |
+
export const siteConfig = {
|
| 87 |
+
name: "Your Startup Name",
|
| 88 |
+
tagline: "Your Value Proposition",
|
| 89 |
+
description: "What your startup does",
|
| 90 |
+
url: "https://your-startup.com",
|
| 91 |
+
features: [
|
| 92 |
+
"Feature 1",
|
| 93 |
+
"Feature 2",
|
| 94 |
+
"Feature 3",
|
| 95 |
+
"Feature 4"
|
| 96 |
+
]
|
| 97 |
+
}
|
| 98 |
+
```
|
| 99 |
+
|
| 100 |
+
### Styling
|
| 101 |
+
|
| 102 |
+
The template uses a monochromatic color scheme with Tailwind CSS:
|
| 103 |
+
|
| 104 |
+
- Primary: Black (`#000000`)
|
| 105 |
+
- Secondary: Gray (`#666666`)
|
| 106 |
+
- Background: White/Dark gray
|
| 107 |
+
- Text: Black/White with gray variants
|
| 108 |
+
|
| 109 |
+
### Adding Pages
|
| 110 |
+
|
| 111 |
+
Create new pages in the `app/` directory:
|
| 112 |
+
|
| 113 |
+
```tsx
|
| 114 |
+
// app/investors/page.tsx
|
| 115 |
+
import { Button, Card } from '@hanzo/ui/components'
|
| 116 |
+
|
| 117 |
+
export default function InvestorsPage() {
|
| 118 |
+
return (
|
| 119 |
+
<div className="container mx-auto py-12">
|
| 120 |
+
<h1 className="text-4xl font-bold">For Investors</h1>
|
| 121 |
+
{/* Your content */}
|
| 122 |
+
</div>
|
| 123 |
+
)
|
| 124 |
+
}
|
| 125 |
+
```
|
| 126 |
+
|
| 127 |
+
## Startup Features
|
| 128 |
+
|
| 129 |
+
### Pitch Deck Builder
|
| 130 |
+
Pre-built templates for creating investor pitch decks
|
| 131 |
+
|
| 132 |
+
### Investor CRM
|
| 133 |
+
Track and manage investor relationships
|
| 134 |
+
|
| 135 |
+
### Financial Modeling
|
| 136 |
+
Templates for revenue projections and burn rate calculations
|
| 137 |
+
|
| 138 |
+
### Team Collaboration
|
| 139 |
+
Built-in components for team pages and role management
|
| 140 |
+
|
| 141 |
+
## Available Scripts
|
| 142 |
+
|
| 143 |
+
| Command | Description |
|
| 144 |
+
|---------|-------------|
|
| 145 |
+
| `npm run dev` | Start development server |
|
| 146 |
+
| `npm run build` | Build for production |
|
| 147 |
+
| `npm start` | Start production server |
|
| 148 |
+
| `npm run lint` | Run ESLint |
|
| 149 |
+
|
| 150 |
+
## Environment Variables
|
| 151 |
+
|
| 152 |
+
Create a `.env.local` file for environment-specific variables:
|
| 153 |
+
|
| 154 |
+
```env
|
| 155 |
+
# Example environment variables
|
| 156 |
+
NEXT_PUBLIC_API_URL=https://api.example.com
|
| 157 |
+
DATABASE_URL=postgresql://...
|
| 158 |
+
STRIPE_SECRET_KEY=sk_...
|
| 159 |
+
```
|
| 160 |
+
|
| 161 |
+
## Responsive Design
|
| 162 |
+
|
| 163 |
+
The template is fully responsive with breakpoints:
|
| 164 |
+
|
| 165 |
+
- Mobile: `< 640px`
|
| 166 |
+
- Tablet: `640px - 1024px`
|
| 167 |
+
- Desktop: `> 1024px`
|
| 168 |
+
|
| 169 |
+
Components automatically adapt using Tailwind's responsive prefixes:
|
| 170 |
+
|
| 171 |
+
```tsx
|
| 172 |
+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
|
| 173 |
+
{/* Responsive grid layout */}
|
| 174 |
+
</div>
|
| 175 |
+
```
|
| 176 |
+
|
| 177 |
+
## TypeScript
|
| 178 |
+
|
| 179 |
+
Strict mode is enabled in `tsconfig.json` for better type safety:
|
| 180 |
+
|
| 181 |
+
```json
|
| 182 |
+
{
|
| 183 |
+
"compilerOptions": {
|
| 184 |
+
"strict": true,
|
| 185 |
+
"noImplicitAny": true,
|
| 186 |
+
"strictNullChecks": true
|
| 187 |
+
}
|
| 188 |
+
}
|
| 189 |
+
```
|
| 190 |
+
|
| 191 |
+
## Performance Optimization
|
| 192 |
+
|
| 193 |
+
- Automatic code splitting with Next.js
|
| 194 |
+
- Image optimization with Next.js Image component
|
| 195 |
+
- Font optimization with next/font
|
| 196 |
+
- CSS purging with Tailwind CSS
|
| 197 |
+
|
| 198 |
+
## Browser Support
|
| 199 |
+
|
| 200 |
+
- Chrome (latest)
|
| 201 |
+
- Firefox (latest)
|
| 202 |
+
- Safari (latest)
|
| 203 |
+
- Edge (latest)
|
| 204 |
+
|
| 205 |
+
## License
|
| 206 |
+
|
| 207 |
+
MIT
|
| 208 |
+
|
| 209 |
+
## Support
|
| 210 |
+
|
| 211 |
+
For questions or issues, visit [github.com/hanzoai/templates](https://github.com/hanzoai/templates)
|
components/sections/features.tsx
CHANGED
|
@@ -1,5 +1,5 @@
|
|
| 1 |
import { siteConfig } from '@/lib/site'
|
| 2 |
-
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@hanzo/ui
|
| 3 |
|
| 4 |
export function Features() {
|
| 5 |
return (
|
|
|
|
| 1 |
import { siteConfig } from '@/lib/site'
|
| 2 |
+
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@hanzo/ui'
|
| 3 |
|
| 4 |
export function Features() {
|
| 5 |
return (
|
components/sections/hero.tsx
CHANGED
|
@@ -1,5 +1,5 @@
|
|
| 1 |
import { siteConfig } from '@/lib/site'
|
| 2 |
-
import { Button } from '@hanzo/ui
|
| 3 |
|
| 4 |
export function Hero() {
|
| 5 |
return (
|
|
|
|
| 1 |
import { siteConfig } from '@/lib/site'
|
| 2 |
+
import { Button } from '@hanzo/ui'
|
| 3 |
|
| 4 |
export function Hero() {
|
| 5 |
return (
|