README.bak.md

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

# 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

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:

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:

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:

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

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

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

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