🚀 Template Master

Ultra-customizable React template for AI-powered brand website generation

Perfect for AI applications that analyze brands and automatically generate branded websites.

✨ Features

• 🎨 100+ Customizable Props - Every color, font, spacing, and layout element
• 📱 Fully Responsive - Mobile-first design that works on all devices
• 🤖 AI-Ready - Designed specifically for automated brand analysis integration
• ⚡ Lightweight - Only 35KB JS + 18KB CSS (gzipped: 6.4KB + 4KB)
• 🎯 TypeScript - Fully typed with comprehensive interfaces
• 📋 Contact Forms - Built-in customizable contact forms in hero section
• 🏢 Multi-Industry - Adapts to any business type automatically

🚀 Quick Start

Installation

npm install template-master
# or
pnpm add template-master

Basic Usage

import { TemplateMaster } from "template-master";
import "template-master/dist/template-master.css";

function App() {
  const brandProps = {
    // Required props
    logoUrl: "https://your-logo.com/logo.png",
    phone: "+1 (555) 123-4567",
    companyName: "Your Business",
    headline: "Your Main Headline",
    subline: "Your business description",
    ctaLabel: "Get Started",
    heroImageUrl: "https://your-hero-image.com/hero.jpg",
    primaryColor: "#2563eb",
    accentColor: "#f59e0b",
    secondaryColor: "#64748b",
    fontHeading: "Inter",
    services: [{ title: "Service 1", description: "Service description" }],
    testimonial: { quote: "Great service!", author: "Happy Customer" },
    areas: ["Location 1", "Location 2"],
  };

  return <TemplateMaster {...brandProps} />;
}

🤖 AI Integration

Perfect for AI applications that analyze brands and generate websites automatically:

// AI Analysis → Template Props
async function generateWebsiteFromBrand(brandUrl: string) {
  // 1. Your AI analyzes the brand
  const analysis = await aiAnalyzeBrand(brandUrl);

  // 2. Map AI results to template props
  const templateProps = {
    logoUrl: analysis.logo.url,
    companyName: analysis.company.name,
    primaryColor: analysis.colors.primary,
    accentColor: analysis.colors.accent,
    fontHeading: analysis.typography.heading,
    services: analysis.services.map((s) => ({
      title: s.name,
      description: s.description,
    })),
    // ... map all other props
  };

  // 3. Generate branded website
  return <TemplateMaster {...templateProps} />;
}

📊 Props Reference

Required Props

logoUrl: string;           // Company logo URL
phone: string;             // Phone number
companyName: string;       // Business name
headline: string;          // Main hero headline
subline: string;          // Hero description
ctaLabel: string;         // Call-to-action button text
heroImageUrl: string;     // Hero background image
primaryColor: string;     // Main brand color (#hex)
accentColor: string;      // Accent color (#hex)
secondaryColor: string;   // Secondary color (#hex)
fontHeading: string;      // Heading font family
services: Array<{         // Services list
  title: string;
  description: string;
}>;
testimonial: {            // Customer testimonial
  quote: string;
  author: string;
};
areas: string[];          // Service areas

Customization Props (Optional)

// Contact Form
showContactForm?: boolean;
contactFormTitle?: string;
contactFormNote?: string;
contactFormSubmitLabel?: string;

// Colors
headerBgColor?: string;
servicesBgColor?: string;
footerBgColor?: string;
primaryTextColor?: string;
secondaryTextColor?: string;

// Layout
buttonBorderRadius?: string;
cardBorderRadius?: string;
sectionPadding?: string;
servicesLayout?: 'grid' | 'flex' | 'masonry';

// Typography
fontBody?: string;
fontSize?: { xs?: string; sm?: string; ... };

// And 50+ more customization options...

🎨 Industry Examples

Tech Startup

const techProps = {
  primaryColor: "#6366f1", // Modern blue
  fontHeading: "Inter", // Clean sans-serif
  buttonBorderRadius: "8px", // Modern rounded
  contactFormTitle: "Start Free Trial",
};

Restaurant

const restaurantProps = {
  primaryColor: "#dc2626", // Warm red
  fontHeading: "Playfair Display", // Elegant serif
  buttonBorderRadius: "6px", // Traditional
  contactFormTitle: "Make Reservation",
};

Law Firm

const lawProps = {
  primaryColor: "#1e40af", // Professional navy
  fontHeading: "Merriweather", // Classical serif
  buttonBorderRadius: "4px", // Conservative
  contactFormTitle: "Schedule Consultation",
};

📱 Responsive Design

• Mobile First - Optimized for mobile devices
• Breakpoints - Customizable responsive breakpoints
• Touch Friendly - Large touch targets and spacing
• Fast Loading - Optimized images and assets

🛠️ Development

# Install dependencies
pnpm install

# Start development server
pnpm dev

# Build for production
pnpm build

# Test with different brands
pnpm dev # Then visit http://localhost:5175

📄 License

MIT License - Use freely in commercial and personal projects.

🤝 Support

Perfect for:

• AI Website Generators
• Brand Analysis Tools
• Automated Marketing Platforms
• White-label Solutions
• Multi-tenant Applications

Built with ❤️ for the AI community.