SaaS Growth Framework: Die ersten 100 zahlenden Kunden gewinnen, ohne Geld zu verbrennen

// src/lib/marketing/icp.ts
interface ICP {
  role: string
  companySize: string
  techStack: string[]
  painPoint: string
  budget: string
  whereTheyHangOut: string[]
}

// Beispiel-ICP für TanStack Ship:
const icpTanStackShip: ICP = {
  role: "Indie-Gründer / Full-Stack-Entwickler",
  companySize: "1-10 Mitarbeiter",
  techStack: ["React", "TypeScript", "Cloudflare", "Node.js"],
  painPoint: "SaaS-Boilerplate von Grund auf zu bauen dauert 4-8 Wochen",
  budget: "$200-500 für Tools pro Monat",
  whereTheyHangOut: [
    "r/reactjs", "r/webdev", "r/SaaS",
    "Hacker News", "X/Twitter #buildinpublic",
    "Indie Hackers", "React Discord",
  ],
}

// src/lib/marketing/content-strategy.ts
const contentPlan = [
  {
    platform: "r/reactjs",
    format: "Tutorial",
    topic: "So implementieren Sie dateibasiertes Routing mit TanStack Router",
    callToAction: "TanStack Ship als vollständigen Starter erwähnen",
    frequency: "1x pro Woche",
  },
  {
    platform: "Hacker News",
    format: "Show HN",
    topic: "Show HN: Ich habe einen SaaS-Starter mit TanStack Start + Cloudflare Workers gebaut",
    callToAction: "Direkter Link zur Landingpage",
    frequency: "Beim Launch + große Updates",
  },
  {
    platform: "X/Twitter",
    format: "Build in public",
    topic: "Täglicher Fortschritt bei SaaS-Features, Umsatz, Nutzer",
    callToAction: "Link in Bio + Profil",
    frequency: "Täglich",
  },
  {
    platform: "Indie Hackers",
    format: "Interview / Meilenstein",
    topic: "Wie ich mit TanStack Ship $1k MRR erreicht habe",
    callToAction: "Link zum Produkt",
    frequency: "Monatlich",
  },
]

// Vorlage: Hochwertige Cold-E-Mail
const coldEmailTemplate = `Betreff: Kurze Frage zu ${prospect.tool}

Hey ${prospect.firstName},

ich habe gesehen, dass Sie ${prospect.project} mit ${prospect.techStack} gebaut haben.

Ich arbeite an [Ihr Produkt] — einer [Ein-Zeilen-Wertversprechen]. Da Sie bereits ${sharedInterest} nutzen, würde ich mich über Ihr Feedback freuen.

Kein Verkaufsgespräch, nur 10 Minuten, um Ihnen zu zeigen, was ich baue, und ehrliche Meinungen zu erhalten.

Hätten Sie diese Woche Zeit für ein kurzes Gespräch?

Beste Grüße,
${yourName}`

// src/components/marketing/HeroSection.tsx
export function HeroSection() {
  return (
    <section className="max-w-4xl mx-auto text-center py-20">
      {/* 1. Problem-bewusste Headline */}
      <h1 className="text-5xl font-bold mb-4">
        Shippen Sie Ihr SaaS in Wochen, nicht Monaten
      </h1>

      {/* 2. Spezifisches Wertversprechen */}
      <p className="text-xl text-gray-600 mb-8">
        TanStack Ship bietet Ihnen einen produktionsreifen SaaS-Starter mit
        Authentifizierung, Abrechnung, UTM-Tracking und E-Mail-Kampagnen —
        damit Sie sich auf Ihre einzigartige Produktlogik konzentrieren können.
      </p>

      {/* 3. Social Proof */}
      <div className="flex justify-center gap-8 mb-12">
        <div className="text-center">
          <div className="text-3xl font-bold">50+</div>
          <div className="text-sm text-gray-500">Early Adopters</div>
        </div>
        <div className="text-center">
          <div className="text-3xl font-bold">4+</div>
          <div className="text-sm text-gray-500">Wochen gespart</div>
        </div>
        <div className="text-center">
          <div className="text-3xl font-bold">100%</div>
          <div className="text-sm text-gray-500">TypeScript</div>
        </div>
      </div>

      {/* 4. Primäre CTA */}
      <div className="flex justify-center gap-4">
        <Link
          to="/pricing"
          className="bg-blue-600 text-white px-8 py-3 rounded-lg text-lg font-semibold hover:bg-blue-700"
        >
          Jetzt starten →
        </Link>
        <Link
          to="/blog/tanstack-start-end-to-end-tutorial"
          className="border border-gray-300 px-8 py-3 rounded-lg text-lg font-semibold hover:bg-gray-50"
        >
          Tutorial lesen
        </Link>
      </div>
    </section>
  )
}

export const trackPricingView = createServerFn({ method: "POST" }).handler(
  async ({ plan, utmSource }: { plan: string; utmSource?: string }) => {
    await env.DB.prepare(
      `INSERT INTO conversion_events
        (event_type, plan, utm_source, page_url, timestamp)
       VALUES ('pricing_view', ?, ?, ?, unixepoch())`
    ).bind(plan, utmSource ?? "direct", getCurrentUrl())
      .run()
  }
)

