popeye-cli 1.4.7 → 1.6.0

package/src/generators/templates/website-conversion.ts

@@ -0,0 +1,341 @@
+/**
+ * Lead capture and conversion templates
+ * Generates API route handlers for lead capture and contact form components
+ */
+
+import type { WebsiteStrategyDocument } from '../../types/website-strategy.js';
+
+/**
+ * Escape a string for safe use inside JSX template literals
+ */
+function escapeJsx(str: string): string {
+  return str
+    .replace(/\\/g, '\\\\')
+    .replace(/'/g, "\\'")
+    .replace(/`/g, '\\`')
+    .replace(/\$/g, '\\$');
+}
+
+/**
+ * Generate lead capture API route handler
+ *
+ * @param provider - Lead capture provider type
+ * @returns API route source code (src/app/api/lead/route.ts)
+ */
+export function generateLeadCaptureRoute(
+  provider: 'none' | 'webhook' | 'resend' | 'postmark' = 'webhook'
+): string {
+  if (provider === 'none') {
+    return `import { NextResponse } from 'next/server';
+
+export async function POST() {
+  return NextResponse.json(
+    { error: 'Lead capture not configured' },
+    { status: 501 }
+  );
+}
+`;
+  }
+
+  if (provider === 'resend') {
+    return `import { NextResponse } from 'next/server';
+
+interface LeadPayload {
+  name: string;
+  email: string;
+  message?: string;
+}
+
+export async function POST(request: Request) {
+  try {
+    const body: LeadPayload = await request.json();
+
+    if (!body.name || !body.email) {
+      return NextResponse.json(
+        { error: 'Name and email are required' },
+        { status: 400 }
+      );
+    }
+
+    const apiKey = process.env.RESEND_API_KEY;
+    if (!apiKey) {
+      console.error('RESEND_API_KEY not configured');
+      return NextResponse.json(
+        { error: 'Lead capture not configured' },
+        { status: 500 }
+      );
+    }
+
+    const response = await fetch('https://api.resend.com/emails', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': \`Bearer \${apiKey}\`,
+      },
+      body: JSON.stringify({
+        from: process.env.RESEND_FROM_EMAIL || 'onboarding@resend.dev',
+        to: process.env.LEAD_NOTIFICATION_EMAIL || 'team@example.com',
+        subject: \`New lead: \${body.name}\`,
+        text: \`Name: \${body.name}\\nEmail: \${body.email}\\nMessage: \${body.message || 'N/A'}\`,
+      }),
+    });
+
+    if (!response.ok) {
+      console.error('Resend API error:', await response.text());
+      return NextResponse.json({ error: 'Failed to send' }, { status: 500 });
+    }
+
+    return NextResponse.json({ success: true });
+  } catch (error) {
+    console.error('Lead capture error:', error);
+    return NextResponse.json({ error: 'Internal error' }, { status: 500 });
+  }
+}
+`;
+  }
+
+  if (provider === 'postmark') {
+    return `import { NextResponse } from 'next/server';
+
+interface LeadPayload {
+  name: string;
+  email: string;
+  message?: string;
+}
+
+export async function POST(request: Request) {
+  try {
+    const body: LeadPayload = await request.json();
+
+    if (!body.name || !body.email) {
+      return NextResponse.json(
+        { error: 'Name and email are required' },
+        { status: 400 }
+      );
+    }
+
+    const apiKey = process.env.POSTMARK_API_KEY;
+    if (!apiKey) {
+      console.error('POSTMARK_API_KEY not configured');
+      return NextResponse.json(
+        { error: 'Lead capture not configured' },
+        { status: 500 }
+      );
+    }
+
+    const response = await fetch('https://api.postmarkapp.com/email', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'X-Postmark-Server-Token': apiKey,
+      },
+      body: JSON.stringify({
+        From: process.env.POSTMARK_FROM_EMAIL || 'no-reply@example.com',
+        To: process.env.LEAD_NOTIFICATION_EMAIL || 'team@example.com',
+        Subject: \`New lead: \${body.name}\`,
+        TextBody: \`Name: \${body.name}\\nEmail: \${body.email}\\nMessage: \${body.message || 'N/A'}\`,
+      }),
+    });
+
+    if (!response.ok) {
+      console.error('Postmark API error:', await response.text());
+      return NextResponse.json({ error: 'Failed to send' }, { status: 500 });
+    }
+
+    return NextResponse.json({ success: true });
+  } catch (error) {
+    console.error('Lead capture error:', error);
+    return NextResponse.json({ error: 'Internal error' }, { status: 500 });
+  }
+}
+`;
+  }
+
+  // Default: webhook provider
+  return `import { NextResponse } from 'next/server';
+
+interface LeadPayload {
+  name: string;
+  email: string;
+  message?: string;
+}
+
+export async function POST(request: Request) {
+  try {
+    const body: LeadPayload = await request.json();
+
+    if (!body.name || !body.email) {
+      return NextResponse.json(
+        { error: 'Name and email are required' },
+        { status: 400 }
+      );
+    }
+
+    const webhookUrl = process.env.LEAD_WEBHOOK_URL;
+    if (!webhookUrl) {
+      console.error('LEAD_WEBHOOK_URL not configured');
+      return NextResponse.json(
+        { error: 'Lead capture not configured' },
+        { status: 500 }
+      );
+    }
+
+    const response = await fetch(webhookUrl, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        name: body.name,
+        email: body.email,
+        message: body.message || '',
+        timestamp: new Date().toISOString(),
+        source: 'website',
+      }),
+    });
+
+    if (!response.ok) {
+      console.error('Webhook error:', response.status);
+      return NextResponse.json({ error: 'Failed to submit' }, { status: 500 });
+    }
+
+    return NextResponse.json({ success: true });
+  } catch (error) {
+    console.error('Lead capture error:', error);
+    return NextResponse.json({ error: 'Internal error' }, { status: 500 });
+  }
+}
+`;
+}
+
+/**
+ * Generate contact form component
+ *
+ * @param strategy - Optional strategy for CTA text
+ * @returns ContactForm component source code
+ */
+export function generateContactForm(
+  strategy?: WebsiteStrategyDocument
+): string {
+  const ctaText = strategy?.conversionStrategy.primaryCta.text || 'Get Started';
+
+  return `'use client';
+
+import { useState, type FormEvent } from 'react';
+
+/**
+ * Lead capture contact form
+ * Submits to /api/lead endpoint
+ */
+export default function ContactForm() {
+  const [status, setStatus] = useState<'idle' | 'submitting' | 'success' | 'error'>('idle');
+
+  async function handleSubmit(e: FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    setStatus('submitting');
+
+    const formData = new FormData(e.currentTarget);
+    const data = {
+      name: formData.get('name') as string,
+      email: formData.get('email') as string,
+      message: formData.get('message') as string,
+    };
+
+    try {
+      const response = await fetch('/api/lead', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(data),
+      });
+
+      if (response.ok) {
+        setStatus('success');
+        e.currentTarget.reset();
+      } else {
+        setStatus('error');
+      }
+    } catch {
+      setStatus('error');
+    }
+  }
+
+  if (status === 'success') {
+    return (
+      <div className="rounded-lg bg-green-50 p-6 text-center">
+        <p className="text-lg font-medium text-green-800">Thank you for reaching out!</p>
+        <p className="mt-2 text-sm text-green-700">We will get back to you shortly.</p>
+      </div>
+    );
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4">
+      <div>
+        <label htmlFor="name" className="block text-sm font-medium text-gray-700">
+          Name
+        </label>
+        <input
+          type="text"
+          id="name"
+          name="name"
+          required
+          className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500"
+        />
+      </div>
+      <div>
+        <label htmlFor="email" className="block text-sm font-medium text-gray-700">
+          Email
+        </label>
+        <input
+          type="email"
+          id="email"
+          name="email"
+          required
+          className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500"
+        />
+      </div>
+      <div>
+        <label htmlFor="message" className="block text-sm font-medium text-gray-700">
+          Message
+        </label>
+        <textarea
+          id="message"
+          name="message"
+          rows={4}
+          className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500"
+        />
+      </div>
+      <button
+        type="submit"
+        disabled={status === 'submitting'}
+        className="w-full rounded-md bg-primary-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-primary-500 disabled:opacity-50"
+      >
+        {status === 'submitting' ? 'Sending...' : '${escapeJsx(ctaText)}'}
+      </button>
+      {status === 'error' && (
+        <p className="text-sm text-red-600">Something went wrong. Please try again.</p>
+      )}
+    </form>
+  );
+}
+`;
+}
+
+/**
+ * Generate .env.example entries for lead capture provider
+ *
+ * @param provider - Lead capture provider type
+ * @returns Environment variable example lines
+ */
+export function generateLeadCaptureEnvExample(
+  provider: 'none' | 'webhook' | 'resend' | 'postmark'
+): string {
+  switch (provider) {
+    case 'webhook':
+      return 'LEAD_WEBHOOK_URL=https://your-webhook-endpoint.com/leads\n';
+    case 'resend':
+      return 'RESEND_API_KEY=re_xxxxxxxxxxxx\nRESEND_FROM_EMAIL=onboarding@resend.dev\nLEAD_NOTIFICATION_EMAIL=team@example.com\n';
+    case 'postmark':
+      return 'POSTMARK_API_KEY=xxxxxxxxxxxx\nPOSTMARK_FROM_EMAIL=no-reply@example.com\nLEAD_NOTIFICATION_EMAIL=team@example.com\n';
+    default:
+      return '';
+  }
+}

package/src/generators/templates/website-landing.ts

@@ -0,0 +1,331 @@
+/**
+ * Landing page generator with 10 data-driven sections
+ * Each section: strategy data -> fallback -> graceful skip
+ */
+
+import type { WebsiteContentContext } from '../website-context.js';
+import {
+  mapFeatureIcon,
+  generatePainPointsSection,
+  generateDifferentiatorsSection,
+  generateHowItWorksSection,
+  generateStatsSection,
+  generateSocialProofSection,
+  generatePricingTeaserSection,
+  generateFaqSection,
+  buildFaqItemsDeclaration,
+  generateFaqItemComponent,
+  buildFaqSchema,
+  type SectionRenderInfo,
+} from './website-sections.js';
+
+/**
+ * Escape a string for safe use inside JSX template literals
+ */
+function escapeJsx(str: string): string {
+  return str
+    .replace(/\\/g, '\\\\')
+    .replace(/'/g, "\\'")
+    .replace(/`/g, '\\`')
+    .replace(/\$/g, '\\$');
+}
+
+/**
+ * Result of landing page generation with section metadata for tracing
+ */
+export interface LandingPageResult {
+  code: string;
+  sections: SectionRenderInfo[];
+}
+
+/**
+ * Generate landing page.tsx with 10 data-driven sections
+ * Sections: Hero, PainPoints, Differentiators, Features, HowItWorks,
+ *           Stats, SocialProof, PricingTeaser, FAQ, FinalCTA
+ */
+export function generateWebsiteLandingPage(
+  projectName: string,
+  context?: WebsiteContentContext
+): string {
+  const result = generateWebsiteLandingPageWithInfo(projectName, context);
+  return result.code;
+}
+
+/**
+ * Generate landing page with section render info for debug tracing
+ */
+export function generateWebsiteLandingPageWithInfo(
+  projectName: string,
+  context?: WebsiteContentContext
+): LandingPageResult {
+  const title = projectName
+    .split('-')
+    .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
+    .join(' ');
+
+  const strategy = context?.strategy;
+  const displayName = context?.productName || title;
+  const sections: SectionRenderInfo[] = [];
+
+  // --- Hero data ---
+  const headline = strategy?.messaging.headline || displayName;
+  const subheadline = strategy?.messaging.subheadline || '';
+  const eyebrow = strategy?.positioning.category || '';
+  const heroText = strategy?.messaging.longDescription
+    ? escapeJsx(strategy.messaging.longDescription)
+    : context?.description
+    ? escapeJsx(context.description)
+    : null;
+
+  const primaryCtaText = strategy?.conversionStrategy.primaryCta.text || 'Get started';
+  const primaryCtaHref = strategy?.conversionStrategy.primaryCta.href || '/pricing';
+  const secondaryCtaText = strategy?.conversionStrategy.secondaryCta.text || 'Learn more';
+  const secondaryCtaHref = strategy?.conversionStrategy.secondaryCta.href || '/docs';
+
+  sections.push({
+    name: 'Hero',
+    dataSource: strategy?.messaging ? 'strategy' : heroText ? 'docs' : 'defaults',
+    itemCount: 1,
+  });
+
+  // --- Features data ---
+  const features = context?.features && context.features.length > 0
+    ? context.features.slice(0, 6)
+    : null;
+
+  const featuresHeading = strategy?.positioning.valueProposition || 'Everything you need';
+  const featuresSubtitle = context?.description
+    ? escapeJsx(context.description).slice(0, 120)
+    : '';
+
+  sections.push({
+    name: 'Features',
+    dataSource: features ? 'docs' : 'defaults',
+    itemCount: features?.length || 0,
+  });
+
+  // --- Build features block ---
+  const featuresBlock = features
+    ? features.map((f) => {
+        const icon = mapFeatureIcon(f.title);
+        return `                {
+                  title: '${escapeJsx(f.title)}',
+                  description: '${escapeJsx(f.description)}',
+                  icon: '${icon}',
+                }`;
+      }).join(',\n')
+    : '';
+
+  // --- Trust signals ---
+  const trustSignals = strategy?.conversionStrategy.trustSignals || [];
+
+  // --- Generate conditional sections ---
+  const painPoints = generatePainPointsSection(strategy);
+  sections.push(painPoints.info);
+
+  const differentiators = generateDifferentiatorsSection(strategy);
+  sections.push(differentiators.info);
+
+  const howItWorks = generateHowItWorksSection(strategy);
+  sections.push(howItWorks.info);
+
+  const stats = generateStatsSection(strategy);
+  sections.push(stats.info);
+
+  const socialProof = generateSocialProofSection(strategy);
+  sections.push(socialProof.info);
+
+  const pricingTeaser = generatePricingTeaserSection(context);
+  sections.push(pricingTeaser.info);
+
+  const faq = generateFaqSection(strategy);
+  sections.push(faq.info);
+
+  // Final CTA section
+  sections.push({
+    name: 'FinalCTA',
+    dataSource: strategy?.messaging ? 'strategy' : 'defaults',
+    itemCount: 1,
+  });
+
+  // Determine which lucide icons are needed
+  const iconSet = new Set<string>();
+  if (features) {
+    features.forEach((f) => iconSet.add(mapFeatureIcon(f.title)));
+  }
+  // Pain points icons
+  if (painPoints.jsx) {
+    iconSet.add('AlertTriangle');
+    iconSet.add('XCircle');
+    iconSet.add('AlertOctagon');
+  }
+  // Differentiators
+  if (differentiators.jsx) {
+    iconSet.add('CheckCircle');
+  }
+  // Stats
+  if (stats.jsx) {
+    iconSet.add('CheckCircle');
+  }
+  // FAQ
+  if (faq.jsx) {
+    iconSet.add('ChevronDown');
+  }
+  // Always useful
+  iconSet.add('ArrowRight');
+
+  const iconImports = Array.from(iconSet).sort().join(', ');
+
+  // SEO metadata
+  const metaTitle = strategy?.seoStrategy.titleTemplates?.home || 'Welcome';
+  const metaDesc = strategy?.seoStrategy.metaDescriptions?.home || `Welcome to ${displayName}`;
+
+  // FAQ data declarations
+  const faqItemsDecl = buildFaqItemsDeclaration(strategy);
+  const faqItemComponent = faq.needsClientDirective ? generateFaqItemComponent() : '';
+  const faqSchemaDecl = buildFaqSchema(strategy);
+
+  // Build icon mapping for features
+  const iconComponentMap = features
+    ? `const ICON_MAP: Record<string, React.ElementType> = {\n${Array.from(new Set(features.map(f => mapFeatureIcon(f.title)))).map(icon => `  ${icon},`).join('\n')}\n};\n`
+    : '';
+
+  const code = `${faq.needsClientDirective ? "'use client';\n\nimport { useState } from 'react';\n" : ''}import type { Metadata } from 'next';
+import Link from 'next/link';
+import { ${iconImports} } from 'lucide-react';
+import Header from '@/components/Header';
+import Footer from '@/components/Footer';
+import JsonLd from '@/components/JsonLd';
+
+export const metadata: Metadata = {
+  title: '${escapeJsx(metaTitle)}',
+  description: '${escapeJsx(metaDesc)}',
+};
+
+const ORG_SCHEMA = {
+  '@context': 'https://schema.org',
+  '@type': 'Organization',
+  name: '${escapeJsx(displayName)}',
+  url: process.env.NEXT_PUBLIC_SITE_URL || 'https://${projectName}.com',
+};
+
+const PRODUCT_SCHEMA = {
+  '@context': 'https://schema.org',
+  '@type': 'SoftwareApplication',
+  name: '${escapeJsx(displayName)}',
+  applicationCategory: 'BusinessApplication',
+  operatingSystem: 'Web',
+};
+
+${faqSchemaDecl ? faqSchemaDecl + '\n' : ''}${faqItemsDecl ? '\n' + faqItemsDecl : ''}${iconComponentMap ? '\n' + iconComponentMap : ''}${features ? `\nconst features = [\n${featuresBlock}\n];\n` : ''}
+${faqItemComponent ? '\n' + faqItemComponent + '\n' : ''}
+export default function HomePage() {
+  return (
+    <>
+      <Header />
+      <JsonLd schema={ORG_SCHEMA} />
+      <JsonLd schema={PRODUCT_SCHEMA} />
+${faqSchemaDecl ? '      <JsonLd schema={FAQ_SCHEMA} />\n' : ''}      <main className="flex min-h-screen flex-col">
+        {/* Hero Section */}
+        <section className="relative overflow-hidden bg-gradient-to-br from-primary-50 via-white to-primary-50/30 py-24 sm:py-36">
+          <div className="container">
+            <div className="mx-auto max-w-3xl text-center">
+${eyebrow ? `              <p className="mb-4 inline-block rounded-full bg-primary-100 px-4 py-1.5 text-sm font-medium text-primary-700">\n                ${escapeJsx(eyebrow)}\n              </p>\n` : ''}              <h1 className="text-4xl font-bold tracking-tight text-foreground sm:text-6xl lg:text-7xl">
+                ${escapeJsx(headline)}
+              </h1>
+${subheadline ? `              <p className="mt-4 text-xl font-medium text-primary-600">\n                ${escapeJsx(subheadline)}\n              </p>` : ''}
+              <p className="mt-6 text-lg leading-8 text-muted-foreground">
+                ${heroText || ''}
+              </p>
+              <div className="mt-10 flex items-center justify-center gap-x-4">
+                <Link
+                  href="${escapeJsx(primaryCtaHref)}"
+                  className="rounded-lg bg-primary-600 px-6 py-3 text-sm font-semibold text-white shadow-lg shadow-primary-600/25 hover:bg-primary-500 transition-all hover:shadow-primary-600/40 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600"
+                >
+                  ${escapeJsx(primaryCtaText)}
+                </Link>
+                <Link
+                  href="${escapeJsx(secondaryCtaHref)}"
+                  className="group flex items-center gap-1 text-sm font-semibold text-foreground hover:text-primary-600 transition-colors"
+                >
+                  ${escapeJsx(secondaryCtaText)}
+                  <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-0.5" />
+                </Link>
+              </div>
+${trustSignals.length > 0 ? `              <div className="mt-10 flex flex-wrap items-center justify-center gap-x-8 gap-y-2">
+${trustSignals.map(s => `                <p className="text-sm font-medium text-muted-foreground">${escapeJsx(s)}</p>`).join('\n')}
+              </div>` : ''}
+            </div>
+          </div>
+        </section>
+${painPoints.jsx}${differentiators.jsx}
+        {/* Features Section */}
+${features ? `        <section id="features" className="py-20 sm:py-28">
+          <div className="container">
+            <div className="mx-auto max-w-2xl text-center">
+              <h2 className="text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
+                ${escapeJsx(featuresHeading)}
+              </h2>
+${featuresSubtitle ? `              <p className="mt-4 text-lg text-muted-foreground">\n                ${featuresSubtitle}\n              </p>` : ''}
+            </div>
+            <div className="mx-auto mt-16 max-w-5xl">
+              <div className="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
+                {features.map((feature) => {
+                  const Icon = ICON_MAP[feature.icon] || Star;
+                  return (
+                    <div
+                      key={feature.title}
+                      className="group rounded-2xl border border-border bg-card p-8 transition-all hover:shadow-lg hover:-translate-y-1"
+                    >
+                      <div className="mb-4 flex h-10 w-10 items-center justify-center rounded-lg bg-primary-100">
+                        <Icon className="h-5 w-5 text-primary-600" />
+                      </div>
+                      <h3 className="text-lg font-semibold text-foreground">
+                        {feature.title}
+                      </h3>
+                      <p className="mt-2 text-muted-foreground">{feature.description}</p>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          </div>
+        </section>` : ''}
+${howItWorks.jsx}${stats.jsx}${socialProof.jsx}${pricingTeaser.jsx}${faq.jsx}
+        {/* Final CTA Section */}
+        <section className="bg-gradient-to-br from-primary-600 to-primary-700 py-20 sm:py-28">
+          <div className="container text-center">
+            <h2 className="text-3xl font-bold tracking-tight text-white sm:text-4xl">
+              ${strategy?.messaging.elevatorPitch ? escapeJsx(strategy.messaging.elevatorPitch) : 'Ready to get started?'}
+            </h2>
+            <p className="mt-4 text-lg text-primary-100">
+              ${strategy?.messaging.subheadline ? escapeJsx(strategy.messaging.subheadline) : 'Start building today.'}
+            </p>
+            <div className="mt-8 flex items-center justify-center gap-x-4">
+              <Link
+                href="${escapeJsx(primaryCtaHref)}"
+                className="rounded-lg bg-white px-6 py-3 text-sm font-semibold text-primary-600 shadow-lg hover:bg-primary-50 transition-colors"
+              >
+                ${escapeJsx(primaryCtaText)}
+              </Link>
+              <Link
+                href="${escapeJsx(secondaryCtaHref)}"
+                className="rounded-lg border border-primary-300 px-6 py-3 text-sm font-semibold text-white hover:bg-primary-500 transition-colors"
+              >
+                ${escapeJsx(secondaryCtaText)}
+              </Link>
+            </div>
+${trustSignals.length > 0 ? `            <div className="mt-8 flex flex-wrap items-center justify-center gap-x-6 gap-y-2">
+${trustSignals.map(s => `              <p className="text-sm text-primary-200">${escapeJsx(s)}</p>`).join('\n')}
+            </div>` : ''}
+          </div>
+        </section>
+      </main>
+      <Footer />
+    </>
+  );
+}
+`;
+
+  return { code, sections };
+}