@pylonsync/create-pylon 0.3.269 → 0.3.271

package/templates/default/components/marketing.tsx

@@ -0,0 +1,370 @@
+import React from "react";
+import { Link } from "@pylonsync/react";
+import type { SitePage, Comparison } from "@/lib/site";
+
+// Reusable presentational pieces for the marketing pages (homepage +
+// /products/[slug]). All server-rendered — no client JS. Restyle here and every
+// marketing page follows.
+
+// Shared container: the whole marketing site is a contained, left-aligned column.
+export const WRAP = "mx-auto w-full max-w-5xl px-6";
+
+export function Divider() {
+  return (
+    <div className={WRAP}>
+      <div className="border-t border-zinc-200/70" />
+    </div>
+  );
+}
+
+export function Eyebrow({ children }: { children: React.ReactNode }) {
+  return (
+    <p className="font-mono text-[11px] font-semibold uppercase tracking-[0.14em] text-brand">
+      {children}
+    </p>
+  );
+}
+
+export function Badge({ children }: { children: React.ReactNode }) {
+  return (
+    <span className="inline-flex items-center gap-2 rounded-full border border-zinc-200 bg-white py-1 pl-1 pr-3 text-[13px] text-zinc-600">
+      <span className="rounded-full bg-brand-soft px-2 py-0.5 text-[11px] font-semibold uppercase tracking-wide text-brand">
+        New
+      </span>
+      {children}
+    </span>
+  );
+}
+
+export function SectionHead({
+  eyebrow,
+  title,
+  body,
+  arrow,
+}: {
+  eyebrow: string;
+  title: string;
+  body: string;
+  arrow?: boolean;
+}) {
+  return (
+    <div>
+      <Eyebrow>
+        {eyebrow}
+        {arrow ? " →" : ""}
+      </Eyebrow>
+      <h2 className="mt-4 max-w-2xl text-balance text-3xl font-semibold leading-[1.1] tracking-[-0.02em] sm:text-[2.5rem]">
+        {title}
+      </h2>
+      <p className="mt-5 max-w-xl text-[15px] leading-relaxed text-zinc-500">
+        {body}
+      </p>
+    </div>
+  );
+}
+
+export function FeatureGrid({
+  items,
+  columns = 3,
+  className = "",
+}: {
+  items: { title: string; body: string }[];
+  columns?: 2 | 3;
+  className?: string;
+}) {
+  const cols =
+    columns === 2 ? "sm:grid-cols-2" : "sm:grid-cols-2 lg:grid-cols-3";
+  return (
+    <div className={`grid gap-x-8 gap-y-10 ${cols} ${className}`}>
+      {items.map((f) => (
+        <div key={f.title}>
+          <h3 className="text-[15px] font-medium text-brand">{f.title}</h3>
+          <p className="mt-2 text-[14px] leading-relaxed text-zinc-500">
+            {f.body}
+          </p>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export function PrimaryButton({
+  href,
+  children,
+  className = "",
+}: {
+  href: string;
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <Link
+      href={href}
+      className={`inline-flex items-center rounded-full bg-zinc-900 px-5 py-2.5 text-sm font-medium text-white transition-colors hover:bg-zinc-700 ${className}`}
+    >
+      {children}
+    </Link>
+  );
+}
+
+export function GhostLink({
+  href,
+  children,
+}: {
+  href: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <Link
+      href={href}
+      className="text-sm font-medium text-zinc-700 transition-colors hover:text-zinc-900"
+    >
+      {children}
+    </Link>
+  );
+}
+
+// Browser-chrome frame around an image placeholder. Drop a real screenshot in
+// place of the dashed box.
+export function Shot({ url, label }: { url: string; label: string }) {
+  return (
+    <div className="overflow-hidden rounded-2xl border border-zinc-200 bg-white shadow-[0_30px_70px_-35px_rgba(0,0,0,0.3)]">
+      <div className="flex items-center gap-1.5 border-b border-zinc-100 px-4 py-3">
+        <span className="size-2.5 rounded-full bg-zinc-200" />
+        <span className="size-2.5 rounded-full bg-zinc-200" />
+        <span className="size-2.5 rounded-full bg-zinc-200" />
+        <span className="mx-auto rounded-md bg-zinc-100 px-10 py-1 text-[11px] text-zinc-400">
+          {url}
+        </span>
+      </div>
+      <div className="grid aspect-[16/9] place-items-center bg-zinc-50">
+        <div className="flex flex-col items-center gap-2.5 text-zinc-400">
+          <span className="flex size-11 items-center justify-center rounded-xl border-2 border-dashed border-zinc-300 text-lg">
+            ▦
+          </span>
+          <p className="text-sm font-medium text-zinc-500">{label}</p>
+          <p className="text-xs text-zinc-400">Replace with a screenshot</p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// Square media slot for a testimonial portrait. Renders the person's initials
+// on a soft gradient so it looks intentional out of the box — drop in a real
+// photo (an <img> here) when you have one.
+export function Portrait({ name }: { name?: string }) {
+  const initials = name
+    ? name
+        .split(/\s+/)
+        .map((w) => w[0])
+        .join("")
+        .slice(0, 2)
+        .toUpperCase()
+    : null;
+  return (
+    <div className="grid aspect-square w-full place-items-center overflow-hidden rounded-2xl border border-zinc-200 bg-gradient-to-br from-zinc-100 to-zinc-200/80">
+      {initials ? (
+        <span className="select-none text-5xl font-semibold tracking-tight text-zinc-400">
+          {initials}
+        </span>
+      ) : (
+        <span className="flex size-12 items-center justify-center rounded-full border-2 border-dashed border-zinc-300 text-xl text-zinc-400">
+          ◐
+        </span>
+      )}
+    </div>
+  );
+}
+
+export function Terminal() {
+  return (
+    <div className="overflow-hidden rounded-2xl border border-zinc-800 bg-zinc-950 shadow-[0_30px_70px_-35px_rgba(0,0,0,0.6)]">
+      <div className="flex items-center gap-1.5 border-b border-white/10 px-4 py-3">
+        <span className="size-2.5 rounded-full bg-white/20" />
+        <span className="size-2.5 rounded-full bg-white/20" />
+        <span className="size-2.5 rounded-full bg-white/20" />
+        <span className="ml-3 font-mono text-[11px] text-white/40">
+          acme · automation run
+        </span>
+      </div>
+      <div className="space-y-3 p-6 font-mono text-[12.5px] leading-relaxed text-zinc-300">
+        <p className="text-zinc-500">▸ Rule · when a task is moved to Done</p>
+        <p className="text-brand">
+          step 1{" "}
+          <span className="text-zinc-500">→ notify the project channel</span>
+        </p>
+        <p className="text-brand">
+          step 2{" "}
+          <span className="text-zinc-500">→ close the linked subtasks</span>
+        </p>
+        <div className="rounded-lg border-l-2 border-brand/60 bg-white/5 px-4 py-3 text-zinc-200">
+          <p className="font-semibold">Run complete</p>
+          <p className="mt-1 text-zinc-400">
+            2 steps ran in 240ms — 1 notification sent, 3 subtasks closed.
+          </p>
+        </div>
+        <p className="text-zinc-500">▸ Trigger · on every status change</p>
+        <p className="text-brand">
+          status{" "}
+          <span className="text-zinc-500">→ active · 128 runs this week</span>
+        </p>
+      </div>
+    </div>
+  );
+}
+
+// A generic content page (solutions / resources / company). Renders a hero, a
+// grid of sections, a CTA, and links to its siblings.
+export function ContentPage({
+  page,
+  siblings,
+  basePath,
+  ctaHref,
+}: {
+  page: SitePage;
+  siblings: SitePage[];
+  basePath: string;
+  ctaHref: string;
+}) {
+  const others = siblings.filter((s) => s.slug !== page.slug);
+  return (
+    <div className="bg-white text-zinc-900">
+      <section className={`${WRAP} pt-16 pb-16 sm:pt-20`}>
+        <Link
+          href="/"
+          className="text-[13px] text-zinc-500 transition-colors hover:text-zinc-900"
+        >
+          ← Home
+        </Link>
+        <div className="mt-6">
+          <Eyebrow>{page.eyebrow}</Eyebrow>
+        </div>
+        <h1 className="mt-4 max-w-2xl text-balance text-[2.25rem] font-semibold leading-[1.05] tracking-[-0.02em] sm:text-[3rem]">
+          {page.title}
+        </h1>
+        <p className="mt-6 max-w-xl text-[17px] leading-relaxed text-zinc-500">
+          {page.summary}
+        </p>
+        <div className="mt-8">
+          <PrimaryButton href={ctaHref}>Get started</PrimaryButton>
+        </div>
+      </section>
+
+      <Divider />
+      <section className={`${WRAP} py-20`}>
+        <FeatureGrid items={page.sections} />
+      </section>
+
+      {others.length > 0 && (
+        <>
+          <Divider />
+          <section className={`${WRAP} py-16`}>
+            <Eyebrow>{page.eyebrow}</Eyebrow>
+            <div className="mt-6 grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
+              {others.map((s) => (
+                <Link
+                  key={s.slug}
+                  href={`${basePath}/${s.slug}`}
+                  className="rounded-xl border border-zinc-200 bg-paper px-4 py-3 text-[14px] font-medium text-zinc-700 transition-colors hover:border-zinc-300 hover:bg-white hover:text-zinc-900"
+                >
+                  {s.navLabel} →
+                </Link>
+              ))}
+            </div>
+          </section>
+        </>
+      )}
+    </div>
+  );
+}
+
+// A comparison page: hero + a feature-by-feature table + links to the other
+// comparisons.
+export function ComparePage({
+  cmp,
+  all,
+  ctaHref,
+}: {
+  cmp: Comparison;
+  all: Comparison[];
+  ctaHref: string;
+}) {
+  const others = all.filter((c) => c.slug !== cmp.slug);
+  return (
+    <div className="bg-white text-zinc-900">
+      <section className={`${WRAP} pt-16 pb-16 sm:pt-20`}>
+        <Link
+          href="/"
+          className="text-[13px] text-zinc-500 transition-colors hover:text-zinc-900"
+        >
+          ← Home
+        </Link>
+        <div className="mt-6">
+          <Eyebrow>Compare</Eyebrow>
+        </div>
+        <h1 className="mt-4 max-w-2xl text-balance text-[2.25rem] font-semibold leading-[1.05] tracking-[-0.02em] sm:text-[3rem]">
+          {cmp.title}
+        </h1>
+        <p className="mt-6 max-w-xl text-[17px] leading-relaxed text-zinc-500">
+          {cmp.summary}
+        </p>
+        <div className="mt-8">
+          <PrimaryButton href={ctaHref}>Get started</PrimaryButton>
+        </div>
+      </section>
+
+      <Divider />
+      <section className={`${WRAP} py-16`}>
+        <div className="overflow-hidden rounded-2xl border border-zinc-200">
+          <table className="w-full text-[14px]">
+            <thead>
+              <tr className="border-b border-zinc-200 bg-paper text-left">
+                <th className="px-5 py-3 font-medium text-zinc-400"></th>
+                <th className="px-5 py-3 font-semibold text-zinc-900">Acme</th>
+                <th className="px-5 py-3 font-medium text-zinc-500">
+                  {cmp.competitor}
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              {cmp.rows.map((r) => (
+                <tr
+                  key={r.dim}
+                  className="border-b border-zinc-100 last:border-0"
+                >
+                  <td className="px-5 py-3.5 text-zinc-600">{r.dim}</td>
+                  <td className="px-5 py-3.5 font-medium text-zinc-900">
+                    <span className="mr-2 text-brand">✓</span>
+                    {r.acme}
+                  </td>
+                  <td className="px-5 py-3.5 text-zinc-500">{r.them}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </section>
+
+      {others.length > 0 && (
+        <>
+          <Divider />
+          <section className={`${WRAP} py-16`}>
+            <Eyebrow>More comparisons</Eyebrow>
+            <div className="mt-6 grid gap-3 sm:grid-cols-3">
+              {others.map((c) => (
+                <Link
+                  key={c.slug}
+                  href={`/compare/${c.slug}`}
+                  className="rounded-xl border border-zinc-200 bg-paper px-4 py-3 text-[14px] font-medium text-zinc-700 transition-colors hover:border-zinc-300 hover:bg-white hover:text-zinc-900"
+                >
+                  {c.navLabel} →
+                </Link>
+              ))}
+            </div>
+          </section>
+        </>
+      )}
+    </div>
+  );
+}

package/templates/default/functions/_pylonStripeFindActiveSubForReference.ts

@@ -0,0 +1,3 @@
+// Auto-wired Stripe billing handler. The function name is the filename;
+// the implementation comes from the @pylonsync/stripe plugin via lib/billing.
+export { _pylonStripeFindActiveSubForReference as default } from "../lib/billing";

package/templates/default/functions/_pylonStripeFindByCustomerId.ts

@@ -0,0 +1,3 @@
+// Auto-wired Stripe billing handler. The function name is the filename;
+// the implementation comes from the @pylonsync/stripe plugin via lib/billing.
+export { _pylonStripeFindByCustomerId as default } from "../lib/billing";

package/templates/default/functions/_pylonStripeGetCustomerHolder.ts

@@ -0,0 +1,3 @@
+// Auto-wired Stripe billing handler. The function name is the filename;
+// the implementation comes from the @pylonsync/stripe plugin via lib/billing.
+export { _pylonStripeGetCustomerHolder as default } from "../lib/billing";

package/templates/default/functions/_pylonStripeListSubsForReference.ts

@@ -0,0 +1,3 @@
+// Auto-wired Stripe billing handler. The function name is the filename;
+// the implementation comes from the @pylonsync/stripe plugin via lib/billing.
+export { _pylonStripeListSubsForReference as default } from "../lib/billing";

package/templates/default/functions/_pylonStripeOrgMembership.ts

@@ -0,0 +1,3 @@
+// Auto-wired Stripe billing handler. The function name is the filename;
+// the implementation comes from the @pylonsync/stripe plugin via lib/billing.
+export { _pylonStripeOrgMembership as default } from "../lib/billing";

package/templates/default/functions/_pylonStripeSetCustomerId.ts

@@ -0,0 +1,3 @@
+// Auto-wired Stripe billing handler. The function name is the filename;
+// the implementation comes from the @pylonsync/stripe plugin via lib/billing.
+export { _pylonStripeSetCustomerId as default } from "../lib/billing";

package/templates/default/functions/_pylonStripeUpsertSubscription.ts

@@ -0,0 +1,3 @@
+// Auto-wired Stripe billing handler. The function name is the filename;
+// the implementation comes from the @pylonsync/stripe plugin via lib/billing.
+export { _pylonStripeUpsertSubscription as default } from "../lib/billing";

package/templates/default/functions/cancelSubscription.ts

@@ -0,0 +1,3 @@
+// Auto-wired Stripe billing handler. The function name is the filename;
+// the implementation comes from the @pylonsync/stripe plugin via lib/billing.
+export { cancelSubscription as default } from "../lib/billing";

package/templates/default/functions/createBillingPortalSession.ts

@@ -0,0 +1,3 @@
+// Auto-wired Stripe billing handler. The function name is the filename;
+// the implementation comes from the @pylonsync/stripe plugin via lib/billing.
+export { createBillingPortalSession as default } from "../lib/billing";

package/templates/default/functions/createCheckoutSession.ts

@@ -0,0 +1,3 @@
+// Auto-wired Stripe billing handler. The function name is the filename;
+// the implementation comes from the @pylonsync/stripe plugin via lib/billing.
+export { createCheckoutSession as default } from "../lib/billing";

package/templates/default/functions/restoreSubscription.ts

@@ -0,0 +1,3 @@
+// Auto-wired Stripe billing handler. The function name is the filename;
+// the implementation comes from the @pylonsync/stripe plugin via lib/billing.
+export { restoreSubscription as default } from "../lib/billing";

package/templates/default/functions/stripeWebhook.ts

@@ -0,0 +1,3 @@
+// Auto-wired Stripe billing handler. The function name is the filename;
+// the implementation comes from the @pylonsync/stripe plugin via lib/billing.
+export { stripeWebhook as default } from "../lib/billing";

package/templates/default/lib/billing.ts

@@ -0,0 +1,46 @@
+import { stripe } from "@pylonsync/stripe";
+
+// Per-workspace (org) billing. The active org IS the billing reference: its
+// subscription decides the plan, and only owners/admins can change it (the
+// plugin enforces that for `referenceType: "org"`). The Stripe customer is
+// created on first checkout and stored on `Org.stripeCustomerId`.
+//
+// Configure with env vars (nothing is hard-coded so test/live swap cleanly):
+//   STRIPE_SECRET_KEY       sk_test_… / sk_live_…   (required to charge)
+//   STRIPE_WEBHOOK_SECRET   whsec_…                 (required for the webhook)
+//   STRIPE_PRICE_PRO        price_…                 (the "pro" monthly price)
+// Until STRIPE_SECRET_KEY is set the handlers return STRIPE_NOT_CONFIGURED and
+// the Billing page shows a "connect Stripe" state — the app still boots + runs.
+export const billing = stripe({
+  referenceType: "org",
+  plans: [
+    {
+      name: "pro",
+      priceId: process.env.STRIPE_PRICE_PRO ?? "",
+      // App-defined entitlement limits, stored on the subscription row so
+      // quota checks don't need the plan list. Tune to whatever you meter.
+      limits: { projects: 100, seats: 25 },
+    },
+  ],
+});
+
+// Pylon's file-based function loader needs one default export per function
+// file, so each handler gets a one-line wrapper under functions/. Re-export the
+// public actions + the plugin-internal `_pylonStripe*` handlers (called via
+// ctx.runQuery / ctx.runMutation) so those wrappers have something to import.
+const h = billing.handlers as Record<string, unknown>;
+
+export const createCheckoutSession = h.createCheckoutSession;
+export const createBillingPortalSession = h.createBillingPortalSession;
+export const cancelSubscription = h.cancelSubscription;
+export const restoreSubscription = h.restoreSubscription;
+export const stripeWebhook = h.stripeWebhook;
+
+export const _pylonStripeListSubsForReference = h._pylonStripeListSubsForReference;
+export const _pylonStripeFindActiveSubForReference =
+  h._pylonStripeFindActiveSubForReference;
+export const _pylonStripeGetCustomerHolder = h._pylonStripeGetCustomerHolder;
+export const _pylonStripeFindByCustomerId = h._pylonStripeFindByCustomerId;
+export const _pylonStripeOrgMembership = h._pylonStripeOrgMembership;
+export const _pylonStripeSetCustomerId = h._pylonStripeSetCustomerId;
+export const _pylonStripeUpsertSubscription = h._pylonStripeUpsertSubscription;

package/templates/default/lib/products.ts

@@ -0,0 +1,122 @@
+// Single source of truth for the marketing "products". The nav dropdown, the
+// homepage feature sections, and the /products/[slug] pages all read from here,
+// so a product is defined once. Add an entry and it shows up everywhere.
+// Fictional demo copy — rename these to your real product modules.
+
+export type ProductFeature = { title: string; body: string };
+
+export type Product = {
+  slug: string;
+  icon: string;
+  title: string; // nav label + page <h1> subject
+  tagline: string; // one-line blurb for the nav dropdown
+  eyebrow: string; // section/page eyebrow
+  headline: string; // page hero headline
+  summary: string; // page hero paragraph
+  features: ProductFeature[];
+  mockupUrl: string; // fake browser URL in the screenshot frame
+  mockupLabel: string; // placeholder label inside the frame
+};
+
+export const PRODUCTS: Product[] = [
+  {
+    slug: "projects",
+    icon: "▤",
+    title: "Projects",
+    tagline: "Plan and track every initiative.",
+    eyebrow: "Projects",
+    headline: "Plan every project in one place.",
+    summary:
+      "Give your team one place to plan the work, see what is in flight, and keep every project moving toward done.",
+    mockupUrl: "acme.app/projects",
+    mockupLabel: "Projects board",
+    features: [
+      { title: "Flexible views", body: "See the work as a board, a list, or a timeline — whatever fits the team." },
+      { title: "Milestones", body: "Group work into milestones so everyone knows what ships next." },
+      { title: "Dependencies", body: "Link related work so blockers surface before they bite." },
+      { title: "Custom fields", body: "Track the details that matter to your team, your way." },
+      { title: "Templates", body: "Start new projects from a template instead of a blank page." },
+      { title: "Saved filters", body: "Slice the work by owner, status, or label in a single click." },
+    ],
+  },
+  {
+    slug: "tasks",
+    icon: "✓",
+    title: "Tasks",
+    tagline: "Assign, prioritize, and finish work.",
+    eyebrow: "Tasks",
+    headline: "Turn plans into finished work.",
+    summary:
+      "Break projects into tasks, assign owners, and watch progress update in real time across every screen.",
+    mockupUrl: "acme.app/tasks",
+    mockupLabel: "Task list",
+    features: [
+      { title: "Assignees and due dates", body: "Every task has a clear owner and a clear deadline." },
+      { title: "Subtasks", body: "Break big tasks into small, checkable steps." },
+      { title: "Priorities", body: "Sort by what matters most so the right work happens first." },
+      { title: "Comments", body: "Discuss the work where it lives, with full context attached." },
+      { title: "My work", body: "A personal view of everything on your plate, across projects." },
+      { title: "Recurring tasks", body: "Set it once and the task comes back when it should." },
+    ],
+  },
+  {
+    slug: "docs",
+    icon: "≡",
+    title: "Docs",
+    tagline: "Write and share team knowledge.",
+    eyebrow: "Docs",
+    headline: "Keep what your team knows in one place.",
+    summary:
+      "Write docs, notes, and specs alongside the work, so the context never lives in just one person's head.",
+    mockupUrl: "acme.app/docs",
+    mockupLabel: "Doc editor",
+    features: [
+      { title: "Rich editor", body: "Headings, checklists, tables, and embeds in a clean editor." },
+      { title: "Linked to work", body: "Connect a doc to the project or task it describes." },
+      { title: "Real-time co-editing", body: "Write together, with changes syncing as you type." },
+      { title: "Version history", body: "Roll back to any earlier version in a click." },
+      { title: "Templates", body: "Spin up specs, briefs, and notes from reusable templates." },
+      { title: "Instant search", body: "Find any doc by title or content in milliseconds." },
+    ],
+  },
+  {
+    slug: "automations",
+    icon: "⟳",
+    title: "Automations",
+    tagline: "Automate the busywork.",
+    eyebrow: "Automations",
+    headline: "Let the routine work run itself.",
+    summary:
+      "Build simple rules that move work forward automatically, so your team spends its time on what actually matters.",
+    mockupUrl: "acme.app/automations",
+    mockupLabel: "Automation builder",
+    features: [
+      { title: "Rules", body: "When this happens, do that — no code required." },
+      { title: "Scheduled runs", body: "Kick off routine work on a schedule you set." },
+      { title: "Webhooks", body: "Trigger automations from anything that can send a request." },
+      { title: "Run history", body: "See exactly what ran, when, and why." },
+    ],
+  },
+  {
+    slug: "analytics",
+    icon: "◔",
+    title: "Analytics",
+    tagline: "Measure what actually matters.",
+    eyebrow: "Analytics",
+    headline: "See how the work is really going.",
+    summary:
+      "Track throughput, cycle time, and progress across projects, so you can spot what is stuck before it slips.",
+    mockupUrl: "acme.app/analytics",
+    mockupLabel: "Analytics dashboard",
+    features: [
+      { title: "Dashboards", body: "Build views that answer the questions your team asks most." },
+      { title: "Cycle time", body: "See how long work takes from start to done." },
+      { title: "Throughput", body: "Track how much ships each week, by team or project." },
+      { title: "Exports", body: "Send any view to CSV or your warehouse." },
+    ],
+  },
+];
+
+export function productBySlug(slug: string): Product | undefined {
+  return PRODUCTS.find((p) => p.slug === slug);
+}