-- Akquisitions-Events pro Nutzer verfolgen
CREATE TABLE activation_events (
  id TEXT PRIMARY KEY,
  user_id TEXT NOT NULL,
  event_type TEXT NOT NULL CHECK (
    event_type IN (
      'signed_up', 'completed_onboarding',
      'created_first_project', 'invited_team_member',
      'connected_payment', 'deployed_to_production'
    )
  ),
  occurred_at INTEGER NOT NULL DEFAULT (unixepoch()),
  FOREIGN KEY (user_id) REFERENCES users(id)
);

-- Activation-Status-View
CREATE VIEW user_activation_status AS
SELECT
  u.id,
  u.email,
  u.created_at,
  MAX(CASE WHEN ae.event_type = 'completed_onboarding' THEN 1 ELSE 0 END) as onboarded,
  MAX(CASE WHEN ae.event_type = 'created_first_project' THEN 1 ELSE 0 END) as created_project,
  MAX(CASE WHEN ae.event_type = 'deployed_to_production' THEN 1 ELSE 0 END) as deployed,
  CASE
    WHEN MAX(ae.event_type = 'deployed_to_production') THEN 'Vollständig aktiviert'
    WHEN MAX(ae.event_type = 'created_first_project') THEN 'Erkundung'
    WHEN MAX(ae.event_type = 'completed_onboarding') THEN 'Eingewiesen'
    ELSE 'Feststeckend'
  END as activation_stage
FROM users u
LEFT JOIN activation_events ae ON ae.user_id = u.id
GROUP BY u.id;

// src/lib/email/retention.ts
const retentionSequence = [
  {
    day: 1,
    subject: "Willkommen bei TanStack Ship — Ihr erstes Projekt",
    content: "Schritt-für-Schritt-Anleitung zum Deployment Ihrer ersten App",
    cta: "Jetzt deployen",
  },
  {
    day: 3,
    subject: "Tipp: Authentifizierung ist bereits eingerichtet",
    content: "So passen Sie den Auth-Flow für Ihre Marke an",
    cta: "Auth-Docs ansehen",
  },
  {
    day: 7,
    subject: "35% der Nutzer übersehen dieses Feature (UTM-Tracking)",
    content: "So verfolgen Sie jeden Kundengewinnungskanal",
    cta: "UTM einrichten",
  },
  {
    day: 14,
    subject: "Sie nutzen TanStack Ship seit 2 Wochen",
    content: "Hier ist, was Sie bisher gebaut haben + was Sie möglicherweise verpasst haben",
    cta: "Fortschritt ansehen",
  },
  {
    day: 30,
    subject: "Ein Monat — wie können wir helfen?",
    content: "Persönliche Nachfrage vom Gründer",
    cta: "Call buchen",
  },
]

// Score-basierte Intervention
export async function handleNpsResponse(
  userId: string,
  score: number,
  feedback: string
) {
  if (score >= 9) {
    // Promoter → Um Empfehlung bitten
    await triggerReferralPrompt(userId)
  } else if (score <= 6) {
    // Detractor → Sofortige Gründeransprache
    await notifyFounder(userId, feedback)
    await scheduleRecoveryCall(userId)
  }

  await env.DB.prepare(
    `INSERT INTO nps_responses (user_id, score, feedback, responded_at)
     VALUES (?, ?, ?, unixepoch())`
  ).bind(userId, score, feedback).run()
}

// src/lib/marketing/utm.ts
import { useSearchParams } from "@tanstack/react-router"

export function useUtmCapture() {
  const [searchParams] = useSearchParams()

  const utmData = {
    source: searchParams.get("utm_source") ?? "direct",
    medium: searchParams.get("utm_medium") ?? "none",
    campaign: searchParams.get("utm_campaign") ?? "none",
    term: searchParams.get("utm_term") ?? "none",
    content: searchParams.get("utm_content") ?? "none",
  }

  // UTM-Parameter sitzungsübergreifend speichern
  useEffect(() => {
    if (utmData.source !== "direct") {
      localStorage.setItem("utm_data", JSON.stringify(utmData))
      trackUtmVisit(utmData) // Serverseitiges Tracking
    }
  }, [searchParams])

  return utmData
}

CREATE VIEW first_100_dashboard AS
SELECT
  COUNT(DISTINCT u.id) as total_users,
  COUNT(DISTINCT CASE WHEN s.status = 'active' THEN u.id END) as paying_customers,
  COUNT(DISTINCT CASE WHEN ae.event_type = 'deployed_to_production' THEN u.id END) as activated_users,
  ROUND(AVG(CASE WHEN s.status = 'active' THEN s.mrr END), 2) as avg_mrr,
  ROUND(SUM(CASE WHEN s.status = 'active' THEN s.mrr END), 2) as total_mrr,
  ROUND(
    100.0 * COUNT(DISTINCT CASE WHEN s.status = 'active' THEN u.id END) /
    NULLIF(COUNT(DISTINCT u.id), 0), 1
  ) as conversion_rate,
  ROUND(
    100.0 - 100.0 * COUNT(DISTINCT CASE WHEN s.status = 'canceled' THEN u.id END) /
    NULLIF(COUNT(DISTINCT CASE WHEN s.status IN ('active', 'canceled') THEN u.id END), 0), 1
  ) as retention_rate
FROM users u
LEFT JOIN subscriptions s ON s.user_id = u.id
LEFT JOIN activation_events ae ON ae.user_id = u.id;