@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.

🚀 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

npm install @plumber-ai/modern-template

🛠️ Usage

Basic Import

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

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

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:

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:

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

module.exports = nextConfig;

🤝 Support

• 🌐 Website: plumber-ai.com
• 📧 Email: [email protected]
• 📚 Documentation: docs.plumber-ai.com

📄 License

MIT License - see LICENSE file for details.

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