@pylonsync/create-pylon 0.11.1 → 0.11.4

package/templates/creator/app/(marketing)/not-found.tsx

@@ -4,19 +4,21 @@ import { Link, type NotFoundProps } from "@pylonsync/react";
 // `(marketing)/not-found.tsx` → rendered at HTTP 404 for any unmatched URL
 // (and when a page calls `response.notFound()`). It lives inside the
 // `(marketing)` group on purpose: a group segment adds no URL prefix, so this
-// is still the root 404 boundary, but it wraps in the marketing layout — a
+// is still the root 404 boundary, but it wraps in the marketing layout, so a
 // missing URL gets the site nav + footer instead of a bare page. Hydrated, so
 // the link is a client nav.
 export default function NotFound(_props: NotFoundProps) {
   return (
-    <div className="mx-auto flex min-h-[60vh] max-w-3xl flex-col items-center justify-center px-6 text-center">
-      <h1 className="text-3xl font-semibold tracking-tight">404</h1>
-      <p className="mt-2 text-zinc-500">We couldn&apos;t find that page.</p>
+    <div className="mx-auto w-full max-w-[40rem] px-6 py-24">
+      <h1 className="text-[2rem] font-medium leading-tight text-ink">Page not found</h1>
+      <p className="mt-4 text-[17.5px] leading-[1.65] text-ink-2">
+        There is nothing at this address.
+      </p>
       <Link
         href="/"
-        className="mt-6 inline-flex h-10 items-center rounded-full bg-zinc-900 px-5 text-sm font-medium text-white transition-colors hover:bg-zinc-700"
+        className="mt-6 inline-block text-[17.5px] font-medium text-ink underline decoration-brand/50 underline-offset-4 hover:decoration-brand"
       >
-        Back home
+        Back to the home page
       </Link>
     </div>
   );

package/templates/creator/app/(marketing)/page.tsx

@@ -1,13 +1,6 @@
 import React from "react";
 import { type Metadata } from "@pylonsync/react";
-import {
-  WRAP,
-  Eyebrow,
-  Divider,
-  SectionHead,
-  initials,
-  ImagePlaceholder,
-} from "@/components/marketing";
+import { WRAP, PROSE, Divider, SectionTitle, ImagePlaceholder } from "@/components/marketing";
 import { NewsletterSignup } from "./newsletter-signup";
 import { siteConfig } from "@/lib/site.config";
 
@@ -17,97 +10,105 @@ export const metadata: Metadata = {
   openGraph: { title: siteConfig.seo.title, description: siteConfig.seo.description, type: "website" },
 };
 
-// `app/page.tsx` → `/`. A server-rendered personal-brand site. Hero, about,
-// offerings, testimonials, and links are static server HTML (SEO + first paint);
-// the newsletter section (#newsletter) is a client island with a live
-// subscriber counter. All copy comes from siteConfig. Doesn't read `auth`, so
-// the public page stays cacheable.
+// `app/page.tsx` → `/`. A server-rendered personal site set in one narrow
+// column. Hero, about, offerings, writing, testimonials, and the closing
+// section are static server HTML (SEO + first paint); the newsletter form in
+// the hero is a client island with a live subscriber counter. All copy comes
+// from siteConfig. Doesn't read `auth`, so the public page stays cacheable.
 export default function LandingPage() {
-  const { hero, about, offerings, testimonials, newsletter, links } = siteConfig;
+  const { hero, about, offerings, writing, testimonials, newsletter, links } = 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 sm:grid-cols-[1fr_auto]">
+      <section className={`${WRAP} pt-14 pb-12 sm:pt-20`}>
+        <div className="flex items-center gap-5">
+          <div className="w-20 shrink-0 sm:w-24">
+            <ImagePlaceholder shape="circle" title={hero.name} src="/images/headshot.jpg" />
+          </div>
           <div>
-            <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" />
-              {hero.badge}
-            </span>
-            <h1 className="mt-5 text-balance text-[2.5rem] font-semibold leading-[1.04] tracking-[-0.02em] sm:text-[3rem]">
+            <h1 className="text-[2rem] font-medium leading-[1.1] text-ink sm:text-[2.5rem]">
               {hero.name}
             </h1>
-            <p className="mt-2 text-[18px] font-medium text-brand">{hero.tagline}</p>
-            <p className="mt-5 max-w-xl text-[16px] leading-relaxed text-zinc-500">{hero.intro}</p>
-            <div className="mt-7 flex flex-wrap items-center gap-4">
-              <a href="#newsletter" 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">
-                Read the newsletter
-              </a>
-              <a href="#work" className="text-sm font-medium text-zinc-700 hover:text-zinc-900">
-                Work with me →
-              </a>
-            </div>
+            <p className="mt-1.5 text-[17.5px] italic leading-snug text-ink-2">{hero.tagline}</p>
           </div>
-          {/* Profile photo — replace the placeholder with a real headshot. */}
-          <div className="order-first w-32 sm:order-none sm:w-44">
-            <ImagePlaceholder
-              shape="square"
-              title="Your headshot"
-              hint="Replace in app/page.tsx"
-            />
+        </div>
+        <p className={`mt-8 ${PROSE}`}>{hero.intro}</p>
+        <div id="newsletter" className="mt-8 scroll-mt-20">
+          <p className={PROSE}>
+            <em>{newsletter.name}</em> is my newsletter. {newsletter.subcopy}
+          </p>
+          <div className="mt-4">
+            <NewsletterSignup newsletter={newsletter} />
           </div>
         </div>
       </section>
 
       {/* ABOUT */}
       <Divider />
-      <section className={`${WRAP} py-14`}>
-        <div className="grid gap-8 lg:grid-cols-[0.8fr_1.2fr]">
-          <SectionHead eyebrow={about.eyebrow} title={about.headline} />
-          <div className="space-y-4 text-[15px] leading-relaxed text-zinc-600">
-            {about.paragraphs.map((p) => (
-              <p key={p}>{p}</p>
-            ))}
-          </div>
+      <section className={`${WRAP} py-12`}>
+        <SectionTitle>{about.headline}</SectionTitle>
+        <div className={`mt-5 space-y-5 ${PROSE}`}>
+          {about.paragraphs.map((p) => (
+            <p key={p}>{p}</p>
+          ))}
         </div>
       </section>
 
-      {/* OFFERINGS */}
+      {/* WHAT I DO */}
       <Divider />
-      <section id="work" className={`${WRAP} py-14`}>
-        <SectionHead eyebrow={offerings.eyebrow} title={offerings.headline} />
-        <div className="mt-8 grid gap-5 sm:grid-cols-3">
+      <section className={`${WRAP} py-12`}>
+        <SectionTitle>{offerings.headline}</SectionTitle>
+        <dl className="mt-5 divide-y divide-rule">
           {offerings.items.map((o) => (
-            <div key={o.title} className="flex flex-col rounded-2xl border border-zinc-200 bg-paper p-6">
-              <h3 className="text-[15px] font-semibold text-zinc-900">{o.title}</h3>
-              <p className="mt-2 flex-1 text-[14px] leading-relaxed text-zinc-500">{o.body}</p>
-              {o.price ? (
-                <p className="mt-4 text-[13px] font-medium uppercase tracking-wide text-brand">{o.price}</p>
-              ) : null}
+            <div key={o.title} className="py-5 first:pt-0 last:pb-0">
+              <dt className="flex flex-wrap items-baseline justify-between gap-x-6 gap-y-1">
+                <span className="text-[18px] font-medium text-ink">{o.title}</span>
+                {o.price ? <span className="text-[16px] italic text-brand">{o.price}</span> : null}
+              </dt>
+              <dd className={`mt-1.5 ${PROSE}`}>{o.body}</dd>
             </div>
           ))}
-        </div>
+        </dl>
       </section>
 
+      {/* RECENT WRITING */}
+      {writing && writing.items.length > 0 ? (
+        <>
+          <Divider />
+          <section className={`${WRAP} py-12`}>
+            <SectionTitle>{writing.headline}</SectionTitle>
+            <ul className="mt-5 divide-y divide-rule">
+              {writing.items.map((issue) => (
+                <li key={issue.title} className="py-4 first:pt-0 last:pb-0">
+                  <a href={issue.href} className="group block">
+                    <div className="flex flex-wrap items-baseline justify-between gap-x-6 gap-y-1">
+                      <span className="text-[18px] font-medium text-ink underline-offset-4 group-hover:underline">
+                        {issue.title}
+                      </span>
+                      <time className="text-[15px] text-ink-2">{issue.date}</time>
+                    </div>
+                    {issue.summary ? <p className={`mt-1 ${PROSE}`}>{issue.summary}</p> : null}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </section>
+        </>
+      ) : null}
+
       {/* TESTIMONIALS */}
       {testimonials && testimonials.items.length > 0 ? (
         <>
           <Divider />
-          <section className={`${WRAP} py-14`}>
-            <SectionHead eyebrow={testimonials.eyebrow} title={testimonials.headline} />
-            <div className="mt-8 grid gap-5 sm:grid-cols-3">
+          <section className={`${WRAP} py-12`}>
+            <SectionTitle>{testimonials.headline}</SectionTitle>
+            <div className="mt-5 space-y-7">
               {testimonials.items.map((t) => (
-                <figure key={t.name} className="flex flex-col rounded-2xl border border-zinc-200 bg-paper p-6">
-                  <blockquote className="text-[14px] leading-relaxed text-zinc-600">&ldquo;{t.quote}&rdquo;</blockquote>
-                  <figcaption className="mt-5 flex items-center gap-3">
-                    <span className="flex size-8 items-center justify-center rounded-full bg-zinc-200 text-[11px] font-semibold text-zinc-500">
-                      {initials(t.name)}
-                    </span>
-                    <div className="leading-tight">
-                      <div className="text-[13px] font-semibold">{t.name}</div>
-                      <div className="text-[12px] text-zinc-500">{t.role}</div>
-                    </div>
+                <figure key={t.name} className="border-l-2 border-brand pl-5">
+                  <blockquote className={`italic ${PROSE}`}>&ldquo;{t.quote}&rdquo;</blockquote>
+                  <figcaption className="mt-2 text-[15px] text-ink-2">
+                    {t.name}, {t.role}
                   </figcaption>
                 </figure>
               ))}
@@ -116,45 +117,28 @@ export default function LandingPage() {
         </>
       ) : null}
 
-      {/* NEWSLETTER (live) */}
-      <Divider />
-      <section id="newsletter" className={`${WRAP} py-14`}>
-        <div className="rounded-2xl border border-zinc-200 bg-paper p-7 sm:p-10">
-          <Eyebrow>{newsletter.eyebrow}</Eyebrow>
-          <h2 className="mt-4 max-w-2xl text-balance text-2xl font-semibold leading-[1.15] tracking-[-0.02em] sm:text-3xl">
-            {newsletter.headline}
-          </h2>
-          <p className="mt-4 max-w-xl text-[15px] leading-relaxed text-zinc-500">{newsletter.subcopy}</p>
-          <div className="mt-7">
-            <NewsletterSignup newsletter={newsletter} />
-          </div>
-        </div>
-      </section>
-
-      {/* LINKS */}
-      {links && links.items.length > 0 ? (
+      {/* WORK WITH ME */}
+      {links ? (
         <>
           <Divider />
-          <section className={`${WRAP} py-14`}>
-            <SectionHead eyebrow={links.eyebrow} title={links.headline} />
-            <div className="mt-8 grid gap-3 sm:grid-cols-3">
-              {links.items.map((l) => (
-                <a
-                  key={l.label}
-                  href={l.href}
-                  className="group rounded-xl border border-zinc-200 bg-white px-5 py-4 transition-colors hover:border-zinc-300"
-                >
-                  <div className="flex items-center justify-between text-[14px] font-medium text-zinc-900">
-                    {l.label}
-                    <span className="text-zinc-300 transition-colors group-hover:text-brand">→</span>
-                  </div>
-                  {l.note ? <p className="mt-1 text-[12.5px] text-zinc-500">{l.note}</p> : null}
-                </a>
-              ))}
-            </div>
+          <section id="work" className={`${WRAP} py-12 scroll-mt-20`}>
+            <SectionTitle>{links.headline}</SectionTitle>
+            <p className={`mt-5 ${PROSE}`}>{links.body}</p>
+            {links.items.length > 0 ? (
+              <ul className={`mt-5 space-y-2 ${PROSE}`}>
+                {links.items.map((l) => (
+                  <li key={l.label}>
+                    <a href={l.href} className="font-medium text-ink underline decoration-brand/50 underline-offset-4 hover:decoration-brand">
+                      {l.label}
+                    </a>
+                    {l.note ? <span className="text-ink-2"> · {l.note}</span> : null}
+                  </li>
+                ))}
+              </ul>
+            ) : null}
           </section>
         </>
       ) : null}
-    </div>
+    </>
   );
 }

package/templates/creator/app/globals.css

@@ -19,6 +19,10 @@
   --brand: #4f46e5;
   --brand-soft: #eef2ff;
   --paper: #fafafa;
+  /* The marketing pages: warm paper, dark warm-grey type. Set from lib/site.config.ts. */
+  --ink: #2a2622;
+  --ink-2: #5b554e;
+  --rule: #d9d2c5;
   --background: oklch(1 0 0);
   --foreground: oklch(0.141 0.005 285.823);
   --card: oklch(1 0 0);
@@ -112,6 +116,9 @@
   --color-brand: var(--brand);
   --color-brand-soft: var(--brand-soft);
   --color-paper: var(--paper);
+  --color-ink: var(--ink);
+  --color-ink-2: var(--ink-2);
+  --color-rule: var(--rule);
   --color-chart-1: var(--chart-1);
   --color-chart-2: var(--chart-2);
   --color-chart-3: var(--chart-3);
@@ -153,3 +160,10 @@
     cursor: pointer;
   }
 }
+
+/* The marketing pages. Source Serif 4 is declared in app.ts; /login and
+   /dashboard keep Inter. */
+.font-display {
+  font-family: var(--font-display, "Iowan Old Style", "Palatino Linotype", Georgia, serif);
+  font-optical-sizing: auto;
+}

package/templates/creator/app/layout.tsx

@@ -24,6 +24,7 @@ export default function RootLayout({ children }: LayoutProps) {
           "--brand": colors.brand,
           "--brand-soft": colors.brandSoft,
           "--paper": colors.paper,
+          "--ink": colors.ink,
         } as React.CSSProperties
       }
     >

package/templates/creator/app.ts

@@ -143,6 +143,16 @@ const manifest = buildManifest({
       display: "swap",
       preload: true,
     }),
+    // The marketing pages are set in a serif, headings and running text alike.
+    font({
+      family: "Source Serif 4",
+      variable: "--font-display",
+      weights: ["400", "500", "600"],
+      styles: ["normal", "italic"],
+      subsets: ["latin"],
+      display: "swap",
+      preload: true,
+    }),
   ],
   routes: await discoverAppRoutes(),
 });

