@plumber-ai/modern-template/README.md

Modern professional plumbing website template - Generated by Plumber AI

# @plumber-ai/modern-template

🔧 **Modern Professional Plumbing Website Template**

A beautiful, responsive, and conversion-optimized website template specifically designed for plumbing businesses. Generated by [Plumber AI](https://plumber-ai.com).

## 🚀 Features

- **Modern Design**: Clean, professional appearance that builds trust
- **Mobile Responsive**: Perfect on all devices
- **SEO Optimized**: Built-in best practices for search engines
- **Conversion Focused**: Strategic placement of CTAs and contact forms
- **TypeScript**: Full type safety and better developer experience
- **Next.js**: Server-side rendering for blazing fast performance

## 📦 Installation

```bash
npm install @plumber-ai/modern-template
```

## 🛠️ Usage

### Basic Import

```tsx
import { ModernTemplate, templateData } from "@plumber-ai/modern-template";
import type { DesignTokens } from "@plumber-ai/modern-template/types";

export default function PlumbingWebsite() {
  return <ModernTemplate data={templateData} />;
}
```

### Individual Components

```tsx
import { Hero, Services, ContactForm } from "@plumber-ai/modern-template";

export default function CustomLayout() {
  return (
    <div>
      <Hero data={data.hero} designTokens={data.designTokens} />
      <Services data={data.services} designTokens={data.designTokens} />
      <ContactForm data={data.contact} designTokens={data.designTokens} />
    </div>
  );
}
```

### TypeScript Support

```tsx
import type {
  DesignTokens,
  HeroData,
  ServicesData,
  ContactData,
} from "@plumber-ai/modern-template/types";

const customData: DesignTokens = {
  // Your custom data
};
```

## 🎨 Available Components

- **ModernTemplate** - Complete template wrapper
- **Hero** - Eye-catching header with CTA
- **Header** - Navigation with logo and phone
- **Services** - Service offerings grid
- **SpecialOffers** - Promotional sections
- **AreasServed** - Service area coverage
- **Commitment** - Value propositions
- **MascotCTA** - Character-driven call-to-action
- **WhyWait** - Urgency-driven conversion section
- **ContactForm** - Lead capture form
- **ContactFooter** - Contact information
- **Footer** - Site footer with links

## 🔧 Customization

The template is fully customizable through the `DesignTokens` interface:

```tsx
const customTokens: DesignTokens = {
  businessName: "Your Plumbing Co",
  phoneNumber: "(555) 123-4567",
  colors: {
    primary: "#2563eb",
    secondary: "#1e40af",
    accent: "#f59e0b",
  },
  fonts: {
    heading: "Inter",
    body: "Inter",
  },
  // ... more customization options
};
```

## 📱 Next.js Configuration

Add to your `next.config.js`:

```js
/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ["@plumber-ai/modern-template"],
};

module.exports = nextConfig;
```

## 🤝 Support

- 🌐 **Website**: [plumber-ai.com](https://plumber-ai.com)
- 📧 **Email**: support@plumber-ai.com
- 📚 **Documentation**: [docs.plumber-ai.com](https://docs.plumber-ai.com)

## 📄 License

MIT License - see LICENSE file for details.

---

**Made with ❤️ by Plumber AI** - Helping plumbers build better websites faster.