Hanzo Dev commited on
Commit
9c3ee64
Β·
1 Parent(s): c7790bb

Fix @hanzo /ui import paths

Browse files
.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/components'
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/components'
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 (