package/templates/creator/components/marketing.tsx

@@ -1,101 +1,30 @@
 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.
+// Presentational pieces for the marketing pages. All server-rendered, no client
+// JS. Colors come from CSS vars set on <html> in app/layout.tsx, which read
+// lib/site.config.ts, so re-theming is one edit there.
 
-// Shared container: a contained, centered column.
-export const WRAP = "mx-auto w-full max-w-3xl 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>
-  );
-}
+// One narrow column, left aligned, like a well-set essay page.
+export const WRAP = "mx-auto w-full max-w-[40rem] px-6";
 
+// A rule between sections.
 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}
+      <hr className="border-0 border-t border-rule" />
     </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>
-  );
+// Section heading. One size, one weight, no label above it.
+export function SectionTitle({ children }: { children: React.ReactNode }) {
+  return <h2 className="text-[1.5rem] font-medium leading-[1.2] text-ink">{children}</h2>;
 }
 
-// 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();
-}
+// Running text: 17.5px with generous leading, the same serif as the headings.
+export const PROSE = "text-[17.5px] leading-[1.65] text-ink-2";
 
-// A deliberately-obvious image placeholder — dashed border, photo glyph, and a
+// A deliberately-obvious image placeholder: dashed border, photo glyph, and a
 // "swap this" hint. Real sites drop a photo here.
 //
 //   shape  — "landscape" | "portrait" | "square" | "circle"
