@pylonsync/create-pylon 0.3.273 → 0.3.275

package/templates/agency/app/page.tsx

@@ -0,0 +1,207 @@
+import React from "react";
+import { type Metadata } from "@pylonsync/react";
+import {
+  WRAP,
+  Eyebrow,
+  Divider,
+  SectionHead,
+  ImagePlaceholder,
+  initials,
+} from "@/components/marketing";
+import { LiveSlots, ContactForm } from "./contact-form";
+import { siteConfig } from "@/lib/site.config";
+
+export const metadata: Metadata = {
+  title: siteConfig.seo.title,
+  description: siteConfig.seo.description,
+  openGraph: { title: siteConfig.seo.title, description: siteConfig.seo.description, type: "website" },
+};
+
+// `app/page.tsx` → `/`. Server-rendered studio site. Hero, services, work,
+// process, team, and testimonials are static server HTML (SEO + first paint);
+// the live "slots open" pill and the contact form (#contact) are client islands
+// driven by the public Capacity row. All copy comes from siteConfig. Doesn't
+// read `auth`, so the public page stays cacheable.
+export default function LandingPage() {
+  const { hero, logos, services, work, process, team, testimonials, contact } = siteConfig;
+
+  return (
+    <div className="bg-white text-zinc-900">
+      {/* ============================== HERO ============================== */}
+      <section className={`${WRAP} pt-16 pb-14 sm:pt-20`}>
+        <div className="grid items-center gap-10 lg:grid-cols-2 lg:gap-14">
+          <div>
+            <p className="font-mono text-[11px] uppercase tracking-[0.16em] text-brand">{hero.tagline}</p>
+            <h1 className="mt-4 text-balance text-[2.5rem] font-semibold leading-[1.04] tracking-[-0.02em] sm:text-[3.25rem]">
+              {hero.headline}
+            </h1>
+            <p className="mt-5 max-w-xl text-[17px] leading-relaxed text-zinc-500">{hero.subcopy}</p>
+            <div className="mt-7 flex flex-wrap items-center gap-4">
+              <a href="#contact" className="inline-flex items-center rounded-full bg-brand px-5 py-2.5 text-sm font-medium text-white transition-opacity hover:opacity-90">
+                {hero.ctaLabel}
+              </a>
+              <a href="#work" className="text-sm font-medium text-zinc-700 hover:text-zinc-900">
+                {hero.secondaryCtaLabel} →
+              </a>
+            </div>
+            <div className="mt-8">
+              <LiveSlots />
+            </div>
+          </div>
+
+          {/* Hero photo — replace the placeholder with a real shot (the studio,
+              the team at work, a flagship project). */}
+          <div className="relative mx-auto w-full max-w-sm lg:max-w-none">
+            <ImagePlaceholder
+              shape="portrait"
+              title="A photo of your studio or work"
+              hint="Swap for an <img> in app/page.tsx"
+            />
+          </div>
+        </div>
+      </section>
+
+      {/* ============================== LOGOS ============================= */}
+      <section className={`${WRAP} pb-6`}>
+        <p className="text-center font-mono text-[11px] uppercase tracking-[0.16em] text-zinc-400">
+          {logos.eyebrow}
+        </p>
+        <div className="mt-5 flex flex-wrap items-center justify-center gap-x-10 gap-y-4">
+          {logos.names.map((n) => (
+            <span key={n} className="text-[15px] font-semibold tracking-tight text-zinc-300">
+              {n}
+            </span>
+          ))}
+        </div>
+      </section>
+
+      {/* ============================ SERVICES =========================== */}
+      <Divider />
+      <section id="services" className={`${WRAP} py-16`}>
+        <SectionHead eyebrow={services.eyebrow} title={services.headline} />
+        <div className="mt-10 grid gap-x-8 gap-y-10 sm:grid-cols-2">
+          {services.items.map((s) => (
+            <div key={s.title}>
+              {s.icon ? (
+                <span className="flex size-9 items-center justify-center rounded-lg bg-brand-soft text-brand">
+                  {s.icon}
+                </span>
+              ) : null}
+              <h3 className="mt-4 text-[16px] font-semibold text-zinc-900">{s.title}</h3>
+              <p className="mt-2 max-w-md text-[14px] leading-relaxed text-zinc-500">{s.body}</p>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* ============================== WORK ============================= */}
+      <Divider />
+      <section id="work" className={`${WRAP} py-16`}>
+        <SectionHead eyebrow={work.eyebrow} title={work.headline} />
+        <div className="mt-10 grid gap-6 sm:grid-cols-2">
+          {work.items.map((c) => (
+            <div key={c.title} className="group">
+              {/* Case-study image — drop in a real project screenshot. */}
+              <ImagePlaceholder
+                shape="landscape"
+                title={`${c.title} — project shot`}
+                hint="Swap for an <img> per case study"
+              />
+              <div className="mt-4 flex items-baseline justify-between gap-3">
+                <h3 className="text-[16px] font-semibold text-zinc-900">{c.title}</h3>
+                <span className="shrink-0 font-mono text-[11px] uppercase tracking-wide text-zinc-400">
+                  {c.client}
+                </span>
+              </div>
+              <p className="mt-1.5 text-[14px] leading-relaxed text-zinc-500">{c.summary}</p>
+              <div className="mt-3 flex flex-wrap gap-1.5">
+                {c.tags.map((t) => (
+                  <span key={t} className="rounded-full bg-zinc-100 px-2.5 py-0.5 text-[11px] font-medium text-zinc-600">
+                    {t}
+                  </span>
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* ============================ PROCESS ============================ */}
+      <Divider />
+      <section className={`${WRAP} py-16`}>
+        <SectionHead eyebrow={process.eyebrow} title={process.headline} />
+        <ol className="mt-10 grid gap-8 sm:grid-cols-2 lg:grid-cols-4">
+          {process.steps.map((step, i) => (
+            <li key={step.title}>
+              <span className="flex size-8 items-center justify-center rounded-full bg-zinc-900 font-mono text-[12px] font-semibold text-white">
+                {i + 1}
+              </span>
+              <h3 className="mt-4 text-[15px] font-semibold text-zinc-900">{step.title}</h3>
+              <p className="mt-2 text-[14px] leading-relaxed text-zinc-500">{step.body}</p>
+            </li>
+          ))}
+        </ol>
+      </section>
+
+      {/* ============================== TEAM ============================= */}
+      <Divider />
+      <section className={`${WRAP} py-16`}>
+        <SectionHead eyebrow={team.eyebrow} title={team.headline} />
+        <div className="mt-10 grid gap-8 sm:grid-cols-3">
+          {team.members.map((m) => (
+            <div key={m.name}>
+              {/* Team headshot — drop in a real photo. */}
+              <ImagePlaceholder shape="square" title="Headshot" hint="Replace per team member" className="max-w-[200px]" />
+              <h3 className="mt-4 text-[15px] font-semibold text-zinc-900">{m.name}</h3>
+              <p className="text-[13.5px] text-zinc-500">{m.role}</p>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* ========================== TESTIMONIALS ========================= */}
+      {testimonials ? (
+        <>
+          <Divider />
+          <section className={`${WRAP} py-16`}>
+            <SectionHead eyebrow={testimonials.eyebrow} title={testimonials.headline} />
+            <div className="mt-10 grid gap-6 sm:grid-cols-3">
+              {testimonials.items.map((t) => (
+                <figure key={t.name} className="flex flex-col rounded-2xl border border-zinc-200 bg-paper p-6">
+                  <blockquote className="flex-1 text-[14px] leading-relaxed text-zinc-700">“{t.quote}”</blockquote>
+                  <figcaption className="mt-5 flex items-center gap-3">
+                    <span className="flex size-9 items-center justify-center rounded-full bg-zinc-200 text-[11px] font-semibold text-zinc-500">
+                      {initials(t.name)}
+                    </span>
+                    <span className="text-[13px] leading-tight">
+                      <span className="block font-medium text-zinc-900">{t.name}</span>
+                      <span className="text-zinc-500">{t.role}</span>
+                    </span>
+                  </figcaption>
+                </figure>
+              ))}
+            </div>
+          </section>
+        </>
+      ) : null}
+
+      {/* ============================= CONTACT =========================== */}
+      <Divider />
+      <section id="contact" className={`${WRAP} py-16`}>
+        <div className="grid gap-10 lg:grid-cols-[0.9fr_1.1fr]">
+          <div>
+            <Eyebrow>{contact.eyebrow}</Eyebrow>
+            <h2 className="mt-4 text-balance text-2xl font-semibold leading-[1.15] tracking-[-0.02em] sm:text-3xl">
+              {contact.headline}
+            </h2>
+            <p className="mt-4 max-w-md text-[15px] leading-relaxed text-zinc-500">{contact.subcopy}</p>
+            <div className="mt-6">
+              <LiveSlots />
+            </div>
+          </div>
+          <ContactForm />
+        </div>
+      </section>
+    </div>
+  );
+}

package/templates/agency/app/robots.ts

@@ -0,0 +1,12 @@
+import type { Robots } from "@pylonsync/react";
+
+// app/robots.ts → served at /robots.txt. Point SITE_URL at your domain in prod.
+const SITE = process.env.SITE_URL ?? "http://localhost:4321";
+
+export default function robots(): Robots {
+  return {
+    // Keep the owner dashboard and the API out of the index.
+    rules: { userAgent: "*", allow: "/", disallow: ["/dashboard", "/login", "/api/"] },
+    sitemap: `${SITE}/sitemap.xml`,
+  };
+}

package/templates/agency/app/sitemap.ts

@@ -0,0 +1,9 @@
+import type { Sitemap } from "@pylonsync/react";
+
+// app/sitemap.ts → served at /sitemap.xml. Point SITE_URL at your domain in
+// production. The studio site is a single public page, so the sitemap is just "/".
+const SITE = process.env.SITE_URL ?? "http://localhost:4321";
+
+export default async function sitemap(): Promise<Sitemap> {
+  return [{ url: `${SITE}/`, changeFrequency: "weekly", priority: 1 }];
+}

package/templates/agency/app.ts

@@ -0,0 +1,135 @@
+import {
+  entity,
+  field,
+  policy,
+  auth,
+  buildManifest,
+  discoverAppRoutes,
+} from "@pylonsync/sdk";
+
+// ---------------------------------------------------------------------------
+// agency — a site for a boutique studio that takes on a LIMITED number of
+// projects at a time. The realtime hook is scarcity: the hero shows how many
+// project slots are open this quarter, and the moment the owner books a new
+// client from the dashboard, that number drops for EVERYONE with the page
+// open — no refresh. Open it in two tabs to see it.
+//
+// Three entities:
+//   • Inquiry  — a "start a project" lead, with the prospect's name, email,
+//                company + budget + message. Pure PII → denies ALL client
+//                reads/writes. The public site never reads an Inquiry; the
+//                owner sees them only through the owner-gated inquiriesForOwner.
+//   • Capacity — a single, PII-FREE row the public page reads live: the current
+//                booking period + how many project slots are open. This is what
+//                makes the hero counter realtime. Booking an inquiry decrements
+//                it; the owner can reset it any time.
+//   • User     — the studio owner's account for the dashboard.
+// ---------------------------------------------------------------------------
+
+// A project inquiry. Everything here is PII or commercially sensitive, so the
+// policy denies all client access; the only way in is the submitInquiry
+// mutation, the only way to read is the owner-gated query. `status` tracks the
+// pipeline: "new" → "booked" (consumes a slot) | "declined".
+const Inquiry = entity(
+  "Inquiry",
+  {
+    name: field.string(),
+    email: field.string(),
+    company: field.string().optional(),
+    projectType: field.string().optional(),
+    budget: field.string().optional(),
+    message: field.string().optional(),
+    status: field.string().default("new"), // "new" | "booked" | "declined"
+    createdAt: field.datetime().defaultNow(),
+  },
+  { indexes: [{ name: "by_created", fields: ["createdAt"], unique: false }] },
+);
+
+// A single-row, PII-FREE aggregate the public page reads live. It holds only
+// the current booking window label + the number of open project slots — no lead
+// data. seedCapacity creates it from config on first visit; bookInquiry /
+// setCapacity keep it current. The landing page subscribes with
+// `db.useQuery("Capacity")`, so the "N slots open" counter ticks down across
+// every open tab the instant the owner books someone — the cross-tab-safe
+// realtime primitive (entity sync), not a per-connection server subscription.
+const Capacity = entity(
+  "Capacity",
+  {
+    label: field.string().default(""), // e.g. "Q3 2026"
+    openSlots: field.int().default(0),
+    updatedAt: field.datetime().defaultNow(),
+  },
+  {},
+);
+
+// The studio owner's account. Email/password auth is built in against an entity
+// named "User" (passwordHash is server-only). The dashboard is gated to the
+// owner — see PYLON_OWNER_EMAIL in lib/owner.ts + the owner-only functions.
+const User = entity(
+  "User",
+  {
+    email: field.string(),
+    displayName: field.string().optional(),
+    passwordHash: field.string().serverOnly().optional(),
+    avatarColor: field.string().optional(),
+    emailVerified: field.datetime().optional(),
+    createdAt: field.datetime().defaultNow(),
+  },
+  { indexes: [{ name: "by_email", fields: ["email"], unique: true }] },
+);
+
+// PRIVACY — Inquiry holds the prospect's name, email, company, and budget, so
+// it denies EVERY client read and write. No `db.useQuery("Inquiry")` can pull a
+// row; no client can write one directly. Writes happen only inside the
+// submitInquiry / bookInquiry / declineInquiry mutations (functions bypass
+// policies); reads happen only inside the owner-gated inquiriesForOwner. A
+// studio site must never leak who's been talking to it — this guarantees it.
+const inquiryPolicy = policy({
+  name: "inquiry_private",
+  entity: "Inquiry",
+  allowRead: "false",
+  allowInsert: "false",
+  allowUpdate: "false",
+  allowDelete: "false",
+});
+
+// The capacity row is public to READ (it's just a label + a number — the whole
+// point is the landing page showing open slots live to everyone). Clients can't
+// WRITE it; only seedCapacity / bookInquiry / setCapacity maintain it server-side.
+const capacityPolicy = policy({
+  name: "capacity_public_read",
+  entity: "Capacity",
+  allowRead: "true",
+  allowInsert: "false",
+  allowUpdate: "false",
+  allowDelete: "false",
+});
+
+const userPolicy = policy({
+  name: "user_self",
+  entity: "User",
+  allowRead: "auth.userId == data.id",
+  allowInsert: "false",
+  allowUpdate: "false",
+  allowDelete: "false",
+});
+
+const manifest = buildManifest({
+  name: "__APP_NAME__",
+  version: "0.1.0",
+  entities: [Inquiry, Capacity, User],
+  // submitInquiry / seedCapacity (public) + inquiriesForOwner / bookInquiry /
+  // declineInquiry / setCapacity (owner-gated) live in functions/ and are
+  // discovered automatically — they don't need listing here.
+  queries: [],
+  actions: [],
+  policies: [inquiryPolicy, capacityPolicy, userPolicy],
+  // Email/password is on by default against the User entity above. No orgs, no
+  // billing — a single studio is single-tenant (one business, one owner).
+  auth: auth(),
+  routes: await discoverAppRoutes(),
+});
+
+console.log(JSON.stringify(manifest, null, 2));
+
+export default manifest;

package/templates/agency/components/marketing.tsx

@@ -0,0 +1,148 @@
+import React from "react";
+
+// Reusable presentational pieces for the landing page. All server-rendered —
+// no client JS. Restyle here and the whole page follows. The brand accent
+// (`text-brand`, `bg-brand-soft`) comes from CSS vars set on <html> in
+// app/layout.tsx, which read lib/site.config.ts — so re-theming is one edit.
+
+// Shared container: a contained, centered column.
+export const WRAP = "mx-auto w-full max-w-5xl px-6";
+
+export function Eyebrow({ children }: { children: React.ReactNode }) {
+  return (
+    <p className="font-mono text-[11px] font-semibold uppercase tracking-[0.14em] text-brand">
+      {children}
+    </p>
+  );
+}
+
+// "New / Coming soon"-style pill for the hero.
+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.5 pr-3 text-[13px] text-zinc-600 shadow-sm">
+      <span className="inline-block size-1.5 rounded-full bg-brand" />
+      {children}
+    </span>
+  );
+}
+
+export function Divider() {
+  return (
+    <div className={WRAP}>
+      <div className="border-t border-zinc-200/70" />
+    </div>
+  );
+}
+
+export function SectionHead({
+  eyebrow,
+  title,
+  body,
+}: {
+  eyebrow: string;
+  title: string;
+  body?: string;
+}) {
+  return (
+    <div>
+      <Eyebrow>{eyebrow}</Eyebrow>
+      <h2 className="mt-4 text-balance text-2xl font-semibold leading-[1.15] tracking-[-0.02em] sm:text-3xl">
+        {title}
+      </h2>
+      {body ? (
+        <p className="mt-4 max-w-xl text-[15px] leading-relaxed text-zinc-500">
+          {body}
+        </p>
+      ) : null}
+    </div>
+  );
+}
+
+// A grid of value props — icon + title + body.
+export function FeatureGrid({
+  items,
+}: {
+  items: { title: string; body: string; icon?: string }[];
+}) {
+  return (
+    <div className="grid gap-6 sm:grid-cols-3">
+      {items.map((f) => (
+        <div key={f.title}>
+          {f.icon ? (
+            <span className="flex size-9 items-center justify-center rounded-lg bg-brand-soft text-brand">
+              {f.icon}
+            </span>
+          ) : null}
+          <h3 className="mt-4 text-[15px] font-semibold text-zinc-900">
+            {f.title}
+          </h3>
+          <p className="mt-2 text-[14px] leading-relaxed text-zinc-500">
+            {f.body}
+          </p>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// Initials for testimonial avatars, so the cards look finished without a photo.
+export function initials(name: string) {
+  return name
+    .split(/\s+/)
+    .map((w) => w[0])
+    .join("")
+    .slice(0, 2)
+    .toUpperCase();
+}
+
+// A deliberately-obvious image placeholder. Real sites drop a photo here; this
+// makes the spot unmistakable — dashed border, a photo glyph, and a one-line
+// "swap this" instruction telling you exactly what to replace and where. Looks
+// tidy enough to demo, but no one will mistake it for a finished design.
+//
+//   shape  — "landscape" | "portrait" | "square" | "circle"
+//   title  — what photo belongs here ("Your headshot")
+//   hint   — how to replace it ("Replace in app/page.tsx")
+export function ImagePlaceholder({
+  shape = "landscape",
+  title,
+  hint,
+  className = "",
+}: {
+  shape?: "landscape" | "portrait" | "square" | "circle";
+  title: string;
+  hint?: string;
+  className?: string;
+}) {
+  const aspect =
+    shape === "portrait"
+      ? "aspect-[4/5]"
+      : shape === "square" || shape === "circle"
+        ? "aspect-square"
+        : "aspect-[4/3]";
+  const radius = shape === "circle" ? "rounded-full" : "rounded-2xl";
+  return (
+    <div
+      className={`relative grid place-items-center overflow-hidden border-2 border-dashed border-zinc-300 bg-zinc-50 ${aspect} ${radius} ${className}`}
+    >
+      <div className="px-4 text-center">
+        <svg
+          className="mx-auto size-7 text-zinc-300"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          aria-hidden
+        >
+          <rect x="3" y="3" width="18" height="18" rx="2" />
+          <circle cx="9" cy="9" r="1.6" />
+          <path d="m21 15-4.5-4.5L7 20" />
+        </svg>
+        <p className="mt-2 text-[12.5px] font-medium text-zinc-500">{title}</p>
+        {hint ? <p className="mt-1 text-[11px] leading-snug text-zinc-400">{hint}</p> : null}
+      </div>
+    </div>
+  );
+}

package/templates/agency/components/section-scroller.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { useEffect } from "react";
+
+// Makes in-page section links work. A hydrated Pylon page updates the URL for a
+// plain `<a href="#section">` click but doesn't perform the browser's native
+// fragment scroll, so the page jumps nowhere. This installs ONE delegated click
+// handler that catches any same-page `#`/`/#` anchor and scrolls to it smoothly.
+//
+// Render it once (in the root layout). Renders nothing. Real route links should
+// still use `<Link>` from @pylonsync/react — this only handles `#` anchors.
+export function SectionScroller() {
+  useEffect(() => {
+    function onClick(e: MouseEvent) {
+      if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) {
+        return;
+      }
+      const target = e.target as Element | null;
+      const link = target?.closest?.('a[href^="#"], a[href^="/#"]') as HTMLAnchorElement | null;
+      if (!link) return;
+      const href = link.getAttribute("href") || "";
+      const id = href.slice(href.indexOf("#") + 1);
+      if (!id) return;
+      const el = document.getElementById(id);
+      if (!el) return; // target not on this page — leave it to the browser
+      e.preventDefault();
+      el.scrollIntoView({ block: "start" });
+      history.replaceState(null, "", "#" + id);
+    }
+    document.addEventListener("click", onClick);
+    return () => document.removeEventListener("click", onClick);
+  }, []);
+
+  return null;
+}

package/templates/agency/components/ui/button.tsx

@@ -0,0 +1,56 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };