Hugging Face's logo

Spaces:
Hanzo-Community
/
saasify
Runtime error

App Files Community
saasify
File size: 3,848 Bytes 
caa9064
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
 
# SaaS Template

A modern, production-ready SaaS boilerplate built with Next.js 15, TypeScript, and @hanzo/ui components.

## 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
- 💼 **Enterprise-ready** components
- ⚡ **TypeScript strict mode** enabled
- 🎯 **SEO optimized** with proper meta tags

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

```
saas/
├── app/                  # Next.js App Router
│   ├── layout.tsx       # Root layout
│   └── page.tsx         # Home 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="outline" size="lg">
  Click me
</Button>

<Card>
  <CardHeader>
    <CardTitle>Feature Title</CardTitle>
  </CardHeader>
  <CardContent>
    Content goes here
  </CardContent>
</Card>
```

## Customization

### Site Configuration

Edit `lib/site.ts` to customize your SaaS details:

```typescript
export const siteConfig = {
  name: "Your SaaS Name",
  tagline: "Your Tagline",
  description: "Your Description",
  url: "https://your-domain.com",
  features: [
    // Your features
  ]
}
```

### 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/pricing/page.tsx
import { Button, Card } from '@hanzo/ui/components'

export default function PricingPage() {
  return (
    <div className="container mx-auto py-12">
      <h1 className="text-4xl font-bold">Pricing</h1>
      {/* Your content */}
    </div>
  )
}
```

## 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://...
```

## 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="text-sm md:text-base lg:text-lg">
  Responsive text
</div>
```

## TypeScript

Strict mode is enabled in `tsconfig.json` for better type safety:

```json
{
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true
  }
}
```

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