@@ -105,11 +34,14 @@ export function ImagePlaceholder({
   shape = "landscape",
   title,
   hint,
+  src,
   className = "",
 }: {
   shape?: "landscape" | "portrait" | "square" | "circle";
   title: string;
   hint?: string;
+  /** A real image. The template ships one under public/images; swap it for yours. */
+  src?: string;
   className?: string;
 }) {
   const aspect =
@@ -118,14 +50,21 @@ export function ImagePlaceholder({
       : shape === "square" || shape === "circle"
         ? "aspect-square"
         : "aspect-[4/3]";
-  const radius = shape === "circle" ? "rounded-full" : "rounded-2xl";
+  const radius = shape === "circle" ? "rounded-full" : "rounded-lg";
+  if (src) {
+    return (
+      <div className={`relative overflow-hidden bg-rule ${aspect} ${radius} ${className}`}>
+        <img src={src} alt={title} className="absolute inset-0 size-full object-cover" />
+      </div>
+    );
+  }
   return (
     <div
-      className={`relative grid place-items-center overflow-hidden border-2 border-dashed border-zinc-300 bg-zinc-50 ${aspect} ${radius} ${className}`}
+      className={`relative grid place-items-center overflow-hidden border-2 border-dashed border-rule bg-paper ${aspect} ${radius} ${className}`}
     >
       <div className="px-4 text-center">
         <svg
-          className="mx-auto size-7 text-zinc-300"
+          className="mx-auto size-7 text-rule"
           viewBox="0 0 24 24"
           fill="none"
           stroke="currentColor"
@@ -138,8 +77,8 @@ export function ImagePlaceholder({
           <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}
+        <p className="mt-2 text-[12.5px] font-medium text-ink-2">{title}</p>
+        {hint ? <p className="mt-1 text-[11px] leading-snug text-ink-2/70">{hint}</p> : null}
       </div>
     </div>
   );