saas-init 1.0.0

package/templates/github/.github/workflows/ci.yml

@@ -0,0 +1,55 @@
+name: CI — {{name}}
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v3
+        with:
+          version: latest
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'pnpm'
+      - run: pnpm install --frozen-lockfile
+      - run: pnpm test
+
+  build:
+    needs: test
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v3
+        with:
+          version: latest
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'pnpm'
+      - run: pnpm install --frozen-lockfile
+      - run: pnpm build
+      - uses: actions/upload-artifact@v4
+        with:
+          name: next-build
+          path: .next
+          retention-days: 1
+
+  deploy:
+    needs: build
+    runs-on: ubuntu-latest
+    if: github.ref == 'refs/heads/main'
+    steps:
+      - uses: actions/checkout@v4
+      - uses: amondnet/vercel-action@v25
+        with:
+          vercel-token: ${{ secrets.VERCEL_TOKEN }}
+          vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
+          vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
+          vercel-args: '--prod'

package/templates/landing/app/page.tsx

@@ -0,0 +1,21 @@
+import Hero from '@/components/Hero';
+import ProblemAgitate from '@/components/ProblemAgitate';
+import ValueStack from '@/components/ValueStack';
+import SocialProof from '@/components/SocialProof';
+import Transformation from '@/components/Transformation';
+import SecondaryCTA from '@/components/SecondaryCTA';
+import Footer from '@/components/Footer';
+
+export default function Home() {
+  return (
+    <main>
+      <Hero />
+      <ProblemAgitate />
+      <ValueStack />
+      <SocialProof />
+      <Transformation />
+      <SecondaryCTA />
+      <Footer />
+    </main>
+  );
+}

package/templates/landing/components/Footer.tsx

@@ -0,0 +1,37 @@
+export default function Footer() {
+  return (
+    <footer className="border-t py-12 px-4">
+      <div className="max-w-5xl mx-auto">
+        <div className="flex flex-col md:flex-row items-center justify-between gap-6">
+          <span className="text-xl font-bold">{{name}}</span>
+          <nav className="flex gap-6 text-sm text-muted-foreground">
+            <a href="#" className="hover:text-foreground transition-colors">Home</a>
+            <a href="#" className="hover:text-foreground transition-colors">Features</a>
+            <a href="#" className="hover:text-foreground transition-colors">Pricing</a>
+            <a href="#" className="hover:text-foreground transition-colors">Blog</a>
+          </nav>
+          <div className="flex gap-4">
+            <a href="#" aria-label="Twitter/X" className="text-muted-foreground hover:text-foreground transition-colors">
+              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+                <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
+              </svg>
+            </a>
+            <a href="#" aria-label="GitHub" className="text-muted-foreground hover:text-foreground transition-colors">
+              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+                <path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"/>
+              </svg>
+            </a>
+            <a href="#" aria-label="LinkedIn" className="text-muted-foreground hover:text-foreground transition-colors">
+              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+                <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
+              </svg>
+            </a>
+          </div>
+        </div>
+        <div className="mt-8 text-center text-sm text-muted-foreground">
+          © {{name}}. All rights reserved.
+        </div>
+      </div>
+    </footer>
+  );
+}

package/templates/landing/components/Hero.tsx

@@ -0,0 +1,29 @@
+export default function Hero() {
+  return (
+    <section className="flex flex-col items-center text-center py-24 px-4">
+      <span className="inline-block mb-4 px-3 py-1 text-sm font-medium rounded-full bg-primary/10 text-primary">
+        {{name}}
+      </span>
+      <h1 className="text-5xl font-bold tracking-tight mb-4">
+        {{name}} — {{tagline}}
+      </h1>
+      <p className="text-xl text-muted-foreground max-w-2xl mb-8">
+        {{problemStatement}}
+      </p>
+      <a
+        href="#"
+        className="inline-flex items-center justify-center px-8 py-3 text-base font-medium rounded-md bg-primary text-primary-foreground hover:bg-primary/90 transition-colors"
+      >
+        Get started
+      </a>
+      <div className="flex items-center gap-3 mt-8 text-sm text-muted-foreground">
+        <div className="flex -space-x-2">
+          <div className="w-8 h-8 rounded-full bg-muted border-2 border-background" />
+          <div className="w-8 h-8 rounded-full bg-muted border-2 border-background" />
+          <div className="w-8 h-8 rounded-full bg-muted border-2 border-background" />
+        </div>
+        <span>Trusted by companies like yours</span>
+      </div>
+    </section>
+  );
+}

package/templates/landing/components/ProblemAgitate.tsx

