@pylonsync/create-pylon 0.3.274 → 0.3.276

package/templates/agency/app/page.tsx

@@ -0,0 +1,249 @@
+import React, { Suspense, use } from "react";
+import { Link, type Metadata, type PageProps, type ServerData } from "@pylonsync/react";
+import {
+  WRAP,
+  Eyebrow,
+  Divider,
+  SectionHead,
+  ImagePlaceholder,
+  ProjectCard,
+  initials,
+} from "@/components/marketing";
+import { LiveSlots, ContactForm } from "./contact-form";
+import { SeedProjects } from "./seeder";
+import { siteConfig } from "@/lib/site.config";
+import { slugify, viewFromRow, type ProjectRow, type ProjectView } from "@/lib/agency";
+
+export const metadata: Metadata = {
+  title: siteConfig.seo.title,
+  description: siteConfig.seo.description,
+  openGraph: { title: siteConfig.seo.title, description: siteConfig.seo.description, type: "website" },
+};
+
+// The homepage "Selected work" grid reads the live Project portfolio on the
+// server (the `selected` + `published` ones, ordered), so curating it in the
+// dashboard re-curates the homepage. Before the portfolio is seeded, it falls
+// back to the config case studies so the section is never empty on first paint.
+function selectedFromConfig(): ProjectView[] {
+  return siteConfig.work.items
+    .filter((c) => c.selected)
+    .map((c) => ({
+      slug: c.slug || slugify(c.title),
+      title: c.title,
+      client: c.client,
+      summary: c.summary,
+      year: c.year ?? null,
+      tags: c.tags,
+    }));
+}
+
+function SelectedWork({ serverData }: { serverData: ServerData }) {
+  const rows = use(serverData.list<ProjectRow>("Project"));
+  const fromDb = rows
+    .filter((p) => p.selected && p.published)
+    .sort((a, b) => a.order - b.order || (a.createdAt < b.createdAt ? -1 : 1))
+    .map(viewFromRow);
+  const projects = fromDb.length > 0 ? fromDb : selectedFromConfig();
+
+  return (
+    <div className="mt-10 grid gap-6 sm:grid-cols-2">
+      {projects.map((p) => (
+        <ProjectCard key={p.slug} p={p} />
+      ))}
+    </div>
+  );
+}
+
+// `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. The "Selected work" grid reads the Project
+// portfolio server-side. All other copy comes from siteConfig.
+export default function LandingPage({ serverData }: PageProps) {
+  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`}>
+        <div className="flex items-end justify-between gap-4">
+          <SectionHead eyebrow={work.eyebrow} title={work.headline} />
+          <Link
+            href="/work"
+            className="hidden shrink-0 text-[13.5px] font-medium text-zinc-600 transition-colors hover:text-zinc-900 sm:inline-flex"
+          >
+            All work →
+          </Link>
+        </div>
+        <Suspense
+          fallback={
+            <div className="mt-10 grid gap-6 sm:grid-cols-2">
+              {[0, 1].map((i) => (
+                <div key={i}>
+                  <div className="aspect-[4/3] animate-pulse rounded-2xl bg-zinc-100" />
+                  <div className="mt-4 h-4 w-1/3 animate-pulse rounded bg-zinc-100" />
+                  <div className="mt-2 h-3 w-3/4 animate-pulse rounded bg-zinc-100" />
+                </div>
+              ))}
+            </div>
+          }
+        >
+          <SelectedWork serverData={serverData} />
+        </Suspense>
+        <div className="mt-8 sm:hidden">
+          <Link href="/work" className="text-[14px] font-medium text-brand">
+            See all work →
+          </Link>
+        </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>
+
+      {/* Seeds the public portfolio on first visit (idempotent, zero UI). */}
+      <SeedProjects />
+    </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/seeder.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import React, { useEffect } from "react";
+import { callFn } from "@pylonsync/react";
+import { EnsureGuest } from "@pylonsync/client";
+
+// A zero-UI client island that seeds the public Project portfolio on first
+// visit (idempotent server-side — a no-op once any project exists). Drop it on
+// any public page so /work and the case-study pages aren't empty even if the
+// visitor never hit the homepage. Wrapped in <EnsureGuest> so a session exists
+// for the call; seedProjects is a public mutation, so an anonymous guest can run
+// it (it only ever writes the config's marketing copy — no PII).
+export function SeedProjects() {
+  return (
+    <EnsureGuest fallback={null}>
+      <Seed />
+    </EnsureGuest>
+  );
+}
+
+function Seed() {
+  useEffect(() => {
+    void callFn("seedProjects", {});
+  }, []);
+  return null;
+}

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/work/[slug]/page.tsx

@@ -0,0 +1,182 @@
+import React, { Suspense, use } from "react";
+import {
+  Link,
+  type GenerateMetadata,
+  type Metadata,
+  type PageProps,
+  type ServerData,
+  type SsrResponse,
+} from "@pylonsync/react";
+import { ImagePlaceholder } from "@/components/marketing";
+import { SeedProjects } from "../../seeder";
+import { siteConfig } from "@/lib/site.config";
+import { slugify, viewFromRow, type ProjectRow, type ProjectView } from "@/lib/agency";
+
+// Resolve a case study from the URL slug. Prefer the live Project row; if the
+// row exists but is a draft (`published === false`) it's NOT public → treat as
+// missing. Only when there's NO row at all (the portfolio hasn't been seeded
+// yet) do we fall back to the matching config case study, so deep links work on
+// a fresh install.
+async function resolveProject(
+  serverData: ServerData,
+  slug: string,
+): Promise<ProjectView | null> {
+  const row = await serverData.lookup<ProjectRow>("Project", "slug", slug);
+  if (row) return row.published ? viewFromRow(row) : null;
+
+  const cfg = siteConfig.work.items.find((c) => (c.slug || slugify(c.title)) === slug);
+  if (!cfg) return null;
+  return {
+    slug: cfg.slug || slugify(cfg.title),
+    title: cfg.title,
+    client: cfg.client,
+    summary: cfg.summary,
+    year: cfg.year ?? null,
+    tags: cfg.tags,
+    challenge: cfg.challenge ?? null,
+    approach: cfg.approach ?? null,
+    outcome: cfg.outcome ?? null,
+    liveUrl: cfg.liveUrl ?? null,
+  };
+}
+
+export const generateMetadata: GenerateMetadata = async ({
+  params,
+  serverData,
+}): Promise<Metadata> => {
+  const p = await resolveProject(serverData, params.slug);
+  if (!p) return { title: `Case study not found — ${siteConfig.brand.name}`, robots: "noindex" };
+  return {
+    title: `${p.title} — ${siteConfig.brand.name}`,
+    description: p.summary,
+    openGraph: { title: `${p.title} — ${siteConfig.brand.name}`, description: p.summary, type: "article" },
+  };
+};
+
+const WRAP_NARROW = "mx-auto w-full max-w-3xl px-6";
+
+function CaseStudy({
+  serverData,
+  response,
+  slug,
+}: {
+  serverData: ServerData;
+  response: SsrResponse;
+  slug: string;
+}) {
+  const p = use(resolveProject(serverData, slug));
+
+  if (!p) {
+    response.setStatus(404);
+    return (
+      <div className={`${WRAP_NARROW} py-24 text-center`}>
+        <p className="text-[15px] font-medium text-zinc-900">That case study doesn&apos;t exist.</p>
+        <Link href="/work" className="mt-2 inline-block text-[14px] font-medium text-brand">
+          ← Back to all work
+        </Link>
+      </div>
+    );
+  }
+
+  return (
+    <article className={`${WRAP_NARROW} py-14`}>
+      <Link href="/work" className="text-[13.5px] font-medium text-zinc-500 transition-colors hover:text-zinc-900">
+        ← All work
+      </Link>
+
+      <header className="mt-6">
+        <p className="font-mono text-[11px] uppercase tracking-[0.16em] text-brand">
+          {p.client}
+          {p.year ? ` · ${p.year}` : ""}
+        </p>
+        <h1 className="mt-3 text-balance text-[2rem] font-semibold leading-[1.08] tracking-[-0.02em] sm:text-[2.5rem]">
+          {p.title}
+        </h1>
+        <p className="mt-4 max-w-2xl text-[17px] leading-relaxed text-zinc-500">{p.summary}</p>
+        {p.tags.length > 0 ? (
+          <div className="mt-5 flex flex-wrap gap-1.5">
+            {p.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>
+        ) : null}
+        {p.liveUrl ? (
+          <a
+            href={p.liveUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="mt-6 inline-flex items-center rounded-full border border-zinc-300 px-4 py-2 text-[13.5px] font-medium text-zinc-700 transition-colors hover:border-zinc-400 hover:text-zinc-900"
+          >
+            Visit live site ↗
+          </a>
+        ) : null}
+      </header>
+
+      {/* Hero shot — drop in a real project image. */}
+      <div className="mt-10">
+        <ImagePlaceholder shape="landscape" title={`${p.title} — hero shot`} hint="Swap for an <img> in app/work/[slug]/page.tsx" />
+      </div>
+
+      <div className="mt-12 space-y-10">
+        <CaseSection label="The challenge" body={p.challenge} />
+        <CaseSection label="Our approach" body={p.approach} />
+        <CaseSection label="The outcome" body={p.outcome} />
+        {!p.challenge && !p.approach && !p.outcome ? (
+          <p className="text-[15px] leading-relaxed text-zinc-500">
+            A full write-up is on the way. In the meantime, {p.summary.toLowerCase()}
+          </p>
+        ) : null}
+      </div>
+
+      {/* Contact CTA */}
+      <div className="mt-14 rounded-2xl border border-zinc-200 bg-paper p-8 text-center">
+        <h2 className="text-[18px] font-semibold tracking-tight text-zinc-900">Have something like this in mind?</h2>
+        <p className="mx-auto mt-2 max-w-md text-[14px] leading-relaxed text-zinc-500">
+          We take on a few projects at a time. Tell us what you&apos;re building.
+        </p>
+        <Link
+          href="/#contact"
+          className="mt-5 inline-flex items-center rounded-full bg-brand px-5 py-2.5 text-[14px] font-medium text-white transition-opacity hover:opacity-90"
+        >
+          Start a project
+        </Link>
+      </div>
+
+      <SeedProjects />
+    </article>
+  );
+}
+
+function CaseSection({ label, body }: { label: string; body?: string | null }) {
+  if (!body) return null;
+  return (
+    <section>
+      <h2 className="font-mono text-[11px] uppercase tracking-[0.16em] text-zinc-400">{label}</h2>
+      <p className="mt-3 whitespace-pre-wrap text-[16px] leading-relaxed text-zinc-700">{body}</p>
+    </section>
+  );
+}
+
+// `app/work/[slug]/page.tsx` → `/work/:slug`. The case-study detail. Suspends on
+// the project lookup; renders a 404 (with a real status) when the slug is
+// unknown or the project is a draft.
+export default function CaseStudyPage({ params, serverData, response }: PageProps) {
+  return (
+    <div className="bg-white text-zinc-900">
+      <Suspense
+        fallback={
+          <div className={`${WRAP_NARROW} py-14`}>
+            <div className="h-4 w-20 animate-pulse rounded bg-zinc-100" />
+            <div className="mt-6 h-10 w-2/3 animate-pulse rounded bg-zinc-100" />
+            <div className="mt-4 h-4 w-full animate-pulse rounded bg-zinc-100" />
+            <div className="mt-10 aspect-[4/3] animate-pulse rounded-2xl bg-zinc-100" />
+          </div>
+        }
+      >
+        <CaseStudy serverData={serverData} response={response} slug={params.slug} />
+      </Suspense>
+    </div>
+  );
+}

package/templates/agency/app/work/page.tsx

@@ -0,0 +1,83 @@
+import React, { Suspense, use } from "react";
+import { Link, type Metadata, type PageProps, type ServerData } from "@pylonsync/react";
+import { WRAP, SectionHead, ProjectCard } from "@/components/marketing";
+import { SeedProjects } from "../seeder";
+import { siteConfig } from "@/lib/site.config";
+import { slugify, viewFromRow, type ProjectRow, type ProjectView } from "@/lib/agency";
+
+export const metadata: Metadata = {
+  title: `Work — ${siteConfig.brand.name}`,
+  description: `Case studies from ${siteConfig.brand.name}: ${siteConfig.work.headline}`,
+  openGraph: { title: `Work — ${siteConfig.brand.name}`, type: "website" },
+};
+
+// `app/work/page.tsx` → `/work`. The full portfolio: every PUBLISHED project,
+// server-rendered for SEO, each linking to its case study. Reads the Project
+// entity via serverData; falls back to the config case studies before the
+// portfolio is seeded so the page is never empty.
+function allFromConfig(): ProjectView[] {
+  return siteConfig.work.items.map((c) => ({
+    slug: c.slug || slugify(c.title),
+    title: c.title,
+    client: c.client,
+    summary: c.summary,
+    year: c.year ?? null,
+    tags: c.tags,
+  }));
+}
+
+function WorkGrid({ serverData }: { serverData: ServerData }) {
+  const rows = use(serverData.list<ProjectRow>("Project"));
+  const fromDb = rows
+    .filter((p) => p.published)
+    .sort((a, b) => a.order - b.order || (a.createdAt < b.createdAt ? -1 : 1))
+    .map(viewFromRow);
+  const projects = fromDb.length > 0 ? fromDb : allFromConfig();
+
+  if (projects.length === 0) {
+    return <p className="mt-10 text-[15px] text-zinc-500">No published work yet.</p>;
+  }
+  return (
+    <div className="mt-10 grid gap-x-6 gap-y-10 sm:grid-cols-2">
+      {projects.map((p) => (
+        <ProjectCard key={p.slug} p={p} />
+      ))}
+    </div>
+  );
+}
+
+export default function WorkIndexPage({ serverData }: PageProps) {
+  return (
+    <div className="bg-white text-zinc-900">
+      <section className={`${WRAP} py-16`}>
+        <SectionHead
+          eyebrow="Work"
+          title={siteConfig.work.headline}
+          body="A fuller look at what we've shipped — each one a short case study."
+        />
+        <Suspense
+          fallback={
+            <div className="mt-10 grid gap-x-6 gap-y-10 sm:grid-cols-2">
+              {[0, 1, 2, 3].map((i) => (
+                <div key={i}>
+                  <div className="aspect-[4/3] animate-pulse rounded-2xl bg-zinc-100" />
+                  <div className="mt-4 h-4 w-1/3 animate-pulse rounded bg-zinc-100" />
+                </div>
+              ))}
+            </div>
+          }
+        >
+          <WorkGrid serverData={serverData} />
+        </Suspense>
+
+        <div className="mt-12">
+          <Link href="/#contact" className="text-[14px] font-medium text-brand">
+            Have a project in mind? Start one →
+          </Link>
+        </div>
+      </section>
+
+      <SeedProjects />
+    </div>
+  );
+}