@@ -0,0 +1,34 @@
+export default function ProblemAgitate() {
+  return (
+    <section className="py-20 px-4 bg-muted/50">
+      <div className="max-w-4xl mx-auto">
+        <h2 className="text-3xl font-bold text-center mb-12">
+          You&apos;re probably dealing with…
+        </h2>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+          <div className="problem-card p-6 rounded-lg bg-background border">
+            <span className="text-2xl mb-3 block">▸</span>
+            <p className="font-bold mb-2">{{problem1Title}}</p>
+            <p className="text-sm text-muted-foreground">
+              {{problem1Body}}
+            </p>
+          </div>
+          <div className="problem-card p-6 rounded-lg bg-background border">
+            <span className="text-2xl mb-3 block">▸</span>
+            <p className="font-bold mb-2">{{problem2Title}}</p>
+            <p className="text-sm text-muted-foreground">
+              {{problem2Body}}
+            </p>
+          </div>
+          <div className="problem-card p-6 rounded-lg bg-background border">
+            <span className="text-2xl mb-3 block">▸</span>
+            <p className="font-bold mb-2">{{problem3Title}}</p>
+            <p className="text-sm text-muted-foreground">
+              {{problem3Body}}
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

package/templates/landing/components/SecondaryCTA.tsx

@@ -0,0 +1,20 @@
+export default function SecondaryCTA() {
+  return (
+    <section className="py-24 px-4 bg-muted/50">
+      <div className="max-w-xl mx-auto flex flex-col items-center text-center gap-6">
+        <div className="flex -space-x-3">
+          <div className="w-12 h-12 rounded-full bg-muted border-2 border-background" />
+          <div className="w-12 h-12 rounded-full bg-muted border-2 border-background" />
+          <div className="w-12 h-12 rounded-full bg-muted border-2 border-background" />
+        </div>
+        <p className="text-2xl font-semibold">Ready to join them?</p>
+        <a
+          href="#"
+          className="inline-flex items-center justify-center px-8 py-4 text-base font-medium rounded-md bg-primary text-primary-foreground hover:bg-primary/90 transition-colors"
+        >
+          Yes — get started with {{name}}
+        </a>
+      </div>
+    </section>
+  );
+}

package/templates/landing/components/SocialProof.tsx

@@ -0,0 +1,43 @@
+export default function SocialProof() {
+  return (
+    <section className="py-20 px-4 bg-muted/50">
+      <div className="max-w-4xl mx-auto">
+        <h2 className="text-3xl font-bold text-center mb-12">
+          What our customers say
+        </h2>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+          <div className="p-6 rounded-lg bg-background border flex flex-col gap-4">
+            <div className="w-10 h-10 rounded-full bg-muted" />
+            <blockquote className="text-sm text-muted-foreground italic">
+              &ldquo;{{testimonial1Quote}}&rdquo;
+            </blockquote>
+            <div>
+              <p className="font-semibold text-sm">{{testimonial1Name}}</p>
+              <p className="text-xs text-muted-foreground">{{testimonial1Role}}</p>
+            </div>
+          </div>
+          <div className="p-6 rounded-lg bg-background border flex flex-col gap-4">
+            <div className="w-10 h-10 rounded-full bg-muted" />
+            <blockquote className="text-sm text-muted-foreground italic">
+              &ldquo;{{testimonial2Quote}}&rdquo;
+            </blockquote>
+            <div>
+              <p className="font-semibold text-sm">{{testimonial2Name}}</p>
+              <p className="text-xs text-muted-foreground">{{testimonial2Role}}</p>
+            </div>
+          </div>
+          <div className="p-6 rounded-lg bg-background border flex flex-col gap-4">
+            <div className="w-10 h-10 rounded-full bg-muted" />
+            <blockquote className="text-sm text-muted-foreground italic">
+              &ldquo;{{testimonial3Quote}}&rdquo;
+            </blockquote>
+            <div>
+              <p className="font-semibold text-sm">{{testimonial3Name}}</p>
+              <p className="text-xs text-muted-foreground">{{testimonial3Role}}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

package/templates/landing/components/Transformation.tsx

@@ -0,0 +1,48 @@
+export default function Transformation() {
+  return (
+    <section className="py-24 px-4">
+      <div className="max-w-5xl mx-auto">
+        <h2 className="text-3xl font-bold text-center mb-16">
+          Your journey with {{name}}
+        </h2>
+        <div className="flex flex-col md:flex-row items-start gap-4">
+          <div className="flex-1 rounded-lg border bg-card p-6 text-center">
+            <div className="text-4xl font-bold text-primary mb-2">①</div>
+            <div className="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-1">Day 1</div>
+            <h3 className="text-lg font-semibold mb-2">Quick Win</h3>
+            <p className="text-sm text-muted-foreground">
+              {{stage1Body}}
+            </p>
+          </div>
+          <div className="hidden md:flex items-center self-center text-muted-foreground text-2xl">→</div>
+          <div className="flex-1 rounded-lg border bg-card p-6 text-center">
+            <div className="text-4xl font-bold text-primary mb-2">②</div>
+            <div className="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-1">Week 1</div>
+            <h3 className="text-lg font-semibold mb-2">Compound</h3>
+            <p className="text-sm text-muted-foreground">
+              {{stage2Body}}
+            </p>
+          </div>
+          <div className="hidden md:flex items-center self-center text-muted-foreground text-2xl">→</div>
+          <div className="flex-1 rounded-lg border bg-card p-6 text-center">
+            <div className="text-4xl font-bold text-primary mb-2">③</div>
+            <div className="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-1">Month 1</div>
+            <h3 className="text-lg font-semibold mb-2">Advantage</h3>
+            <p className="text-sm text-muted-foreground">
+              {{stage3Body}}
+            </p>
+          </div>
+          <div className="hidden md:flex items-center self-center text-muted-foreground text-2xl">→</div>
+          <div className="flex-1 rounded-lg border bg-card p-6 text-center">
+            <div className="text-4xl font-bold text-primary mb-2">④</div>
+            <div className="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-1">Month 3+</div>
+            <h3 className="text-lg font-semibold mb-2">10x</h3>
+            <p className="text-sm text-muted-foreground">
+              {{stage4Body}}
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

package/templates/landing/components/ValueStack.tsx

@@ -0,0 +1,54 @@
+export default function ValueStack() {
+  return (
+    <section className="py-20 px-4">
+      <div className="max-w-2xl mx-auto">
+        <h2 className="text-3xl font-bold text-center mb-12">
+          Everything you need
+        </h2>
+        <div className="space-y-4 mb-8">
+          <div className="flex items-center justify-between p-4 rounded-lg border">
+            <div className="flex items-center gap-3">
+              <span className="text-xl">⚡</span>
+              <span className="font-medium">{{feature1}}</span>
+            </div>
+            <span className="text-sm text-muted-foreground">valued at $49</span>
+          </div>
+          <div className="flex items-center justify-between p-4 rounded-lg border">
+            <div className="flex items-center gap-3">
+              <span className="text-xl">🔒</span>
+              <span className="font-medium">{{feature2}}</span>
+            </div>
+            <span className="text-sm text-muted-foreground">valued at $79</span>
+          </div>
+          <div className="flex items-center justify-between p-4 rounded-lg border">
+            <div className="flex items-center gap-3">
+              <span className="text-xl">📈</span>
+              <span className="font-medium">{{feature3}}</span>
+            </div>
+            <span className="text-sm text-muted-foreground">valued at $99</span>
+          </div>
+          <div className="flex items-center justify-between p-4 rounded-lg border">
+            <div className="flex items-center gap-3">
+              <span className="text-xl">🚀</span>
+              <span className="font-medium">Production-ready deployment</span>
+            </div>
+            <span className="text-sm text-muted-foreground">valued at $129</span>
+          </div>
+        </div>
+        <div className="text-center p-4 rounded-lg bg-muted/50 mb-4">
+          <p className="text-muted-foreground">Total value: <span className="font-bold text-foreground">$356</span></p>
+        </div>
+        <div className="text-center p-6 rounded-lg border-2 border-primary">
+          <p className="text-lg font-medium mb-1">Yours today for just</p>
+          <p className="text-4xl font-bold mb-4">${{price}}</p>
+          <a
+            href="#"
+            className="inline-flex items-center justify-center px-8 py-3 text-base font-medium rounded-md bg-primary text-primary-foreground hover:bg-primary/90 transition-colors"
+          >
+            Get started now
+          </a>
+        </div>
+      </div>
+    </section>
+  );
+}

package/templates/payments/lemonsqueezy/app/api/webhooks/lemonsqueezy/route.ts

@@ -0,0 +1,58 @@
+import { NextRequest, NextResponse } from 'next/server'
+import crypto from 'crypto'
+
+export async function POST(req: NextRequest) {
+  const body = await req.text()
+  const signature = req.headers.get('x-signature')
+
+  if (!signature) {
+    return NextResponse.json({ error: 'Missing x-signature header' }, { status: 400 })
+  }
+
+  const secret = process.env.LEMONSQUEEZY_WEBHOOK_SECRET
+  if (!secret) {
+    return NextResponse.json({ error: 'Webhook secret not configured' }, { status: 500 })
+  }
+
+  const hmac = crypto.createHmac('sha256', secret)
+  const digest = hmac.update(body).digest('hex')
+
+  const sigBuf = Buffer.from(signature)
+  const digBuf = Buffer.from(digest)
+  if (sigBuf.length !== digBuf.length || !crypto.timingSafeEqual(sigBuf, digBuf)) {
+    return NextResponse.json({ error: 'Invalid webhook signature' }, { status: 400 })
+  }
+
+  let event: ReturnType<typeof JSON.parse>
+  try {
+    event = JSON.parse(body)
+  } catch {
+    return NextResponse.json({ error: 'Invalid JSON body' }, { status: 400 })
+  }
+
+  if (!event?.meta?.event_name || typeof event.meta.event_name !== 'string') {
+    return NextResponse.json({ error: 'Invalid webhook payload structure' }, { status: 400 })
+  }
+
+  const eventName: string = event.meta.event_name
+
+  switch (eventName) {
+    case 'order_created': {
+      // TODO: Record purchase in database and trigger post-purchase workflow
+      // Example: await db.orders.create({ customerId: event.data.customer_id, amount: event.data.total })
+      break
+    }
+    case 'subscription_created':
+    case 'subscription_updated':
+    case 'subscription_cancelled': {
+      // TODO: Update user subscription status in database
+      // Example: await db.users.update(subscription.customerId, { subscriptionStatus: eventName })
+      break
+    }
+    default:
+      // Silently ignore unhandled event types
+      break
+  }
+
+  return NextResponse.json({ received: true })
+}

package/templates/payments/lemonsqueezy/lib/lemonsqueezy.ts

@@ -0,0 +1,13 @@
+import { lemonSqueezySetup } from '@lemonsqueezy/lemonsqueezy.js'
+
+const apiKey = process.env.LEMONSQUEEZY_API_KEY
+if (!apiKey) {
+  throw new Error('Missing required environment variable: LEMONSQUEEZY_API_KEY')
+}
+
+// lemonSqueezySetup configures the global client. Import API functions directly:
+// import { listProducts, createCheckout } from '@lemonsqueezy/lemonsqueezy.js'
+lemonSqueezySetup({
+  apiKey,
+  onError: (error) => console.error('Lemon Squeezy error:', error),
+})

package/templates/payments/stripe/app/api/webhooks/stripe/route.ts

@@ -0,0 +1,46 @@
+import { NextRequest, NextResponse } from 'next/server'
+import Stripe from 'stripe'
+import { stripe } from '@/lib/stripe'
+
+export async function POST(req: NextRequest) {
+  const body = await req.text()
+  const signature = req.headers.get('stripe-signature')
+
+  if (!signature) {
+    return NextResponse.json({ error: 'Missing stripe-signature header' }, { status: 400 })
+  }
+
+  const webhookSecret = process.env.STRIPE_WEBHOOK_SECRET
+  if (!webhookSecret) {
+    return NextResponse.json({ error: 'Webhook secret not configured' }, { status: 500 })
+  }
+
+  let event: Stripe.Event
+
+  try {
+    event = stripe.webhooks.constructEvent(body, signature, webhookSecret)
+  } catch {
+    return NextResponse.json({ error: 'Webhook signature verification failed' }, { status: 400 })
+  }
+
+  switch (event.type) {
+    case 'checkout.session.completed': {
+      const session = event.data.object as Stripe.Checkout.Session
+      // TODO: Update user subscription status and handle successful checkout
+      // Example: await db.users.update(session.client_reference_id, { subscriptionActive: true })
+      break
+    }
+    case 'customer.subscription.updated':
+    case 'customer.subscription.deleted': {
+      const subscription = event.data.object as Stripe.Subscription
+      // TODO: Update user subscription status based on subscription state
+      // Example: await db.users.update(subscription.metadata.userId, { subscriptionActive: subscription.status === 'active' })
+      break
+    }
+    default:
+      // Silently ignore unhandled event types
+      break
+  }
+
+  return NextResponse.json({ received: true })
+}

package/templates/payments/stripe/lib/stripe.ts

@@ -0,0 +1,10 @@
+import Stripe from 'stripe'
+
+const secretKey = process.env.STRIPE_SECRET_KEY
+if (!secretKey) {
+  throw new Error('Missing required environment variable: STRIPE_SECRET_KEY')
+}
+
+export const stripe = new Stripe(secretKey, {
+  apiVersion: '2025-01-27.acacia',
+})